Editable story code view with validation

[Bl3f]

Summary

Makes the story side panel's "code" view editable. Users can now modify the raw markdown of a story and save it as a new version, with live syntax validation to prevent saving invalid chart/table/grid blocks.

Walkthrough

story_code_view_editable_demo.mp4

End-to-end: open the side-panel Code view, type an invalid tag → validation banner appears and Save is disabled → fix the error → Save re-enables → click Save returns to preview mode.

Red validation banner with disabled Save button

Red banner lists validation errors; Monaco shows inline red markers on offending lines; Save button disabled with "Fix validation errors to save".

Preview mode after saving shows updated content and new version

After saving, the view returns to preview mode and the version counter increments.

What changed

• @nao/shared/story-validation: new validateStoryCode utility that walks a story's markdown and returns structured errors for:
  • <chart> blocks missing query_id, chart_type, or x_axis_key
  • Invalid chart_type / x_axis_type values
  • Malformed / empty / missing series or data_key
  • <table> blocks missing query_id
  • Unterminated or unclosed <grid> / <chart> / <table> tags
  • Out-of-range cols on grids
• Errors carry 1-based line/column so they can drive Monaco markers.
• StoryCodeView: swapped from a read-only Monaco to an editable one with
  • local draft state
  • live validation markers (red squiggles + hover messages)
  • an error banner summarising issues
  • ⌘S / Ctrl+S save shortcut
  • theme handling via useEditorTheme
  • still read-only in shared story views (readonly mode)
• StoryViewer + StoryHeader: new "Editing code" sub-header with Cancel / Save. Save is disabled while validation errors are present and wired through the existing createVersion tRPC mutation (identical flow to the tiptap editor).
• Tests: 16 new test cases in apps/shared/tests/story-validation.test.ts.

Testing

• ✅ npm run -w @nao/shared test — 28 passed (includes 16 new validation tests)
• ✅ npm run lint -w @nao/shared
• ✅ npm run lint -w @nao/frontend
• ✅ npm run lint -w @nao/backend
• ✅ Manual end-to-end test in the browser (see walkthrough above)

_{To show artifacts inline, enable in settings.}

  

[github-actions]

🚀 Preview Deployment

URL	https://pr-692-c6a4882.preview.getnao.io
Commit	c6a4882

⚠️ No LLM API keys configured - you'll see the API key setup flow when trying to chat.

---

_{Preview will be automatically removed when this PR is closed.}

[cubic-dev-ai]

2 issues found across 7 files

Prompt for AI agents (unresolved issues)

Check if these issues are valid — if so, understand the root cause of each and fix them. If appropriate, use sub-agents to investigate and fix each issue separately.


<file name="apps/shared/src/story-validation.ts">

<violation number="1" location="apps/shared/src/story-validation.ts:199">
P2: `isMarkdownTable` can misclassify real `<table>` tags by checking the full prior document instead of the current line, which may skip table validation.</violation>

<violation number="2" location="apps/shared/src/story-validation.ts:269">
P2: Malformed `<chart>`/`<table>` tags that end with `>` instead of `/>` are not detected, so invalid story code can pass validation.</violation>
</file>

_{Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.}

[cubic-dev-ai]

1 issue found across 2 files (changes from recent commits).

Prompt for AI agents (unresolved issues)

Check if these issues are valid — if so, understand the root cause of each and fix them. If appropriate, use sub-agents to investigate and fix each issue separately.


<file name="apps/shared/src/story-validation.ts">

<violation number="1" location="apps/shared/src/story-validation.ts:201">
P2: Markdown table detection is now too strict and misses valid rows without a leading `|`, which can produce false table-attribute validation errors.</violation>
</file>

_{Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.}

[cubic-dev-ai]

1 issue found across 1 file (changes from recent commits).

Prompt for AI agents (unresolved issues)

Check if these issues are valid — if so, understand the root cause of each and fix them. If appropriate, use sub-agents to investigate and fix each issue separately.


<file name="apps/shared/src/story-validation.ts">

<violation number="1" location="apps/shared/src/story-validation.ts:220">
P2: The new trailing-pipe heuristic can misclassify non-table lines as markdown tables, causing `<table>` validation to be skipped.</violation>
</file>

_{Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.}

[cubic-dev-ai]

P2: The new trailing-pipe heuristic can misclassify non-table lines as markdown tables, causing <table> validation to be skipped.

Prompt for AI agents

Check if this issue is valid — if so, understand the root cause and fix it. At apps/shared/src/story-validation.ts, line 220:

<comment>The new trailing-pipe heuristic can misclassify non-table lines as markdown tables, causing `<table>` validation to be skipped.</comment>

<file context>
@@ -217,7 +217,7 @@ function validateTableBlocks(code: string): StoryValidationError[] {
 	const lineStart = code.lastIndexOf('\n', index - 1) + 1;
 	const linePrefix = code.slice(lineStart, index);
-	return /^\s*\|/.test(linePrefix);
+	return /^\s*\|/.test(linePrefix) || /\|\s*$/.test(linePrefix);
 }
 
</file context>

Suggested change

	return /^\s*\|/.test(linePrefix) || /\|\s*$/.test(linePrefix);
	const lineEnd = code.indexOf('\n', index);
	const currentLine = code.slice(lineStart, lineEnd === -1 ? code.length : lineEnd);
	return /^\s*\|/.test(linePrefix) || (/\|\s*$/.test(linePrefix) && /\|/.test(currentLine.slice(index - lineStart)));