feat: Create tabs in stories by ad4mou · Pull Request #1211 · getnao/nao

ad4mou · 2026-07-19T10:35:07Z

Summary

Adds tabs to stories via <tabs><tab title="…">…</tab></tabs> markup.

Renders tabs in the side panel, expanded, standalone, and shared views.
Tabs can be added, renamed, reordered, and deleted in the edit view (pencil button).
Edit is tab-aware: edits one tab at a time, saves all tabs as one version. Non-tabbed stories unchanged.
Validates tab markup.
Agent can produce <tabs> when the prompt calls for it (schema + prompt examples).
Exports (HTML & PDF) flatten tabs into sequential titled sections, Interactive tabs in the HTML export could be a follow-up.

Demo

CleanShot.2026-07-19.at.13.46.52.mp4

Introduces the <tabs>/<tab> story markup and all UI for it: tabbed rendering on every surface (side panel, expanded, standalone, shared), markup validation, a switch-only tab bar in preview, and a tab-aware visual editor (add/rename/reorder/delete + per-tab content editing). Agent guidance for tabs lands in a follow-up commit on this branch.

github-actions · 2026-07-19T10:40:20Z

🧹 Preview Removed

The preview deployment for this PR has been cleaned up.

…tory thumbnails for stories that use tabs

cubic-dev-ai

All reported issues were addressed across 25 files

_{Reply with feedback, questions, or to request a fix.

Re-trigger cubic}

Bl3f

I think there are 2 bugs that should be fixed in the workflow (and rather than fixed it's more than your PR added this kind of wrong behaviour):

when you edit a story (there is already a story and you asked for a change) to add a tab it empties the story without any warning which is a bit weird
add the end of the edition (when the streaming restart on the chat) the story falls back to the previous one and when the stream ends on the chat the story finally ends on the edited story

Bl3f · 2026-07-20T08:39:39Z

 		'SQL result tables are embedded via <table query_id="..." title="..." />.',
 		'Use <grid cols="2">...</grid> to display charts side by side in a responsive grid.',
+		'Use <tabs> with <tab title="...">...</tab> blocks to organize a story into top-level tabs.',
+		'Default to a single flowing story. Use <tabs> only when the user asks for tabs, or when the content splits into clearly distinct sections that are better separated than stacked (e.g. overview vs. detail, one topic/department/metric per tab). Avoid tabs for a short or single-topic story. Always follow the user\'s explicit request (e.g. "a tab per chart" means one chart per tab). When using tabs, the story must start with <tabs> and contain only <tab title="...">...</tab> blocks — no text outside a tab.',


Is it the best thing to force the story to start with when we have tabs? cant we just insert a or even just insert a and consider what after in the tab?

Or maybe there is a token optimisation to do, because the thing is when you move a story from non-tab to tab it requires to rewrite the full story then in the current situation of the story tool (mode=update), a single search and replace...

You're right
At first I wanted to do it this way because I wanted no content outside tabs since that would mean lower level tabs and we didn't want that. I also wanted it to be efficient for the UI to know if we're using tabs or not.

But actually even so we don't need this at the beginning, we can just grep "<tab" to know if tabs are enabled and declare a compilation error if there is content outside tabs when they're enabled.
So I'll remove the <tabs> at the beginning

Still for token cost it's still as costly and that's because need to ensure there is no content outside tabs blocks when tabs are enabled. So we need to rewrite the full story it seems.

Bl3f · 2026-07-20T08:46:17Z

+
+							{editable && editingIndex !== index && (
+								<div className='mr-1 flex items-center opacity-0 transition-opacity group-hover/tab:opacity-100 group-focus-within/tab:opacity-100'>
+									<AlertDialog>


I feel the dialog style is not the same as elsewhere in the app, the button are not correctly rounded, the color of the button is not the right one, the button should be aligned right, the text should not be align center but left (get inspiration on the story live settings dialog)

So I tried to make a dialog similar to live story's but got stuck because there was built-in dialog code for deletion buttons which was overriding my round button. It seems deletion buttons should be rectangles.
So is this ok for the style or I need round buttons?

I prefer we stick to the round button and keep the same style. It's weird, you should be able to do whatever you want.

okay okay I'll do that

Bl3f · 2026-07-20T08:51:05Z

 		.optional()
 		.describe(
-			'The markdown content. Required for "create" (initial content) and "replace" (new content). Can include charts via <chart query_id="..." /> blocks and SQL tables via <table query_id="..." /> blocks. Use <grid cols="2">...</grid> to lay out charts side by side in a responsive grid.',
+			`The markdown content. Required for "create" (initial content) and "replace" (new content). Can include charts via <chart query_id="..." /> blocks and SQL tables via <table query_id="..." /> blocks. Use <grid cols="2">...</grid> to lay out charts side by side in a responsive grid. Default to a single flowing story. Use <tabs> only when the user asks for tabs, or when the content splits into clearly distinct sections that are better separated than stacked (e.g. overview vs. detail, one topic/department/metric per tab). Avoid tabs for a short or single-topic story. Always follow the user's explicit request (e.g. "a tab per chart" → one chart per tab). When using tabs, the story must start with <tabs> and contain only <tab title="…">…</tab> blocks — no text outside a tab.


Not sure we need to details or copy the same text as the description of the tools, we can mention the tabs feature but it does not require to repeat the same desc as we define in apps/backend/src/agents/tools/story.ts

you're right, I changed that

ad4mou · 2026-07-20T12:13:39Z

You're right there were two weird bugs in the preview when adding tabs. One where preview went blank and another where we would come back to old version for a moment before showing the final version with tabs added.
Both are fixed now

cubic-dev-ai

All reported issues were addressed across 5 files (changes from recent commits).

_{Tip: Review your code locally with the cubic CLI to iterate faster.

Re-trigger cubic}

cubic-dev-ai

All reported issues were addressed across 17 files (changes from recent commits).

_{Tip: Review your code locally with the cubic CLI to iterate faster.

Re-trigger cubic}

Replace shadcn AlertDialog with Dialog styled like RemoveMemberDialog: left-aligned title/text and right-aligned rounded-full outline/destructive buttons.

cubic-dev-ai

All reported issues were addressed across 1 file (changes from recent commits).

_{Tip: Review your code locally with the cubic CLI to iterate faster.

Re-trigger cubic}

Previously shouldUseDraftStory keyed off chat-wide isAgentRunning, so any agent run in the chat could yank a story viewer from a selected historical version to the latest draft. Drive the override and the completion bridge off this story's own streaming state (draftStory.isStreaming) instead, so version navigation is preserved for stories that are not being edited.

cubic-dev-ai

All reported issues were addressed across 2 files (changes from recent commits).

_{Tip: Review your code locally with the cubic CLI to iterate faster.

Re-trigger cubic}

Bl3f

LGTM

Give agent the ability to create and modify tabs, set up export and s…

ff8003e

…tory thumbnails for stories that use tabs

ad4mou marked this pull request as ready for review July 19, 2026 11:52

cubic-dev-ai Bot reviewed Jul 19, 2026

View reviewed changes

fix: Fixed Cubic complaints

67f713c

ad4mou requested a review from Bl3f July 19, 2026 13:47

Bl3f requested changes Jul 20, 2026

View reviewed changes

fix: Fixed preview loading bugs when adding tabs

0c5408d

cubic-dev-ai Bot reviewed Jul 20, 2026

View reviewed changes

Comment thread apps/frontend/src/components/side-panel/hooks/use-story-viewer-content.ts Outdated

Comment thread apps/frontend/src/components/side-panel/hooks/use-story-viewer-content.ts Outdated

Comment thread apps/shared/src/story-tabs.ts

fix: Address complaints, simplify and fix bugs

89f8e07

cubic-dev-ai Bot reviewed Jul 20, 2026

View reviewed changes

Comment thread apps/shared/src/story-validation.ts Outdated

fix: Fixed Cubic complaint

6c221f4

ad4mou requested a review from Bl3f July 20, 2026 15:56

fix: match tab delete dialog style to app-wide confirm dialog

b84e5a7

Replace shadcn AlertDialog with Dialog styled like RemoveMemberDialog: left-aligned title/text and right-aligned rounded-full outline/destructive buttons.

cubic-dev-ai Bot reviewed Jul 21, 2026

View reviewed changes

Comment thread apps/frontend/src/components/side-panel/story-tabs-bar.tsx

Comment thread apps/frontend/src/components/side-panel/story-tabs-bar.tsx

cursoragent added 2 commits July 21, 2026 10:34

docs: note that maintainers handle visual verification of UI changes

297a30b

cubic-dev-ai Bot reviewed Jul 21, 2026

View reviewed changes

Comment thread apps/frontend/src/components/side-panel/hooks/use-story-viewer-content.ts

Fixed Cubic complaint

788e32e

Bl3f approved these changes Jul 21, 2026

View reviewed changes

Bl3f merged commit d7c85d2 into main Jul 21, 2026
6 checks passed

Bl3f deleted the feat/create-tabs-in-stories-1126 branch July 21, 2026 13:19

Uh oh!

Conversation

ad4mou commented Jul 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Demo

Uh oh!

github-actions Bot commented Jul 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🧹 Preview Removed

Uh oh!

cubic-dev-ai Bot left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Bl3f left a comment

Choose a reason for hiding this comment

Uh oh!

Bl3f Jul 20, 2026

Choose a reason for hiding this comment

Uh oh!

ad4mou Jul 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Bl3f Jul 20, 2026

Choose a reason for hiding this comment

Uh oh!

ad4mou Jul 20, 2026

Choose a reason for hiding this comment

Uh oh!

Bl3f Jul 21, 2026

Choose a reason for hiding this comment

Uh oh!

ad4mou Jul 21, 2026

Choose a reason for hiding this comment

Uh oh!

Bl3f Jul 20, 2026

Choose a reason for hiding this comment

Uh oh!

ad4mou Jul 20, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

ad4mou commented Jul 20, 2026

Uh oh!

cubic-dev-ai Bot left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

cubic-dev-ai Bot left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

cubic-dev-ai Bot left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

cubic-dev-ai Bot left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Bl3f left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

ad4mou commented Jul 19, 2026 •

edited

Loading

github-actions Bot commented Jul 19, 2026 •

edited

Loading

cubic-dev-ai Bot left a comment •

edited

Loading

ad4mou Jul 20, 2026 •

edited

Loading

cubic-dev-ai Bot left a comment •

edited

Loading

cubic-dev-ai Bot left a comment •

edited

Loading

cubic-dev-ai Bot left a comment •

edited

Loading

cubic-dev-ai Bot left a comment •

edited

Loading