feat(frontend): app shell, start screen, run console and YAML view - #78
Open
maan-iitd2 wants to merge 1 commit into
Open
feat(frontend): app shell, start screen, run console and YAML view#78maan-iitd2 wants to merge 1 commit into
maan-iitd2 wants to merge 1 commit into
Conversation
There was a problem hiding this comment.
🟡 Changes recommended
Persistence races, orphaned source data, responsive layout failures, and accessibility issues remain unresolved.
Once you've addressed the issues Copilot identified, you can request another Copilot review.
Pull request overview
Adds the Next.js application shell, pipeline start flow, run/history views, navigation palette, YAML preview, and shared UI primitives.
Changes:
- Adds App Router routes and persistent workspace layout.
- Adds pipeline creation/import, source setup, execution, and history interfaces.
- Adds live YAML rendering and shared dialogs/utilities.
File summaries
| File | Description |
|---|---|
frontend/src/index.css |
Global application styling |
frontend/src/components/yaml/YamlPreviewPanel.jsx |
Live YAML preview and export |
frontend/src/components/start/Start.jsx |
Source-first onboarding |
frontend/src/components/start/SourceLoader.jsx |
Source configuration and upload |
frontend/src/components/start/EntryOverlay.jsx |
Editor mode selection |
frontend/src/components/run/ValidationResults.jsx |
Validation report table |
frontend/src/components/run/StageTimeline.jsx |
Run-stage visualization |
frontend/src/components/run/RunConsole.jsx |
Execution console composition |
frontend/src/components/run/OverridesForm.jsx |
Runtime override controls |
frontend/src/components/run/LogStream.jsx |
Streaming log display |
frontend/src/components/run/HistoryView.jsx |
Execution history |
frontend/src/components/layout/WorkspaceLayout.jsx |
Three-pane workspace |
frontend/src/components/layout/NavRail.jsx |
Graph/chat navigation rail |
frontend/src/components/layout/navPaths.test.js |
Parent-route tests |
frontend/src/components/layout/navPaths.js |
Parent-route resolution |
frontend/src/components/layout/navPalette.test.js |
Palette configuration tests |
frontend/src/components/layout/navPalette.js |
Graph node palette |
frontend/src/components/layout/AppShell.jsx |
Persistent application shell |
frontend/src/components/common/SourceActionDialog.jsx |
Source connection dialog |
frontend/src/components/common/MiniMarkdown.jsx |
Safe minimal Markdown renderer |
frontend/src/components/common/ListControls.jsx |
List ordering controls |
frontend/src/components/common/ErrorBoundary.jsx |
UI error fallback |
frontend/src/components/common/ConfirmDialog.jsx |
Confirmation modal |
frontend/src/app/page.jsx |
Pipeline ledger route |
frontend/src/app/not-found.jsx |
Not-found route |
frontend/src/app/layout.jsx |
Root document layout |
frontend/src/app/configs/[configId]/run/page.jsx |
Run route |
frontend/src/app/configs/[configId]/page.jsx |
Config entry route |
frontend/src/app/configs/[configId]/layout.jsx |
Config providers and layout |
frontend/src/app/configs/[configId]/interfaces/[interfaceName]/page.jsx |
Interface editor route |
frontend/src/app/configs/[configId]/history/page.jsx |
History route |
frontend/src/app/BootGate.jsx |
Storage migration gate |
Review details
- Files reviewed: 32/32 changed files
- Comments generated: 11
- Review effort level: Balanced
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
Comment on lines
+55
to
+64
| const createPipeline = () => { | ||
| if (busy) return; | ||
| setBusy(true); | ||
| const id = makeId('cfg'); | ||
| let model = createEmptyConfig({ id, name: 'Untitled pipeline' }); | ||
| model = upsertInterface(model, 'interface_1', createEmptyInterface()); | ||
| // Navigate optimistically, persist in the background. | ||
| getServices().config.create(model).catch(() => {}).finally(() => setBusy(false)); | ||
| router.push(`/configs/${id}`); | ||
| }; |
Comment on lines
+232
to
+236
| <button | ||
| className="plx__icon-btn" | ||
| onClick={(e) => startRename(e, it.id, it.name)} | ||
| aria-label={`Rename ${it.name}`} | ||
| title="Rename" |
Comment on lines
+41
to
+45
| role="alertdialog" | ||
| aria-modal="true" | ||
| aria-labelledby="cdialog-title" | ||
| aria-describedby="cdialog-msg" | ||
| onClick={(e) => e.stopPropagation()} |
Comment on lines
+38
to
+41
| role="dialog" | ||
| aria-modal="true" | ||
| aria-labelledby="srcaction-title" | ||
| onClick={(e) => e.stopPropagation()} |
Comment on lines
+103
to
+104
| updateModel((m) => upsertSource(m, SOURCE_DEFAULTS[subtype](id))); | ||
| setColumns(id, []); |
Comment on lines
+84
to
+92
| const copy = async () => { | ||
| try { | ||
| await navigator.clipboard?.writeText(yaml); | ||
| setCopied(true); | ||
| setTimeout(() => setCopied(false), 1400); | ||
| } catch { | ||
| /* clipboard blocked — no-op */ | ||
| } | ||
| }; |
| is used where those are installed, and fall back to solid system faces everywhere else. | ||
| This keeps the app working in air-gapped and CSP-restricted deployments. */ | ||
|
|
||
| :root { |
Comment on lines
+240
to
+244
| .navrail--collapsed .navrail__item span, | ||
| .navrail--collapsed .navrail__soon, | ||
| .navrail--collapsed .navrail__empty, | ||
| .navrail--collapsed .navrail-chat__title, | ||
| .navrail--collapsed .navrail-chat__session-text { display: none; } |
Comment on lines
+614
to
+617
| @media (max-width: 1100px) { | ||
| .workspace__panes, .workspace__panes--noyaml { grid-template-columns: var(--rail-w) minmax(0, 1fr); } | ||
| .yamlpanel { display: none; } | ||
| } |
| cursor: pointer; flex-shrink: 0; opacity: 0; | ||
| transition: opacity 0.12s, background 0.12s, color 0.12s; | ||
| } | ||
| .plx__row:hover .plx__icon-btn { opacity: 1; } |
Signed-off-by: maan-iitd2 <maan.iitd.ac.in@gmail.com>
Jatin-8898
force-pushed
the
pr/frontend-shell-run
branch
from
September 9, 2026 18:53
6b09fda to
e501600
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Adds the application shell for InGen Studio — the Next.js App Router routes, the start screen, the
run console, and the live YAML preview panel.
This is part 3 of the frontend series. All new files under
frontend/src/— nothing existing ismodified.
src/app//, config workspace,/run,/history, per-interface editor route, plusBootGateandnot-found.src/components/layout/AppShell— header, tab bar, YAML-panel toggle.src/components/start/src/components/run/src/components/yaml/src/components/common/MiniMarkdown).src/index.css,src/App.css,src/assets/Screenshots
Start screen — pipeline list, empty state:
Run console — stage timeline, logs and validation results:
Live YAML view — re-serialized from the model on every edit, so the config handed to the CLI is never hidden from the user:
This builds on #76 and the services PR, and CI will fail here until those merge. These
components import
@/models/*,@/serializers/*and@/services/*. That is expected — not adefect in this branch.
The diff is conflict-free and independent: no file here is touched by any other open PR, so it
can be merged in any order once its prerequisites land.
Design notes for reviewers
user always sees exactly the config that will be handed to the CLI — the UI never becomes a
black box over the YAML.
write) rather than inventing its own vocabulary, so the UI and CLI logs line up.
interactive leaves.
Testing
Verified on a local integration branch (
main+ #76 + services PR + this PR + the editor PR):npm run build— fullnext buildcompiles clean; all 6 routes generated (/,/_not-found,/configs/[configId],/configs/[configId]/history,/configs/[configId]/interfaces/[interfaceName],/configs/[configId]/run)npm run test— 57/57 passnpm run devin mock mode — browser smoke pass: start screen → create pipeline → editor → runconsole, 0 console errors
pytest test/andpytest backend/tests/(42 passed), nonew failures; a real
python -m ingenrun and a real HTTP run through the backend both completedwith all five stages
okQuality gates
All green on the integration branch:
npm run lintnpm run testnpm run buildpytest test/pytest backend/tests/🤖 Generated with Claude Code