Skip to content

[DO NOT MERGE] New UI proposal - #1903

Draft
mariana953 wants to merge 392 commits into
Comfy-Org:PabloWiedemann/instances-landing-prototypesfrom
mariana953:mar/ui-tests
Draft

[DO NOT MERGE] New UI proposal#1903
mariana953 wants to merge 392 commits into
Comfy-Org:PabloWiedemann/instances-landing-prototypesfrom
mariana953:mar/ui-tests

Conversation

@mariana953

@mariana953 mariana953 commented Nov 3, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

Do not merge. This is the New UI proposal, built on top of Pablo's prototype branch. It stays a draft.

Everything lives under src/renderer/src/design/landing/mar/ and only shows with ?proposal=mariana (or Prototype menu › Proposal). Pablo's files only get small isMariana hooks. The UI Playground (⌘.) holds the options; the defaults are the current pick.

Preview: https://one-comfy-new-ui.vercel.app (opens on Milestone 1). Locally: pnpm dev, then open /design-landing.html?proposal=mariana.

What's in it

  • Floating panels shell with the Comfy head and a collapsible icon rail.
  • Home: first-run examples (Arc carousel), returning Home, backgrounds with a Comfy art direction.
  • One tab style with a sliding pill, one table pattern, layered menus, no top-edge glass highlights.
  • Workflows, Assets, Apps, Projects, Spaces and Builds pages with Live / Empty states.
  • Build page with Milestone 1 parity: Update tab, Snapshots timeline, long operations inside the tab.
  • One toast, top right, tinted by tone (info, success, warning, error), with Undo as a grey button. It shows only when you stay on the page and the state changes; a failed operation shows it only if you left that build's page.
  • Builds empty state with its icon alone, like Benchmarks and Performance Tests.
  • Project page (activity, People), Space page (logo-tinted cover, setup state when empty).
  • Deploy as API modal and deployment page; Build navigation tweak.
  • ⌘K command palette.
  • Design system pages at /src/design/landing/mar/ds/index.html, including Toast.

Test coverage
PanelApp.test.ts mounts the panel, which mounts the prototype, so its window.api mock now stubs onDesignMenuPick and designShowBuild. There are no other test changes; the prototype itself has no automated tests.

Change breakdown (against PabloWiedemann/instances-landing-prototypes, 630 files, 73,744 changed lines)

Category Files Paths Added Deleted Share
Product code: prototype 459 src/renderer/src/design/landing/**, scripts/design/** 67,128 6,132 99.3%
Product code: app 1 src/renderer/src/comfyTitleBar/TitleBarApp.vue 8 5 <0.1%
Test code 1 src/renderer/src/panel/PanelApp.test.ts 2 0 <0.1%
Documentation 4 mar/DECISIONS.md, mar/README.md, ui/VISUAL-SYSTEM-PROPOSAL.md, ui/looks/README.md 288 0 0.4%
Configuration 6 .gitignore, package.json, scripts/design/vite.config.mjs, 3 scripts/design/.*-shot.mjs 126 0 0.2%
Lockfile 1 pnpm-lock.yaml 55 0 0.1%
Binary assets 158 src/renderer/src/design/landing/mar/assets/** and others 0 0 0%

🤖 Generated with Claude Code

mariana953 and others added 30 commits October 29, 2026 18:12
@mariana953 @claude
revert(mar): drop the compact-builds port; Mar's Builds page already …
066ccf9 
…has it

MarBuildsPage (Mar's own Builds page) shows GPU and disk per build and
has Update, Stop and Delete in its menu, and Mar's proposal no longer
reaches BuildsCompact. Undoes the BuildsCompact part of acc2c72.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@mariana953 @claude
feat(mar): From Pablo › Account also hides the Credits row when signe…
215845c 
…d out

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@mariana953 @claude
fix(mar): workflow run states follow production (spinner, check, octa…
eda85d1 
…gon), no percentage

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@mariana953 @claude
style(mar): filters, sort and search take the tab corner; tabs left, …
39b1e3a 
…the rest right; progress on the cover's edge; clearer From Pablo labels

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@mariana953 @claude
style(mar): roomier View menu with sections, hints and the tab corner…
301d768 
… on its trigger

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@mariana953 @claude
feat(mar): Recent activity as milestones on a vertical line
560fa8a 
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@mariana953 @claude
feat(mar): project page as a product page: calm header with one meta …
cb88111 
…line, latest output and recent activity, one tab row with the filters docked right, an add tile, People with roles and invite

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@mariana953 @claude
style(mar): tighter list rows (check over the thumbnail), canvas-dot …
fbe1a3a 
…empty cover, softer rename field, hollow dot for Unsaved

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@mariana953 @claude
feat(mar): Favorites sidebar group shows up to four starred rows with…
28729e0 
… unstar on hover

Rows follow the Projects and Spaces anatomy; like them, the title opens
the Favorites page, where anything past four lives. Hidden with no stars.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@mariana953 @claude
style(mar): sliding pill on every segmented tab row, tab counts hidde…
2c23f48 
…n for now, Sort as an icon

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@mariana953 @claude
feat(mar): global search heads the sidebar by default; state chips si…
483d7a8 
…t top-left on cards

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@mariana953 @claude
feat(mar): one header for project and space pages: cover, title and s…
8701383 
…tate with a quiet meta line (address with copy and open, stacked members, last activity); Invite, one primary (split Open site / Preview for a space), ⋯ at the Corners radius

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@mariana953 @claude
fix(mar): Liquid look keeps Void neutrals and the Corners radii, and …
5794489 
…stops breaking modals and the graph

Glass now sits on top of each surface's own fill instead of replacing the
card and secondary tokens, so dialogs, inputs and menus stay solid and
readable. The mesh is grey, highlights are white only, and radii follow the
Corners tweak. The shader layer goes under every sibling (isolation +
z-index -1), which brings back the graph editor in Liquid and Grain.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@mariana953 @claude
feat(mar/ds): living DS covers search, pages, flows and knob states
01b7580 
Brings Mar DS up to date with the proposal: global search (sidebar row
and the ⌘K palette in each state), tabs and filters on one corner (Soft
and Default), layered menus with every credits-flyout state, production
icons, status chips as in production, row cards, the activity timeline,
each library page in its four Page states, the template modal, Build's
Get started and Models, Deploy as API, the five looks and First-time vs
Returning. Whole pages run as live app frames started on a page, state
or setting. About lists the current rules.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@mariana953 @claude
feat(mar/graph): ComfyUI's Vue node anatomy, guide corners, editor fixes
b75b000 
Nodes follow renderer/extensions/vueNodes: title bar with collapse and
badges, typed slots on the edges, label + control widget rows, content
last; selected, executing (outline and progress), error (ring and
footer), bypassed, muted and collapsed states. A toolbox rides above the
selection (Run, Bypass, Mute, Group, Duplicate, Delete); bypassed nodes
pass their input through a run. Links end on the slot dots. Radii use
the guide's tokens. Fixes: clipped prompt text, labels over links, nodes
drifting off their links, the Pause layout, the minimap, the toolbox
never showing on a click and sticking over nodes when zoomed.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@mariana953 @claude
feat(mar): build cards show the build at a glance: its last outputs, …
3c968e4 
…then a live panel (GPU, uptime or how it wakes, memory or disk, models and node packs, credits an hour); state chip top-left, the button always bottom-right

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@mariana953 @claude
style(mar/graph): lighter minimap nodes in light mode
3194bd0 
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@mariana953 @claude
feat(mar): Run on picker grouped by where it runs, with state, GPU an…
63630ce 
…d what picking costs

This computer and Cloud groups; set up this computer when there is no
local build (Install on the Cloud surface); state dot or spinner on the
tile; builds that can't take the job say why; type to filter past six
builds; Create new build and Manage builds as quiet footer rows.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@mariana953 @claude
feat(mar/graph): a way home from the graph, rail tooltips with shortcuts
d7408ee 
The Comfy logo heads the Glass rail and sits in Current's top bar, as in
ComfyUI's sidebar; it returns to the app's Home. Rail tooltips use
.mar-tip with ComfyUI's default shortcuts (N, M, W, A, Cmd+Shift+K,
Cmd+,); N and A work on the canvas.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@mariana953 @claude
feat(mar): one empty state everywhere (MarEmpty, Favorites' design): …
e6d565f 
…every library page, a project's and a space's empty tabs, no results and errors; the sidebar's Spaces keeps a single way to add while it's empty

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@mariana953 @claude
feat(mar): Apple and Netflix looks replace Beam, Paper and Swiss
f080b33 
Apple: vibrancy sidebar over a still neutral wallpaper, solid content,
hairlines, large soft shadows, Inter with display tracking, system blue only
for focus and the primary action, small spring motion. Dark and light.

Netflix (dark only): true black canvas, the latest output edge to edge at the
top of Home (MarLookHero.vue, teleported into Home), big covers whose details
rise in a panel over the picture on hover, Barlow Condensed headings, red
only for the primary action and progress.

Both keep the Corners radii. Drops the Geist fonts; adds Barlow Condensed.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@mariana953 @claude
feat(mar): a menu with one option is a button or plain text
8c56336 
Create on the Cloud surface is just Open ComfyUI; the Run on picker with
one build shows where it runs, no chevron; with one workspace and no
spaces the user menu offers Create workspace instead of a switcher;
Open in with one place hides the radio. The Run on trigger takes the UI
size (13px, 500), 28px tall, icon 15, chevron 12.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@mariana953 @claude
chore(mar): Credits settles on the Row; its UI Playground picker is gone
09d9337 
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@mariana953 @claude
feat(mar/search): rebuild the ⌘K palette as a command palette
889693e 
Sizes to its content (640 wide, 15% from the top), one-line field with
scope chips, w␣-style prefixes and Tab to scope; empty shows recent work,
four suggested templates and quick actions with shortcuts; typing groups
results with matched letters in bold, Open ↵ / Open in Cloud ⌘↵ on the
active row, a docs fallback and the shared empty state. One raised
highlight slides between rows; smoked glass, Corners radii, enter
animation, reduced motion, focus trap and scroll lock. Living DS: seven
palette states.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@mariana953 @claude
feat(mar/search): a more visual palette with far less text
c77db08 
Recent work and templates are rows of square thumbnails whose name shows
on the active one; four quick actions as icon + short label; result rows
carry a bigger thumb, the name and one muted word (the kind when mixed, the
age or state when scoped); keys only on the active row; groups apart by
space, not titles; footer down to ↵ and esc. ↑↓ jump between picture rows,
←→ move along them. DS page shots updated.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@mariana953 @claude
refactor(mar): looks keep Void's type and colour; each changes only c…
f8d1782 
…omposition, images or components

Liquid: frosted panes over a mesh of Void's own greys. Grain: film grain and a
vignette on every picture, fading on hover. Apple: hairlines, one soft large
shadow, vibrancy menus that spring open, press-in controls, more air.
Netflix: the latest output edge to edge at the top of Home, bigger covers
whose details rise over the picture, library covers without a card. No look
sets a font, a size, a weight, tracking or a colour; all work in light.
Drops the Barlow Condensed and Instrument Serif fonts.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@mariana953 @claude
chore(mar): Look keeps only Void (current) and Grain; Liquid, Apple a…
69ea1ac 
…nd Netflix removed

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@mariana953 @claude
fix(mar): Home builds row fills the width with one or two builds
c690cb5 
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@mariana953 @claude
fix(mar): ⌘K sits at the Search row's right edge as a key chip
25c0177 
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@mariana953 @claude
fix(mar): build cards are one card: an inset strip of outputs, name a…
ec7a33e 
…nd meta with the button, then a two-column spec grid (GPU, memory, uptime or wake time, credits an hour or disk, models, node packs); solid surface and hairline in light and dark

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
mariana953 and others added 30 commits November 5, 2026 16:52
@mariana953 @claude
style(proto): storage switches line up; covers blur until the future …
1ee3455 
…milestones, then the image

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@mariana953 @claude
feat(proto): the prototype's own notes stay in the white toast, the p…
9923e41 
…roduct's in the toast component

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@mariana953 @claude
style(proto): the login card's landscape goes back to colour
93f70e9 
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@mariana953 @claude
feat(proto): the examples arc gets side arrows on hover for mice that…
7a405ab 
… can't swipe

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@mariana953 @claude
chore(proto): the Apps stage is labelled Milestone 2, as DESK-253 set…
f82191d 
…s it

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@mariana953 @claude
feat(proto): Explore's apps open on their own page, from the Explore …
4c67366 
…apps stage

The app page was gated on the Agent. Explore cards now land on it, with
Run and Open app; it leads back to Explore until the Agent milestone.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@mariana953 @claude
style(proto): workflows open on the tilted canvas cover, not the blur
4d663be 
The future milestones keep the image the workflow makes, and the tweak
still offers the gradient.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@mariana953 @claude
style(proto): the examples arc loses its side arrows, and only the fr…
d87412a 
…ont card shows Run

Side cards still come forward on click, drag or a sideways scroll.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@mariana953 @claude
feat(proto): the examples arc shows what each app does, a soft sweep …
63d2c70 
…between before and after

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@mariana953 @claude
style(proto): search opens on recent work only, scopes appear when yo…
9a66d54 
…u type, no footer

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@mariana953 @claude
style(proto): the collapsed sidebar keeps only its toggle, at the sam…
f9b5b46 
…e height

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@mariana953 @claude
style(proto): Builds takes Home's neutral light instead of the colour…
50f8932 
…ed photo

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@mariana953 @claude
fix(proto): a failed operation toasts only for whoever left the build…
75eb681 
…'s page

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@mariana953 @claude
test(panel): stub the design bridge calls the mounted prototype needs
c7aedee 
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@mariana953 @claude
style(proto): the Builds empty state shows its icon alone, as the too…
b28c3d7 
…ls do

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@mariana953 @claude
fix(proto): the Builds button reads New Build
434d425 
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@mariana953 @claude
fix(proto): nothing above a page title but the panel's inset
9b27fae 
The title's space came from a window-height rule for pages under a photo,
which also overrode the page header's own padding.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@mariana953 @claude
fix(proto): a detail page starts where a list page does
3a2423b 
The back link sat 60px under a list page's title. It now takes the same
44px inset, on builds, projects and spaces alike.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@mariana953 @claude
fix(proto): Stop sits on the caret alone, not in More too
51ec456 
A running build offered Stop in both of its header menus.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@mariana953 @claude
fix(proto): a status chip's tint is its words' colour, blurred
8ee2ecf 
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@mariana953 @claude
fix(proto): a destructive button's label stays white in light
3ad67af 
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@mariana953 @claude
feat(proto): Sync with previous versions brings Builds' settings to l…
0a55ae2 
…ater versions

A UI Playground switch, off by default. On, past the Builds milestone, each
build gets a Settings page with Desktop's tabs, opened from More and the
Update chip; the list shows problem states and Remote builds. The Builds
milestone does not change.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@mariana953 @claude
chore(proto): Floating panels and Graphite stay; their tweaks go
713dfc6 
Navigation and Palette and theme leave UI Playground. A stored pick of
another falls back to them. The theme stays in Settings and Search.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@mariana953 @claude
style(proto): the theme sits beside UI Playground, which takes the row
af19070 
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@mariana953 @claude
fix(proto): a page's side gutter matches its top up to 1920
1c4b33c 
Pages held at 1200px and centred, so the title sat further from the
left than from the top. They now keep 44px on both up to a 1920 window
and only centre past 1760px.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@mariana953 @claude
feat(proto): Builds is rows in every milestone, Photos stays as the o…
2a6edb7 
…ption

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@mariana953 @claude
style(proto): a page title sits on the line of the sidebar's Create/B…
bf035ce 
…uild tabs

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@mariana953 @claude
chore(proto): the Borders option goes, surfaces draw no borders
dc11075 
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@mariana953 @claude
style(proto): Project and Space titles sit on the tabs' line too
73a1da7 
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@mariana953 @claude
style(proto): Spaces cards square up: the state holds the corner, the…
8e5b86c 
… name lines up with the logo

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

This branch has not been deployed

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

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@mariana953 @PabloWiedemann