Canvas + Improvements by mblanc · Pull Request #31 · mblanc/flowcraft

mblanc · 2026-04-03T11:23:29Z

No description provided.

- Replaced manual resizing logic with a reusable `useNodeResize` hook in CustomWorkflowNode, FileNode, ImageNode, ListNode, LLMNode, ResizeNode, TextNode, UpscaleNode, and VideoNode. - Enhanced state management for dimensions and resizing behavior, improving code maintainability and readability. - Updated components to utilize synced state for text and prompt management, ensuring consistent data handling. This refactor enhances the user experience by providing a more consistent and efficient resizing mechanism across various node types.

…nd LLMs - Introduced `CustomWorkflowConfig`, `FileConfig`, `ImageConfig`, and `LLMConfig` components to manage node-specific settings. - Implemented dynamic fetching of signed URLs for file and image nodes, enhancing user experience with previews. - Added schema editing capabilities in `SchemaEditor` for LLM nodes, allowing for flexible response structures. - Enhanced state management and UI components for better integration with existing node functionalities. This commit significantly improves the configurability and usability of nodes within the flow canvas, providing users with more control over their workflows.

….ts`) should export its own `NodeDefinition`, input gathering, and execution logic. `node-registry.ts` should only collect and register these.

- Updated FlowDocument and CustomNodeDocument interfaces to use PersistedNode and PersistedEdge types for better type safety. - Changed createdAt and updatedAt fields to ISO 8601 string format for consistent timestamp handling. - Improved schemas to define portDefaultValue with specific types, enhancing validation. - Refactored node registration logic to simplify type handling and removed unused imports in node-helpers. These changes improve type safety and consistency across the application, facilitating better data management and integration with Firestore.

- Replaced direct API calls for signed URLs with a caching mechanism using `fetchAndCacheSignedUrl` in `FlowsList`, `BatchMediaGallery`, and `useSignedUrl` hooks. - Improved initial state setup for signed URLs to utilize cached values, reducing redundant fetches and enhancing performance. - Updated `FlowCanvas` to adjust rendering behavior for visible elements. These changes streamline the handling of signed URLs, improving efficiency and user experience across the application.

…node types.

…Callback`, and clean up unused variables and imports across tests and components.

…orage services to throw errors instead of returning null on failure.

…ove redundant !important overrides

- Replaced direct string checks for GCS URIs with a utility function `isGcsUri` in `custom-workflow-node`, `file-node`, `list-node`, and `image-config` components to improve code readability and maintainability. - Introduced `parseGcsUri` and `extractBucketFromStorageUri` functions in the storage module to enhance GCS URI parsing logic. - Updated constants to include `IMAGE_MODEL_CONFIGS` for better organization of image model configurations. These changes enhance the clarity and efficiency of GCS URI management throughout the application.

- Deleted `lint-output.txt` and `lint-results.txt` as they are no longer needed, streamlining the project structure and reducing clutter.

- Updated import paths for various components to reflect their new locations within the project structure, improving clarity and maintainability. - Introduced a new `FloatingNodePalette` component to manage node addition in the flow canvas, enhancing user experience. - Added `FlowCanvas`, `FlowContextMenu`, and `FlowRunPanel` components to streamline flow management and interactions. - Refactored existing tests to align with the updated component structure, ensuring comprehensive coverage and reliability.

- Added functionality to create and delete canvases, enhancing the flow management experience. - Introduced a new Canvas interface to manage canvas data effectively. - Updated data fetching logic to include canvases when the active tab is set to "canvas". - Enhanced rendering logic to accommodate canvas items alongside flows and custom nodes. - Updated constants to include CANVASES for better organization.

…pendencies - Integrated a new `CanvasChatPanel` component into the `CanvasEditor`, improving user interaction. - Updated `package.json` and `package-lock.json` to include `react-markdown` and `remark-gfm` for enhanced markdown support. - Refactored type imports in various components for better readability and consistency. - Cleaned up input change handlers in node components for improved code clarity.

… states - Added media generation capabilities to the `CanvasChatInput`, allowing for image and video creation based on user input. - Integrated loading state handling in `CanvasChatMessages` to improve user experience during chat interactions. - Updated `CanvasChatPanel` and `CanvasEditor` to pass viewport center functionality, enhancing layout responsiveness. - Refactored type imports and added new types for better clarity and maintainability in the chat components.

- Simplified the enqueue logic in the chat route for better readability. - Improved the CanvasChatInput component by adding mention handling and attachment management features. - Introduced state management for mentions and dismissed attachments, enhancing user interaction. - Utilized memoization for performance optimization in mention and attachment processing. - Updated the canvas agent to better reference shared items in user interactions.

- Added logging for unknown event types in the chat API to improve debugging. - Updated CanvasChatInput to handle action prompts, allowing users to trigger specific actions from chat messages. - Enhanced CanvasChatMessage to display action buttons for user interactions, improving engagement. - Refactored media generation logic to include reference images, streamlining video creation from existing content. - Introduced new state management for pending action prompts in the canvas store, enhancing user experience.

- Replaces Gemini 3 Pro Preview with Gemini 3.1 Pro Preview across the application. - Adds support for the Veo 3.1 Lite video generation model in constants and schemas. - Synchronizes package-lock.json with recent dependency state.

…erence node tracking to canvas nodes

…ng and toolbar UI for text nodes

…ation - Introduced a new `generateAudio` boolean property in the media generation interface to control audio generation alongside video. - Updated the CanvasChatInput and related logic to handle the new audio generation feature, defaulting to false unless explicitly requested by the user.

- Removed unused mode icon logic from CanvasChatInput to streamline the component. - Adjusted CanvasToolbar styles for a more modern appearance and consistent button shapes. - Simplified node title layers in CanvasImageNode, CanvasTextNode, and CanvasVideoNode by removing background styles for a cleaner look. - Updated the main container style in CanvasTextNode for better visual integration.

gemini-code-assist

Code Review

This pull request introduces a new 'Canvas' feature, providing a free-form workspace for media generation and arrangement using an AI agent. It includes the necessary API routes, a Zustand-based store for canvas state, and new React components for the canvas editor, chat panel, and media nodes. Additionally, it adds utility hooks for node resizing, signed URL caching, and state synchronization. I have no further feedback to provide as the changes are well-structured and align with the project's architecture.

mblanc · 2026-04-03T16:58:30Z

/gemini review

gemini-code-assist

Code Review

This pull request introduces the 'Canvas' feature, an admin-only creative workspace for generating and arranging AI media assets via a conversational agent. The update includes new API routes for canvas CRUD and chat streaming, a dedicated Zustand store, and specialized canvas node components. It also refactors existing node logic into a modular structure and adds a signed URL cache to optimize media rendering. Feedback focuses on improving type safety by replacing 'any' types and assertions with proper interfaces and discriminated unions, and suggests adding a timeout mechanism to chat fetch requests for better robustness.

gemini-code-assist · 2026-04-03T17:02:29Z

__tests__/gemini.service.test.ts

@@ -1,6 +1,8 @@
+/* eslint-disable @typescript-eslint/no-explicit-any, @typescript-eslint/no-unused-vars */


Avoid using eslint-disable for no-explicit-any. Instead, define proper interfaces or types for the mocked objects to maintain type safety.

gemini-code-assist · 2026-04-03T17:02:30Z

__tests__/image-node-deep.test.tsx

@@ -0,0 +1,97 @@
+/* eslint-disable @typescript-eslint/no-explicit-any, @typescript-eslint/no-unused-vars */


Avoid using eslint-disable for no-explicit-any. Define proper types for the node data to improve maintainability and type safety.

gemini-code-assist · 2026-04-03T17:02:30Z

__tests__/llm-node-deep.test.tsx

@@ -0,0 +1,99 @@
+/* eslint-disable @typescript-eslint/no-explicit-any, @typescript-eslint/no-unused-vars */


Avoid using eslint-disable for no-explicit-any. Define proper types for the node data to improve maintainability and type safety.

gemini-code-assist · 2026-04-03T17:02:30Z

__tests__/list-node-deep.test.tsx

@@ -0,0 +1,88 @@
+/* eslint-disable @typescript-eslint/no-explicit-any, @typescript-eslint/no-unused-vars */


Avoid using eslint-disable for no-explicit-any. Define proper types for the node data to improve maintainability and type safety.

gemini-code-assist · 2026-04-03T17:02:30Z

__tests__/video-node-deep.test.tsx

@@ -0,0 +1,88 @@
+/* eslint-disable @typescript-eslint/no-explicit-any, @typescript-eslint/no-unused-vars */


Avoid using eslint-disable for no-explicit-any. Define proper types for the node data to improve maintainability and type safety.

gemini-code-assist · 2026-04-03T17:02:30Z

app/api/canvases/[id]/chat/route.ts

+                            break;
+                        default:
+                            logger.warn(
+                                `[ChatAPI] Unknown event type: ${(event as { type: string }).type}`,


Avoid using type assertion (event as { type: string }).type. Define a proper discriminated union type for AgentEvent to ensure type safety.

gemini-code-assist · 2026-04-03T17:02:30Z

components/canvas/canvas-chat-input.tsx

+                });
+                toast.error(message);
+            } finally {
+                setIsChatLoading(false);


The chat request is missing a timeout mechanism. Consider adding a timeout to the fetch request to prevent hanging connections.

mblanc and others added 26 commits March 15, 2026 21:56

refactor: Create a lib/nodes/ directory. Each node (e.g., `llm-node…

a417424

….ts`) should export its own `NodeDefinition`, input gathering, and execution logic. `node-registry.ts` should only collect and register these.

fix: llm node batch output resizing and display when expanded

082457a

fix: flow persistence

39eef94

test: resolve linting warnings and add comprehensive unit tests

9e9db5d

feat: Add comprehensive unit tests for various hooks, utilities, and …

b60571e

…node types.

fix: video generation timeout

01697a7

Refactor Gemini service regex, optimize FlowCanvas handlers with `use…

c959077

…Callback`, and clean up unused variables and imports across tests and components.

feat: Introduce toast notifications for user feedback and refactor st…

1602a71

…orage services to throw errors instead of returning null on failure.

refactor: standardize node styling using node-container class and rem…

0c35941

…ove redundant !important overrides

chore: remove lint output files to clean up repository

064d613

- Deleted `lint-output.txt` and `lint-results.txt` as they are no longer needed, streamlining the project structure and reducing clutter.

refactor: rename video models, implement migration logic, and add ref…

fedba20

…erence node tracking to canvas nodes

feat: add frame support to video generation and implement node resizi…

917aaca

…ng and toolbar UI for text nodes

gemini-code-assist bot reviewed Apr 3, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Canvas + Improvements#31

Canvas + Improvements#31
mblanc wants to merge 26 commits intomainfrom
improvements

mblanc commented Apr 3, 2026

Uh oh!

gemini-code-assist bot left a comment

Uh oh!

mblanc commented Apr 3, 2026

Uh oh!

gemini-code-assist bot left a comment

Uh oh!

gemini-code-assist bot Apr 3, 2026

Uh oh!

gemini-code-assist bot Apr 3, 2026

Uh oh!

gemini-code-assist bot Apr 3, 2026

Uh oh!

gemini-code-assist bot Apr 3, 2026

Uh oh!

gemini-code-assist bot Apr 3, 2026

Uh oh!

gemini-code-assist bot Apr 3, 2026

Uh oh!

gemini-code-assist bot Apr 3, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

		@@ -1,6 +1,8 @@
		/* eslint-disable @typescript-eslint/no-explicit-any, @typescript-eslint/no-unused-vars */

		@@ -0,0 +1,97 @@
		/* eslint-disable @typescript-eslint/no-explicit-any, @typescript-eslint/no-unused-vars */

		@@ -0,0 +1,99 @@
		/* eslint-disable @typescript-eslint/no-explicit-any, @typescript-eslint/no-unused-vars */

		@@ -0,0 +1,88 @@
		/* eslint-disable @typescript-eslint/no-explicit-any, @typescript-eslint/no-unused-vars */

Conversation

mblanc commented Apr 3, 2026

Uh oh!

gemini-code-assist bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

mblanc commented Apr 3, 2026

Uh oh!

gemini-code-assist bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

gemini-code-assist bot Apr 3, 2026

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist bot Apr 3, 2026

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist bot Apr 3, 2026

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist bot Apr 3, 2026

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist bot Apr 3, 2026

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist bot Apr 3, 2026

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist bot Apr 3, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant