Skip to content

Conversation

@Kitenite
Copy link
Contributor

@Kitenite Kitenite commented Aug 27, 2025

Description

Related Issues

Type of Change

  • Bug fix
  • New feature
  • Documentation update
  • Release
  • Refactor
  • Other (please describe):

Testing

Screenshots (if applicable)

Additional Notes


Important

Refactor codebase to introduce branch management, update models and mappers, refactor components, and enhance API routers.

  • Branch Management:
    • Introduces BranchManager class in manager.ts for handling branch operations.
    • Adds methods for creating, deleting, and switching branches.
  • Model and Mapper Updates:
    • Updates Frame, Canvas, Branch, and Project models in models/src/project.
    • Refactors mappers in mappers/project and mappers/chat to use new model structures.
  • Component Refactoring:
    • Refactors GestureScreen, FrameView, PageSelector, TopBar, and FrameComponent to use updated models.
    • Updates SelectProject and Settings components to handle new project metadata structure.
  • API Router Changes:
    • Adds branchRouter to handle branch-related API requests.
    • Updates conversationRouter, messageRouter, frameRouter, and projectRouter to use new mappers.
  • Schema and Defaults:
    • Updates database schemas in schema/canvas, schema/chat, and schema/project.
    • Modifies default frame creation in defaults/frame.ts.

This description was created by Ellipsis for fbc13e6. You can customize this summary. It will automatically update as commits are pushed.

Summary by CodeRabbit

  • New Features
    • Introduced project branches with sandbox-backed sessions (create, switch, manage).
  • Improvements
    • Unified frame handling in the editor for a smoother canvas experience.
    • Settings modal: more reliable project rename and settings save with immediate UI refresh.
    • Publishing: clearer, more consistent deployment status updates and messages.
  • Bug Fixes
    • Template filtering now consistently uses project metadata tags.
    • Site settings base URL now uses published/preview domains only, avoiding sandbox fallbacks.
  • Refactor
    • Standardized data mappers and APIs across projects, frames, chat, users, and subscriptions.

@vercel
Copy link

vercel bot commented Aug 27, 2025

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Preview Comments Updated (UTC)
docs Ready Ready Preview Comment Aug 27, 2025 9:00pm
web Error Error Aug 27, 2025 9:00pm

@coderabbitai
Copy link

coderabbitai bot commented Aug 27, 2025

Note

Other AI code review bot(s) detected

CodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review.

Caution

Review failed

The pull request is closed.

Walkthrough

Large refactor and API alignment: replace WebFrame/WebFrameView with Frame/FrameView across client/editor; rename many DB mappers to fromDb*/toDb*; add branch domain (models, schema, mappers, router, client BranchManager); add canvas/frame/chat/deployment DB schemas and related API changes; move project tags into metadata.

Changes

Cohort / File(s) Summary
Client Canvas Frame components
apps/web/client/src/app/project/[id]/_components/canvas/frame/* (gesture.tsx, index.tsx, page-selector.tsx, top-bar.tsx, view.tsx)
Replace WebFrame/WebFrameView with Frame/FrameView; rename WebFrameComponentFrameComponent; remove WebFrame-specific rendering/ref casts; update prop/ref types and editor registration casts.
Editor store: frames/insert/text/overlay
apps/web/client/src/components/store/editor/frames/manager.ts, .../insert/index.ts, .../text/index.ts, .../overlay/utils.ts
Generalize stores and helpers to Frame/FrameView; update signatures, replace WebFrame mappers with toDbFrame/toDbPartialFrame, remove FrameType branching.
Editor store: branch manager (new)
apps/web/client/src/components/store/editor/branch/manager.ts
New BranchManager class (MobX): track current branch, manage per-branch SandboxManager, create/switch/delete branches, start sandbox for current branch, clear state.
UI components and settings
apps/web/client/src/app/projects/_components/select/index.tsx, .../settings.tsx, apps/web/client/src/components/ui/settings-modal/project/index.tsx, apps/web/client/src/components/ui/settings-modal/site/page.tsx
Move tags access to project.metadata.tags; change project settings mapping to toDbProjectSettings; update updateProject payload shape; remove sandbox URL fallback in site page baseUrl.
API root & branch router
apps/web/client/src/server/api/root.ts, apps/web/client/src/server/api/routers/project/branch.ts
Register new branchRouter on API root; add protected CRUD procedures (getByProjectId, create, update, delete) using branch schemas and fromDbBranch mapping.
API chat routers
apps/web/client/src/server/api/routers/chat/conversation.ts, .../message.ts
Swap mapper usages to fromDbConversation/fromDbMessage; conversation.update input simplified to conversationUpdateSchema (use input.id and set input directly).
API project/user routers
apps/web/client/src/server/api/routers/project/*, .../user/*
Replace many to* mappers with fromDb* and toDb* equivalents; frame/project update endpoints accept direct update schemas (use input.id), project update now returns updated project via fromDbProject; user-canvas and settings endpoints updated similarly.
API publish helpers
apps/web/client/src/server/api/routers/publish/*
updateDeployment signature changed to accept single payload with id; all call sites updated to pass payload with id and preserve envVars; helpers and publish/unpublish flows updated accordingly.
API subscription & members/invites
apps/web/client/src/server/api/routers/subscription/subscription.ts, .../project/invitation.ts, .../project/member.ts, .../user/user.ts
Swap DB→API mappers from to*fromDb* (e.g., fromDbSubscription, fromDbUser), update return mappings.
DB defaults & DTOs
packages/db/src/defaults/frame.ts, packages/db/src/dto/project/index.ts
createDefaultFrame signature adds branchId parameter and includes branchId on returned frame; removed project dto re-exports.
DB mappers: chat & general rename
packages/db/src/mappers/chat/*, packages/db/src/mappers/*
Rename chat mappers to fromDbConversation/toDbConversation, fromDbMessage/toDbMessage; reorganize mapper barrels and swap many to*fromDb* / toDb* naming across project, subscription, user mappers.
DB mappers: project
packages/db/src/mappers/project/*
Add branch mappers; rename and reshape canvas/frame/project/settings mappers to fromDb*/toDb*; frame no longer uses type, includes branchId and canvasId; project tags moved into metadata.
DB schema: canvas/frame/chat/deployment/branch
packages/db/src/schema/canvas/*, packages/db/src/schema/chat/*, packages/db/src/schema/domain/deployment.ts, packages/db/src/schema/project/branch.ts
Add canvases, frames (frames include branchId), chat conversations and messages tables with enums/relations, deployments table with enums and fields, and branches table with unique default index, relations, and insert/update schemas.
DB barrels & package exports
packages/db/src/mappers/index.ts, packages/db/src/mappers/project/index.ts, packages/db/src/index.ts, packages/db/src/mappers/chat/index.ts
Rewire package exports: expose new mappers (chat, project, etc.), remove old dto export, and add project mappers barrel.
Models: project/frame/canvas/branch
packages/models/src/project/*
Add Branch interface; Frame drops FrameType and gains branchId and canvasId; WebFrame no longer has type; Canvas adds required userId; Project moves tags into metadata; export branch from project index.

Sequence Diagram(s)

sequenceDiagram
  autonumber
  actor User
  participant UI as Client UI (Editor)
  participant BM as BranchManager
  participant API as tRPC branchRouter
  participant DB as Database

  User->>UI: Select/switch branch
  UI->>BM: switchToBranch(branchId)
  BM->>BM: set currentBranch (if changed)
  alt starting sandbox
    UI->>BM: startCurrentBranchSandbox()
    BM->>API: getByProjectId(projectId)
    API->>DB: SELECT branches WHERE projectId
    DB-->>API: Branch[]
    API-->>BM: fromDbBranch[] (mapped)
    BM->>BM: getCurrentSandbox().start()
  end
Loading
sequenceDiagram
  autonumber
  participant Client as Client (Frame create/update)
  participant Store as FramesManager
  participant API as frameRouter
  participant DB as Database

  Client->>Store: create/update Frame (Frame object)
  Store->>API: create/update(input: frameInsert/UpdateSchema with id)
  API->>DB: INSERT/UPDATE frames USING payload (uses id when updating)
  DB-->>API: returning row
  API-->>Store: fromDbFrame(dbRow)
  Store->>Client: updated Frame
Loading

Estimated code review effort

🎯 5 (Critical) | ⏱️ ~120 minutes

Possibly related PRs

Poem

A rabbit refactors with paws so light,
Frames drop their webs, new branches take flight.
fromDb and toDb, tidy paths unwind,
Canvases labeled, tags moved to find.
Hop—deployments hum, the code garden's bright. 🐇✨


📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

💡 Knowledge Base configuration:

  • MCP integration is disabled by default for public repositories
  • Jira integration is disabled by default for public repositories
  • Linear integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between 1f6e025 and fbc13e6.

📒 Files selected for processing (61)
  • apps/web/client/src/app/project/[id]/_components/canvas/frame/gesture.tsx (4 hunks)
  • apps/web/client/src/app/project/[id]/_components/canvas/frame/index.tsx (2 hunks)
  • apps/web/client/src/app/project/[id]/_components/canvas/frame/page-selector.tsx (2 hunks)
  • apps/web/client/src/app/project/[id]/_components/canvas/frame/top-bar.tsx (2 hunks)
  • apps/web/client/src/app/project/[id]/_components/canvas/frame/view.tsx (4 hunks)
  • apps/web/client/src/app/projects/_components/select/index.tsx (1 hunks)
  • apps/web/client/src/app/projects/_components/settings.tsx (1 hunks)
  • apps/web/client/src/components/store/editor/branch/manager.ts (1 hunks)
  • apps/web/client/src/components/store/editor/chat/conversation.ts (3 hunks)
  • apps/web/client/src/components/store/editor/frames/manager.ts (7 hunks)
  • apps/web/client/src/components/store/editor/insert/index.ts (4 hunks)
  • apps/web/client/src/components/store/editor/overlay/utils.ts (4 hunks)
  • apps/web/client/src/components/store/editor/text/index.ts (4 hunks)
  • apps/web/client/src/components/ui/settings-modal/project/index.tsx (3 hunks)
  • apps/web/client/src/components/ui/settings-modal/site/page.tsx (1 hunks)
  • apps/web/client/src/server/api/root.ts (2 hunks)
  • apps/web/client/src/server/api/routers/chat/conversation.ts (4 hunks)
  • apps/web/client/src/server/api/routers/chat/message.ts (2 hunks)
  • apps/web/client/src/server/api/routers/project/branch.ts (1 hunks)
  • apps/web/client/src/server/api/routers/project/frame.ts (3 hunks)
  • apps/web/client/src/server/api/routers/project/invitation.ts (3 hunks)
  • apps/web/client/src/server/api/routers/project/member.ts (2 hunks)
  • apps/web/client/src/server/api/routers/project/project.ts (6 hunks)
  • apps/web/client/src/server/api/routers/project/settings.ts (3 hunks)
  • apps/web/client/src/server/api/routers/publish/deployment.ts (3 hunks)
  • apps/web/client/src/server/api/routers/publish/helpers/helpers.ts (1 hunks)
  • apps/web/client/src/server/api/routers/publish/helpers/publish.ts (5 hunks)
  • apps/web/client/src/server/api/routers/publish/helpers/unpublish.ts (2 hunks)
  • apps/web/client/src/server/api/routers/subscription/subscription.ts (2 hunks)
  • apps/web/client/src/server/api/routers/user/user-canvas.ts (3 hunks)
  • apps/web/client/src/server/api/routers/user/user-settings.ts (3 hunks)
  • apps/web/client/src/server/api/routers/user/user.ts (2 hunks)
  • packages/db/src/defaults/frame.ts (1 hunks)
  • packages/db/src/dto/project/index.ts (0 hunks)
  • packages/db/src/index.ts (1 hunks)
  • packages/db/src/mappers/chat/conversation.ts (2 hunks)
  • packages/db/src/mappers/chat/index.ts (1 hunks)
  • packages/db/src/mappers/chat/message.ts (3 hunks)
  • packages/db/src/mappers/index.ts (1 hunks)
  • packages/db/src/mappers/project/branch.ts (1 hunks)
  • packages/db/src/mappers/project/canvas.ts (1 hunks)
  • packages/db/src/mappers/project/frame.ts (2 hunks)
  • packages/db/src/mappers/project/index.ts (1 hunks)
  • packages/db/src/mappers/project/project.ts (4 hunks)
  • packages/db/src/mappers/project/settings.ts (2 hunks)
  • packages/db/src/mappers/subscription.ts (4 hunks)
  • packages/db/src/mappers/user/settings.ts (2 hunks)
  • packages/db/src/mappers/user/user.ts (2 hunks)
  • packages/db/src/schema/canvas/canvas.ts (1 hunks)
  • packages/db/src/schema/canvas/frame.ts (1 hunks)
  • packages/db/src/schema/canvas/index.ts (1 hunks)
  • packages/db/src/schema/chat/conversation.ts (1 hunks)
  • packages/db/src/schema/chat/index.ts (1 hunks)
  • packages/db/src/schema/chat/message.ts (1 hunks)
  • packages/db/src/schema/domain/deployment.ts (1 hunks)
  • packages/db/src/schema/project/branch.ts (1 hunks)
  • packages/models/src/project/branch.ts (1 hunks)
  • packages/models/src/project/canvas.ts (1 hunks)
  • packages/models/src/project/frame.ts (1 hunks)
  • packages/models/src/project/index.ts (1 hunks)
  • packages/models/src/project/project.ts (1 hunks)
✨ Finishing Touches
  • 📝 Generate Docstrings
🧪 Generate unit tests
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch feat/branching-clean

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share
🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

  • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
    • I pushed a fix in commit <commit_id>, please review it.
    • Open a follow-up GitHub issue for this discussion.
  • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query.
  • PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
    • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
    • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

CodeRabbit Commands (Invoked using PR/Issue comments)

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

Other keywords and placeholders

  • Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
  • Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
  • Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

  • You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
  • Please see the configuration documentation for more information.
  • If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Status, Documentation and Community

  • Visit our Status Page to check the current availability of CodeRabbit.
  • Visit our Documentation for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

@supabase
Copy link

supabase bot commented Aug 27, 2025

This pull request has been ignored for the connected project wowaemfasoptxrdjhilu because there are no changes detected in apps/backend/supabase directory. You can change this behaviour in Project Integrations Settings ↗︎.


Preview Branches by Supabase.
Learn more about Supabase Branching ↗︎.

await ctx.db.insert(branches).values(input);
return true;
} catch (error) {
console.error('Error creating frame', error);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Typographical error: The error message says 'Error creating frame', but given the context it should probably be 'Error creating branch'.

Suggested change
console.error('Error creating frame', error);
console.error('Error creating branch', error);

);
return true;
} catch (error) {
console.error('Error updating frame', error);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Typographical error: 'Error updating frame' should likely be 'Error updating branch'.

Suggested change
console.error('Error updating frame', error);
console.error('Error updating branch', error);

await ctx.db.delete(branches).where(eq(branches.id, input.branchId));
return true;
} catch (error) {
console.error('Error deleting frame', error);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Typographical error: 'Error deleting frame' should likely be 'Error deleting branch'.

Suggested change
console.error('Error deleting frame', error);
console.error('Error deleting branch', error);

import { createInsertSchema, createUpdateSchema } from "drizzle-zod";
import { z } from "zod";
import { projects } from "../project";
import { CONVERSATION_MESSAGe_RELATION_NAME, messages } from "./message";
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Typographical issue: The import name 'CONVERSATION_MESSAGe_RELATION_NAME' has an inconsistent casing. Likely, it should be 'CONVERSATION_MESSAGE_RELATION_NAME' with an uppercase 'E' to maintain consistency.

Suggested change
import { CONVERSATION_MESSAGe_RELATION_NAME, messages } from "./message";
import { CONVERSATION_MESSAGE_RELATION_NAME, messages } from "./message";

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.

2 participants