feat(dub): consolidate the pipeline stepper + title/meta into one compact header row

[debpalash]

Merges the two stacked header rows in the Dub editor into one compact row to reclaim vertical space.

Before: two rows — a centered 6-step pipeline spine (Upload → Prepare → Transcribe → Edit → Generate → Export) on top, then a separate row with the title · duration · segment-count + action buttons.

After: one row — [stepper] … [title · duration · N segs] … [Save · Reset | Generate Dub · QC · Export], vertically centered, wrapping gracefully on narrow widths.

What changed (4 files)

• DubPipelineStepper.jsx — new inline prop that swaps to a slimmer dub-stepper--inline variant (tighter connectors). Step active/done/spinning state logic untouched.
• DubHeader.jsx — renders the stepper inline as the leftmost element; container switched to flex flex-wrap justify-between so it wraps instead of overflowing. Title/meta + all buttons unchanged.
• DubTab.jsx — the standalone stepper now renders only when the editor view is not active, so it isn't duplicated (the stepper still shows during idle/uploading/transcribing).
• index.css — .dub-stepper--inline rules (drops the standalone border/padding, tighter layout).

Behavior preserved

Pure layout consolidation — the dubStep-driven step styling, the title/duration/segment-count bindings, and every button's onClick/disabled/loading props carry over verbatim.

Narrow widths

The header container is flex-wrap: on narrow windows the action-button cluster wraps to a second line rather than squeezing the title (which still truncates). Inline stepper uses tighter connectors to buy horizontal room first.

Verification

• bun run build ✓ · format:check ✓ (oxfmt) · eslint on changed files clean (pre-existing DubTab effect warnings only).

🤖 Generated with Claude Code

Compact the Dub editor header into a single inline row.

Before:

[ Stepper row: Upload → Prepare → Transcribe → Edit → Generate → Export ]
[ Title | Duration | Segments | Save | Reset | Generate Dub | QC | Export ]

After:

[ Stepper | Title | Duration | Segments | Save | Reset | Generate Dub | QC | Export ]

flowchart TD
  A[DubTab renders editor state] --> B{Active editor state?}
  B -- no --> C[Render standalone DubPipelineStepper]
  B -- yes --> D[Hide standalone stepper]
  D --> E[DubHeader renders inline DubPipelineStepper]
  E --> F[Header wraps gracefully on narrow widths]

Loading

• Added an inline variant to DubPipelineStepper for the slimmer header presentation.
• Updated DubHeader to render the stepper inline and use a flex-wrap layout.
• Narrowed DubTab so the standalone stepper is not duplicated while the editor is active.
• Added inline stepper CSS with tighter spacing and no extra border/padding.

Step state logic, metadata bindings, and button behavior remain unchanged.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: 7dc08ca7-ec1a-4763-87f7-ca389dd4173f

📥 Commits

Reviewing files that changed from the base of the PR and between c5c5750 and d9969a4.

📒 Files selected for processing (4)

• frontend/src/components/dub/DubHeader.jsx
• frontend/src/components/dub/DubPipelineStepper.jsx
• frontend/src/index.css
• frontend/src/pages/DubTab.jsx

---

📝 Walkthrough

Walkthrough

The Dub pipeline stepper is now rendered inline within DubHeader via a new inline prop on DubPipelineStepper, backed by a new .dub-stepper--inline CSS class. DubTab's standalone stepper rendering condition is narrowed to exclude editor/generating/done states, avoiding duplicate display.

Changes

Inline Dub Pipeline Stepper

Layer / File(s)	Summary
Stepper inline variant frontend/src/components/dub/DubPipelineStepper.jsx, frontend/src/index.css	DubPipelineStepper accepts an optional inline prop (default false) that applies dub-stepper--inline; new CSS removes padding/border, left-aligns the row, and tightens separator spacing.
Header integration frontend/src/components/dub/DubHeader.jsx	DubHeader imports DubPipelineStepper, updates header container classes, and renders the stepper inline within the header row.
Standalone rendering guard frontend/src/pages/DubTab.jsx	The standalone stepper render condition now excludes active dubJobId editor/generating/done sub-states, since the stepper is shown inline in the header during those states.

Estimated code review effort: 1 (Trivial) | ~5 minutes

Possibly related PRs

• debpalash/OmniVoice-Studio#189: Both PRs modify DubTab's header rendering logic tied to dubStep.
• debpalash/OmniVoice-Studio#759: This PR builds directly on the DubHeader/DubPipelineStepper components introduced there.

Panel notes

• Audio DSP lead: no-op here, purely UI wiring — no signal path touched, moving on.
• Desktop systems: DubTab.jsx line 426-433 condition now has two overlapping predicates (dubJobId editor states vs dubStep) — verify there's no state combination where neither DubHeader nor DubTab renders the stepper, leaving users with no progress indicator. Add a quick manual test through the generating→done transition.
• Product polish: .dub-stepper--inline strips padding/border but confirm the tightened ::before separator spacing doesn't clip on narrow viewports where DubHeader already competes for horizontal space.
• ML inference: not applicable.

🚥 Pre-merge checks | ✅ 6 | ❌ 3

❌ Failed checks (3 warnings)

Check name	Status	Explanation	Resolution
Title check	⚠️ Warning	The title is conventional-commit style and matches the change, but it lacks the required issue reference in the title or body.	Add an issue reference to the title or PR body, while keeping the conventional-commit scope and concise summary.
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.
I18n Completeness (21 Locales)	⚠️ Warning	DubPipelineStepper adds dub.phase_{upload,prepare,transcribe,edit,generate,export} (lines 17-22, 69), but none exist in any of the 21 locale JSONs; labels fall back to hardcoded English.	Add those six keys to all 21 locale files (or revert the new key names), and avoid hardcoded step labels as defaults once translations are present.

✅ Passed checks (6 passed)

Check name	Status	Explanation
Description check	✅ Passed	It covers the summary, key changes, behavioral preservation, narrow-width handling, and verification, so the required content is mostly present.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Cross-Platform Default Parity	✅ Passed	PASS: only shared flex/CSS layout changed; no platform branching, and the same default Dub path renders on macOS/Windows/Linux.
Local-First Guarantee	✅ Passed	PASS: Changed files are UI-only (DubHeader.jsx:37-150, DubPipelineStepper.jsx:34-73, DubTab.jsx:430-433); no new fetch/apiJson, telemetry, keys, or account calls were added.
Backward Compatibility	✅ Passed	PASS: touched files are frontend-only layout/CSS; no backend schema, migration, engine, or model-weight paths changed, so omnivoice_data and installed models remain untouched.

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch dub-header-consolidate

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

ESLint install failed. For unrecoverable errors, disable the tool in CodeRabbit configuration.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[greptile-apps]

Greptile Summary

Merges the two stacked header rows in the Dub editor into a single compact flex row by embedding DubPipelineStepper (with a new inline prop) directly into DubHeader, reclaiming vertical space in the editor view.

• DubPipelineStepper.jsx gains an inline boolean prop that applies dub-stepper--inline CSS — tighter connectors (14 px → 5 px margin) and stripped padding/border.
• DubHeader.jsx renders the stepper as the leftmost flex child; the outer container gains flex-wrap so action buttons overflow gracefully on narrow windows.
• DubTab.jsx suppresses the standalone stepper when the editor is active; the suppression condition duplicates the existing editorActive variable.

Confidence Score: 4/5

Pure layout consolidation with no functional regressions; safe to merge after verifying narrow-viewport rendering.

The stepper visibility logic is correctly complementary between the two render sites. Both findings are cosmetic: the suppression guard duplicates an existing variable, and the inline CSS variant inherits flex-wrap from the base class allowing steps to stack vertically on narrow viewports.

frontend/src/index.css — the missing flex-wrap: nowrap on .dub-stepper--inline is worth a quick look before merging on a narrow-window setup.

Important Files Changed

Filename	Overview
frontend/src/pages/DubTab.jsx	Adds a suppression guard for the standalone stepper when the editor is active; the guard condition duplicates the existing editorActive variable rather than reusing it.
frontend/src/components/dub/DubHeader.jsx	Adds inline stepper as leftmost flex child and adds flex-wrap to container; clean and correct.
frontend/src/components/dub/DubPipelineStepper.jsx	Adds inline prop with default false; step logic and aria attributes are untouched.
frontend/src/index.css	Adds .dub-stepper--inline rules; does not override flex-wrap: wrap from the base class, which can cause steps to wrap within the header row on narrow viewports.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    A{dubVideoFile or dubJobId or dubStep!=idle?} -->|No| Z[No stepper shown]
    A -->|Yes| B{editorActive? dubJobId AND editing/generating/done}
    B -->|No| C[Standalone DubPipelineStepper full-width spine]
    B -->|Yes| D[DubHeader rendered]
    D --> E[Inline DubPipelineStepper dub-stepper--inline]
    D --> F[Title duration segs]
    D --> G[Save Reset Generate QC Export]

Loading

%%{init: {'theme': 'base', 'themeVariables': {"darkMode": true, "background": "#0d1117", "primaryColor": "#21262d", "primaryTextColor": "#e6edf3", "primaryBorderColor": "#8b949e", "lineColor": "#8b949e", "textColor": "#e6edf3", "edgeLabelBackground": "#161b22", "actorBkg": "#21262d", "actorBorder": "#8b949e", "actorTextColor": "#e6edf3", "actorLineColor": "#8b949e", "signalColor": "#8b949e", "signalTextColor": "#e6edf3", "noteBkgColor": "#373320", "noteBorderColor": "#d4a72c", "noteTextColor": "#f0e6c0", "labelBoxBkgColor": "#21262d", "labelBoxBorderColor": "#8b949e", "labelTextColor": "#e6edf3", "loopTextColor": "#e6edf3", "activationBkgColor": "#30363d", "activationBorderColor": "#8b949e"}}}%%
flowchart TD
    A{dubVideoFile or dubJobId or dubStep!=idle?} -->|No| Z[No stepper shown]
    A -->|Yes| B{editorActive? dubJobId AND editing/generating/done}
    B -->|No| C[Standalone DubPipelineStepper full-width spine]
    B -->|Yes| D[DubHeader rendered]
    D --> E[Inline DubPipelineStepper dub-stepper--inline]
    D --> F[Title duration segs]
    D --> G[Save Reset Generate QC Export]

Loading

_{Reviews (1): Last reviewed commit: "feat(dub): consolidate pipeline stepper ..." | Re-trigger Greptile}