Changelog

This month the design panel grew up. Build Mode now edits with the same panel as the canvas, and that panel knows your design tokens, effects and text styles. The coding agent also got better at working on its own: it asks when a request is unclear, reads the dev server's logs, and reloads or restarts the preview when it needs to.

Build Mode runs on the full design panel

Click Design in Build Mode, or press ⌘ D, and pick an element on the stage. The panel shows the same groups as on the canvas: Position, Size, Layout, Appearance, Typography, Fill, Stroke and Effects. Your changes preview on the stage right away, and nothing reaches the code until you click Add to build chat and send. Tokens you pick become your codebase's classes.

• Select a component from your design system and its props appear under Component states, above Custom styles. Switch a variant or a size, and the agent changes the prop where the component is used.
• Edits made at a breakpoint stick. When a class like lg:gap-12 controls the property at the width you are viewing, the agent writes your edit into that breakpoint.
• ⌘ Z and ⇧ ⌘ Z undo and redo edits in the panel. If a send fails, your edits, previews and undo history stay.
• Previews clear when the agent's turn ends, and the panel reads the element again from the updated code.
• The font family menu shows each font in its own typeface.

Your design tokens, effects and text styles

Modeinspect reads the design tokens from your codebase's Tailwind setup, both v3 configs and v4 themes, and the design panel offers them wherever a value can use one. When we improve how tokens are read, your codebase's tokens update by themselves. Editing one property no longer drops the tokens on the others.

• Effects has box shadows (inner or outer, drag to reorder), drop shadows, Layer blur and Background blur. Each one can use a token.
• Classes that set several typography properties, such as a custom text-title-lg utility, become text styles. Apply one from the Typography group. Captured text keeps its text style, and the agent writes it back as that one class.
• If your color tokens are written in OKLCH, pasting a token's value binds the token, and a color that matches no token stays OKLCH. The color picker has HEX, RGB and OKLCH modes. When two tokens share a value, you choose which one to use.
• A token at lower opacity stays a token, written as a class like bg-accent/40.

The agent can ask you a question, and fixes more on its own

When a request is unclear, the coding agent can stop and ask instead of guessing. The question appears as a card over the message box with a few options and room for your own answer. Your reply starts its next turn. Until you answer, the agent shows Waiting for your answer.

The agent can also now:

• Reload the preview when you tell it you can't see a change. Design-panel edits you haven't sent yet survive the reload.
• Read the dev server's logs to find compile errors and broken pages.
• Restart the dev server after it installs or removes a dependency, and fix the error if the server doesn't come back.
• Link to a page it changed that you aren't looking at. In Build Mode, the link opens that page on the stage.
• See images in your codebase, and see exactly what you changed on a captured design. Resize a heading on the canvas and ask the agent to build it, and it builds your change instead of reporting that the code already matches.

Sync to Github without leaving Build Mode

A strip above the build chat's message box now shows your code changes as Changes with a +N −N count, next to a Sync to Github button (or GitLab, if that is where your code lives). One click opens the pull request with a written title and description. Once the pull request exists, the strip hides.

Duplicate a canvas

Duplicate canvas makes a new canvas on the same codebase with the same pages, Portals and code changes. You find it in the canvas header, in every canvas card's menu, and in the Pull request merged and Pull request closed dialogs. Use it to keep working when the original canvas is locked after its pull request closes.

Settings in one place, and commits under your name

Settings is now one page with General, Organization, Usage & Plans and Integrations. Under General you can turn on a sound and a browser notification for when the agent finishes. Organization holds your organization's name, members and invites.

Under Integrations, Commit Author links your GitHub account. Commits Modeinspect pushes to your pull request then list you as a co-author, and they keep their Verified badge.

Improvements

• Captures land right away. A captured page appears on the canvas at once, with a "Capturing…" toast while it works. Components are recognized behind it, and the capture stays locked until that finishes.
• Capture the element you picked. In Build Mode with an element picked, the capture button or ⌘ S captures that element. Show on the toast takes you to it on the canvas.
• Smart guides and measurements. Layers snap to their parent frame and to equal spacing, and holding ⌥ to measure works like it does in Figma.
• Spacing handles. Hovering a padding, gap, margin or radius handle previews it. Handles hide on small or zoomed-out layers so they don't cover them.
• My work. A new My work page lists the canvases you created. Home's recent canvases can be filtered by teammate, cards show who made a canvas and on which codebase, and an untitled canvas takes its name from your first prompt.
• Open a canvas in a new tab from its card menu.
• Code changes, one file at a time. The Code changes dialog shows one file at a time with a file tree to switch between them, and large change sets open without stalling.
• Full-screen Build Mode. A toggle next to the address bar puts Build Mode full screen, ⌘ B hides the chat, and there is a new Large desktop preview resolution.
• Icons from your design system. Icon props open a grid of your codebase's icons, and you can swap a hard-coded icon too. The agent writes the swap back to the code.
• Broader variations. Variations from the canvas agent each change several things at once, such as layout, color, type and spacing. Layout always changes unless you ask otherwise.
• @ mentions preview the component you have highlighted in the menu.
• Pull requests link back to their canvas with an "Open in Modeinspect" line in the description.
• Slow previews keep their loading bar for up to a minute instead of dropping it while the page is still loading.
• Shorter onboarding. After the sign-up questions, one screen asks how you want to start: with the demo or by connecting your codebase.

Fixes

• Portals on large codebases no longer reload the whole page every time the agent stages an edit.
• The agent no longer shows "Turn finished" while it is still working.
• The agent no longer fails edits with "file must be read before editing" on files it read in an earlier turn.
• Build Mode writes the right Tailwind classes on codebases using Tailwind older than 4.1.18, and number props are written as numbers.
• Pages keep working after the agent runs npm install, and codebases that put {...props} before key in JSX start again.
• Setup accepts Figma Make and Dyad exports, reports an empty repository as empty, shows the real error when finishing fails, and works with Tailwind v4 + daisyUI and with CommonJS Tailwind plugins.
• Build Mode opens at the Portal's current width, new Portals have a true 1440 × 900 viewport, and clicking Full width a second time no longer shrinks the stage.
• Zooming no longer stretches layers on pages with animations, and you can hover and select layers inside captured overlays again.
• ⌘ Z in text puts the caret back, and ⌘ Z works while the color picker is open.
• The design panel shows a grid's real row count and ch max-widths, text keeps its max-width through delete and undo, and a removed border side stays removed.
• Repository names show again in Settings → Integrations when you have many repositories.
• Going back and forth during onboarding no longer creates a second demo canvas.

This month was mostly about the agent. You can now run several coding agents side by side, and the agent learns your codebase: it follows your design guidelines, your repository's own instructions, and the notes it saves along the way. The canvas also gained Figma-style sizing, color, and text controls, and apps behind a sign-in page now open in the Portal.

Run several coding agents at once

Give each task its own coding agent and let them work at the same time. Click + at the top of the build chat (New agent) while the first agent is still busy, and send the next task. Click the agent's name at the top of the chat to switch between them.

• Agents name themselves after their first task.
• Click … next to + to Rename an agent or Archive one you are done with. Its code changes stay.
• Archived agents are listed under Archived. Send a message to one to bring it back.
• Every agent on a canvas works on the same branch, and one pull request carries all their changes.

Teach the agent your codebase

The agent now starts every session knowing more about your project, from three places.

• Design guidelines you write. Open a codebase, click … next to its name, and pick Edit Design Guidelines. Write your spacing, type, and color rules, and type @ to insert your real design tokens as chips.
• Memories the agents save. The canvas agent and the coding agent save short notes about your codebase while they work, such as a convention you told them or a correction. Every later session reads them. Pick Edit memories in the same menu to review, edit, or delete them.
• Instructions already in your repository. If your repository has instruction files for coding agents, such as CLAUDE.md or AGENTS.md, the coding agent follows them. It also picks up per-folder instructions, rule files, and skills. Instructions that conflict with how Modeinspect works are skipped.

Follow the agent while it works

You no longer wait in silence while the agent works on a change.

• Replies appear word by word as the agent writes them.
• During long changes, the coding agent posts short progress updates in the chat.
• While the agent checks and saves its change, the chat shows Finishing up. The final reply arrives once the change has landed.
• A turn no longer shows as done while the agent is still working.
• A pill next to the message field shows how much context is left in the conversation. Long conversations compact on their own, and you can click the pill to compact now.

Figma-style sizing, color, and text editing

Editing layers on the canvas now works more like Figma.

• Width and Height each have a Fixed, Hug, or Fill setting. Hug and Fill show the size the layer has right now.
• The color field splits into the color or token and a separate opacity value. Select a frame and the design panel lists every color used inside it, so you can change one everywhere at once.
• ⌘ Z while typing undoes a few words at a time instead of clearing the whole text.
• Hold Space while you drag a layer inside a flex frame to nudge it away from its slot instead of reordering it.
• Hidden elements in a selection show a dashed outline of where they would be, instead of collapsing to a dot.
• A component instance moves as one piece. Its inner layers stay where the component puts them.

Delete elements from Build Mode

Select an element on the stage and press Backspace. Delete from codebase asks you to confirm and outlines every other place the same element appears on the page, so you can see whether you are removing one item or a repeated component. The coding agent then removes it from your code. You can undo the change.

Selecting the page's <body> in Build Mode now shows its styles in the design panel too.

Apps behind a sign-in page work in the Portal

If your app sends visitors to a sign-in page such as Okta, Auth0, Microsoft Entra, Google, or GitHub, the Portal used to go blank. Now the Portal asks you to continue the sign-in in a popup window. Your app signs you in as usual, and the Portal reloads signed in. Your app's sign-in code does not change.

Improvements

• Share the live page. Click Copy link to this page in the Build Mode address bar, or Copy on a Portal's Preview link row, to send anyone the current page of your app for 7 days. No account needed.
• Start scripts. Pick Edit start scripts in a codebase's menu to run commands, such as a database seed, every time a canvas starts your app.
• Turn a draft into a GitHub project. Click the GitHub button in a draft canvas's header to create a repository for it.
• More accurate element selection. Picking an element finds the right line of code in more apps, including ones built with React Server Components, Radix Slot, forwardRef, and Turbopack.
• The canvas agent places frames for you. New frames land in free space on the canvas, and the view pans just enough to show them. The agent also plans a layout before it arranges content.
• Newer models. The agent now runs on Opus 5.5, GPT-6, and Fable 5.1.
• Manage canvases and codebases from the dashboard. Right-click a canvas card, or use its three-dot menu, to rename or delete it. Double-click a canvas name to rename it. Any member can now delete a codebase.
• Real thumbnails. Canvas cards on the dashboard show a capture of your app instead of a placeholder.
• Build Mode polish. Back to Canvas is now a clear button. Esc closes the preview window before it leaves Build Mode. ⌘ S turns area capture on and off. Capture buttons wait until the stage has loaded. Long chat titles are cut short instead of overflowing.
• Clearer setup messages. When a codebase can't be set up, the message names the reason, for example a Next.js version below 15, no Tailwind, or no dev script.
• Help when your app isn't working. Answer No, I need help on the "Is your codebase working correctly?" banner to send us a help request from the canvas.
• A short intro for new users. New accounts get a few screens on Explore Mode and Build Mode before they pick a codebase.

Fixes

• Small, fast-loading React apps no longer stay on the Portal's loading screen.
• Portals show your app again right after you come back to a tab you left in the background.
• Edit secrets saves again. It no longer shows a PORT secret you never set.
• Zip files made with Finder's Compress import correctly.
• After you stop the agent and ask something else, it no longer goes back to the request you stopped.
• In monorepos, the agent finds the file behind the element you selected.
• Captures keep elements styled display: contents and everything inside them.
• The hover outline no longer stays frozen on your app after you leave Build Mode.
• Ungroup (⇧ ⌘ G) works.
• Build Mode no longer shows debugging details in its bottom-right corner.

August brings a rebuilt Build Mode and an agent you can keep talking to while it works. Modeinspect now has plans, so you can start free and upgrade to Pro when you need more agent messages. On the canvas, you get a right-click menu, property copy and paste, and rotation, and more codebases now run without extra setup.

Build Mode, rebuilt

Building with the coding agent now always happens in full-screen Build Mode, and it opens instantly. On the canvas, a frame's agent card is for exploring. When you like a direction, click Add Frame to Build Chat to take the frame into Build Mode.

• If you attach a captured frame, Build Mode selects the element it came from on the stage.
• Build Mode opens with your app ready to click through. Press V to pick an element.
• Esc steps back one level at a time: first the capture, then the element pick, then the message field, then Build Mode itself.
• If you have design panel edits that aren't added to the build chat yet, closing Build Mode asks whether to apply or discard them.
• A breadcrumb under the stage shows the selected element's parents. Click one to select a parent that its children cover completely.

Keep talking while the agent works

You can send a message while the agent is still on its previous one. The message waits above the field and runs as soon as the turn ends, in the order you sent it. Click its × to take it back before it starts.

• When a turn fails, the chat shows what went wrong and a Retry button that picks up where it stopped. Before, the agent went quiet.
• Stop shows when the agent is finishing up. If you stop a turn or it fails partway, an edit it was in the middle of is rolled back, so your code isn't left half-changed.
• Your message shows in the chat the moment you press send. If sending fails, the message says so and offers a retry.
• If a message is waiting because you ran out of agent messages, it runs by itself once you have messages again.

Hobby and Pro plans

Modeinspect now has plans. Every organization starts on Hobby, which is free and includes 30 agent messages a month. Pro raises that to 1,000 agent messages a month. For a team, the Teams & enterprises card has a Get in touch button that sends us a short form.

• See your plan, this month's usage, and when it resets on Usage & Plans, from the user menu.
• Click Get Pro to upgrade. Checkout accepts promotion codes, and if a code covers the full price, you don't need to enter a card.
• When you run out of messages, the chat tells you and offers to upgrade.
• The organization switcher is now part of the user menu.

Right-click menu on the canvas

Right-click on the canvas or in the Layers panel to open a menu with the actions for what you clicked. It covers copy, paste, arranging, framing, zoom, and delete. It also adds actions for text, images, videos (play and pause), component instances, and Portals. Each entry shows its keyboard shortcut.

• Paste here puts what you paste at the point you right-clicked. Plain text from the clipboard now pastes as a text layer.
• Right-clicking inside a multi-selection keeps the whole selection.
• On a frame that already uses auto layout, the menu offers Remove auto layout.
• Copy properties (⌥ ⌘ C) and Paste properties (⌥ ⌘ V) move styles from one layer to others, including layout, padding, and gap.
• Paste to replace (⇧ ⌘ R) swaps the selected layers for what's on your clipboard.

The agent knows more of your design system

Type @ in the message field to mention a component from your design system. The component shows as a chip, and the agent gets its full definition with your message.

• Both agents can now use the images and SVGs from your codebase. Designs they make use your real logos, icons, and imagery, not placeholders.
• The agent's design guidelines now start from how your Tailwind theme differs from stock Tailwind, instead of from a scan of your live site.
• The coding agent gets the full details of the element you selected, so "change this" lands on the right element more often.
• Ask the canvas agent for variations and you can say how many and what to vary. Each variation starts as a copy of your design, and the agent checks text contrast before it finishes.

More codebases run in Modeinspect

More apps now import and run in a Portal without extra setup.

• Create React App projects that haven't been ejected.
• Next.js 16.3 projects.
• Next.js projects with no next.config file, with a next.config.mts, or with a config that exports a function.
• Next.js apps that use Server Actions. Forms and actions now work in the Portal.
• Apps with a strict Content Security Policy, including ones that use nonces or hashes.
• Apps that redirect the home page through a sign-in route that sets a cookie. Setup no longer times out on them.

Improvements

• Canvas thumbnails on the dashboard. Each canvas card shows a picture of what's on the canvas, and it updates when the canvas changes. Renaming a canvas updates its card right away.
• Canvases open faster and cleaner. A canvas opens where you left the camera. Fonts load before anything shows, so text doesn't flash in. A Portal shows a picture of your app while it starts, even the first time you open a canvas.
• New canvases open right away. The canvas opens at once and shows its loading progress.
• Canvas locks when its pull request closes. After the pull request is merged or closed, the canvas shows Pull request merged or Pull request closed. Explore still works, and Start new canvas gets you going again.
• Rotate layers. Drag to rotate a layer on the canvas, or set its angle in the design panel.
• Design panel upgrades. Borders can be set per edge. Text controls show on containers that hold text. The token menu matches tokens by how their names start. Padding, gap, and radius guides look the same whether you drag on the canvas or in the panel.
• See when the coding agent is working. Every Portal shows a green Building border during a coding turn, and frames attached to the message light up too.
• Smoother selection. The hover highlight moves between elements instead of blinking. The first click on a frame selects the frame, not a child that covers it. The eyedropper confirms a copied color.
• Preview controls. The preview remembers whether you were selecting or interacting, and V switches between them. Navigation shows a loading bar. The play button is back.
• Scroll while you pick or capture. You can scroll the page in a Portal while selecting elements or capturing.
• Zoom stays on the canvas. ⌘ or Ctrl with scroll zooms the canvas and never the browser page. A middle-mouse drag pans the canvas.
• Captures include animated sections. Sections that animate in on scroll are played out before the capture, so they aren't missing.
• Multi-element capture is easier to follow. Holding ⇧ to capture several elements shows one toast that counts them.
• Pasting. Pasted layers land where Figma would place them. Pastes from Figma keep more of the design, including color adjustments, layout, effects, and SVG sizes.
• New pages come into view. Adding a page scrolls the canvas to it and shows it in the Pages panel.

Fixes

• ⌘ Z undoes only your own edits, never the agent's or a teammate's. Undo and redo also replay in the right order.
• After the coding agent changes code, the Portal shows the new version instead of the old one.
• Agents keep the whole conversation when you come back to a session, instead of losing their context.
• An agent chat stays open when the agent replaces the layer the chat started on.
• Fonts in captured pages render again, and the editor's own labels no longer pick up your app's fonts.
• Dragging text, dragging over fill-sized frames, and dragging layouts with space-between gaps no longer jams or collapses them.
• Dropping a layer at the bottom of a long Layers panel places it last again.
• Links inside a preview link work.
• Apps that render on the server no longer show hydration warnings on every element.
• Zip uploads with files at the top level import every file, and canvases that opened with no pages load correctly.

This month brings your existing work into Modeinspect: designs from Figma, your design system's components, and projects that started as a zip upload. The agent now shows its work on the canvas as it goes. The canvas editor also got a long list of changes that make it behave more like Figma.

Paste from Figma

Copy frames in Figma and paste them onto the canvas with ⌘ V. They arrive as editable layers, not a screenshot. Auto layout, gradients, shadows, text styles, and vector icons come through, and several frames keep their spacing.

Images inside the selection are not included. Those areas stay empty.

The agent designs with your components

The canvas agent can now browse your design system and place your actual components, with the right variant and props from the start. Ask for a pricing section and it is built from your buttons and cards, not generic lookalikes.

• The agent can change a placed component's props and edit the content inside it.
• Edits you make inside a component instance, like changing its text, stay put after you switch variants or reload.

Watch the agent's design take shape

When the canvas agent designs, layers now appear on the canvas one by one while it is still working. You see progress within seconds instead of waiting for the whole design at the end.

• An outline marks what the agent is working on, and each change flashes as it lands.
• If something fails partway, the layers already placed stay, and the agent repairs from there.

Edit styles in the live preview

Open a Portal's preview, select an element in the running app, and change its styles in the design panel. Your changes collect in a list you can review, and they survive closing the browser. Click Apply to hand them to the agent, which writes them into your code.

Grid layouts on the canvas

CSS grid is now supported in the editor. The design panel has grid controls for templates, auto-flow, and switching between layout types. The canvas draws a grid overlay, and layers you drag into or within a grid land in the right cell. Real-world values like repeat() and minmax() are read correctly.

Smoother codebase setup

Getting a codebase into Modeinspect and keeping it running got easier.

• Monorepos. Apps inside a larger repository now set up correctly. Dependencies install and the dev server starts in the right folder.
• A live setup screen. The redesigned setup screen shows what is happening as your codebase is set up. Reload the page or send the link to a teammate, and it picks up where it left off.
• Repositories show up right away after you install the GitHub App.
• Better page detection. Next.js route groups and dynamic routes are recognized, so fewer pages go missing or appear twice.
• Edit secrets. Add and change your codebase's environment variables from Edit secrets in the codebase menu. Saved values stay masked, and every change is checked on a fresh environment before it is saved.
• From zip to GitHub. Started with a zip upload? Create a GitHub repository for it from the canvas header. Your work-in-progress changes come along, and a pull request is opened for you.

Improvements

• Voice dictation. Click the microphone in the agent's message field, or press ⇧ ⌘ D, to dictate your prompt.
• Resize several layers at once. Select them and scale them together, as in Figma.
• Faster selection. Marquee select and resizing large selections are much faster. Hold ⌘ to select a nested layer directly.
• Drag, drop, and cut. Duplicating with ⌥-drag, dragging components, and pasting all land where you expect. Cut (⌘ X) now works.
• Modifier keys work like Figma. Hold ⇧ while dragging to move along one axis. ⇧ and ⌥ now work when resizing images, and ⇧-click removes a layer from the selection.
• Undo restores the selection. Undo and redo bring back what was selected at each step.
• Layout details. A layer drawn into an auto layout frame goes where you start drawing. Switching a layer to absolute keeps it in place. Resizing shows a layer's min and max limits. Typing digits to set opacity shows the new value.
• Previews keep their state. Your running app no longer resets when you close and reopen a preview. Esc closes it, and it opens on the right page.
• Portals show when they are loading. A Portal shows a loading screen while its page starts, and an error screen that retries until the page comes back. Pages are also loaded ahead of time, so the first open is quicker.
• Captures are easier to find. A new capture is highlighted and the canvas moves to show it. Layers in a capture carry a pill that takes you to the element they came from in the live Portal.
• Agent chat. Switch between Explore and Build while the agent is replying, and clear a conversation with Clear chat history. Explorations open in a new tab.
• Generated code keeps text formatting. Bold, italic, and links inside a text layer become real inline markup when a design is turned into code.
• GitHub reconnects cleanly. Uninstalling and reinstalling the GitHub App no longer leaves codebases disconnected. The code changes count now matches everywhere it appears.
• The agent runs on Claude Opus 5 by default.
• Small things. A Help button in the sidebar opens support. Toasts can be dismissed. In browsers other than Chrome and Edge, Modeinspect asks you to open it in Chrome, since the canvas needs a Chromium browser.

Fixes

• Agent conversations that stopped responding work again, including ones that were already stuck. Agent chats also open faster.
• Agent replies no longer appear twice after a reconnect.
• Long agent turns keep running while the agent is working, instead of being stopped after five minutes.
• Portals on larger projects are more stable while the app starts.
• Finishing the GitHub connection no longer signs you out.
• The design panel keeps responding after you drag a control to its limit, and color picker drags no longer get stuck.
• Text no longer jumps when you start editing it, and picking a color for selected text works.
• Resizing from a corner with ⇧ keeps the aspect ratio, and paragraphs can be resized again.
• Captures land in the right place, and dropdowns (<select>) look right in them. Double-clicking a Portal reopens your last conversation with the agent.

Modeinspect launched publicly on June 22. It puts your team's running app on an infinite canvas, lets you design on it with your own components and design tokens, and has agents write the change into your codebase. You finish with a pull request for engineers to review. This entry describes what launched, followed by the fixes and improvements from launch week.

A canvas for designing on your real product

The canvas is where you lay out ideas next to the live product. It has pages, frames, text, images, and layers, with the controls you know from other design tools.

• Select several layers at once, reorder them in the Layers panel, and wrap a selection in a frame with ⌘ G.
• Drag handles on the canvas to change corner radius, padding, and gap. Absolutely and fixed positioned layers get anchor and inset controls.
• Style part of a text layer: bold, italic, and other typography controls apply to the selected characters. Enter adds a line break inside the same text layer.
• Crop images in place, use images as backgrounds, and pick colors with the eyedropper.
• The design panel edits real styles. On a codebase that uses Tailwind, your edits map onto its Tailwind setup.
• Undo and redo work across the whole canvas.

Portals: your running app on the canvas

A Portal is a frame with your real app running inside it, on one page of the app. Modeinspect hosts the dev environment, so there is nothing to install. The page is live: as you click through the app, the Portal keeps track of the address it is on.

Select a Portal and click Open preview to browse the app in a window over the canvas, with back and forward buttons and an option to open it in a new browser window.

Capture a live page as editable layers

Turn a page of your app into layers you can redesign, instead of drawing it again. Select a Portal and click Capture page for the whole page, or Capture selection to click one part of it. The capture lands on the canvas as a frame of real layers, with text and images carried over, ready to edit with the canvas tools and the design panel.

A canvas agent and a coding agent

Two agents work with you. In Explore, the canvas agent designs directly on the canvas: it reads a frame, your design tokens, and your design guidelines, and places new variations next to the original without touching your code. In Build, the coding agent writes the design into your codebase and you watch the result appear in the Portal.

You can run several agents at the same time. Each one keeps working in the background, and you can open any of them to follow its progress or continue the conversation in a side panel.

Your design system on the canvas

When you connect a codebase, Modeinspect reads its design system. Your components appear in the Components panel, and you can drag them onto the canvas as instances with their real styles. When you open the first canvas of a codebase, Modeinspect also writes design guidelines for it, a summary of your branding and design tokens that the agents design against.

From canvas to pull request

Every change the coding agent makes on a canvas is saved as code on its own branch. You stay in control of it from the canvas.

• Undo and redo in the canvas header step the code back and forward through the agent's changes.
• Code changes shows the diff of every file the agent changed.
• Create Pull Request opens a pull request on GitHub from the canvas, and its status updates live on the canvas. Files the agent deleted are removed in the pull request, and files it added and you later undid are left out.
• Share creates a preview link, so others can open the live app with your changes without a Modeinspect account.

Improvements

• Start from a demo canvas. New accounts skip the sign-up questionnaire and land on a demo canvas built on the demo codebase, zoomed onto the app.
• Usage analytics for your organization. Analytics in the organization menu shows agent usage and pull requests for your organization.
• Videos on the canvas. Video works as canvas media, with the same position controls as images.
• A tidier Portal toolbar. The Portal's name label hides while its toolbar is shown, and the toolbar steps aside while an agent is building into the Portal so it does not cover the progress border.
• Easier to find your way on a new canvas. New canvases open zoomed out, new pages scroll into view, and the Pages panel sizes itself to the number of pages.
• Required agent questions stay open. When the agent marks a question as required, you need to answer it before the agent continues.
• Clearer Components panel. The panel shows a loading state while your design system is being read, and an empty state when no components were found.
• The message field keeps focus. After you pick an element in the Portal to give the agent context, the cursor goes back to the message field so you can keep typing.
• Support from the sidebar. The support tab in the left sidebar opens and closes the support chat.
• Faster switching between canvases. Going back to a canvas you already opened no longer reloads all of its images.

Fixes

• Padding, border, and background values written as CSS shorthands now show and edit correctly on the canvas and in the design panel.
• Text on the canvas sits on the right baseline, and text layers lay out, resize, and respect their max width correctly.
• Several issues in the Layers panel are fixed.
• Resizing a layer no longer collapses it. The opposite edge stays in place, and dragging past it flips the layer to the side of your pointer.
• You can no longer drop a Portal into another Portal, or move layers into a Portal from the Layers panel.
• Undo and redo work while the design panel is open.
• The app no longer fails to load for browsers that carry many or large cookies.
• Screen recordings in the support chat work again.