Skip to content

Prototype: Compose live application canvas#1541

Draft
sorenbs wants to merge 1 commit into
mainfrom
feature/compose-canvas-mockup
Draft

Prototype: Compose live application canvas#1541
sorenbs wants to merge 1 commit into
mainfrom
feature/compose-canvas-mockup

Conversation

@sorenbs

@sorenbs sorenbs commented Jul 15, 2026

Copy link
Copy Markdown
Member

Prototype / mockup β€” not for merging as-is. A live canvas view of a complete Compose application, for design review.

Compose composes an application from modules (independently deployable units or bundled into a single Bun app) and tracks all dependencies β€” module↔module plus external services (databases, object storage, third-party APIs). Module boundaries are auto-instrumented, so cross-boundary requests are OTel traces.

This mockup renders that as a live map, in the Migrations-canvas visual language (ELK layered layout, floating translucent header, card nodes, persistent canvas):

  • Fixture app acme-shop: 7 modules (3 standalone units, 4 bundled into Bun app core, each badged) + 6 external services with type icons (2Γ— Prisma Postgres, Redis, S3 bucket, Stripe, Resend).
  • Live traffic from a seeded simulator ticking every 1.4s: edge width tracks rps, color shifts green β†’ amber β†’ red with error rate, labels show live rps; the Stripe boundary spikes occasionally so the map visibly reacts.
  • Health per node (dot + border) derived from the traffic crossing its boundaries; header aggregates modules/services/inbound rps/weighted error rate plus overall health.
  • Clicking a node opens a Recent boundary traces panel of OTel-span-shaped rows (HTTP β†’ stripe Β· 230ms) β€” the auto-instrumentation story.
  • Live/Paused toggle; simulated data disclaimer; light + dark.

All data is simulated (pure, seeded, tested β€” 13 unit tests); there is no Compose backend. No FEATURES.md entry or changeset, deliberately.

Try it in the preview: open Compose in the left nav.

πŸ€– Generated with Claude Code

A mockup of the Compose framework's application map: every module
(standalone unit or bundled into the single Bun app), every external
service (Postgres, Redis, S3 object storage, Stripe, email), the
dependencies between them, live traffic, and health β€” on the same
ELK-layered ReactFlow canvas language as the Migrations view (floating
translucent header, card nodes, persistent canvas instance).

All data is simulated: a fixture app (acme-shop, 7 modules + 6
services) plus a pure, seeded traffic simulator that drifts each
boundary's rps/p95/error rate per tick, with occasional error spikes
on the Stripe boundary. Edge width tracks rps, edge color shifts
green β†’ amber β†’ red with error rate, node borders and health dots
derive from the traffic crossing their boundaries, and clicking a node
opens a 'recent boundary traces' panel of OTel-span-shaped rows β€”
selling the auto-instrumented-boundary story. A Live/Paused toggle
freezes the simulation; the header carries module/service counts,
inbound rps, weighted error rate, and a 'simulated data' disclaimer.

Prototype only: no FEATURES.md entry, no changeset β€” nothing here is
released behavior.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
@coderabbitai

coderabbitai Bot commented Jul 15, 2026

Copy link
Copy Markdown

Important

Review skipped

Draft detected.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

βš™οΈ Run configuration

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro

Run ID: bc4c6315-ce55-4668-b583-305eecb89aa4

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

  • πŸ” Trigger review
✨ Finishing Touches
πŸ§ͺ Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch feature/compose-canvas-mockup
✨ Simplify code
  • Create PR with simplified code
  • Commit simplified code in branch feature/compose-canvas-mockup

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

@github-actions

Copy link
Copy Markdown
Contributor

Compute preview deployed.

Branch: feature/compose-canvas-mockup
Service: feature-compose-canvas-mockup
Preview: https://v849k34joxfac2fxyoap679k.cdg.prisma.build

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant