Fix generate-shortcut papercuts across Studio, Canvas, and Compare - #1
Fix generate-shortcut papercuts across Studio, Canvas, and Compare#1usehoplite[bot] wants to merge 4 commits into
Conversation
The API server and Vite dev server previously collided on the injected preview PORT, and no run script was configured. Pin the API server to its default 4001 and start both servers so a fresh sandbox gets a working app. Co-authored-by: Kactus <thekactusapp@gmail.com>
The Studio and Compare-model buttons showed a platform-wrong, hardcoded macOS hint (⌘↵) and only handled the shortcut while focus sat in their prompt textareas. The canvas node editors swallowed ⌘/Ctrl+Enter entirely because the keybind handler skipped typing targets. - Studio: window-level ⌘/Ctrl+Enter triggers Generate from anywhere, unless a modal is open; hint renders per-OS (⌘↵ / Ctrl+Enter). - Canvas: editing a prompt or video node and pressing ⌘/Ctrl+Enter runs that node, matching the binding advertised in the keybinds panel. - Compare modal: the same shortcut now runs the comparison from anywhere in the modal and the hint is platform-correct. Co-authored-by: Kactus <thekactusapp@gmail.com>
|
React Doctor found no new issues. 🎉 Reviewed by React Doctor for commit |
![macroscopeapp[bot]](https://avatars.githubusercontent.com/in/900172?s=60&v=4){kind=small}
| if (!nodeId) return | ||
| const node = useAICanvasStore.getState().nodes.find((entry) => entry.id === nodeId) | ||
| if (!node) return | ||
| const runnable = (isPromptNode(node) |
There was a problem hiding this comment.
🟡 Medium components/useCanvasKeybinds.ts:39
⌘/Ctrl+Enter invokes generation for prompt nodes whose customProviderId no longer resolves, and for video nodes whose ID is missing or does not identify a video provider, even though the visible Generate button is disabled; the action then puts the node into an error state. The typing shortcut's runnable checks must use the same resolved-provider and endpoint validation as the Generate button instead of only checking prompt text and a nonempty ID.
✅ Resolved in b1c581c
There was a problem hiding this comment.
Fixed in b1c581c: the typing shortcut now uses a shared canGenerateNode check that mirrors the Generate-button enablement exactly — prompt nodes with provider === 'custom' require a resolved custom provider with a non-video endpoint, and video nodes require a resolved provider with endpointMode === 'video'. The same helper also backs the selected-nodes ⌘/Ctrl+Enter path, which had the same weak check.
- Studio: stop the shortcut from firing when another listener already claimed the keystroke (event.defaultPrevented). - Canvas: the ⌘/Ctrl+Enter runnable check now mirrors the Generate-button enablement exactly — custom providers must resolve to an image or video endpoint — so the shortcut can't run a node whose button is disabled. - Compare modal: split the oversized component into TopBar, PromptBar, Slots, Results, and EmptyState sections (react-doctor no-giant-component). Co-authored-by: Kactus <thekactusapp@gmail.com>
|
The |
LibraryModal is owned outside PromptPanel, so its open state was invisible to the Studio shortcut guard and Ctrl/⌘+Enter started a generation behind the modal. Track a shared activeOverlay flag in the studio store: the Library modal registers itself while mounted, and the global generate shortcut bails out whenever an overlay is active. Co-authored-by: Kactus <thekactusapp@gmail.com>
Summary
Audited the main user flows (Studio prompt → generate, Compare models, AI Canvas nodes) for common UX papercuts. All three surfaces advertised a
⌘/Ctrl+Entergenerate shortcut that was broken or misleading:⌘↵) on every platform, and the shortcut only worked while focus was inside the prompt textarea. Pressing⌘/Ctrl+Enterwith focus anywhere else did nothing.⌘/Ctrl+Enterinside a node's editor (the advertised "generate selected" binding) was swallowed; users hit a dead end exactly where the shortcut is most expected.Changes
src/components/PromptPanel.tsx— window-level⌘/Ctrl+Enterhandler that triggers the samegenerate()as the button, guarded so it never fires behind an open modal or a pending batch; hint rendered per-OS via the existingformatKeyCombohelper.src/features/ai-canvas/components/useCanvasKeybinds.ts+PromptNode.tsx/VideoPromptNode.tsx— while typing in a node editor,⌘/Ctrl+Enterruns that node (prompt or video), mirroring the node's own Generate button. Node articles now carrydata-node-idso the handler resolves the owning node without relying on React Flow internals.src/components/CompareModal.tsx— comparison shortcut moved to a window-level handler (works from anywhere in the modal, not just the textarea); hint per-OS..hoplite/settings.json— managed-preview config so a fresh sandbox gets a working app: Vite on 4000 plus the API server on its default 4001 (the injected previewPORTpreviously collided both onto 4000, breaking/apiproxying). Setup also installsgit-lfs, which the source-control flow requires.Verification
bun run check— 64 tests pass,tsc -b && vite buildclean.Behavioral evidence (headless Chrome against the dev stack, API intentionally keyless):
Ctrl+Enter→ no request (verified via fetch interception)Ctrl+Enter→ exactly onePOST /api/generate; failure surfaces in the existing error bannerCtrl+Enter→ nothingCtrl+Enter→ runs the focused node (node entered running → failed state with provider error)Ctrl+Enter→ comparison runs both slots (button transitions Run Compare → Re-run)Hint labels on Linux now read
Ctrl+Enterinstead of the hardcoded⌘↵; macOS renders⌘↵as before.Screenshots are post-fix evidence of the hint labels; the interaction claims above were verified non-visually (network interception, DOM state transitions). No pixel-level visual verification was performed.
Note
Fix
Meta/Ctrl+Entergenerate shortcuts across Studio, Canvas, and CompareactiveOverlayflag before running.Meta/Ctrl+Entervia a window listener and refactors its UI into dedicated subcomponents.Meta/Ctrl+Enterinside a canvas node runs that node instead of inserting a newline, usingdata-node-idfor lookup.activeOverlaystate to the Studio store, managed by LibraryModal.tsx to block shortcut conflicts.Meta/Ctrl+Enterinstead of inserting a newline; the Studio prompt shortcut is suppressed whenactiveOverlayis true or modals are open.Macroscope summarized 2a210de.