[Epic][Art Studio UI] Port the ArtPipe experience into SpikerSoft's native Art Studio #382
Assignees
spikerj (Joseph Spiker)
Clear assignees
spikerj (Joseph Spiker)
No Assignees
Notifications
Due Date
No due date set.
Dependencies
No dependencies set.
Reference: spikerj/spikersoft-issues#382
Reference in New Issue
Block a user
Parent context: ProArt epic #346. Goal (per Joey): make our Angular Art Studio look and feel like Eric's real ProArt/"ArtPipe" UI — a faithful port of the experience (density, screens, live control-room feel, flows), re-expressed in our stack (Angular +
@spikersoft/theme+ Material) inside our menu/shell/auth. "Eric himself should question whether he's using his app or ours" — except it lives under a first-class Art Studio menu category and uses our design system. Not a remake, not a reskin.Critical reframe — extend, don't rebuild
A mature
libraries/features/art-studio(@spikersoft/feature-art-studio) already fronts the CQRS/RabbitMQ ArtStudio backend (SpikerSoft.Api/Domain/ArtStudio). It ships:art-studio-shell,art-prompt-composer,art-stage-timeline,art-asset-viewer(+rig-detection),art-artifact-panel,art-asset-card/art-asset-library,art-usage-meter,art-review-queue,art-gallery/art-gallery-moderation,art-preset-manager,art-game-loader,ArtStudioService(signal state,api/artstudio), and live progress via SignalR (ART_ASSET_PROGRESS_SOURCE, #349). Stage vocabulary already matches Eric's. So this epic closes the experience gap — it does not scaffold a new lib.Eric's surface map (source:
art_pipe/src/artpipe/batch/, live on :5000, proxied :5050)Pipeline dashboard
/(generate drawer w/ vertical git-rail stage editor, batch/continuous/coverage, filter bar + asset grid, URL-synced filters) · Library/library· Metrics/metrics· Builder node-graph/builder· Asset detail/asset/:id(PBR channel toggles, git-graph History w/ Graph/Metrics/Timing tabs, live console, gantt, bone panel) · Library item/library/item/:id· global Activity/Settings modal (queue, HW sparklines, Now-Running board, activity console).Two hard port constraints
activity.js); our CSP blocks it. All charting must use a bundled lib.#0d1117/#58a6ff, 14px/1.5, high density). We are glassmorphism Material light+dark. Adopt his density + control-room feel + live cadence, re-express via our semantic tokens (never hardcode his hex). Mapping: accent#58a6ff→--color-primary, ok#3fb950→--color-success, warn#d29922→--color-warning, err#f85149→--color-error, purple#bc8cff→--color-accent; quality scale red→amber→green → error→warning→success.Ticket series (children)
Phasing: 1–2 foundation → 3,4,5 core loop → 6 detail → 7b backend, 7,8 system/metrics → 9,10 curate/export → 12 e2e (incremental) → 11 stretch.
7b. [Backend] Art Studio metrics & activity read-model — event-handler projects ArtStudio stage events → queryable aggregates;
api/artstudio/metrics+…/activity— dep for 7,8art-review-queue/art-gallery-moderation) — dep 5art-game-loader= our analog to Send-to-Blender/Godot) — dep 6authenticated-art-studio.spec.tscompose→monitor→inspect→curate→download — dep screensDeliberate SpikerSoft tweaks (not Eric's)
Our categorized menu/shell/auth (his is a flat 4-link bar) · glass surfaces + Material instead of flat borders · both themes · Roboto/Material type · "Load into game" (
art-game-loader) instead of external DCC handoff.Refs — Eric:
art_pipe/src/artpipe/batch/{app,bp_*}.py,templates/*.html,static/{style,activity,viewer,builder}.js,theme.py,config.py. Ours:spikersoft-angular/libraries/features/art-studio/src/lib/*,libraries/spikersoft-theme/src/lib/*,projects/spikersoft/src/app/_components/menu-bar/*,projects/spikersoft/src/routes.ts,e2e/playwright/.Architecture decision — charting & 3D libs (verified against
spikersoft-angular/package.json):d3(already a dep,d3@^7.9.0). There is NO Chart.js / ngx-charts / echarts in the workspace, and Eric'sactivity.jsChart.js-from-jsdelivr is CSP-blocked — do not add it. All Art Studio charts (#388 history graph / gantt / event-timeline, #390 activity queue/velocity/sparklines, #391 metrics dashboard) render with bundled d3. Recommend a thin sharedart-chartwrapper (sparkline / bar / line / gantt primitives) so #388/#390/#391 don't each reimplement — build it in the first charting ticket that lands (likely #388 or #391) and reuse.three(three@^0.184.0+three-addons+troika-three-text). #388's PBR channel toggles + gallery strip + bone/scene-tree extend the existing three.jsart-asset-viewer— no new 3D dep. (Build step: confirm the current viewer's three.js entry points before extending.)This keeps everything bundled/native and CSP-clean, and prevents an agent from reaching for a CDN chart lib.
Epic status — UI + backend fully landed in master (2026-07-05)
All build-and-merge children are done and in master:
Frontend — spikersoft-angular#132 (master
576fcc9), 271 tests green:#383 menu · #384 theme · #385 composer · #386 timeline · #387 grid · #388 detail · #390 activity · #391 metrics · #392 curation · #393 export/load-into-game · #394 builder — all closed.
Backend — spikersoft-backend#101 (master
e155481), 534 ArtStudio tests green:#389 metrics/activity read-model · #396 curation events · #397 submit selections · #398 bundle endpoint — all closed.
Remaining under this epic: only #395 (E2E walk), which is blocked on #345 (browser-verify of the layer-2 SSO session-restore) — a Joey action, not a code task. Once #345 clears, #395 is the last child.
The port is complete: Eric's ProArt experience is now native to the SpikerSoft Angular stack + event-handler backend — top-level Art Studio menu, studio theme (both light+dark, bundled charts per CSP), full compose→timeline→grid→detail loop, activity/metrics dashboards, curation, game-ready export, and the builder node-graph — with the CQRS/RabbitMQ read-model + curation events + bundle endpoint behind it.
Resolved: umbrella PR spikersoft-angular #132 (merged) delivered the complete native Art Studio experience, and all child tickets #383–#394 are closed. The continued faithful-ArtPipe UI/UX work has its own successor epic #446 (P1/P2 already merged in PRs #142–#146, #151). Closing this epic in favor of #446.