Repository: cartesiancs/vessel
Branch: main
Commit: eb91955c98e1
Files: 575
Total size: 1.8 MB

Directory structure:
gitextract_1sirbdjr/

├── .cargo/
│   └── config.toml
├── .github/
│   ├── GIT.md
│   └── workflows/
│       ├── build.yml
│       └── release-macos.yml
├── .gitignore
├── .prettierrc
├── CODE_OF_CONDUCT.md
├── CODE_RULE.md
├── CONTRIBUTING.md
├── Cargo.toml
├── Dockerfile
├── LICENSE
├── README.md
├── SECURITY.md
├── apps/
│   ├── capsule/
│   │   ├── Cargo.toml
│   │   ├── Dockerfile
│   │   ├── docker-compose.yml
│   │   ├── src/
│   │   │   ├── api/
│   │   │   │   ├── auth.rs
│   │   │   │   ├── chat.rs
│   │   │   │   ├── key.rs
│   │   │   │   ├── mod.rs
│   │   │   │   └── routes.rs
│   │   │   ├── config.rs
│   │   │   ├── crypto/
│   │   │   │   ├── encryption.rs
│   │   │   │   ├── keypair.rs
│   │   │   │   └── mod.rs
│   │   │   ├── error.rs
│   │   │   ├── main.rs
│   │   │   ├── services/
│   │   │   │   ├── jwt.rs
│   │   │   │   ├── mod.rs
│   │   │   │   ├── openai.rs
│   │   │   │   └── usage.rs
│   │   │   └── types/
│   │   │       ├── decrypted.rs
│   │   │       ├── encrypted.rs
│   │   │       └── mod.rs
│   │   └── tests/
│   │       ├── api.test.mjs
│   │       ├── crypto.mjs
│   │       └── package.json
│   ├── client/
│   │   ├── .gitignore
│   │   ├── README.md
│   │   ├── components.json
│   │   ├── eslint.config.js
│   │   ├── index.html
│   │   ├── package.json
│   │   ├── src/
│   │   │   ├── App.tsx
│   │   │   ├── app/
│   │   │   │   ├── pageWrapper/
│   │   │   │   │   └── page-wrapper.tsx
│   │   │   │   └── providers/
│   │   │   │       └── theme-provider.tsx
│   │   │   ├── components/
│   │   │   │   ├── icon/
│   │   │   │   │   └── Logo.tsx
│   │   │   │   └── ui/
│   │   │   │       ├── alert-dialog.tsx
│   │   │   │       ├── alert.tsx
│   │   │   │       ├── avatar.tsx
│   │   │   │       ├── badge.tsx
│   │   │   │       ├── breadcrumb.tsx
│   │   │   │       ├── button.tsx
│   │   │   │       ├── card.tsx
│   │   │   │       ├── command.tsx
│   │   │   │       ├── context-menu.tsx
│   │   │   │       ├── dialog.tsx
│   │   │   │       ├── dropdown-menu.tsx
│   │   │   │       ├── input.tsx
│   │   │   │       ├── label.tsx
│   │   │   │       ├── navigation-menu.tsx
│   │   │   │       ├── popover.tsx
│   │   │   │       ├── resizable.tsx
│   │   │   │       ├── scroll-area.tsx
│   │   │   │       ├── select.tsx
│   │   │   │       ├── separator.tsx
│   │   │   │       ├── sheet.tsx
│   │   │   │       ├── sidebar.tsx
│   │   │   │       ├── skeleton.tsx
│   │   │   │       ├── sonner.tsx
│   │   │   │       ├── switch.tsx
│   │   │   │       ├── table.tsx
│   │   │   │       ├── tabs.tsx
│   │   │   │       ├── textarea.tsx
│   │   │   │       └── tooltip.tsx
│   │   │   ├── contexts/
│   │   │   │   └── SupabaseAuthContext.tsx
│   │   │   ├── entities/
│   │   │   │   ├── configurations/
│   │   │   │   │   ├── api.ts
│   │   │   │   │   ├── codeService.ts
│   │   │   │   │   ├── store.ts
│   │   │   │   │   └── types.ts
│   │   │   │   ├── custom-nodes/
│   │   │   │   │   ├── api.ts
│   │   │   │   │   ├── presets.ts
│   │   │   │   │   ├── store.ts
│   │   │   │   │   └── types.ts
│   │   │   │   ├── device/
│   │   │   │   │   ├── api.ts
│   │   │   │   │   ├── store.ts
│   │   │   │   │   └── types.ts
│   │   │   │   ├── device-token/
│   │   │   │   │   ├── api.ts
│   │   │   │   │   ├── store.ts
│   │   │   │   │   └── types.ts
│   │   │   │   ├── dynamic-dashboard/
│   │   │   │   │   ├── api.ts
│   │   │   │   │   ├── interaction.ts
│   │   │   │   │   ├── layoutResolve.ts
│   │   │   │   │   └── store.ts
│   │   │   │   ├── entity/
│   │   │   │   │   ├── api.ts
│   │   │   │   │   ├── store.ts
│   │   │   │   │   └── types.ts
│   │   │   │   ├── file/
│   │   │   │   │   ├── api.ts
│   │   │   │   │   ├── store.ts
│   │   │   │   │   └── types.ts
│   │   │   │   ├── flow/
│   │   │   │   │   ├── api.ts
│   │   │   │   │   ├── store.ts
│   │   │   │   │   └── types.ts
│   │   │   │   ├── ha/
│   │   │   │   │   ├── api.ts
│   │   │   │   │   ├── store.ts
│   │   │   │   │   └── types.ts
│   │   │   │   ├── integrations/
│   │   │   │   │   ├── api.ts
│   │   │   │   │   ├── store.ts
│   │   │   │   │   └── types.ts
│   │   │   │   ├── log/
│   │   │   │   │   ├── api.ts
│   │   │   │   │   └── types.ts
│   │   │   │   ├── map/
│   │   │   │   │   ├── api.ts
│   │   │   │   │   ├── store.ts
│   │   │   │   │   └── types.ts
│   │   │   │   ├── permission/
│   │   │   │   │   ├── api.ts
│   │   │   │   │   ├── store.ts
│   │   │   │   │   └── types.ts
│   │   │   │   ├── recording/
│   │   │   │   │   ├── api.ts
│   │   │   │   │   ├── index.ts
│   │   │   │   │   ├── store.ts
│   │   │   │   │   └── types.ts
│   │   │   │   ├── role/
│   │   │   │   │   ├── api.ts
│   │   │   │   │   ├── store.ts
│   │   │   │   │   └── types.ts
│   │   │   │   ├── stat/
│   │   │   │   │   ├── api.ts
│   │   │   │   │   ├── store.ts
│   │   │   │   │   └── types.ts
│   │   │   │   ├── tunnel/
│   │   │   │   │   ├── api.ts
│   │   │   │   │   ├── store.ts
│   │   │   │   │   └── types.ts
│   │   │   │   └── user/
│   │   │   │       ├── api.ts
│   │   │   │       ├── store.ts
│   │   │   │       └── types.ts
│   │   │   ├── features/
│   │   │   │   ├── account-switcher/
│   │   │   │   │   └── index.tsx
│   │   │   │   ├── auth/
│   │   │   │   │   ├── AuthInterceptor.tsx
│   │   │   │   │   ├── DefaultAdminPasswordDialog.tsx
│   │   │   │   │   ├── api.ts
│   │   │   │   │   ├── hook.ts
│   │   │   │   │   └── index.tsx
│   │   │   │   ├── code/
│   │   │   │   │   ├── CreateItemDialog.tsx
│   │   │   │   │   ├── FileEditor.tsx
│   │   │   │   │   └── FileTree.tsx
│   │   │   │   ├── configurations/
│   │   │   │   │   ├── ConfigurationActionButton.tsx
│   │   │   │   │   ├── ConfigurationCreate.tsx
│   │   │   │   │   └── ConfigurationCreateButton.tsx
│   │   │   │   ├── darkmode/
│   │   │   │   │   └── mode-toggle.tsx
│   │   │   │   ├── dashboard-swipe/
│   │   │   │   │   ├── DashboardSwipeHeader.tsx
│   │   │   │   │   └── DashboardSwipeLayout.tsx
│   │   │   │   ├── device/
│   │   │   │   │   ├── DeviceCreateButton.tsx
│   │   │   │   │   ├── DeviceDeleteButton.tsx
│   │   │   │   │   ├── DeviceKeyButton.tsx
│   │   │   │   │   └── DeviceUpdateButton.tsx
│   │   │   │   ├── device-token/
│   │   │   │   │   └── DeviceTokenManager.tsx
│   │   │   │   ├── dynamic-dashboard/
│   │   │   │   │   ├── GroupCanvas.tsx
│   │   │   │   │   ├── events/
│   │   │   │   │   │   ├── dispatcher.test.ts
│   │   │   │   │   │   └── dispatcher.ts
│   │   │   │   │   └── panels/
│   │   │   │   │       ├── ButtonPanel.tsx
│   │   │   │   │       ├── FlowPanel.tsx
│   │   │   │   │       └── MapPanel.tsx
│   │   │   │   ├── entity/
│   │   │   │   │   ├── AllEntities.tsx
│   │   │   │   │   ├── AnalyzeMenuItem.tsx
│   │   │   │   │   ├── Card.tsx
│   │   │   │   │   ├── EntityCreateButton.tsx
│   │   │   │   │   ├── EntityDeleteButton.tsx
│   │   │   │   │   ├── EntityUpdateButton.tsx
│   │   │   │   │   ├── SelectPlatforms.tsx
│   │   │   │   │   ├── SelectTypes.tsx
│   │   │   │   │   ├── StateHistorySheet.tsx
│   │   │   │   │   └── useEntitiesData.ts
│   │   │   │   ├── error/
│   │   │   │   │   └── index.tsx
│   │   │   │   ├── flow/
│   │   │   │   │   ├── AddCustomNode.tsx
│   │   │   │   │   ├── Flow.tsx
│   │   │   │   │   ├── Graph.tsx
│   │   │   │   │   ├── Options.tsx
│   │   │   │   │   ├── OptionsVariation.tsx
│   │   │   │   │   ├── RunFlow.tsx
│   │   │   │   │   ├── SelectedItemActions.tsx
│   │   │   │   │   ├── flow-chat/
│   │   │   │   │   │   ├── buildSystemPrompt.ts
│   │   │   │   │   │   ├── executeToolCalls.ts
│   │   │   │   │   │   ├── flowTools.ts
│   │   │   │   │   │   └── index.ts
│   │   │   │   │   ├── flowNode.ts
│   │   │   │   │   ├── flowTypes.ts
│   │   │   │   │   ├── flowUtils.ts
│   │   │   │   │   └── nodes/
│   │   │   │   │       ├── ButtonNode.tsx
│   │   │   │   │       ├── CalcNode.tsx
│   │   │   │   │       ├── HttpNode.tsx
│   │   │   │   │       ├── IntervalNode.tsx
│   │   │   │   │       ├── LogicNode.tsx
│   │   │   │   │       ├── LoopNode.tsx
│   │   │   │   │       ├── MQTTNode.tsx
│   │   │   │   │       ├── NumberNode.tsx
│   │   │   │   │       ├── ProcessingNode.tsx
│   │   │   │   │       ├── TitleNode.tsx
│   │   │   │   │       └── VarNode.tsx
│   │   │   │   ├── flow-log/
│   │   │   │   │   └── FlowLog.tsx
│   │   │   │   ├── footer/
│   │   │   │   │   └── index.tsx
│   │   │   │   ├── gps/
│   │   │   │   │   └── parseGps.ts
│   │   │   │   ├── ha/
│   │   │   │   │   ├── HaEntitiesTable.tsx
│   │   │   │   │   ├── HaStatBlock.tsx
│   │   │   │   │   └── index.tsx
│   │   │   │   ├── integration/
│   │   │   │   │   ├── HA.tsx
│   │   │   │   │   ├── Integration.tsx
│   │   │   │   │   ├── ROS.tsx
│   │   │   │   │   ├── SDR.tsx
│   │   │   │   │   ├── constants.ts
│   │   │   │   │   └── types.ts
│   │   │   │   ├── json/
│   │   │   │   │   └── JsonEditor.tsx
│   │   │   │   ├── llm-chat/
│   │   │   │   │   ├── ChatInput.tsx
│   │   │   │   │   ├── ChatMessage.tsx
│   │   │   │   │   ├── ChatMessages.tsx
│   │   │   │   │   ├── ChatPanel.tsx
│   │   │   │   │   ├── ChatPanelContainer.tsx
│   │   │   │   │   ├── ChatPanelMobile.tsx
│   │   │   │   │   ├── index.tsx
│   │   │   │   │   ├── store.ts
│   │   │   │   │   ├── types.ts
│   │   │   │   │   └── useChatKeyboard.ts
│   │   │   │   ├── log/
│   │   │   │   │   └── index.tsx
│   │   │   │   ├── map/
│   │   │   │   │   ├── CurrentLocationMarker.tsx
│   │   │   │   │   ├── MapViewPersistence.tsx
│   │   │   │   │   ├── index.tsx
│   │   │   │   │   └── style.css
│   │   │   │   ├── map-draw/
│   │   │   │   │   ├── FeatureDetailsPanel.tsx
│   │   │   │   │   ├── FeatureDrawingPreview.tsx
│   │   │   │   │   ├── FeatureEditor.tsx
│   │   │   │   │   ├── FeatureRenderer.tsx
│   │   │   │   │   ├── LayerDialog.tsx
│   │   │   │   │   ├── LayerSidebar.tsx
│   │   │   │   │   ├── MapEvents.tsx
│   │   │   │   │   └── MapToolbar.tsx
│   │   │   │   ├── map-entity/
│   │   │   │   │   ├── EntityDetailsPanel.tsx
│   │   │   │   │   ├── render.tsx
│   │   │   │   │   └── store.ts
│   │   │   │   ├── recording/
│   │   │   │   │   ├── RecordingButton.tsx
│   │   │   │   │   ├── RecordingsList.tsx
│   │   │   │   │   ├── VideoPlaybackDialog.tsx
│   │   │   │   │   ├── components/
│   │   │   │   │   │   ├── AudioWaveformPlayer.tsx
│   │   │   │   │   │   ├── FrameTimeline.tsx
│   │   │   │   │   │   ├── PlaybackControls.tsx
│   │   │   │   │   │   ├── TimeRuler.tsx
│   │   │   │   │   │   ├── VideoControlBar.tsx
│   │   │   │   │   │   └── WaveformCanvas.tsx
│   │   │   │   │   ├── hooks/
│   │   │   │   │   │   ├── useAudioWaveform.ts
│   │   │   │   │   │   ├── useMediaPlayback.ts
│   │   │   │   │   │   └── useVideoFrames.ts
│   │   │   │   │   └── index.ts
│   │   │   │   ├── role/
│   │   │   │   │   ├── RoleDialogs.tsx
│   │   │   │   │   └── RoleForm.tsx
│   │   │   │   ├── ros2/
│   │   │   │   │   └── Ros2Dashboard.tsx
│   │   │   │   ├── rtc/
│   │   │   │   │   ├── AudioLevelBar.tsx
│   │   │   │   │   ├── StreamReceiver.tsx
│   │   │   │   │   ├── WebRTCProvider.tsx
│   │   │   │   │   ├── captureFrame.ts
│   │   │   │   │   ├── rtc.ts
│   │   │   │   │   └── turnService.ts
│   │   │   │   ├── sdr/
│   │   │   │   │   ├── SdrAudioPlayer.tsx
│   │   │   │   │   ├── SdrDashboard.tsx
│   │   │   │   │   └── api.ts
│   │   │   │   ├── search/
│   │   │   │   │   └── search-form.tsx
│   │   │   │   ├── server-resource/
│   │   │   │   │   └── resourceUsage.tsx
│   │   │   │   ├── setup/
│   │   │   │   │   └── index.tsx
│   │   │   │   ├── sidebar/
│   │   │   │   │   ├── footer.tsx
│   │   │   │   │   └── index.tsx
│   │   │   │   ├── stat/
│   │   │   │   │   └── index.tsx
│   │   │   │   ├── topbar/
│   │   │   │   │   ├── index.tsx
│   │   │   │   │   └── style.css
│   │   │   │   ├── user/
│   │   │   │   │   ├── UserRoleAssigner.tsx
│   │   │   │   │   ├── userAdd.tsx
│   │   │   │   │   ├── userDelete.tsx
│   │   │   │   │   ├── userEdit.tsx
│   │   │   │   │   └── userForm.tsx
│   │   │   │   └── ws/
│   │   │   │       ├── FlowUiEventBridge.tsx
│   │   │   │       ├── IsConnected.tsx
│   │   │   │       ├── WebSocketProvider.tsx
│   │   │   │       ├── flowUiAdapters/
│   │   │   │       │   └── toastFlowUiAdapter.ts
│   │   │   │       ├── flowUiEventRouter.test.ts
│   │   │   │       ├── flowUiEventRouter.ts
│   │   │   │       ├── ws.ts
│   │   │   │       └── wsMock.ts
│   │   │   ├── font.css
│   │   │   ├── hooks/
│   │   │   │   ├── use-mobile.ts
│   │   │   │   ├── useDesktopSidecar.ts
│   │   │   │   └── usePreventBackNavigation.ts
│   │   │   ├── index.css
│   │   │   ├── lib/
│   │   │   │   ├── electron.ts
│   │   │   │   ├── geometry-precision.ts
│   │   │   │   ├── geometry.ts
│   │   │   │   ├── jwt.ts
│   │   │   │   ├── storage.ts
│   │   │   │   ├── string.ts
│   │   │   │   ├── supabase.ts
│   │   │   │   ├── time.ts
│   │   │   │   └── utils.ts
│   │   │   ├── main.tsx
│   │   │   ├── pages/
│   │   │   │   ├── auth/
│   │   │   │   │   └── index.tsx
│   │   │   │   ├── code/
│   │   │   │   │   └── index.tsx
│   │   │   │   ├── dashboard/
│   │   │   │   │   ├── DashboardMainPanel.tsx
│   │   │   │   │   └── index.tsx
│   │   │   │   ├── desktop-settings/
│   │   │   │   │   └── index.tsx
│   │   │   │   ├── devices/
│   │   │   │   │   └── index.tsx
│   │   │   │   ├── dynamic-dashboard/
│   │   │   │   │   ├── DynamicDashboardMainPanel.tsx
│   │   │   │   │   ├── NewDynamicDashboardPanel.tsx
│   │   │   │   │   └── index.tsx
│   │   │   │   ├── flow/
│   │   │   │   │   └── index.tsx
│   │   │   │   ├── landing/
│   │   │   │   │   └── index.tsx
│   │   │   │   ├── map/
│   │   │   │   │   └── index.tsx
│   │   │   │   ├── notfound/
│   │   │   │   │   └── index.tsx
│   │   │   │   ├── recordings/
│   │   │   │   │   └── index.tsx
│   │   │   │   ├── settings/
│   │   │   │   │   ├── account.tsx
│   │   │   │   │   ├── config.tsx
│   │   │   │   │   ├── index.tsx
│   │   │   │   │   ├── integration.tsx
│   │   │   │   │   ├── log.tsx
│   │   │   │   │   ├── networks.tsx
│   │   │   │   │   ├── services.tsx
│   │   │   │   │   └── users.tsx
│   │   │   │   └── setup/
│   │   │   │       └── index.tsx
│   │   │   ├── shared/
│   │   │   │   ├── api/
│   │   │   │   │   └── index.ts
│   │   │   │   ├── demo.ts
│   │   │   │   ├── desktop.ts
│   │   │   │   └── mock/
│   │   │   │       ├── mockAdapter.ts
│   │   │   │       └── mockData.ts
│   │   │   ├── vite-env.d.ts
│   │   │   └── widgets/
│   │   │       ├── auth/
│   │   │       │   ├── AuthenticatedLayout.tsx
│   │   │       │   └── TopBarWrapper.tsx
│   │   │       ├── device-list/
│   │   │       │   └── DeviceList.tsx
│   │   │       ├── entity-list/
│   │   │       │   └── EntityList.tsx
│   │   │       ├── role-table/
│   │   │       │   └── RoleList.tsx
│   │   │       └── user-table/
│   │   │           └── UserList.tsx
│   │   ├── tailwind.config.js
│   │   ├── tsconfig.app.json
│   │   ├── tsconfig.app.tsbuildinfo
│   │   ├── tsconfig.json
│   │   ├── tsconfig.node.json
│   │   ├── tsconfig.node.tsbuildinfo
│   │   └── vite.config.ts
│   ├── desktop/
│   │   ├── .gitignore
│   │   ├── README.md
│   │   ├── package.json
│   │   └── src-tauri/
│   │       ├── Cargo.toml
│   │       ├── build.rs
│   │       ├── capabilities/
│   │       │   └── main.json
│   │       ├── entitlements.plist
│   │       ├── icons/
│   │       │   └── icon.icns
│   │       ├── src/
│   │       │   └── main.rs
│   │       └── tauri.conf.json
│   ├── landing/
│   │   ├── .gitignore
│   │   ├── README.md
│   │   ├── components.json
│   │   ├── index.html
│   │   ├── package.json
│   │   ├── public/
│   │   │   └── glb/
│   │   │       ├── Computers.glb
│   │   │       ├── Drone.glb
│   │   │       ├── Engineer.glb
│   │   │       ├── Robot.glb
│   │   │       ├── SecurityCamera.glb
│   │   │       └── Trailer.glb
│   │   ├── src/
│   │   │   ├── App.tsx
│   │   │   ├── components/
│   │   │   │   ├── Footer.tsx
│   │   │   │   ├── Navbar.tsx
│   │   │   │   ├── UsageCharts.tsx
│   │   │   │   ├── sections/
│   │   │   │   │   ├── CapsulePromo.tsx
│   │   │   │   │   ├── Faqs.tsx
│   │   │   │   │   ├── Features.tsx
│   │   │   │   │   ├── FooterCta.tsx
│   │   │   │   │   ├── HeroScene/
│   │   │   │   │   │   ├── CameraRig.tsx
│   │   │   │   │   │   ├── Computers.tsx
│   │   │   │   │   │   ├── HeroScene.tsx
│   │   │   │   │   │   └── SpinningBox.tsx
│   │   │   │   │   ├── IntegrationImage.tsx
│   │   │   │   │   ├── ListCards.tsx
│   │   │   │   │   ├── MidCta.tsx
│   │   │   │   │   ├── ScrollBox.tsx
│   │   │   │   │   ├── ScrollTextReveal.tsx
│   │   │   │   │   ├── SecurityCta.tsx
│   │   │   │   │   ├── SubheadingSection.tsx
│   │   │   │   │   ├── ThreeCards.tsx
│   │   │   │   │   ├── Usecase.tsx
│   │   │   │   │   ├── UsecaseAI.tsx
│   │   │   │   │   └── capsule/
│   │   │   │   │       ├── CapsuleArchitecture.tsx
│   │   │   │   │       ├── CapsuleFaq.tsx
│   │   │   │   │       ├── CapsuleFeatures.tsx
│   │   │   │   │       ├── CapsuleFooterCta.tsx
│   │   │   │   │       ├── CapsuleHero.tsx
│   │   │   │   │       ├── CapsuleHowItWorks.tsx
│   │   │   │   │       ├── CapsuleSecurity.tsx
│   │   │   │   │       ├── CapsuleSubheading.tsx
│   │   │   │   │       ├── CapsuleUsecases.tsx
│   │   │   │   │       └── EncryptionFlowIllustration.tsx
│   │   │   │   └── ui/
│   │   │   │       ├── alert-dialog.tsx
│   │   │   │       ├── button.tsx
│   │   │   │       ├── card.tsx
│   │   │   │       ├── chart.tsx
│   │   │   │       ├── navigation-menu.tsx
│   │   │   │       └── sonner.tsx
│   │   │   ├── contexts/
│   │   │   │   └── AuthContext.tsx
│   │   │   ├── hooks/
│   │   │   │   └── useUsageData.ts
│   │   │   ├── index.css
│   │   │   ├── lib/
│   │   │   │   ├── billing.ts
│   │   │   │   ├── supabase.ts
│   │   │   │   ├── theatre.ts
│   │   │   │   ├── useFadeInOnScroll.ts
│   │   │   │   └── utils.ts
│   │   │   ├── main.tsx
│   │   │   ├── pages/
│   │   │   │   ├── Capsule.tsx
│   │   │   │   ├── CheckoutSuccess.tsx
│   │   │   │   ├── Contact.tsx
│   │   │   │   ├── Dashboard.tsx
│   │   │   │   ├── Disclaimer.tsx
│   │   │   │   ├── Login.tsx
│   │   │   │   ├── Main.tsx
│   │   │   │   ├── Pricing.tsx
│   │   │   │   ├── Privacy.tsx
│   │   │   │   ├── PrivacyPolicy.tsx
│   │   │   │   ├── Roadmap.tsx
│   │   │   │   ├── Terms.tsx
│   │   │   │   └── UseCase.tsx
│   │   │   └── vite-env.d.ts
│   │   ├── tsconfig.app.json
│   │   ├── tsconfig.json
│   │   ├── tsconfig.node.json
│   │   └── vite.config.ts
│   └── server/
│       ├── Cargo.toml
│       ├── build.rs
│       ├── diesel.toml
│       ├── migrations/
│       │   ├── .keep
│       │   ├── 2025-08-07-152325_users/
│       │   │   ├── down.sql
│       │   │   └── up.sql
│       │   ├── 2025-08-22-092047_map/
│       │   │   ├── down.sql
│       │   │   └── up.sql
│       │   ├── 2025-09-08-073323_create_rbac_tables/
│       │   │   ├── down.sql
│       │   │   └── up.sql
│       │   ├── 2025-09-11-151252_custom_node/
│       │   │   ├── down.sql
│       │   │   └── up.sql
│       │   ├── 2025-09-19-060609_create_streams/
│       │   │   ├── down.sql
│       │   │   └── up.sql
│       │   ├── 2026-01-12-023507_dyndashboard/
│       │   │   ├── down.sql
│       │   │   └── up.sql
│       │   └── 2026-01-31-000001_create_recordings/
│       │       ├── down.sql
│       │       └── up.sql
│       ├── src/
│       │   ├── broker_mqtt.rs
│       │   ├── config.rs
│       │   ├── db/
│       │   │   ├── conn.rs
│       │   │   ├── mod.rs
│       │   │   ├── models.rs
│       │   │   ├── repository/
│       │   │   │   ├── dashboards.rs
│       │   │   │   ├── mod.rs
│       │   │   │   ├── rbac.rs
│       │   │   │   ├── recordings.rs
│       │   │   │   └── streams.rs
│       │   │   └── schema.rs
│       │   ├── error.rs
│       │   ├── flow/
│       │   │   ├── binary_store.rs
│       │   │   ├── engine.rs
│       │   │   ├── manager_state.rs
│       │   │   ├── mod.rs
│       │   │   ├── nodes/
│       │   │   │   ├── branch.rs
│       │   │   │   ├── calc.rs
│       │   │   │   ├── custom_node.rs
│       │   │   │   ├── dashboard_event_listener.rs
│       │   │   │   ├── decode_h264.rs
│       │   │   │   ├── decode_opus.rs
│       │   │   │   ├── gst_decoder.rs
│       │   │   │   ├── http.rs
│       │   │   │   ├── interval.rs
│       │   │   │   ├── json_modify.rs
│       │   │   │   ├── json_selector.rs
│       │   │   │   ├── log_message.rs
│       │   │   │   ├── logic_operator.rs
│       │   │   │   ├── mod.rs
│       │   │   │   ├── mqtt_publish.rs
│       │   │   │   ├── mqtt_subscribe.rs
│       │   │   │   ├── rtp_stream_in.rs
│       │   │   │   ├── set_variable.rs
│       │   │   │   ├── set_variable_with_exec.rs
│       │   │   │   ├── show_toast.rs
│       │   │   │   ├── start.rs
│       │   │   │   ├── type_converter.rs
│       │   │   │   ├── websocket_on.rs
│       │   │   │   ├── websocket_send.rs
│       │   │   │   └── yolo_detect.rs
│       │   │   └── types.rs
│       │   ├── handler/
│       │   │   ├── auth.rs
│       │   │   ├── configurations.rs
│       │   │   ├── custom_nodes.rs
│       │   │   ├── dashboards.rs
│       │   │   ├── device_tokens.rs
│       │   │   ├── devices.rs
│       │   │   ├── entities.rs
│       │   │   ├── flows.rs
│       │   │   ├── ha.rs
│       │   │   ├── integration.rs
│       │   │   ├── log.rs
│       │   │   ├── map.rs
│       │   │   ├── mod.rs
│       │   │   ├── permissions.rs
│       │   │   ├── recordings.rs
│       │   │   ├── roles.rs
│       │   │   ├── sdr.rs
│       │   │   ├── stat.rs
│       │   │   ├── state.rs
│       │   │   ├── storage.rs
│       │   │   ├── streams.rs
│       │   │   ├── tunnel.rs
│       │   │   ├── users.rs
│       │   │   └── ws/
│       │   │       ├── dashboard_component_event.rs
│       │   │       ├── handlers.rs
│       │   │       ├── mod.rs
│       │   │       └── webrtc.rs
│       │   ├── init/
│       │   │   ├── db_record.rs
│       │   │   ├── mod.rs
│       │   │   └── streams.rs
│       │   ├── lib.rs
│       │   ├── logo.rs
│       │   ├── main.rs
│       │   ├── media/
│       │   │   ├── adapter.rs
│       │   │   ├── mod.rs
│       │   │   ├── rtp_push.rs
│       │   │   └── rtsp_pull.rs
│       │   ├── recording/
│       │   │   ├── manager.rs
│       │   │   ├── mod.rs
│       │   │   ├── muxer.rs
│       │   │   └── service.rs
│       │   ├── routes.rs
│       │   ├── state.rs
│       │   ├── tunnel_control.rs
│       │   └── utils/
│       │       ├── entity_map.rs
│       │       ├── hash.rs
│       │       ├── mod.rs
│       │       ├── stream_checker.rs
│       │       └── system_configs.rs
│       └── tests/
│           ├── common/
│           │   └── mod.rs
│           ├── recording_manager_tests.rs
│           ├── recordings_repository_tests.rs
│           └── state_tests.rs
├── configs/
│   └── projects.json
├── docs/
│   ├── .vitepress/
│   │   └── config.mts
│   ├── concepts.md
│   ├── dashboard.md
│   ├── features.md
│   ├── flow.md
│   ├── index.md
│   ├── installation.md
│   ├── introduction.md
│   ├── map.md
│   ├── setup.md
│   └── troubleshooting.md
├── example/
│   ├── golang/
│   │   ├── .gitignore
│   │   ├── audio-file/
│   │   │   ├── audio.go
│   │   │   └── audio.sdp
│   │   ├── audio-mic/
│   │   │   └── audio.go
│   │   ├── go.mod
│   │   ├── go.sum
│   │   ├── video-sample/
│   │   │   └── video.go
│   │   ├── video2-sample/
│   │   │   └── video.go
│   │   └── video3-sample/
│   │       └── video.go
│   └── js/
│       └── index.js
├── jest.config.js
├── package.json
├── packages/
│   ├── PKG.md
│   ├── capsule-client/
│   │   ├── package.json
│   │   ├── src/
│   │   │   ├── client.ts
│   │   │   ├── conversation.ts
│   │   │   ├── crypto.ts
│   │   │   ├── index.ts
│   │   │   └── types.ts
│   │   └── tsconfig.json
│   └── custom-node-utils/
│       ├── add_number.py
│       ├── random.py
│       └── vessel.config.json
├── scripts/
│   └── bundle-macos-deps.sh
└── tests/
    ├── TEST.md
    └── api.test.js

================================================
FILE CONTENTS
================================================

================================================
FILE: .cargo/config.toml
================================================
[target.aarch64-apple-darwin]
rustflags = ["-C", "link-args=-Wl,-headerpad_max_install_names"]

[target.x86_64-apple-darwin]
rustflags = ["-C", "link-args=-Wl,-headerpad_max_install_names"]


================================================
FILE: .github/GIT.md
================================================


================================================
FILE: .github/workflows/build.yml
================================================
name: Rust

# on:
#   push:
#     branches: ["main"]
#   pull_request:
#     branches: ["main"]

env:
  CARGO_TERM_COLOR: always
  BINARY_NAME: server

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v4

      - name: Set up Node.js
        uses: actions/setup-node@v4
        with:
          node-version: "20.x"

      - name: Install system dependencies
        run: sudo apt-get update && sudo apt-get install -y libglib2.0-dev pkg-config libgstreamer1.0-dev libgstreamer-plugins-base1.0-dev

      - name: Install npm dependencies
        run: npm install

      - name: Build
        run: cargo build --release --verbose
        working-directory: ./apps/server

      - name: Upload artifact
        uses: actions/upload-artifact@v4
        with:
          name: ${{ env.BINARY_NAME }}
          path: target/release/${{ env.BINARY_NAME }}


================================================
FILE: .github/workflows/release-macos.yml
================================================
name: Release macOS

on:
  push:
    tags: ['v*']
  workflow_dispatch:

jobs:
  build:
    runs-on: macos-14
    timeout-minutes: 60

    steps:
      - uses: actions/checkout@v4

      - uses: actions/setup-node@v4
        with:
          node-version: '20'
          cache: 'npm'

      - uses: dtolnay/rust-toolchain@stable
        with:
          targets: aarch64-apple-darwin

      - uses: Swatinem/rust-cache@v2
        with:
          workspaces: |
            .
            apps/desktop/src-tauri

      - name: Install GStreamer & GLib
        run: brew install gstreamer glib pkg-config

      - name: Import code signing certificate
        env:
          APPLE_CERTIFICATE: ${{ secrets.APPLE_CERTIFICATE }}
          APPLE_CERTIFICATE_PASSWORD: ${{ secrets.APPLE_CERTIFICATE_PASSWORD }}
          KEYCHAIN_PASSWORD: ${{ secrets.KEYCHAIN_PASSWORD }}
        run: |
          KEYCHAIN_PATH="$RUNNER_TEMP/build.keychain-db"
          CERT_PATH="$RUNNER_TEMP/cert.p12"

          security create-keychain -p "$KEYCHAIN_PASSWORD" "$KEYCHAIN_PATH"
          security set-keychain-settings -lut 21600 "$KEYCHAIN_PATH"
          security unlock-keychain -p "$KEYCHAIN_PASSWORD" "$KEYCHAIN_PATH"

          echo -n "$APPLE_CERTIFICATE" | base64 --decode -o "$CERT_PATH"
          security import "$CERT_PATH" -P "$APPLE_CERTIFICATE_PASSWORD" \
            -A -t cert -f pkcs12 -k "$KEYCHAIN_PATH"
          security set-key-partition-list -S apple-tool:,apple:,codesign: \
            -s -k "$KEYCHAIN_PASSWORD" "$KEYCHAIN_PATH"

          security list-keychain -d user -s "$KEYCHAIN_PATH" login.keychain
          security default-keychain -s "$KEYCHAIN_PATH"

          security find-identity -v -p codesigning "$KEYCHAIN_PATH"

      - name: Install npm dependencies
        run: npm ci

      - name: Build, sign and notarize
        env:
          APPLE_SIGNING_IDENTITY: ${{ secrets.APPLE_SIGNING_IDENTITY }}
          APPLE_ID: ${{ secrets.APPLE_ID }}
          APPLE_PASSWORD: ${{ secrets.APPLE_PASSWORD }}
          APPLE_TEAM_ID: ${{ secrets.APPLE_TEAM_ID }}
          APPLE_ENTITLEMENTS_PATH: ${{ github.workspace }}/apps/desktop/src-tauri/entitlements.plist
          VITE_SUPABASE_URL: ${{ secrets.VITE_SUPABASE_URL }}
          VITE_SUPABASE_ANON_KEY: ${{ secrets.VITE_SUPABASE_ANON_KEY }}
          VITE_CAPSULE_URL: ${{ secrets.VITE_CAPSULE_URL }}
        working-directory: apps/desktop
        run: npm run tauri -- build --target aarch64-apple-darwin

      - name: Notarize and staple DMG
        env:
          APPLE_ID: ${{ secrets.APPLE_ID }}
          APPLE_PASSWORD: ${{ secrets.APPLE_PASSWORD }}
          APPLE_TEAM_ID: ${{ secrets.APPLE_TEAM_ID }}
        run: |
          set -e
          DMG=$(ls target/aarch64-apple-darwin/release/bundle/dmg/*.dmg | head -1)
          echo "==> Submitting DMG for notarization: $DMG"
          xcrun notarytool submit "$DMG" \
            --apple-id "$APPLE_ID" \
            --password "$APPLE_PASSWORD" \
            --team-id "$APPLE_TEAM_ID" \
            --wait
          echo "==> Stapling DMG"
          xcrun stapler staple "$DMG"

      - name: Verify signature and notarization
        run: |
          set -e
          BUNDLE_DIR="target/aarch64-apple-darwin/release/bundle"
          APP=$(ls -d "$BUNDLE_DIR"/macos/*.app | head -1)
          DMG=$(ls "$BUNDLE_DIR"/dmg/*.dmg | head -1)

          echo "==> App: $APP"
          echo "==> DMG: $DMG"

          codesign -dv --verbose=4 "$APP" 2>&1 | grep -E 'Authority|TeamIdentifier|Runtime|Identifier'
          codesign --verify --deep --strict --verbose=2 "$APP"
          spctl -a -vv -t exec "$APP"
          xcrun stapler validate "$DMG"
          spctl -a -vv -t install "$DMG"

      - name: Upload DMG artifact
        uses: actions/upload-artifact@v4
        with:
          name: vessel-macos-arm64
          path: target/aarch64-apple-darwin/release/bundle/dmg/*.dmg
          if-no-files-found: error

      - name: Publish to GitHub Release
        if: startsWith(github.ref, 'refs/tags/')
        uses: softprops/action-gh-release@v2
        with:
          files: target/aarch64-apple-darwin/release/bundle/dmg/*.dmg
          draft: true
          generate_release_notes: true

      - name: Cleanup keychain
        if: always()
        run: security delete-keychain "$RUNNER_TEMP/build.keychain-db" || true


================================================
FILE: .gitignore
================================================
/node_modules
docs/.vitepress/dist
docs/.vitepress/cache
/target
.env
database.db
database.db-*
.DS_Store
*.log.*
*.log
/storage
/config.toml
/.venv
/recordings
/packages/*/node_modules
/packages/*/dist
/packages/*/**/node_modules
/apps/*/**/node_modules
/supabase

================================================
FILE: .prettierrc
================================================
{
  "semi": true,
  "singleQuote": false,
  "jsxSingleQuote": true,
  "tabWidth": 2,
  "trailingComma": "all",
  "arrowParens": "always"
}


================================================
FILE: CODE_OF_CONDUCT.md
================================================
# Contributor Covenant Code of Conduct

## Our Pledge

We as members, contributors, and leaders pledge to make participation in our
community a harassment-free experience for everyone, regardless of age, body
size, visible or invisible disability, ethnicity, sex characteristics, gender
identity and expression, level of experience, education, socio-economic status,
nationality, personal appearance, race, religion, or sexual identity
and orientation.

We pledge to act and interact in ways that contribute to an open, welcoming,
diverse, inclusive, and healthy community.

## Our Standards

Examples of behavior that contributes to a positive environment for our
community include:

- Demonstrating empathy and kindness toward other people
- Being respectful of differing opinions, viewpoints, and experiences
- Giving and gracefully accepting constructive feedback
- Accepting responsibility and apologizing to those affected by our mistakes,
  and learning from the experience
- Focusing on what is best not just for us as individuals, but for the
  overall community

Examples of unacceptable behavior include:

- The use of sexualized language or imagery, and sexual attention or
  advances of any kind
- Trolling, insulting or derogatory comments, and personal or political attacks
- Public or private harassment
- Publishing others' private information, such as a physical or email
  address, without their explicit permission
- Other conduct which could reasonably be considered inappropriate in a
  professional setting

## Enforcement Responsibilities

Community leaders are responsible for clarifying and enforcing our standards of
acceptable behavior and will take appropriate and fair corrective action in
response to any behavior that they deem inappropriate, threatening, offensive,
or harmful.

Community leaders have the right and responsibility to remove, edit, or reject
comments, commits, code, wiki edits, issues, and other contributions that are
not aligned to this Code of Conduct, and will communicate reasons for moderation
decisions when appropriate.

## Scope

This Code of Conduct applies within all community spaces, and also applies when
an individual is officially representing the community in public spaces.
Examples of representing our community include using an official e-mail address,
posting via an official social media account, or acting as an appointed
representative at an online or offline event.

## Enforcement

Instances of abusive, harassing, or otherwise unacceptable behavior may be
reported to the community leaders responsible for enforcement at
3457xc@gmail.com.
All complaints will be reviewed and investigated promptly and fairly.

All community leaders are obligated to respect the privacy and security of the
reporter of any incident.

## Enforcement Guidelines

Community leaders will follow these Community Impact Guidelines in determining
the consequences for any action they deem in violation of this Code of Conduct:

### 1. Correction

**Community Impact**: Use of inappropriate language or other behavior deemed
unprofessional or unwelcome in the community.

**Consequence**: A private, written warning from community leaders, providing
clarity around the nature of the violation and an explanation of why the
behavior was inappropriate. A public apology may be requested.

### 2. Warning

**Community Impact**: A violation through a single incident or series
of actions.

**Consequence**: A warning with consequences for continued behavior. No
interaction with the people involved, including unsolicited interaction with
those enforcing the Code of Conduct, for a specified period of time. This
includes avoiding interactions in community spaces as well as external channels
like social media. Violating these terms may lead to a temporary or
permanent ban.

### 3. Temporary Ban

**Community Impact**: A serious violation of community standards, including
sustained inappropriate behavior.

**Consequence**: A temporary ban from any sort of interaction or public
communication with the community for a specified period of time. No public or
private interaction with the people involved, including unsolicited interaction
with those enforcing the Code of Conduct, is allowed during this period.
Violating these terms may lead to a permanent ban.

### 4. Permanent Ban

**Community Impact**: Demonstrating a pattern of violation of community
standards, including sustained inappropriate behavior, harassment of an
individual, or aggression toward or disparagement of classes of individuals.

**Consequence**: A permanent ban from any sort of public interaction within
the community.

## Attribution

This Code of Conduct is adapted from the [Contributor Covenant][homepage],
version 2.0, available at
https://www.contributor-covenant.org/version/2/0/code_of_conduct.html.

Community Impact Guidelines were inspired by [Mozilla's code of conduct
enforcement ladder](https://github.com/mozilla/diversity).

[homepage]: https://www.contributor-covenant.org

For answers to common questions about this code of conduct, see the FAQ at
https://www.contributor-covenant.org/faq. Translations are available at
https://www.contributor-covenant.org/translations.


================================================
FILE: CODE_RULE.md
================================================
# Coding Rules

This document establishes the official coding standards for all mission-critical software. Adherence to these rules is mandatory to ensure maximum safety, reliability, and security. The guiding principle is to produce code that is robust, predictable, and resilient under all operating conditions by managing the entire development lifecycle, not just the code itself.

## ## Core Principles

### 1. Fail-Safe Principle

All systems must be designed to default to a safe state in the event of any failure. The software must anticipate failures and handle them gracefully without compromising the integrity of the mission or system.

- **R1.1: No Silent Failures.** All fallible operations **must** return an explicit result type (e.g., `Result<T, E>` or a `Promise<T>`). The consuming code **must** exhaustively handle both success and failure states. Linter rules must be configured to fail the build on any unhandled error or result.
- **R1.2: Graceful Degradation.** In the event of a non-critical component failure, the system must continue to operate, albeit in a degraded mode. The software must be able to isolate faults and prevent them from cascading.
- **R1.3: Explicit Resource Management.** Leverage language features for automatic resource cleanup where available (e.g., RAII). For resources not managed automatically, cleanup **must** be guaranteed using deterministic patterns like `try...finally` blocks.

### 2. Deterministic Behavior

The software's output must depend solely on its inputs, and its execution time must be predictable and bounded. Non-deterministic behavior introduces unacceptable risk.

- **R2.1: Minimize and Isolate Dynamic Allocation.** After an initial setup phase, dynamic heap allocation should be avoided in performance-critical loops. Where unavoidable, use patterns like object pooling and pre-allocated buffers with fixed capacity to control memory usage.
- **R2.2: Forbid Recursion.** Recursive function calls are prohibited. All recursive algorithms **must** be implemented iteratively to prevent stack overflow errors.
- **R2.3: Avoid Floating-Point Ambiguity.** Never compare floating-point numbers for exact equality. Comparisons **must** be made within a defined tolerance (`epsilon`).
- **R2.4: Use Fixed-Size Data Structures.** All data structures, including arrays and buffers, **must** have a fixed, statically defined maximum size to prevent buffer overflows.
- **R2.5: Use Named Constants over Magic Numbers.** Do not use unexplained numeric literals. Use the language's constant features (`const`, `static`, `enum`) to define all such values.

### 3. Security by Design

Security is not an afterthought; it is an integral part of the design process. The system must be architected to be secure from the ground up.

- **R3.1: Default to Secure.** The default state of any system parameter **must** be the most secure state. Permissions should be denied by default and only explicitly granted.
- **R3.2: Validate All External Inputs.** All data originating from outside a trusted boundary is considered hostile. It **must** be validated at runtime before use, as compile-time type safety is insufficient for external data.
- **R3.3: Principle of Least Privilege.** Each software module **must** only be granted the permissions and access rights essential for its designated task.
- **R3.4: Keep it Simple.** Code complexity is the enemy of security. Avoid complex control flows and deep nesting. Prefer simple, linear logic that is easy to inspect and verify.
- **R3.5: Ensure Data Integrity.** Use mechanisms like CRCs or checksums to verify the integrity of critical data, especially during transmission or storage.

### 4. Concurrency and Real-Time Behavior

Systems with multiple threads or processes must behave predictably and meet their operational deadlines without fail.

- **R4.1: Avoid Shared Mutable State.** The modification of shared data by multiple threads should be forbidden or strictly controlled. Use language-enforced safety mechanisms where available, and prefer message-passing architectures over shared memory.
- **R4.2: Bounded Execution Time.** All tasks and functions **must** have a provable worst-case execution time (WCET) to ensure the system can meet its real-time deadlines.
- **R4.3: Handle Interrupts with Extreme Care.** Interrupt Service Routines (ISRs) **must** be as short and simple as possible. Forbid any non-deterministic operations within an ISR.

### 5. Verification and Validation (V&V)

It is not enough for code to be well-written; it must be proven to meet its requirements correctly.

- **R5.1: Traceability to Requirements.** Every line of code **must** trace back to a specific, documented requirement. No code should exist that does not fulfill a requirement.
- **R5.2: Mandatory Peer Reviews.** All code **must** be reviewed by at least one other qualified engineer before being integrated. This is a critical step for quality assurance.
- **R5.3: Strive for 100% Test Coverage.** All code **must** be unit-tested, with the goal of achieving 100% statement and branch coverage to ensure every execution path is verified.

### 6. Toolchain and Dependency Integrity

The reliability of the final product depends on the reliability of the tools and libraries used to create it.

- **R6.1: Vet All Third-Party Code.** Any external library or open-source component **must** undergo a rigorous vetting process for security and reliability before it can be used.
- **R6.2: Lock Compiler and Dependency Versions.** The exact versions of the compiler, libraries, and all other build tools **must** be specified and locked using the language's standard lock file mechanism (e.g., `Cargo.lock`, `package-lock.json`).

---

## Minor Rule

### m1. Everything is Strict

A strict development environment minimizes ambiguity and catches errors at the earliest possible stage.

- **R_m1.1: Zero Tolerance for Warnings.** All available compiler and linter checks **must** be enabled at their strictest levels. Any build that produces a warning is considered a failed build and **must** be corrected.
- **R_m1.2: Enforce a Single Coding Standard.** All code **must** be formatted using the standard automated tool for the language (e.g., `rustfmt`, `prettier`). The formatter **must** be run as a pre-commit hook.
- **R_m1.3: Use Comprehensive Static Analysis.** All code **must** pass a comprehensive suite of static analysis tools (e.g., `Clippy`, `ESLint`) without errors before being committed. The linter's ruleset **must** be configured for maximum strictness.


================================================
FILE: CONTRIBUTING.md
================================================
# CONTRIBUTING

...

## Projects Structure

`/apps/client` Frontend code with Vite.  
`/apps/server` Rust server that connects the physical device to the front end.  
`/apps/sentinel-go` Audio transfer test code written in Golang.  
`/apps/landing` Landing page code https://vessel.cartesiancs.com

`/docs` Document code https://vessel.cartesiancs.com/docs  
`/tests` Test code.


================================================
FILE: Cargo.toml
================================================
[workspace]
members = [
    "apps/server",
    "apps/desktop/src-tauri",
    "apps/capsule",
]
resolver = "2"


================================================
FILE: Dockerfile
================================================
FROM rust:latest AS builder

RUN apt-get update && apt-get install -y cmake build-essential libglib2.0-dev pkg-config musl-tools libgstreamer1.0-dev libgstreamer-plugins-base1.0-dev python3-dev

RUN curl -fsSL https://deb.nodesource.com/setup_20.x | bash - && \
    apt-get install -y nodejs

WORKDIR /app

COPY Cargo.toml Cargo.lock ./
COPY package*.json ./

RUN npm install

COPY ./apps ./apps

WORKDIR /app/apps/client

RUN npm install

WORKDIR /app/apps/server

RUN cargo build --release

WORKDIR /app/target/release

CMD ["./server"]

================================================
FILE: LICENSE
================================================
                                 Apache License
                           Version 2.0, January 2004
                        http://www.apache.org/licenses/

   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION

   1. Definitions.

      "License" shall mean the terms and conditions for use, reproduction,
      and distribution as defined by Sections 1 through 9 of this document.

      "Licensor" shall mean the copyright owner or entity authorized by
      the copyright owner that is granting the License.

      "Legal Entity" shall mean the union of the acting entity and all
      other entities that control, are controlled by, or are under common
      control with that entity. For the purposes of this definition,
      "control" means (i) the power, direct or indirect, to cause the
      direction or management of such entity, whether by contract or
      otherwise, or (ii) ownership of fifty percent (50%) or more of the
      outstanding shares, or (iii) beneficial ownership of such entity.

      "You" (or "Your") shall mean an individual or Legal Entity
      exercising permissions granted by this License.

      "Source" form shall mean the preferred form for making modifications,
      including but not limited to software source code, documentation
      source, and configuration files.

      "Object" form shall mean any form resulting from mechanical
      transformation or translation of a Source form, including but
      not limited to compiled object code, generated documentation,
      and conversions to other media types.

      "Work" shall mean the work of authorship, whether in Source or
      Object form, made available under the License, as indicated by a
      copyright notice that is included in or attached to the work
      (an example is provided in the Appendix below).

      "Derivative Works" shall mean any work, whether in Source or Object
      form, that is based on (or derived from) the Work and for which the
      editorial revisions, annotations, elaborations, or other modifications
      represent, as a whole, an original work of authorship. For the purposes
      of this License, Derivative Works shall not include works that remain
      separable from, or merely link (or bind by name) to the interfaces of,
      the Work and Derivative Works thereof.

      "Contribution" shall mean any work of authorship, including
      the original version of the Work and any modifications or additions
      to that Work or Derivative Works thereof, that is intentionally
      submitted to Licensor for inclusion in the Work by the copyright owner
      or by an individual or Legal Entity authorized to submit on behalf of
      the copyright owner. For the purposes of this definition, "submitted"
      means any form of electronic, verbal, or written communication sent
      to the Licensor or its representatives, including but not limited to
      communication on electronic mailing lists, source code control systems,
      and issue tracking systems that are managed by, or on behalf of, the
      Licensor for the purpose of discussing and improving the Work, but
      excluding communication that is conspicuously marked or otherwise
      designated in writing by the copyright owner as "Not a Contribution."

      "Contributor" shall mean Licensor and any individual or Legal Entity
      on behalf of whom a Contribution has been received by Licensor and
      subsequently incorporated within the Work.

   2. Grant of Copyright License. Subject to the terms and conditions of
      this License, each Contributor hereby grants to You a perpetual,
      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
      copyright license to reproduce, prepare Derivative Works of,
      publicly display, publicly perform, sublicense, and distribute the
      Work and such Derivative Works in Source or Object form.

   3. Grant of Patent License. Subject to the terms and conditions of
      this License, each Contributor hereby grants to You a perpetual,
      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
      (except as stated in this section) patent license to make, have made,
      use, offer to sell, sell, import, and otherwise transfer the Work,
      where such license applies only to those patent claims licensable
      by such Contributor that are necessarily infringed by their
      Contribution(s) alone or by combination of their Contribution(s)
      with the Work to which such Contribution(s) was submitted. If You
      institute patent litigation against any entity (including a
      cross-claim or counterclaim in a lawsuit) alleging that the Work
      or a Contribution incorporated within the Work constitutes direct
      or contributory patent infringement, then any patent licenses
      granted to You under this License for that Work shall terminate
      as of the date such litigation is filed.

   4. Redistribution. You may reproduce and distribute copies of the
      Work or Derivative Works thereof in any medium, with or without
      modifications, and in Source or Object form, provided that You
      meet the following conditions:

      (a) You must give any other recipients of the Work or
          Derivative Works a copy of this License; and

      (b) You must cause any modified files to carry prominent notices
          stating that You changed the files; and

      (c) You must retain, in the Source form of any Derivative Works
          that You distribute, all copyright, patent, trademark, and
          attribution notices from the Source form of the Work,
          excluding those notices that do not pertain to any part of
          the Derivative Works; and

      (d) If the Work includes a "NOTICE" text file as part of its
          distribution, then any Derivative Works that You distribute must
          include a readable copy of the attribution notices contained
          within such NOTICE file, excluding those notices that do not
          pertain to any part of the Derivative Works, in at least one
          of the following places: within a NOTICE text file distributed
          as part of the Derivative Works; within the Source form or
          documentation, if provided along with the Derivative Works; or,
          within a display generated by the Derivative Works, if and
          wherever such third-party notices normally appear. The contents
          of the NOTICE file are for informational purposes only and
          do not modify the License. You may add Your own attribution
          notices within Derivative Works that You distribute, alongside
          or as an addendum to the NOTICE text from the Work, provided
          that such additional attribution notices cannot be construed
          as modifying the License.

      You may add Your own copyright statement to Your modifications and
      may provide additional or different license terms and conditions
      for use, reproduction, or distribution of Your modifications, or
      for any such Derivative Works as a whole, provided Your use,
      reproduction, and distribution of the Work otherwise complies with
      the conditions stated in this License.

   5. Submission of Contributions. Unless You explicitly state otherwise,
      any Contribution intentionally submitted for inclusion in the Work
      by You to the Licensor shall be under the terms and conditions of
      this License, without any additional terms or conditions.
      Notwithstanding the above, nothing herein shall supersede or modify
      the terms of any separate license agreement you may have executed
      with Licensor regarding such Contributions.

   6. Trademarks. This License does not grant permission to use the trade
      names, trademarks, service marks, or product names of the Licensor,
      except as required for reasonable and customary use in describing the
      origin of the Work and reproducing the content of the NOTICE file.

   7. Disclaimer of Warranty. Unless required by applicable law or
      agreed to in writing, Licensor provides the Work (and each
      Contributor provides its Contributions) on an "AS IS" BASIS,
      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
      implied, including, without limitation, any warranties or conditions
      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
      PARTICULAR PURPOSE. You are solely responsible for determining the
      appropriateness of using or redistributing the Work and assume any
      risks associated with Your exercise of permissions under this License.

   8. Limitation of Liability. In no event and under no legal theory,
      whether in tort (including negligence), contract, or otherwise,
      unless required by applicable law (such as deliberate and grossly
      negligent acts) or agreed to in writing, shall any Contributor be
      liable to You for damages, including any direct, indirect, special,
      incidental, or consequential damages of any character arising as a
      result of this License or out of the use or inability to use the
      Work (including but not limited to damages for loss of goodwill,
      work stoppage, computer failure or malfunction, or any and all
      other commercial damages or losses), even if such Contributor
      has been advised of the possibility of such damages.

   9. Accepting Warranty or Additional Liability. While redistributing
      the Work or Derivative Works thereof, You may choose to offer,
      and charge a fee for, acceptance of support, warranty, indemnity,
      or other liability obligations and/or rights consistent with this
      License. However, in accepting such obligations, You may act only
      on Your own behalf and on Your sole responsibility, not on behalf
      of any other Contributor, and only if You agree to indemnify,
      defend, and hold each Contributor harmless for any liability
      incurred by, or claims asserted against, such Contributor by reason
      of your accepting any such warranty or additional liability.

   END OF TERMS AND CONDITIONS

   APPENDIX: How to apply the Apache License to your work.

      To apply the Apache License to your work, attach the following
      boilerplate notice, with the fields enclosed by brackets "[]"
      replaced with your own identifying information. (Don't include
      the brackets!)  The text should be enclosed in the appropriate
      comment syntax for the file format. We also recommend that a
      file or class name and description of purpose be included on the
      same "printed page" as the copyright notice for easier
      identification within third-party archives.

   Copyright [yyyy] [name of copyright owner]

   Licensed under the Apache License, Version 2.0 (the "License");
   you may not use this file except in compliance with the License.
   You may obtain a copy of the License at

       http://www.apache.org/licenses/LICENSE-2.0

   Unless required by applicable law or agreed to in writing, software
   distributed under the License is distributed on an "AS IS" BASIS,
   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
   See the License for the specific language governing permissions and
   limitations under the License.


================================================
FILE: README.md
================================================
<p align='center'>
<img src='.github/icon.png' width='140' />
<h1 align='center'>Vessel</h1>

<p align='center'>
<a href="https://github.com/cartesiancs/vessel/blob/main/LICENSE"><img src="https://img.shields.io/github/license/cartesiancs/vessel?style=for-the-badge" /></a>
<a href="https://github.com/cartesiancs/vessel/stargazers"><img src="https://img.shields.io/github/stars/cartesiancs/vessel?style=for-the-badge" /></a>
<a href="https://github.com/cartesiancs/vessel/issues"><img src="https://img.shields.io/github/issues/cartesiancs/vessel?style=for-the-badge" /></a>
<a href="https://vessel.cartesiancs.com/"><img src="https://img.shields.io/badge/Website-Live-2563eb?style=for-the-badge" /></a>
<a href="https://vessel.cartesiancs.com/docs/introduction"><img src="https://img.shields.io/badge/Docs-Ready-7c3aed?style=for-the-badge" /></a>
</p>

<p align='center'>
<a href="https://vessel.cartesiancs.com/">Visit Website</a> · <a href="https://github.com/cartesiancs/vessel/issues">Report Bugs</a> · <a href="https://vessel.cartesiancs.com/docs/introduction">Docs</a> · <a href="https://vsl.cartesiancs.com/">App</a>
</p>

## About The Project

![banner](./.github/banner.png)

Vessel is the **C2 (Command & Control) software** for connecting, monitoring, and orchestrating arrays of physical sensors via an intuitive, visual flow-based interface.

This project is to build a "proactive security system". To achieve this, the following three functions are necessary:

1. **Connect** to Physical Device
2. **Detect** Threats
3. **Control** and Respond

This project solves the problems with existing **home security systems**. Current systems fail to protect against burglaries, trespassing, theft and even war.

So we plan to open-source the technology used in existing defense systems.

This system allows you to analyze video and audio sources with AI/ML technology.

And automate actions through Flow-based operations. The Flow provides the flexibility to select multiple AI models and connect them directly to stream sources.

When everything is implemented, individuals will be able to protect themselves from any threats.

> [!NOTE]
> 🚧 <strong>This project is under active development.</strong> Some features may be unstable or subject to change without notice.

## Features

- Connect all sensers (MQTT, RTP, RTSP, HTTP, ...)
- RTP Audio & Video Streaming
- RTSP Video Streaming
- Real-time streaming support
- Flow Visual Logic
- Custom Script Language Support
- Pub/Sub MQTT with Flow
- Map based UI
- Home Assistant Integration
- ROS2 Integration
- External access support
- Capsule (Zero-Knowledge LLM Call) security.
- Local-first design, Offline-first design.

## Develop

Get your local copy up and running.

#### Prerequisites

- [Rust](https://www.rust-lang.org/) & Cargo
- [Node.js](https://nodejs.org/en/) (v18+) and npm
- [gstreamer](https://gstreamer.freedesktop.org/documentation/rust/git/docs/gstreamer/index.html)
- [mosquitto (MQTT)](https://mosquitto.org/) (additional)

### Option1. Run normally

##### 1. Server Setup

```bash
# 1. Clone the repository
git clone https://github.com/cartesiancs/vessel.git
cd vessel/apps/server

# 2. Copy and configure environment variables
cp .env.example .env
# nano .env (Modify if needed)

# 3. Run database migrations
diesel setup
diesel migration run

# 4. Run the server
cargo run
```

##### 2. Client Setup

```bash
# 1. Install dependencies
npm install

# 2. Run the development server
npm run client
```

### Option2. Run Docker

```bash
docker build -t server .

docker run -p 0.0.0.0:6174:6174 server:latest
```

### Option3. Desktop (Tauri)

```bash
npm run desktop
```

Builds the Rust server sidecar in release mode, starts the Vite dev server for the client, and launches the Tauri shell. For a packaged build use `npm run desktop:build`.

## Compile

This command compiles the entire project, including both the server and the client, into a single executable file.

```bash
npm run build
```

The compiled binary, named 'server', will be located in the target/release directory.

> To run the server executable, you must have a .env file in the same directory (target/release).

## Principles

1. Local-first
2. Offline-first
3. Ultimate control rests with the user

## Troubleshooting

> A more detailed troubleshooting guide will be available soon.

## Roadmap

Please visit our Roadmap page below:

[Roadmap Page >](https://vessel.cartesiancs.com/roadmap)

## Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

Please refer to our [CONTRIBUTING.md](CONTRIBUTING.md) for details.

## Contributors

 <a href = "https://github.com/cartesiancs/vessel/graphs/contributors">
   <img src = "https://contrib.rocks/image?repo=cartesiancs/vessel"/>
 </a>

## License

Distributed under the Apache-2.0 License. See [LICENSE](LICENSE) for more information.

## Disclaimer

This project is intended for academic and research purposes only. It is designed to facilitate the connection and control of physical devices. All responsibility for its use lies with the user.


================================================
FILE: SECURITY.md
================================================
# Security

Please report security issues to `3457xc@gmail.com`.

This email is the maintainer's personal and public email, allowing for immediate responses to security issues. Alternatively, you may also send a message via LinkedIn DM. My LinkedIn profile is: [in/huhhyeongjun](https://www.linkedin.com/in/huhhyeongjun/)


================================================
FILE: apps/capsule/Cargo.toml
================================================
[package]
name = "capsule"
version = "0.1.0"
edition = "2021"

[dependencies]
# Web Framework
tokio = { version = "1", features = ["full"] }
axum = { version = "0.7", features = ["json"] }
tower-http = { version = "0.5", features = ["cors", "trace", "limit"] }
tower = "0.5"

# HTTP types
http = "1"

# Serialization
serde = { version = "1", features = ["derive"] }
serde_json = "1"

# Cryptography
chacha20poly1305 = "0.10"
x25519-dalek = { version = "2", features = ["static_secrets"] }
rand = "0.8"
zeroize = { version = "1", features = ["derive"] }
base64 = "0.22"
hkdf = "0.12"
sha2 = "0.10"

# OpenAI
reqwest = { version = "0.12", features = ["json", "stream"] }
async-stream = "0.3"
futures-util = "0.3"
tokio-stream = "0.1"

# JWT & Auth
jsonwebtoken = "9"
async-trait = "0.1"
chrono = { version = "0.4", features = ["serde"] }
axum-extra = { version = "0.9", features = ["typed-header"] }

# Utilities
anyhow = "1"
thiserror = "1"
tracing = "0.1"
tracing-subscriber = { version = "0.3", features = ["env-filter"] }
dotenvy = "0.15"

[[bin]]
name = "capsule"
path = "src/main.rs"


================================================
FILE: apps/capsule/Dockerfile
================================================
# Build stage
FROM rust:1.75-alpine AS builder

# 빌드 의존성 설치
RUN apk add --no-cache musl-dev pkgconfig openssl-dev

WORKDIR /app

# 의존성 캐싱을 위해 Cargo 파일 먼저 복사
COPY Cargo.toml Cargo.lock* ./

# 더미 소스로 의존성 빌드 (캐싱)
RUN mkdir src && \
    echo "fn main() {}" > src/main.rs && \
    cargo build --release && \
    rm -rf src

# 실제 소스 복사 및 빌드
COPY src ./src
RUN touch src/main.rs && cargo build --release

# Runtime stage
FROM alpine:3.19

# 보안: non-root 사용자 생성
RUN addgroup -g 1001 capsule && \
    adduser -u 1001 -G capsule -s /bin/sh -D capsule

# 런타임 의존성
RUN apk add --no-cache ca-certificates

WORKDIR /app

# 빌드된 바이너리 복사
COPY --from=builder /app/target/release/capsule .

# 소유권 변경
RUN chown -R capsule:capsule /app

# non-root로 실행
USER capsule

# 포트 노출
EXPOSE 3000

# 헬스체크
HEALTHCHECK --interval=30s --timeout=3s --start-period=5s --retries=3 \
    CMD wget --no-verbose --tries=1 --spider http://localhost:3000/health || exit 1

# 환경 변수
ENV RUST_LOG=info
ENV PORT=3000

# 실행
CMD ["./capsule"]


================================================
FILE: apps/capsule/docker-compose.yml
================================================
version: '3.8'

services:
  capsule:
    build:
      context: .
      dockerfile: Dockerfile
    ports:
      - "3000:3000"
    environment:
      - RUST_LOG=info
      - PORT=3000
      - OPENAI_API_KEY=${OPENAI_API_KEY}
      - OPENAI_MODEL=${OPENAI_MODEL:-gpt-4o}
    deploy:
      resources:
        limits:
          memory: 256M
          cpus: '0.5'
    # 보안 설정
    security_opt:
      - no-new-privileges:true
    # 읽기 전용 파일시스템 (민감 데이터 디스크 저장 방지)
    read_only: true
    # 임시 파일용 tmpfs
    tmpfs:
      - /tmp
    # 재시작 정책
    restart: unless-stopped
    # 헬스체크
    healthcheck:
      test: ["CMD", "wget", "--no-verbose", "--tries=1", "--spider", "http://localhost:3000/health"]
      interval: 30s
      timeout: 3s
      retries: 3
      start_period: 5s


================================================
FILE: apps/capsule/src/api/auth.rs
================================================
//! Authentication extractor for protected endpoints
//!
//! Extracts and validates JWT tokens from Authorization header.
//! Returns AuthUser with user_id for downstream handlers.

use axum::{
    extract::FromRequestParts,
    http::{request::Parts, StatusCode},
    response::{IntoResponse, Response},
    Json, RequestPartsExt,
};
use axum_extra::{
    headers::{authorization::Bearer, Authorization},
    TypedHeader,
};
use std::sync::Arc;

use crate::services::{JwtError, JwtValidator, SupabaseClaims};

/// Authenticated user information
///
/// Extracted from validated JWT token.
/// Available in handlers as an extractor parameter.
#[derive(Debug, Clone)]
pub struct AuthUser {
    /// User ID (UUID) from JWT sub claim
    pub user_id: String,

    /// User email (optional)
    pub email: Option<String>,

    /// Full JWT claims for additional data
    pub claims: SupabaseClaims,
}

/// Authentication errors
#[derive(Debug)]
pub enum AuthError {
    /// No Authorization header present
    MissingToken,

    /// Token format is invalid
    InvalidToken(String),

    /// Token has expired
    Expired,
}

impl IntoResponse for AuthError {
    fn into_response(self) -> Response {
        let (status, message) = match &self {
            AuthError::MissingToken => (StatusCode::UNAUTHORIZED, "Authorization token required"),
            AuthError::InvalidToken(msg) => {
                tracing::debug!("Invalid token: {}", msg);
                (StatusCode::UNAUTHORIZED, "Invalid authorization token")
            }
            AuthError::Expired => (StatusCode::UNAUTHORIZED, "Token expired"),
        };

        (status, Json(serde_json::json!({ "error": message }))).into_response()
    }
}

#[async_trait::async_trait]
impl<S> FromRequestParts<S> for AuthUser
where
    S: Send + Sync,
{
    type Rejection = AuthError;

    async fn from_request_parts(parts: &mut Parts, _state: &S) -> Result<Self, Self::Rejection> {
        // Extract Bearer token from Authorization header
        let TypedHeader(Authorization(bearer)) = parts
            .extract::<TypedHeader<Authorization<Bearer>>>()
            .await
            .map_err(|_| AuthError::MissingToken)?;

        // Get JWT validator from extensions (set by middleware layer)
        let jwt_validator = parts
            .extensions
            .get::<Arc<JwtValidator>>()
            .ok_or_else(|| AuthError::InvalidToken("JWT validator not configured".to_string()))?;

        // Validate token (async - fetches JWKS if needed)
        let claims = jwt_validator
            .validate(bearer.token())
            .await
            .map_err(|e| match e {
                JwtError::Expired => AuthError::Expired,
                _ => AuthError::InvalidToken(e.to_string()),
            })?;

        tracing::debug!(user_id = %claims.sub, "User authenticated");

        Ok(AuthUser {
            user_id: claims.sub.clone(),
            email: claims.email.clone(),
            claims,
        })
    }
}


================================================
FILE: apps/capsule/src/api/chat.rs
================================================
//! Chat API handlers with authentication and usage tracking
//!
//! # Security Data Flow
//! 1. Extract and validate JWT token (AuthUser extractor)
//! 2. Check subscription status (billing_subscriptions table)
//! 3. Check rate limits (enclave_usage table)
//! 4. Process request (decrypt image if present)
//! 5. Track usage (fire-and-forget)
//! 6. Return response

use axum::{
    extract::State,
    response::sse::{Event, Sse},
    Json,
};
use futures_util::{stream::Stream, StreamExt};
use std::sync::Arc;

use crate::api::AuthUser;
use crate::error::CapsuleError;
use crate::types::{ChatRequest, ChatResponse};
use crate::AppState;

/// POST /api/chat
///
/// Receives encrypted image and message, returns AI response.
///
/// # Authentication
/// Requires valid Supabase JWT token in Authorization header.
///
/// # Subscription
/// Only users with active Pro subscription can access this endpoint.
///
/// # Security Data Flow
/// 1. `EncryptedImage` received (safe to log)
/// 2. Decrypted to `DecryptedImage` (memory only)
/// 3. OpenAI API call (using decrypted image)
/// 4. `DecryptedImage` auto-dropped → memory zeroized
/// 5. Response returned
pub async fn chat_handler(
    State(state): State<Arc<AppState>>,
    auth: AuthUser,
    Json(req): Json<ChatRequest>,
) -> Result<Json<ChatResponse>, CapsuleError> {
    // 1. Check subscription and rate limits
    let rate_status = state
        .usage_tracker
        .check_rate_limit(&auth.user_id)
        .await
        .map_err(|e| CapsuleError::Internal(e.to_string()))?;

    // 2. Block non-subscribers
    if !rate_status.subscribed {
        tracing::info!(user_id = %auth.user_id, "Subscription required");
        return Err(CapsuleError::SubscriptionRequired);
    }

    // 3. Check rate limit
    if !rate_status.allowed {
        tracing::info!(
            user_id = %auth.user_id,
            reason = ?rate_status.reason,
            "Rate limited"
        );
        return Err(CapsuleError::RateLimited(
            rate_status.reason.unwrap_or_else(|| "Rate limit exceeded".to_string()),
        ));
    }

    // 3.5. Validate history
    req.validate_history()?;

    tracing::info!(
        user_id = %auth.user_id,
        message_len = req.message.len(),
        has_image = req.encrypted_image.is_some(),
        history_len = req.history.as_ref().map(|h| h.len()).unwrap_or(0),
        has_system_prompt = req.system_prompt.is_some(),
        "Chat request"
    );

    let is_image_request = req.encrypted_image.is_some();
    let history_slice = req.history.as_deref();
    let system_prompt = req.system_prompt.as_deref();
    let tools = req.tools.as_ref();
    let tool_choice = req.tool_choice.as_ref();

    // 4. Process request
    let result = if let Some(encrypted_image) = req.encrypted_image {
        let decrypted = state.key_manager.decrypt(&encrypted_image).await?;

        tracing::debug!("Image decrypted: {} bytes", decrypted.len());

        state
            .openai
            .analyze_image(&req.message, decrypted, system_prompt, history_slice, tools, tool_choice)
            .await
            .map_err(|e| CapsuleError::OpenAIError(e.to_string()))?
    } else {
        state
            .openai
            .chat(&req.message, system_prompt, history_slice, tools, tool_choice)
            .await
            .map_err(|e| CapsuleError::OpenAIError(e.to_string()))?
    };

    tracing::info!(
        user_id = %auth.user_id,
        response_len = result.content.len(),
        has_tool_calls = result.tool_calls.is_some(),
        input_tokens = result.usage.prompt_tokens,
        output_tokens = result.usage.completion_tokens,
        "Chat response generated"
    );

    // 5. Track usage (fire-and-forget)
    let tracker = state.usage_tracker.clone();
    let user_id = auth.user_id.clone();
    let input_tokens = result.usage.prompt_tokens;
    let output_tokens = result.usage.completion_tokens;
    tokio::spawn(async move {
        if let Err(e) = tracker.track_request(&user_id, input_tokens, output_tokens, is_image_request).await {
            tracing::warn!(error = %e, "Failed to track usage");
        }
    });

    Ok(Json(ChatResponse {
        response: result.content,
        tool_calls: result.tool_calls,
    }))
}

/// POST /api/chat/stream
///
/// Returns streaming response via Server-Sent Events.
///
/// # Authentication
/// Requires valid Supabase JWT token in Authorization header.
///
/// # Subscription
/// Only users with active Pro subscription can access this endpoint.
pub async fn chat_stream_handler(
    State(state): State<Arc<AppState>>,
    auth: AuthUser,
    Json(req): Json<ChatRequest>,
) -> Result<Sse<impl Stream<Item = Result<Event, CapsuleError>>>, CapsuleError> {
    // 1. Check subscription and rate limits
    let rate_status = state
        .usage_tracker
        .check_rate_limit(&auth.user_id)
        .await
        .map_err(|e| CapsuleError::Internal(e.to_string()))?;

    // 2. Block non-subscribers
    if !rate_status.subscribed {
        tracing::info!(user_id = %auth.user_id, "Subscription required");
        return Err(CapsuleError::SubscriptionRequired);
    }

    // 3. Check rate limit
    if !rate_status.allowed {
        tracing::info!(
            user_id = %auth.user_id,
            reason = ?rate_status.reason,
            "Rate limited"
        );
        return Err(CapsuleError::RateLimited(
            rate_status.reason.unwrap_or_else(|| "Rate limit exceeded".to_string()),
        ));
    }

    // 3.5. Validate history
    req.validate_history()?;

    tracing::info!(
        user_id = %auth.user_id,
        message_len = req.message.len(),
        has_image = req.encrypted_image.is_some(),
        history_len = req.history.as_ref().map(|h| h.len()).unwrap_or(0),
        has_system_prompt = req.system_prompt.is_some(),
        "Stream chat request"
    );

    let is_image_request = req.encrypted_image.is_some();
    let history_slice = req.history.as_deref();
    let system_prompt = req.system_prompt.as_deref();
    let tools = req.tools.as_ref();
    let tool_choice = req.tool_choice.as_ref();

    // 4. Process request
    let (stream, usage) = if let Some(encrypted_image) = req.encrypted_image {
        let decrypted = state.key_manager.decrypt(&encrypted_image).await?;
        tracing::debug!("Image decrypted for streaming: {} bytes", decrypted.len());

        state
            .openai
            .analyze_image_stream(&req.message, decrypted, system_prompt, history_slice, tools, tool_choice)
            .await
            .map_err(|e| CapsuleError::OpenAIError(e.to_string()))?
    } else {
        state
            .openai
            .chat_stream(&req.message, system_prompt, history_slice, tools, tool_choice)
            .await
            .map_err(|e| CapsuleError::OpenAIError(e.to_string()))?
    };

    // 5. Track usage after stream completes (fire-and-forget)
    let tracker = state.usage_tracker.clone();
    let user_id = auth.user_id.clone();

    // Wrap the stream to track usage when it completes
    let wrapped_stream = async_stream::stream! {
        let mut inner = std::pin::pin!(stream);
        while let Some(item) = inner.next().await {
            yield item;
        }

        // Stream completed, now track usage
        let (input_tokens, output_tokens) = {
            let guard = usage.lock().unwrap();
            (guard.prompt_tokens, guard.completion_tokens)
        };

        tracing::info!(
            user_id = %user_id,
            input_tokens = input_tokens,
            output_tokens = output_tokens,
            "Stream completed, tracking usage"
        );

        let tracker_clone = tracker.clone();
        let user_id_clone = user_id.clone();
        tokio::spawn(async move {
            if let Err(e) = tracker_clone.track_request(&user_id_clone, input_tokens, output_tokens, is_image_request).await {
                tracing::warn!(error = %e, "Failed to track usage");
            }
        });
    };

    Ok(Sse::new(wrapped_stream))
}


================================================
FILE: apps/capsule/src/api/key.rs
================================================
use axum::{extract::State, Json};
use std::sync::Arc;

use crate::types::PublicKeyResponse;
use crate::AppState;

/// GET /api/public-key
///
/// 서버의 공개키를 반환합니다.
/// 클라이언트는 이 키로 이미지를 암호화합니다.
///
/// # Response
/// ```json
/// {
///   "public_key": "base64_encoded_public_key",
///   "key_id": "key_identifier",
///   "expires_at": "2024-01-01T00:00:00Z"
/// }
/// ```
pub async fn public_key_handler(State(state): State<Arc<AppState>>) -> Json<PublicKeyResponse> {
    let (public_key, key_id, expires_at) = state.key_manager.current_public_key().await;

    tracing::info!(key_id = %key_id, "Public key requested");

    Json(PublicKeyResponse {
        public_key,
        key_id,
        expires_at,
    })
}


================================================
FILE: apps/capsule/src/api/mod.rs
================================================
mod auth;
mod chat;
mod key;
mod routes;

pub use auth::AuthUser;
pub use chat::{chat_handler, chat_stream_handler};
pub use key::public_key_handler;
pub use routes::{create_router, RouterConfig};


================================================
FILE: apps/capsule/src/api/routes.rs
================================================
use axum::{
    routing::{get, post},
    Extension, Router,
};
use std::sync::Arc;
use tower_http::{
    cors::{AllowHeaders, AllowMethods, AllowOrigin, CorsLayer},
    limit::RequestBodyLimitLayer,
    trace::TraceLayer,
};

use crate::api::{chat_handler, chat_stream_handler, public_key_handler};
use crate::services::JwtValidator;
use crate::AppState;

/// Max request body size: 100MB (for encrypted images)
const MAX_BODY_SIZE: usize = 100 * 1024 * 1024;

/// Router configuration
pub struct RouterConfig {
    /// Allowed CORS origins
    pub allowed_origins: Vec<String>,
}

/// Create API router
pub fn create_router(
    state: Arc<AppState>,
    config: &RouterConfig,
    jwt_validator: Arc<JwtValidator>,
) -> Router {
    // CORS configuration
    let cors = build_cors_layer(config);

    Router::new()
        // Health check (public)
        .route("/health", get(health_handler))
        // Public Key endpoint (public)
        .route("/api/public-key", get(public_key_handler))
        // Chat endpoints (authenticated)
        .route("/api/chat", post(chat_handler))
        .route("/api/chat/stream", post(chat_stream_handler))
        // Middleware
        .layer(TraceLayer::new_for_http())
        .layer(cors)
        .layer(RequestBodyLimitLayer::new(MAX_BODY_SIZE))
        // JWT validator extension for auth extractor
        .layer(Extension(jwt_validator))
        // State
        .with_state(state)
}

/// Build CORS layer
fn build_cors_layer(config: &RouterConfig) -> CorsLayer {
    let allowed_origins = &config.allowed_origins;

    if allowed_origins.is_empty() || allowed_origins.iter().any(|o| o == "*") {
        // Development: Allow all origins (with warning)
        tracing::warn!("CORS: Allowing all origins (development mode)");
        CorsLayer::new()
            .allow_origin(AllowOrigin::any())
            .allow_methods(AllowMethods::list([
                http::Method::GET,
                http::Method::POST,
                http::Method::OPTIONS,
            ]))
            .allow_headers(AllowHeaders::list([
                http::header::CONTENT_TYPE,
                http::header::AUTHORIZATION,
            ]))
    } else {
        // Production: Allow only specified origins
        tracing::info!("CORS: Allowing origins: {:?}", allowed_origins);
        let origins: Vec<_> = allowed_origins
            .iter()
            .filter_map(|o| o.parse().ok())
            .collect();

        CorsLayer::new()
            .allow_origin(origins)
            .allow_methods(AllowMethods::list([
                http::Method::GET,
                http::Method::POST,
                http::Method::OPTIONS,
            ]))
            .allow_headers(AllowHeaders::list([
                http::header::CONTENT_TYPE,
                http::header::AUTHORIZATION,
            ]))
    }
}

/// Health check handler
async fn health_handler() -> &'static str {
    "OK"
}


================================================
FILE: apps/capsule/src/config.rs
================================================
use zeroize::Zeroizing;

use crate::error::CapsuleError;

/// Application configuration
pub struct Config {
    /// Server port
    pub port: u16,
    /// OpenAI API key (protected with Zeroizing)
    pub openai_api_key: Zeroizing<String>,
    /// OpenAI model (default: gpt-4o)
    pub openai_model: String,
    /// Allowed CORS origins
    pub allowed_origins: Vec<String>,
    /// Supabase project URL
    pub supabase_url: String,
    /// Supabase service role key (protected with Zeroizing)
    pub supabase_service_key: Zeroizing<String>,
    /// Key rotation interval in seconds (default: 86400 = 24 hours)
    pub key_rotation_interval_secs: u64,
    /// Grace period for previous key in seconds (default: 300 = 5 minutes)
    pub key_grace_period_secs: u64,
}

impl Config {
    /// Load configuration from environment variables
    ///
    /// # Security
    /// - API keys are protected with `Zeroizing<String>`
    /// - Sensitive environment variables are removed after loading
    pub fn from_env() -> Result<Self, CapsuleError> {
        dotenvy::dotenv().ok();

        // Load OpenAI API key
        let openai_api_key = std::env::var("OPENAI_API_KEY").map_err(|_| {
            CapsuleError::ConfigError("OPENAI_API_KEY environment variable is required".to_string())
        })?;

        // Load Supabase configuration
        let supabase_url = std::env::var("SUPABASE_URL").map_err(|_| {
            CapsuleError::ConfigError("SUPABASE_URL environment variable is required".to_string())
        })?;

        let supabase_service_key = std::env::var("SUPABASE_SERVICE_KEY").map_err(|_| {
            CapsuleError::ConfigError(
                "SUPABASE_SERVICE_KEY environment variable is required".to_string(),
            )
        })?;

        // Security: Remove sensitive environment variables
        std::env::remove_var("OPENAI_API_KEY");
        std::env::remove_var("SUPABASE_SERVICE_KEY");
        tracing::debug!("Removed sensitive environment variables");

        let port = std::env::var("PORT")
            .unwrap_or_else(|_| "3000".to_string())
            .parse()
            .unwrap_or(3000);

        let openai_model = std::env::var("OPENAI_MODEL").unwrap_or_else(|_| "gpt-4o".to_string());

        // CORS allowed origins (comma-separated)
        let allowed_origins = std::env::var("ALLOWED_ORIGINS")
            .unwrap_or_else(|_| "*".to_string())
            .split(',')
            .map(|s| s.trim().to_string())
            .filter(|s| !s.is_empty())
            .collect();

        let key_rotation_interval_secs = std::env::var("KEY_ROTATION_INTERVAL_SECS")
            .unwrap_or_else(|_| "86400".to_string())
            .parse()
            .unwrap_or(86400);

        let key_grace_period_secs = std::env::var("KEY_GRACE_PERIOD_SECS")
            .unwrap_or_else(|_| "300".to_string())
            .parse()
            .unwrap_or(300);

        Ok(Self {
            port,
            openai_api_key: Zeroizing::new(openai_api_key),
            openai_model,
            allowed_origins,
            supabase_url,
            supabase_service_key: Zeroizing::new(supabase_service_key),
            key_rotation_interval_secs,
            key_grace_period_secs,
        })
    }
}


================================================
FILE: apps/capsule/src/crypto/encryption.rs
================================================
use base64::{engine::general_purpose::STANDARD, Engine};
use chacha20poly1305::{
    aead::{Aead, KeyInit},
    XChaCha20Poly1305, XNonce,
};
use hkdf::Hkdf;
use sha2::Sha256;
use x25519_dalek::{PublicKey, StaticSecret};
use zeroize::Zeroize;

use crate::error::CapsuleError;
use crate::types::{DecryptedImage, EncryptedImage};

/// HKDF에 사용할 salt와 info
const HKDF_SALT: &[u8] = b"vessel-capsule-v1-salt";
const HKDF_INFO: &[u8] = b"vessel-capsule-v1-key";

/// 특정 비밀키로 암호화된 이미지 복호화
///
/// # 보안
/// - Shared secret은 함수 종료 시 zeroize됨
/// - 반환되는 `DecryptedImage`는 Drop 시 자동 zeroize
///
/// # 암호화 스킴
/// 1. X25519 ECDH로 shared secret 계산
/// 2. HKDF-SHA256으로 대칭키 유도
/// 3. XChaCha20-Poly1305로 복호화 (AEAD)
pub(crate) fn decrypt_with_secret(
    server_secret: &StaticSecret,
    encrypted: &EncryptedImage,
) -> Result<DecryptedImage, CapsuleError> {
    // 1. Base64 디코딩
    let ephemeral_pk_bytes = STANDARD
        .decode(&encrypted.ephemeral_public_key)
        .map_err(|_| CapsuleError::InvalidPublicKey)?;

    let nonce_bytes = STANDARD
        .decode(&encrypted.nonce)
        .map_err(|_| CapsuleError::InvalidNonce)?;

    let ciphertext = STANDARD
        .decode(&encrypted.ciphertext)
        .map_err(|_| CapsuleError::InvalidCiphertext)?;

    // 2. 공개키 파싱 (32 bytes)
    let ephemeral_pk: [u8; 32] = ephemeral_pk_bytes
        .try_into()
        .map_err(|_| CapsuleError::InvalidPublicKey)?;
    let client_public = PublicKey::from(ephemeral_pk);

    // 3. Shared Secret 계산 (X25519 ECDH)
    let mut shared_secret = server_secret.diffie_hellman(&client_public);

    // 4. HKDF로 대칭키 유도 (32 bytes for XChaCha20)
    let mut symmetric_key = [0u8; 32];
    let hkdf = Hkdf::<Sha256>::new(Some(HKDF_SALT), shared_secret.as_bytes());
    hkdf.expand(HKDF_INFO, &mut symmetric_key)
        .map_err(|_| CapsuleError::CipherInitFailed)?;

    // Shared secret 즉시 클리어
    shared_secret.zeroize();

    // 5. Nonce 파싱 (24 bytes for XChaCha20)
    let nonce: [u8; 24] = nonce_bytes
        .try_into()
        .map_err(|_| CapsuleError::InvalidNonce)?;

    // 6. XChaCha20-Poly1305로 복호화
    let cipher =
        XChaCha20Poly1305::new_from_slice(&symmetric_key).map_err(|_| CapsuleError::CipherInitFailed)?;

    // 대칭키 즉시 클리어
    symmetric_key.zeroize();

    let plaintext = cipher
        .decrypt(XNonce::from_slice(&nonce), ciphertext.as_ref())
        .map_err(|_| CapsuleError::DecryptionFailed)?;

    tracing::debug!("Successfully decrypted {} bytes", plaintext.len());

    Ok(DecryptedImage::new(plaintext))
}

#[cfg(test)]
mod tests {
    use super::*;

    #[test]
    fn test_decrypt_invalid_public_key() {
        let secret = StaticSecret::random_from_rng(rand::thread_rng());

        let encrypted = EncryptedImage {
            ephemeral_public_key: "invalid".to_string(),
            nonce: STANDARD.encode([0u8; 24]),
            ciphertext: STANDARD.encode(vec![0u8; 32]),
            key_id: None,
        };

        let result = decrypt_with_secret(&secret, &encrypted);
        assert!(matches!(result, Err(CapsuleError::InvalidPublicKey)));
    }

    #[test]
    fn test_decrypt_invalid_nonce() {
        let secret = StaticSecret::random_from_rng(rand::thread_rng());

        let encrypted = EncryptedImage {
            ephemeral_public_key: STANDARD.encode([0u8; 32]),
            nonce: "invalid".to_string(),
            ciphertext: STANDARD.encode(vec![0u8; 32]),
            key_id: None,
        };

        let result = decrypt_with_secret(&secret, &encrypted);
        assert!(matches!(result, Err(CapsuleError::InvalidNonce)));
    }
}


================================================
FILE: apps/capsule/src/crypto/keypair.rs
================================================
use base64::{engine::general_purpose::STANDARD, Engine};
use std::sync::Arc;
use std::time::Duration;
use tokio::sync::RwLock;
use x25519_dalek::{PublicKey, StaticSecret};

use crate::crypto::decrypt_with_secret;
use crate::error::CapsuleError;
use crate::types::{DecryptedImage, EncryptedImage};

/// 버전이 지정된 키 쌍
struct VersionedKey {
    /// 키 고유 식별자 (public key base64의 앞 16자)
    key_id: String,
    /// Private Key
    secret: StaticSecret,
    /// Public Key
    public: PublicKey,
    /// 생성 시각
    created_at: std::time::Instant,
}

impl VersionedKey {
    fn new() -> Self {
        let secret = StaticSecret::random_from_rng(rand::thread_rng());
        let public = PublicKey::from(&secret);
        let key_id = STANDARD.encode(public.as_bytes())[..16].to_string();

        tracing::info!(key_id = %key_id, "New versioned key pair generated");

        Self {
            key_id,
            secret,
            public,
            created_at: std::time::Instant::now(),
        }
    }

    fn public_key_base64(&self) -> String {
        STANDARD.encode(self.public.as_bytes())
    }
}

/// 현재/이전 키 슬롯
struct KeySlots {
    /// 현재 활성 키 (새 클라이언트에게 배포)
    current: VersionedKey,
    /// 이전 키 (grace period 동안 유지)
    previous: Option<VersionedKey>,
}

/// 서버 키 쌍 관리자 (로테이션 지원)
///
/// # 보안 특성
/// - Private Key는 절대 외부로 노출되지 않음
/// - 복호화는 `decrypt()` 메서드를 통해서만 가능
/// - 키 로테이션으로 침해 범위를 로테이션 주기로 한정
/// - Drop 시 모든 Private Key 자동 zeroize (StaticSecret 내장)
///
/// # Two-Slot Key Model
/// - `current`: 새 클라이언트에게 배포, 새 요청 복호화
/// - `previous`: grace period 동안 유지, 이전 키를 캐싱한 클라이언트 지원
pub struct KeyManager {
    keys: Arc<RwLock<KeySlots>>,
    rotation_interval: Duration,
    grace_period: Duration,
}

impl KeyManager {
    /// 새 KeyManager 생성 (로테이션 설정 포함)
    ///
    /// # 보안
    /// - 키는 메모리에만 존재
    /// - 디스크에 저장되지 않음
    /// - 컨테이너 재시작 시 새 키 생성
    pub fn new(rotation_interval: Duration, grace_period: Duration) -> Self {
        let current = VersionedKey::new();
        tracing::info!(
            key_id = %current.key_id,
            rotation_interval_secs = rotation_interval.as_secs(),
            grace_period_secs = grace_period.as_secs(),
            "KeyManager initialized"
        );

        Self {
            keys: Arc::new(RwLock::new(KeySlots {
                current,
                previous: None,
            })),
            rotation_interval,
            grace_period,
        }
    }

    /// 현재 공개키 정보 반환 (key_id, expires_at 포함)
    pub async fn current_public_key(&self) -> (String, String, String) {
        let keys = self.keys.read().await;
        let elapsed = keys.current.created_at.elapsed();
        let remaining = self.rotation_interval.saturating_sub(elapsed);
        let expiry = chrono::Utc::now()
            + chrono::Duration::from_std(remaining).unwrap_or(chrono::Duration::zero());
        (
            keys.current.public_key_base64(),
            keys.current.key_id.clone(),
            expiry.to_rfc3339(),
        )
    }

    /// 복호화 수행 (key_id로 적절한 키 선택)
    ///
    /// # 키 선택 로직
    /// - `key_id` 있으면: 매칭되는 키로 복호화
    /// - `key_id` 없으면 (하위 호환): current → previous 순서로 시도
    pub async fn decrypt(&self, encrypted: &EncryptedImage) -> Result<DecryptedImage, CapsuleError> {
        let keys = self.keys.read().await;

        match &encrypted.key_id {
            Some(kid) => {
                // key_id가 명시된 경우: 정확히 매칭되는 키 사용
                if kid == &keys.current.key_id {
                    decrypt_with_secret(&keys.current.secret, encrypted)
                } else if let Some(prev) = &keys.previous {
                    if kid == &prev.key_id {
                        tracing::debug!(key_id = %kid, "Decrypting with previous key");
                        decrypt_with_secret(&prev.secret, encrypted)
                    } else {
                        tracing::warn!(
                            requested_key_id = %kid,
                            current_key_id = %keys.current.key_id,
                            "Unknown key_id requested"
                        );
                        Err(CapsuleError::DecryptionFailed)
                    }
                } else {
                    tracing::warn!(
                        requested_key_id = %kid,
                        current_key_id = %keys.current.key_id,
                        "Unknown key_id requested (no previous key)"
                    );
                    Err(CapsuleError::DecryptionFailed)
                }
            }
            None => {
                // key_id가 없는 경우 (하위 호환): current → previous 순서로 시도
                match decrypt_with_secret(&keys.current.secret, encrypted) {
                    Ok(result) => Ok(result),
                    Err(_) => {
                        if let Some(prev) = &keys.previous {
                            tracing::debug!("Retrying decryption with previous key (no key_id)");
                            decrypt_with_secret(&prev.secret, encrypted)
                        } else {
                            Err(CapsuleError::DecryptionFailed)
                        }
                    }
                }
            }
        }
    }

    /// 키 로테이션: current → previous, 새 키 → current
    async fn rotate(&self) {
        let mut keys = self.keys.write().await;
        let new_key = VersionedKey::new();

        tracing::info!(
            new_key_id = %new_key.key_id,
            old_key_id = %keys.current.key_id,
            "Key rotation: new key generated"
        );

        let old_current = std::mem::replace(&mut keys.current, new_key);
        // 이전 previous가 있으면 여기서 drop → StaticSecret zeroize
        keys.previous = Some(old_current);
    }

    /// 이전 키 제거 (grace period 만료 후 호출)
    async fn clear_previous(&self) {
        let mut keys = self.keys.write().await;
        if let Some(prev) = keys.previous.take() {
            tracing::info!(
                key_id = %prev.key_id,
                "Previous key cleared (grace period expired)"
            );
            // prev drop → StaticSecret zeroize
        }
    }

    /// 백그라운드 로테이션 태스크 시작
    pub fn start_rotation_task(self: &Arc<Self>) -> tokio::task::JoinHandle<()> {
        let manager = Arc::clone(self);
        let rotation_interval = self.rotation_interval;
        let grace_period = self.grace_period;

        tokio::spawn(async move {
            loop {
                tokio::time::sleep(rotation_interval).await;

                tracing::info!("Key rotation triggered");
                manager.rotate().await;

                // Grace period 후 이전 키 제거
                let manager_clone = Arc::clone(&manager);
                tokio::spawn(async move {
                    tokio::time::sleep(grace_period).await;
                    manager_clone.clear_previous().await;
                });
            }
        })
    }
}

impl Drop for KeyManager {
    fn drop(&mut self) {
        tracing::info!("KeyManager dropped, all secret keys will be zeroized");
    }
}

#[cfg(test)]
mod tests {
    use super::*;
    use crate::types::EncryptedImage;
    use base64::{engine::general_purpose::STANDARD, Engine};
    use chacha20poly1305::{
        aead::{Aead, KeyInit},
        XChaCha20Poly1305, XNonce,
    };
    use hkdf::Hkdf;
    use sha2::Sha256;

    /// 테스트용: 특정 공개키로 이미지를 암호화
    fn encrypt_for_key(public_key: &PublicKey, data: &[u8]) -> (EncryptedImage, String) {
        let ephemeral_secret = StaticSecret::random_from_rng(rand::thread_rng());
        let ephemeral_public = PublicKey::from(&ephemeral_secret);

        let shared_secret = ephemeral_secret.diffie_hellman(public_key);

        let mut symmetric_key = [0u8; 32];
        let hkdf = Hkdf::<Sha256>::new(
            Some(b"vessel-capsule-v1-salt"),
            shared_secret.as_bytes(),
        );
        hkdf.expand(b"vessel-capsule-v1-key", &mut symmetric_key)
            .unwrap();

        let cipher = XChaCha20Poly1305::new_from_slice(&symmetric_key).unwrap();
        let nonce_bytes: [u8; 24] = rand::random();
        let ciphertext = cipher
            .encrypt(XNonce::from_slice(&nonce_bytes), data)
            .unwrap();

        let key_id = STANDARD.encode(public_key.as_bytes())[..16].to_string();

        let encrypted = EncryptedImage {
            ephemeral_public_key: STANDARD.encode(ephemeral_public.as_bytes()),
            nonce: STANDARD.encode(nonce_bytes),
            ciphertext: STANDARD.encode(&ciphertext),
            key_id: Some(key_id.clone()),
        };

        (encrypted, key_id)
    }

    #[tokio::test]
    async fn test_rotation_creates_new_key() {
        let km = Arc::new(KeyManager::new(
            Duration::from_secs(3600),
            Duration::from_secs(60),
        ));
        let (_, id1, _) = km.current_public_key().await;
        km.rotate().await;
        let (_, id2, _) = km.current_public_key().await;
        assert_ne!(id1, id2);
    }

    #[tokio::test]
    async fn test_decrypt_with_current_key() {
        let km = Arc::new(KeyManager::new(
            Duration::from_secs(3600),
            Duration::from_secs(60),
        ));

        let keys = km.keys.read().await;
        let public = keys.current.public;
        drop(keys);

        let (encrypted, _) = encrypt_for_key(&public, b"test image data");
        let decrypted = km.decrypt(&encrypted).await.unwrap();
        assert_eq!(decrypted.len(), b"test image data".len());
    }

    #[tokio::test]
    async fn test_previous_key_available_after_rotation() {
        let km = Arc::new(KeyManager::new(
            Duration::from_secs(3600),
            Duration::from_secs(60),
        ));

        // 현재 키로 암호화
        let keys = km.keys.read().await;
        let old_public = keys.current.public;
        drop(keys);

        let (encrypted, _) = encrypt_for_key(&old_public, b"old key data");

        // 로테이션
        km.rotate().await;

        // 이전 키로 복호화 성공해야 함
        let decrypted = km.decrypt(&encrypted).await.unwrap();
        assert_eq!(decrypted.len(), b"old key data".len());
    }

    #[tokio::test]
    async fn test_previous_key_cleared_after_grace_period() {
        let km = Arc::new(KeyManager::new(
            Duration::from_secs(3600),
            Duration::from_secs(60),
        ));

        // 현재 키로 암호화
        let keys = km.keys.read().await;
        let old_public = keys.current.public;
        drop(keys);

        let (encrypted, _) = encrypt_for_key(&old_public, b"expired data");

        // 로테이션 + 이전 키 제거
        km.rotate().await;
        km.clear_previous().await;

        // 이전 키가 없으므로 복호화 실패해야 함
        let result = km.decrypt(&encrypted).await;
        assert!(result.is_err());
    }

    #[tokio::test]
    async fn test_no_key_id_fallback() {
        let km = Arc::new(KeyManager::new(
            Duration::from_secs(3600),
            Duration::from_secs(60),
        ));

        // 현재 키로 암호화 (key_id 없이)
        let keys = km.keys.read().await;
        let old_public = keys.current.public;
        drop(keys);

        let (mut encrypted, _) = encrypt_for_key(&old_public, b"no key id data");
        encrypted.key_id = None; // key_id 제거 (하위 호환 시뮬레이션)

        // 로테이션 후에도 fallback으로 복호화 성공
        km.rotate().await;
        let decrypted = km.decrypt(&encrypted).await.unwrap();
        assert_eq!(decrypted.len(), b"no key id data".len());
    }
}


================================================
FILE: apps/capsule/src/crypto/mod.rs
================================================
mod keypair;
mod encryption;

pub use keypair::KeyManager;
pub(crate) use encryption::decrypt_with_secret;


================================================
FILE: apps/capsule/src/error.rs
================================================
use axum::{
    http::StatusCode,
    response::{IntoResponse, Response},
    Json,
};
use serde_json::json;
use thiserror::Error;

/// Capsule error types
#[derive(Error, Debug)]
pub enum CapsuleError {
    #[error("Invalid public key format")]
    InvalidPublicKey,

    #[error("Invalid nonce format")]
    InvalidNonce,

    #[error("Invalid ciphertext format")]
    InvalidCiphertext,

    #[error("Cipher initialization failed")]
    CipherInitFailed,

    #[error("Decryption failed - invalid ciphertext or key")]
    DecryptionFailed,

    #[error("OpenAI API error: {0}")]
    OpenAIError(String),

    #[error("Configuration error: {0}")]
    ConfigError(String),

    #[error("Internal error: {0}")]
    Internal(String),

    #[error("Rate limit exceeded: {0}")]
    RateLimited(String),

    #[error("Subscription required")]
    SubscriptionRequired,

    #[error("History validation failed: {0}")]
    HistoryTooLarge(String),
}

impl IntoResponse for CapsuleError {
    fn into_response(self) -> Response {
        let (status, error_message) = match &self {
            CapsuleError::InvalidPublicKey
            | CapsuleError::InvalidNonce
            | CapsuleError::InvalidCiphertext => (StatusCode::BAD_REQUEST, self.to_string()),

            CapsuleError::DecryptionFailed => {
                (StatusCode::BAD_REQUEST, "Decryption failed".to_string())
            }

            CapsuleError::CipherInitFailed | CapsuleError::Internal(_) => {
                // Internal errors don't expose details
                tracing::error!("Internal error: {}", self);
                (
                    StatusCode::INTERNAL_SERVER_ERROR,
                    "Internal server error".to_string(),
                )
            }

            CapsuleError::OpenAIError(msg) => {
                tracing::error!("OpenAI error: {}", msg);
                (StatusCode::BAD_GATEWAY, "AI service error".to_string())
            }

            CapsuleError::ConfigError(msg) => {
                tracing::error!("Config error: {}", msg);
                (
                    StatusCode::INTERNAL_SERVER_ERROR,
                    "Configuration error".to_string(),
                )
            }

            CapsuleError::RateLimited(reason) => {
                (StatusCode::TOO_MANY_REQUESTS, reason.clone())
            }

            CapsuleError::SubscriptionRequired => {
                (
                    StatusCode::FORBIDDEN,
                    "Pro subscription required".to_string(),
                )
            }

            CapsuleError::HistoryTooLarge(msg) => {
                (StatusCode::BAD_REQUEST, msg.clone())
            }
        };

        let body = Json(json!({
            "error": error_message
        }));

        (status, body).into_response()
    }
}

impl From<anyhow::Error> for CapsuleError {
    fn from(err: anyhow::Error) -> Self {
        CapsuleError::Internal(err.to_string())
    }
}


================================================
FILE: apps/capsule/src/main.rs
================================================
mod api;
mod config;
mod crypto;
mod error;
mod services;
mod types;

use std::sync::Arc;
use std::time::Duration;

use config::Config;
use crypto::KeyManager;
use services::{JwtValidator, OpenAIService, UsageTracker};

/// Application state
///
/// # Security
/// - `KeyManager` holds private keys internally with rotation support
/// - Private keys are never exposed externally
/// - Keys are rotated periodically to limit blast radius
/// - JWT validator uses Zeroizing for secret storage
/// - Usage tracker uses service key for Supabase API calls
pub struct AppState {
    /// Key manager (encryption/decryption with rotation)
    pub key_manager: Arc<KeyManager>,
    /// OpenAI service
    pub openai: OpenAIService,
    /// JWT validator for Supabase tokens
    pub jwt_validator: Arc<JwtValidator>,
    /// Usage tracker for rate limiting and billing
    pub usage_tracker: UsageTracker,
}

#[tokio::main]
async fn main() -> anyhow::Result<()> {
    // Initialize logging
    tracing_subscriber::fmt()
        .with_env_filter(
            tracing_subscriber::EnvFilter::from_default_env()
                .add_directive("capsule=debug".parse().unwrap()),
        )
        .init();

    tracing::info!("Starting Capsule server...");

    // Load configuration (API keys removed from env after loading)
    let config = Config::from_env()?;
    tracing::info!("Configuration loaded (port: {})", config.port);
    tracing::info!("CORS allowed origins: {:?}", config.allowed_origins);
    tracing::info!("Supabase URL: {}", config.supabase_url);

    // Router configuration
    let app_config = api::RouterConfig {
        allowed_origins: config.allowed_origins.clone(),
    };

    // Create JWT validator (uses JWKS from Supabase for ES256 validation)
    let jwt_validator = Arc::new(JwtValidator::new(config.supabase_url.clone()));

    // Create usage tracker
    let usage_tracker = UsageTracker::new(
        config.supabase_url.clone(),
        config.supabase_service_key,
    );

    // Create KeyManager with rotation configuration
    let key_manager = Arc::new(KeyManager::new(
        Duration::from_secs(config.key_rotation_interval_secs),
        Duration::from_secs(config.key_grace_period_secs),
    ));

    // Start background key rotation task
    let _rotation_handle = key_manager.start_rotation_task();

    // Create application state
    let openai_model = config.openai_model.clone();
    let state = Arc::new(AppState {
        key_manager: Arc::clone(&key_manager),
        openai: OpenAIService::new(config.openai_api_key).with_model(openai_model),
        jwt_validator: jwt_validator.clone(),
        usage_tracker,
    });

    // Create router
    let app = api::create_router(state, &app_config, jwt_validator);

    // Start server
    let addr = format!("0.0.0.0:{}", config.port);
    let listener = tokio::net::TcpListener::bind(&addr).await?;

    tracing::info!("Capsule server listening on {}", addr);
    tracing::info!("Security: Private keys exist only in memory");
    tracing::info!("Security: Key rotation enabled (interval: {}s, grace: {}s)",
        config.key_rotation_interval_secs, config.key_grace_period_secs);
    tracing::info!("Security: Decrypted images are zeroized after use");
    tracing::info!("Security: API keys protected with Zeroizing<String>");
    tracing::info!("Security: JWT authentication required for chat endpoints");
    tracing::info!("Security: Subscription verification via Supabase");

    axum::serve(listener, app).await?;

    Ok(())
}


================================================
FILE: apps/capsule/src/services/jwt.rs
================================================
//! JWT validation service for Supabase tokens
//!
//! Validates Supabase JWT tokens using ES256 algorithm with JWKS.
//! Extracts user_id (sub claim) for authentication.

use jsonwebtoken::{decode, decode_header, Algorithm, DecodingKey, Validation};
use serde::{Deserialize, Serialize};
use std::sync::Arc;
use thiserror::Error;
use tokio::sync::RwLock;

/// JWT validation errors
#[derive(Error, Debug)]
pub enum JwtError {
    #[error("Invalid token format")]
    InvalidFormat,

    #[error("Token expired")]
    Expired,

    #[error("Invalid signature")]
    InvalidSignature,

    #[error("Invalid audience")]
    InvalidAudience,

    #[error("JWKS fetch failed: {0}")]
    JwksFetchFailed(String),

    #[error("No matching key found")]
    NoMatchingKey,

    #[error("Validation failed: {0}")]
    ValidationFailed(String),
}

/// JWKS response from Supabase
#[derive(Debug, Deserialize)]
struct JwksResponse {
    keys: Vec<Jwk>,
}

/// JSON Web Key
#[derive(Debug, Clone, Deserialize)]
struct Jwk {
    kty: String,
    #[serde(default)]
    kid: Option<String>,
    #[serde(default)]
    alg: Option<String>,
    /// EC curve (for ES256)
    #[serde(default)]
    crv: Option<String>,
    /// EC x coordinate (base64url)
    #[serde(default)]
    x: Option<String>,
    /// EC y coordinate (base64url)
    #[serde(default)]
    y: Option<String>,
}

/// Supabase JWT claims
///
/// Contains the standard claims from Supabase auth tokens.
#[derive(Debug, Clone, Serialize, Deserialize)]
pub struct SupabaseClaims {
    /// Subject - User ID (UUID)
    pub sub: String,

    /// Audience - Should be "authenticated"
    pub aud: String,

    /// User role
    pub role: String,

    /// Expiration timestamp
    pub exp: usize,

    /// Issued at timestamp
    pub iat: usize,

    /// User email (optional)
    pub email: Option<String>,
}

/// Cached JWKS data
struct CachedJwks {
    keys: Vec<Jwk>,
    fetched_at: std::time::Instant,
}

/// JWT validator for Supabase tokens
///
/// # Security
/// - Uses ES256 algorithm with JWKS public keys
/// - Validates audience claim to ensure token is for authenticated users
/// - Validates expiration to prevent replay attacks
/// - JWKS is cached for 1 hour to reduce network calls
pub struct JwtValidator {
    /// Supabase URL for JWKS endpoint
    supabase_url: String,
    /// HTTP client
    client: reqwest::Client,
    /// Cached JWKS
    jwks_cache: Arc<RwLock<Option<CachedJwks>>>,
}

impl JwtValidator {
    /// Create a new JWT validator
    ///
    /// # Arguments
    /// * `supabase_url` - Supabase project URL
    pub fn new(supabase_url: String) -> Self {
        Self {
            supabase_url,
            client: reqwest::Client::new(),
            jwks_cache: Arc::new(RwLock::new(None)),
        }
    }

    /// Fetch JWKS from Supabase (with caching)
    async fn get_jwks(&self) -> Result<Vec<Jwk>, JwtError> {
        // Check cache
        {
            let cache = self.jwks_cache.read().await;
            if let Some(cached) = cache.as_ref() {
                // Cache valid for 1 hour
                if cached.fetched_at.elapsed() < std::time::Duration::from_secs(3600) {
                    return Ok(cached.keys.clone());
                }
            }
        }

        // Fetch from Supabase
        let jwks_url = format!("{}/auth/v1/.well-known/jwks.json", self.supabase_url);
        tracing::debug!("Fetching JWKS from: {}", jwks_url);

        let response = self
            .client
            .get(&jwks_url)
            .send()
            .await
            .map_err(|e| JwtError::JwksFetchFailed(e.to_string()))?;

        if !response.status().is_success() {
            return Err(JwtError::JwksFetchFailed(format!(
                "HTTP {}",
                response.status()
            )));
        }

        let jwks: JwksResponse = response
            .json()
            .await
            .map_err(|e| JwtError::JwksFetchFailed(e.to_string()))?;

        tracing::debug!("Fetched {} keys from JWKS", jwks.keys.len());

        // Update cache
        {
            let mut cache = self.jwks_cache.write().await;
            *cache = Some(CachedJwks {
                keys: jwks.keys.clone(),
                fetched_at: std::time::Instant::now(),
            });
        }

        Ok(jwks.keys)
    }

    /// Validate a JWT token and extract claims
    ///
    /// # Arguments
    /// * `token` - Bearer token string (without "Bearer " prefix)
    ///
    /// # Returns
    /// * `Ok(SupabaseClaims)` - Validated claims including user_id
    /// * `Err(JwtError)` - Validation failure reason
    ///
    /// # Security
    /// - Validates ES256 signature against JWKS public key
    /// - Checks "authenticated" audience claim
    /// - Verifies token has not expired
    pub async fn validate(&self, token: &str) -> Result<SupabaseClaims, JwtError> {
        // Decode header to get kid
        let header = decode_header(token).map_err(|e| JwtError::InvalidFormat)?;
        tracing::debug!("JWT header: alg={:?}, kid={:?}", header.alg, header.kid);

        // Fetch JWKS
        let keys = self.get_jwks().await?;

        // Find matching key
        let jwk = if let Some(kid) = &header.kid {
            keys.iter().find(|k| k.kid.as_ref() == Some(kid))
        } else {
            // Use first ES256 key if no kid
            keys.iter()
                .find(|k| k.alg.as_deref() == Some("ES256") || k.crv.as_deref() == Some("P-256"))
        }
        .ok_or(JwtError::NoMatchingKey)?;

        // Build decoding key from JWK
        let decoding_key = self.jwk_to_decoding_key(jwk)?;

        // Validate token
        let mut validation = Validation::new(Algorithm::ES256);
        validation.set_audience(&["authenticated"]);

        let token_data =
            decode::<SupabaseClaims>(token, &decoding_key, &validation).map_err(|e| {
                match e.kind() {
                    jsonwebtoken::errors::ErrorKind::ExpiredSignature => JwtError::Expired,
                    jsonwebtoken::errors::ErrorKind::InvalidSignature => JwtError::InvalidSignature,
                    jsonwebtoken::errors::ErrorKind::InvalidAudience => JwtError::InvalidAudience,
                    _ => JwtError::ValidationFailed(e.to_string()),
                }
            })?;

        Ok(token_data.claims)
    }

    /// Convert JWK to DecodingKey
    fn jwk_to_decoding_key(&self, jwk: &Jwk) -> Result<DecodingKey, JwtError> {
        if jwk.kty != "EC" {
            return Err(JwtError::ValidationFailed(format!(
                "Unsupported key type: {}",
                jwk.kty
            )));
        }

        let x = jwk
            .x
            .as_ref()
            .ok_or_else(|| JwtError::ValidationFailed("Missing x coordinate".to_string()))?;
        let y = jwk
            .y
            .as_ref()
            .ok_or_else(|| JwtError::ValidationFailed("Missing y coordinate".to_string()))?;

        // Build JWK JSON for jsonwebtoken
        let jwk_json = serde_json::json!({
            "kty": "EC",
            "crv": "P-256",
            "x": x,
            "y": y
        });

        DecodingKey::from_jwk(
            &serde_json::from_value(jwk_json)
                .map_err(|e| JwtError::ValidationFailed(format!("Invalid JWK format: {}", e)))?,
        )
        .map_err(|e| JwtError::ValidationFailed(format!("Failed to create decoding key: {}", e)))
    }
}

#[cfg(test)]
mod tests {
    use super::*;

    #[tokio::test]
    async fn test_invalid_token() {
        let validator = JwtValidator::new("https://example.supabase.co".to_string());
        let result = validator.validate("invalid-token").await;
        assert!(result.is_err());
    }
}


================================================
FILE: apps/capsule/src/services/mod.rs
================================================
mod jwt;
mod openai;
mod usage;

pub use jwt::{JwtError, JwtValidator, SupabaseClaims};
pub use openai::{ChatResult, OpenAIService, TokenUsage};
pub use usage::{RateLimitStatus, UsageTracker};


================================================
FILE: apps/capsule/src/services/openai.rs
================================================
use axum::response::sse::Event;
use futures_util::{Stream, StreamExt};
use reqwest::Client;
use serde::{Deserialize, Serialize};
use std::collections::HashMap;
use std::pin::Pin;
use zeroize::{Zeroize, Zeroizing};

use crate::error::CapsuleError;
use crate::types::{DecryptedImage, HistoryMessage};

const OPENAI_API_URL: &str = "https://api.openai.com/v1/chat/completions";

/// OpenAI API 서비스
///
/// # 보안
/// - `api_key`는 `Zeroizing<String>`으로 보호됨
/// - Drop 시 자동으로 메모리 클리어
pub struct OpenAIService {
    client: Client,
    api_key: Zeroizing<String>,
    model: String,
}

impl OpenAIService {
    /// 새 OpenAI 서비스 생성
    pub fn new(api_key: Zeroizing<String>) -> Self {
        Self {
            client: Client::new(),
            api_key,
            model: "gpt-4o".to_string(),
        }
    }

    /// 모델 설정
    pub fn with_model(mut self, model: String) -> Self {
        self.model = model;
        self
    }

    /// 메시지 배열 빌드: system_prompt → history → current_message
    fn build_messages(
        system_prompt: Option<&str>,
        history: Option<&[HistoryMessage]>,
        current_message: Message,
    ) -> Vec<Message> {
        let mut messages = Vec::new();

        if let Some(prompt) = system_prompt {
            messages.push(Message {
                role: "system".to_string(),
                content: Some(MessageContent::Text(prompt.to_string())),
                tool_call_id: None,
                tool_calls: None,
            });
        }

        if let Some(history) = history {
            for msg in history {
                let mut m = Message {
                    role: msg.role.clone(),
                    content: Some(MessageContent::Text(msg.content.clone())),
                    tool_call_id: None,
                    tool_calls: None,
                };
                if let Some(ref tc_id) = msg.tool_call_id {
                    m.tool_call_id = Some(tc_id.clone());
                }
                if let Some(ref tc) = msg.tool_calls {
                    m.tool_calls = Some(tc.clone());
                    if msg.content.is_empty() {
                        m.content = None;
                    }
                }
                messages.push(m);
            }
        }

        messages.push(current_message);
        messages
    }

    /// 텍스트 전용 채팅
    pub async fn chat(
        &self,
        message: &str,
        system_prompt: Option<&str>,
        history: Option<&[HistoryMessage]>,
        tools: Option<&serde_json::Value>,
        tool_choice: Option<&serde_json::Value>,
    ) -> Result<ChatResult, anyhow::Error> {
        let current = Message {
            role: "user".to_string(),
            content: Some(MessageContent::Text(message.to_string())),
            tool_call_id: None,
            tool_calls: None,
        };

        let request_body = ChatRequest {
            model: self.model.clone(),
            messages: Self::build_messages(system_prompt, history, current),
            max_tokens: Some(4096),
            stream: false,
            stream_options: None,
            tools: tools.cloned(),
            tool_choice: tool_choice.cloned(),
        };

        let response = self
            .client
            .post(OPENAI_API_URL)
            .header("Authorization", format!("Bearer {}", &*self.api_key))
            .header("Content-Type", "application/json")
            .json(&request_body)
            .send()
            .await?;

        if !response.status().is_success() {
            let error_text = response.text().await?;
            return Err(anyhow::anyhow!("OpenAI API error: {}", error_text));
        }

        let response_body: ChatResponse = response.json().await?;

        let choice = response_body.choices.first();
        Ok(ChatResult {
            content: choice
                .and_then(|c| c.message.content.clone())
                .unwrap_or_default(),
            tool_calls: choice.and_then(|c| c.message.tool_calls.clone()),
            usage: response_body.usage.into(),
        })
    }

    /// 이미지 분석 요청
    ///
    /// # 보안
    /// - `decrypted_image`는 소유권이 이전됨
    /// - 함수 종료 시 자동으로 drop → zeroize
    /// - base64 문자열도 사용 후 명시적 zeroize
    pub async fn analyze_image(
        &self,
        message: &str,
        decrypted_image: DecryptedImage,
        system_prompt: Option<&str>,
        history: Option<&[HistoryMessage]>,
        tools: Option<&serde_json::Value>,
        tool_choice: Option<&serde_json::Value>,
    ) -> Result<ChatResult, anyhow::Error> {
        let mut image_base64 = decrypted_image.to_base64();
        drop(decrypted_image);

        let current = Message {
            role: "user".to_string(),
            content: Some(MessageContent::MultiPart(vec![
                ContentPart::Text {
                    text: message.to_string(),
                },
                ContentPart::ImageUrl {
                    image_url: ImageUrl {
                        url: format!("data:image/jpeg;base64,{}", image_base64),
                    },
                },
            ])),
            tool_call_id: None,
            tool_calls: None,
        };

        let request_body = ChatRequest {
            model: self.model.clone(),
            messages: Self::build_messages(system_prompt, history, current),
            max_tokens: Some(4096),
            stream: false,
            stream_options: None,
            tools: tools.cloned(),
            tool_choice: tool_choice.cloned(),
        };

        let response = self
            .client
            .post(OPENAI_API_URL)
            .header("Authorization", format!("Bearer {}", &*self.api_key))
            .header("Content-Type", "application/json")
            .json(&request_body)
            .send()
            .await;

        image_base64.zeroize();

        let response = response?;

        if !response.status().is_success() {
            let error_text = response.text().await?;
            return Err(anyhow::anyhow!("OpenAI API error: {}", error_text));
        }

        let response_body: ChatResponse = response.json().await?;

        let choice = response_body.choices.first();
        Ok(ChatResult {
            content: choice
                .and_then(|c| c.message.content.clone())
                .unwrap_or_default(),
            tool_calls: choice.and_then(|c| c.message.tool_calls.clone()),
            usage: response_body.usage.into(),
        })
    }

    /// 텍스트 전용 스트리밍 채팅
    ///
    /// Returns a stream of SSE events and a shared usage tracker.
    /// The usage will be populated when the stream completes.
    pub async fn chat_stream(
        &self,
        message: &str,
        system_prompt: Option<&str>,
        history: Option<&[HistoryMessage]>,
        tools: Option<&serde_json::Value>,
        tool_choice: Option<&serde_json::Value>,
    ) -> Result<(Pin<Box<dyn Stream<Item = Result<Event, CapsuleError>> + Send>>, std::sync::Arc<std::sync::Mutex<TokenUsage>>), anyhow::Error>
    {
        let current = Message {
            role: "user".to_string(),
            content: Some(MessageContent::Text(message.to_string())),
            tool_call_id: None,
            tool_calls: None,
        };

        let request_body = ChatRequest {
            model: self.model.clone(),
            messages: Self::build_messages(system_prompt, history, current),
            max_tokens: Some(4096),
            stream: true,
            stream_options: Some(StreamOptions { include_usage: true }),
            tools: tools.cloned(),
            tool_choice: tool_choice.cloned(),
        };

        let response = self
            .client
            .post(OPENAI_API_URL)
            .header("Authorization", format!("Bearer {}", &*self.api_key))
            .header("Content-Type", "application/json")
            .json(&request_body)
            .send()
            .await?;

        if !response.status().is_success() {
            let error_text = response.text().await?;
            return Err(anyhow::anyhow!("OpenAI API error: {}", error_text));
        }

        let usage = std::sync::Arc::new(std::sync::Mutex::new(TokenUsage::default()));
        let stream = Box::pin(Self::process_stream_with_usage(response, usage.clone()));
        Ok((stream, usage))
    }

    /// 이미지 분석 스트리밍 요청
    ///
    /// Returns a stream of SSE events and a shared usage tracker.
    /// The usage will be populated when the stream completes.
    pub async fn analyze_image_stream(
        &self,
        message: &str,
        decrypted_image: DecryptedImage,
        system_prompt: Option<&str>,
        history: Option<&[HistoryMessage]>,
        tools: Option<&serde_json::Value>,
        tool_choice: Option<&serde_json::Value>,
    ) -> Result<(Pin<Box<dyn Stream<Item = Result<Event, CapsuleError>> + Send>>, std::sync::Arc<std::sync::Mutex<TokenUsage>>), anyhow::Error>
    {
        let mut image_base64 = decrypted_image.to_base64();
        drop(decrypted_image);

        let current = Message {
            role: "user".to_string(),
            content: Some(MessageContent::MultiPart(vec![
                ContentPart::Text {
                    text: message.to_string(),
                },
                ContentPart::ImageUrl {
                    image_url: ImageUrl {
                        url: format!("data:image/jpeg;base64,{}", image_base64),
                    },
                },
            ])),
            tool_call_id: None,
            tool_calls: None,
        };

        let request_body = ChatRequest {
            model: self.model.clone(),
            messages: Self::build_messages(system_prompt, history, current),
            max_tokens: Some(4096),
            stream: true,
            stream_options: Some(StreamOptions { include_usage: true }),
            tools: tools.cloned(),
            tool_choice: tool_choice.cloned(),
        };

        let response = self
            .client
            .post(OPENAI_API_URL)
            .header("Authorization", format!("Bearer {}", &*self.api_key))
            .header("Content-Type", "application/json")
            .json(&request_body)
            .send()
            .await;

        image_base64.zeroize();

        let response = response?;

        if !response.status().is_success() {
            let error_text = response.text().await?;
            return Err(anyhow::anyhow!("OpenAI API error: {}", error_text));
        }

        let usage = std::sync::Arc::new(std::sync::Mutex::new(TokenUsage::default()));
        let stream = Box::pin(Self::process_stream_with_usage(response, usage.clone()));
        Ok((stream, usage))
    }

    /// SSE 스트림 처리 (with usage tracking and tool call accumulation)
    fn process_stream_with_usage(
        response: reqwest::Response,
        usage: std::sync::Arc<std::sync::Mutex<TokenUsage>>,
    ) -> impl Stream<Item = Result<Event, CapsuleError>> {
        async_stream::stream! {
            let mut stream = response.bytes_stream();
            let mut tool_call_buffer: HashMap<u32, AccumulatedToolCall> = HashMap::new();

            while let Some(chunk) = stream.next().await {
                match chunk {
                    Ok(bytes) => {
                        let text = String::from_utf8_lossy(&bytes);

                        for line in text.lines() {
                            if line.starts_with("data: ") {
                                let data = &line[6..];

                                if data == "[DONE]" {
                                    // Emit accumulated tool calls before [DONE] if any
                                    if !tool_call_buffer.is_empty() {
                                        let mut entries: Vec<_> = tool_call_buffer.drain().collect();
                                        entries.sort_by_key(|(idx, _)| *idx);
                                        let tool_calls: Vec<serde_json::Value> = entries
                                            .into_iter()
                                            .map(|(_, tc)| tc.to_json())
                                            .collect();
                                        if let Ok(json) = serde_json::to_string(&tool_calls) {
                                            yield Ok(Event::default().data(format!("[TOOL_CALLS]{}", json)));
                                        }
                                    }
                                    yield Ok(Event::default().data("[DONE]"));
                                    return;
                                }

                                if let Ok(chunk) = serde_json::from_str::<StreamChunk>(data) {
                                    if let Some(u) = chunk.usage {
                                        if let Ok(mut usage_guard) = usage.lock() {
                                            usage_guard.prompt_tokens = u.prompt_tokens;
                                            usage_guard.completion_tokens = u.completion_tokens;
                                            usage_guard.total_tokens = u.total_tokens;
                                        }
                                    }

                                    if let Some(choice) = chunk.choices.first() {
                                        // Stream text content
                                        if let Some(content) = &choice.delta.content {
                                            yield Ok(Event::default().data(content.clone()));
                                        }

                                        // Accumulate tool calls by index
                                        if let Some(ref tcs) = choice.delta.tool_calls {
                                            for tc in tcs {
                                                let entry = tool_call_buffer
                                                    .entry(tc.index)
                                                    .or_insert_with(AccumulatedToolCall::default);

                                                if let Some(ref id) = tc.id {
                                                    entry.id = id.clone();
                                                }
                                                if let Some(ref func) = tc.function {
                                                    if let Some(ref name) = func.name {
                                                        entry.function_name = name.clone();
                                                    }
                                                    if let Some(ref args) = func.arguments {
                                                        entry.arguments.push_str(args);
                                                    }
                                                }
                                            }
                                        }

                                        // Emit tool calls when finish_reason is "tool_calls"
                                        if choice.finish_reason.as_deref() == Some("tool_calls") && !tool_call_buffer.is_empty() {
                                            let mut entries: Vec<_> = tool_call_buffer.drain().collect();
                                            entries.sort_by_key(|(idx, _)| *idx);
                                            let tool_calls: Vec<serde_json::Value> = entries
                                                .into_iter()
                                                .map(|(_, tc)| tc.to_json())
                                                .collect();
                                            if let Ok(json) = serde_json::to_string(&tool_calls) {
                                                yield Ok(Event::default().data(format!("[TOOL_CALLS]{}", json)));
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                    Err(e) => {
                        yield Err(CapsuleError::OpenAIError(e.to_string()));
                        return;
                    }
                }
            }
        }
    }
}

// -- Accumulated tool call buffer --

#[derive(Default)]
struct AccumulatedToolCall {
    id: String,
    function_name: String,
    arguments: String,
}

impl AccumulatedToolCall {
    fn to_json(&self) -> serde_json::Value {
        serde_json::json!({
            "id": self.id,
            "type": "function",
            "function": {
                "name": self.function_name,
                "arguments": self.arguments,
            }
        })
    }
}

// -- OpenAI API request/response types --

#[derive(Serialize)]
struct ChatRequest {
    model: String,
    messages: Vec<Message>,
    #[serde(skip_serializing_if = "Option::is_none")]
    max_tokens: Option<u32>,
    stream: bool,
    #[serde(skip_serializing_if = "Option::is_none")]
    stream_options: Option<StreamOptions>,
    #[serde(skip_serializing_if = "Option::is_none")]
    tools: Option<serde_json::Value>,
    #[serde(skip_serializing_if = "Option::is_none")]
    tool_choice: Option<serde_json::Value>,
}

#[derive(Serialize)]
struct StreamOptions {
    include_usage: bool,
}

#[derive(Serialize)]
struct Message {
    role: String,
    #[serde(skip_serializing_if = "Option::is_none")]
    content: Option<MessageContent>,
    #[serde(skip_serializing_if = "Option::is_none")]
    tool_call_id: Option<String>,
    #[serde(skip_serializing_if = "Option::is_none")]
    tool_calls: Option<serde_json::Value>,
}

#[derive(Serialize)]
#[serde(untagged)]
enum MessageContent {
    Text(String),
    MultiPart(Vec<ContentPart>),
}

#[derive(Serialize)]
#[serde(tag = "type")]
enum ContentPart {
    #[serde(rename = "text")]
    Text { text: String },
    #[serde(rename = "image_url")]
    ImageUrl { image_url: ImageUrl },
}

#[derive(Serialize)]
struct ImageUrl {
    url: String,
}

/// Token usage information from OpenAI API
#[derive(Debug, Clone, Default, Deserialize)]
pub struct TokenUsage {
    pub prompt_tokens: i32,
    pub completion_tokens: i32,
    pub total_tokens: i32,
}

/// Result of a chat request including content and token usage
#[derive(Debug, Clone)]
pub struct ChatResult {
    pub content: String,
    pub tool_calls: Option<serde_json::Value>,
    pub usage: TokenUsage,
}

#[derive(Deserialize)]
struct ChatResponse {
    choices: Vec<Choice>,
    usage: Option<Usage>,
}

#[derive(Deserialize)]
struct Usage {
    prompt_tokens: i32,
    completion_tokens: i32,
    total_tokens: i32,
}

impl From<Option<Usage>> for TokenUsage {
    fn from(usage: Option<Usage>) -> Self {
        match usage {
            Some(u) => TokenUsage {
                prompt_tokens: u.prompt_tokens,
                completion_tokens: u.completion_tokens,
                total_tokens: u.total_tokens,
            },
            None => TokenUsage::default(),
        }
    }
}

#[derive(Deserialize)]
struct Choice {
    message: ResponseMessage,
}

#[derive(Deserialize)]
struct ResponseMessage {
    content: Option<String>,
    tool_calls: Option<serde_json::Value>,
}

#[derive(Deserialize)]
struct StreamChunk {
    choices: Vec<StreamChoice>,
    usage: Option<Usage>,
}

#[derive(Deserialize)]
struct StreamChoice {
    delta: Delta,
    #[serde(default)]
    finish_reason: Option<String>,
}

#[derive(Deserialize)]
struct Delta {
    content: Option<String>,
    #[serde(default)]
    tool_calls: Option<Vec<StreamToolCall>>,
}

#[derive(Deserialize)]
struct StreamToolCall {
    index: u32,
    id: Option<String>,
    #[serde(default)]
    function: Option<StreamToolCallFunction>,
}

#[derive(Deserialize, Default)]
struct StreamToolCallFunction {
    name: Option<String>,
    arguments: Option<String>,
}


================================================
FILE: apps/capsule/src/services/usage.rs
================================================
//! Usage tracking service for rate limiting and billing
//!
//! Communicates with Supabase to:
//! 1. Check subscription status (billing_subscriptions table)
//! 2. Check rate limits (enclave_rate_limits table)
//! 3. Track usage (enclave_usage table)

use reqwest::Client;
use serde::Deserialize;
use zeroize::Zeroizing;

/// Rate limit check result from Supabase RPC
#[derive(Debug, Deserialize)]
pub struct RateLimitStatus {
    /// Whether the request is allowed
    pub allowed: bool,

    /// Reason for denial (if not allowed)
    pub reason: Option<String>,

    /// Whether user has active subscription
    pub subscribed: bool,

    /// Remaining requests for today
    pub requests_remaining: i32,

    /// Remaining tokens for today
    pub tokens_remaining: i32,
}

/// Usage tracking service
///
/// # Security
/// - Service key is stored in `Zeroizing<String>`
/// - All requests use HTTPS to Supabase
/// - Fire-and-forget usage tracking doesn't block responses
#[derive(Clone)]
pub struct UsageTracker {
    client: Client,
    supabase_url: String,
    service_key: Zeroizing<String>,
}

impl UsageTracker {
    /// Create a new usage tracker
    ///
    /// # Arguments
    /// * `supabase_url` - Supabase project URL
    /// * `service_key` - Supabase service role key (NOT anon key)
    pub fn new(supabase_url: String, service_key: Zeroizing<String>) -> Self {
        Self {
            client: Client::new(),
            supabase_url,
            service_key,
        }
    }

    /// Check if user can make a request
    ///
    /// Calls the `check_rate_limit` RPC function which:
    /// 1. Verifies active subscription in billing_subscriptions
    /// 2. Checks daily request/token limits
    ///
    /// # Arguments
    /// * `user_id` - User UUID from JWT claims
    ///
    /// # Returns
    /// * `RateLimitStatus` with allowed flag and remaining quotas
    pub async fn check_rate_limit(&self, user_id: &str) -> Result<RateLimitStatus, anyhow::Error> {
        let url = format!("{}/rest/v1/rpc/check_rate_limit", self.supabase_url);

        tracing::debug!(user_id = %user_id, "Checking rate limit");

        let response = self
            .client
            .post(&url)
            .header("apikey", self.service_key.as_str())
            .header(
                "Authorization",
                format!("Bearer {}", self.service_key.as_str()),
            )
            .header("Content-Type", "application/json")
            .json(&serde_json::json!({ "p_user_id": user_id }))
            .send()
            .await?;

        if !response.status().is_success() {
            let status_code = response.status();
            let error_text = response.text().await.unwrap_or_default();
            tracing::error!(
                status = %status_code,
                error = %error_text,
                "check_rate_limit RPC failed - check if function exists in Supabase"
            );
            return Err(anyhow::anyhow!("Supabase RPC error: {}", error_text));
        }

        let status = response.json::<RateLimitStatus>().await?;
        tracing::debug!(
            allowed = status.allowed,
            subscribed = status.subscribed,
            requests_remaining = status.requests_remaining,
            "Rate limit check result"
        );
        Ok(status)
    }

    /// Track a completed request
    ///
    /// Calls the `increment_usage` RPC function to record:
    /// - Request count
    /// - Input/output tokens
    /// - Image request flag
    ///
    /// # Note
    /// This is designed to be called in a fire-and-forget manner
    /// using `tokio::spawn` to not block the response.
    ///
    /// # Arguments
    /// * `user_id` - User UUID from JWT claims
    /// * `input_tokens` - Number of input tokens used
    /// * `output_tokens` - Number of output tokens generated
    /// * `is_image_request` - Whether this was an image analysis request
    pub async fn track_request(
        &self,
        user_id: &str,
        input_tokens: i32,
        output_tokens: i32,
        is_image_request: bool,
    ) -> Result<(), anyhow::Error> {
        let today = chrono::Utc::now().format("%Y-%m-%d").to_string();
        let url = format!("{}/rest/v1/rpc/increment_usage", self.supabase_url);

        tracing::debug!(
            user_id = %user_id,
            date = %today,
            is_image = is_image_request,
            "Tracking usage request"
        );

        let response = self
            .client
            .post(&url)
            .header("apikey", self.service_key.as_str())
            .header(
                "Authorization",
                format!("Bearer {}", self.service_key.as_str()),
            )
            .header("Content-Type", "application/json")
            .json(&serde_json::json!({
                "p_user_id": user_id,
                "p_date": today,
                "p_request_count": 1,
                "p_input_tokens": input_tokens,
                "p_output_tokens": output_tokens,
                "p_image_requests": if is_image_request { 1 } else { 0 }
            }))
            .send()
            .await?;

        if !response.status().is_success() {
            let status = response.status();
            let error_text = response.text().await.unwrap_or_default();
            tracing::error!(
                status = %status,
                error = %error_text,
                "Failed to track usage - check if increment_usage RPC function exists"
            );
            return Err(anyhow::anyhow!("Supabase RPC error: {}", error_text));
        }

        tracing::info!(user_id = %user_id, "Usage tracked successfully");
        Ok(())
    }
}


================================================
FILE: apps/capsule/src/types/decrypted.rs
================================================
use base64::{engine::general_purpose::STANDARD, Engine};
use zeroize::{Zeroize, ZeroizeOnDrop};

/// 복호화된 이미지 - Capsule 내부에서만 존재
///
/// # 보안 특성
/// - `Debug` 미구현: 로그에 출력 불가
/// - `Display` 미구현: `println!` 등으로 출력 불가
/// - `Clone` 미구현: 복사 불가
/// - `Zeroize` + `ZeroizeOnDrop`: Drop 시 자동 메모리 클리어
///
/// # 컴파일 타임 보안
/// ```compile_fail
/// let img = DecryptedImage::new(vec![1, 2, 3]);
/// println!("{:?}", img);  // 컴파일 에러: Debug 미구현
/// ```
///
/// ```compile_fail
/// let img = DecryptedImage::new(vec![1, 2, 3]);
/// let copy = img.clone();  // 컴파일 에러: Clone 미구현
/// ```
#[derive(Zeroize, ZeroizeOnDrop)]
pub struct DecryptedImage {
    /// 복호화된 이미지 데이터 (private 필드)
    data: Vec<u8>,
}

impl DecryptedImage {
    /// 내부에서만 생성 가능 (crate 내부 가시성)
    pub(crate) fn new(data: Vec<u8>) -> Self {
        Self { data }
    }

    /// OpenAI API 호출용 base64 인코딩
    ///
    /// # 주의
    /// 반환된 `String`도 사용 후 명시적으로 zeroize 권장
    ///
    /// # Example
    /// ```
    /// let mut base64_str = decrypted.to_base64();
    /// // ... OpenAI API 호출 ...
    /// base64_str.zeroize();  // 명시적 클리어
    /// ```
    pub fn to_base64(&self) -> String {
        STANDARD.encode(&self.data)
    }

    /// 이미지 크기 (바이트)
    pub fn len(&self) -> usize {
        self.data.len()
    }

    /// 이미지가 비어있는지 확인
    pub fn is_empty(&self) -> bool {
        self.data.is_empty()
    }
}

// Debug, Display, Clone을 의도적으로 구현하지 않음
// 이는 컴파일 타임에 민감 데이터 노출을 방지함


================================================
FILE: apps/capsule/src/types/encrypted.rs
================================================
use serde::{Deserialize, Serialize};

use crate::error::CapsuleError;

/// 최대 히스토리 메시지 수
const MAX_HISTORY_MESSAGES: usize = 50;

/// 최대 히스토리 총 문자 수 (~25k 토큰)
const MAX_HISTORY_CHARS: usize = 100_000;

/// 허용되는 메시지 역할
const ALLOWED_ROLES: &[&str] = &["user", "assistant", "system", "tool"];

/// 클라이언트에서 전송된 암호화된 이미지
/// 이 타입은 안전하게 로깅 가능 (민감 데이터 없음 - 복호화 불가)
#[derive(Debug, Clone, Serialize, Deserialize)]
pub struct EncryptedImage {
    /// 클라이언트의 임시 공개키 (32 bytes, base64)
    pub ephemeral_public_key: String,
    /// Nonce (24 bytes, base64)
    pub nonce: String,
    /// 암호화된 이미지 데이터 (base64)
    pub ciphertext: String,
    /// 암호화에 사용된 서버 키 ID (하위 호환을 위해 선택사항)
    #[serde(default)]
    pub key_id: Option<String>,
}

/// 대화 히스토리의 단일 메시지
///
/// 클라이언트가 관리하며, 서버는 저장하지 않음 (zero-knowledge)
/// 이미지는 텍스트 요약으로만 포함 가능
#[derive(Debug, Clone, Serialize, Deserialize)]
pub struct HistoryMessage {
    /// 메시지 역할: "user", "assistant", "system", 또는 "tool"
    pub role: String,
    /// 텍스트 내용
    pub content: String,
    /// Tool call ID (role이 "tool"일 때 필수)
    #[serde(default, skip_serializing_if = "Option::is_none")]
    pub tool_call_id: Option<String>,
    /// Tool calls (role이 "assistant"이고 tool call 응답일 때)
    #[serde(default, skip_serializing_if = "Option::is_none")]
    pub tool_calls: Option<serde_json::Value>,
}

/// 채팅 요청
#[derive(Debug, Deserialize)]
pub struct ChatRequest {
    /// 사용자 메시지
    pub message: String,
    /// 암호화된 이미지 (선택사항)
    #[serde(default)]
    pub encrypted_image: Option<EncryptedImage>,
    /// 대화 히스토리 (선택사항, 오래된 순서)
    #[serde(default)]
    pub history: Option<Vec<HistoryMessage>>,
    /// 시스템 프롬프트 (선택사항)
    #[serde(default)]
    pub system_prompt: Option<String>,
    /// OpenAI tools 정의 (프론트엔드에서 주입, 그대로 passthrough)
    #[serde(default)]
    pub tools: Option<serde_json::Value>,
    /// OpenAI tool_choice (프론트엔드에서 주입, 그대로 passthrough)
    /// "auto" | "required" | "none" | {"type":"function","function":{"name":"..."}}
    #[serde(default)]
    pub tool_choice: Option<serde_json::Value>,
}

impl ChatRequest {
    /// 히스토리 유효성 검사
    pub fn validate_history(&self) -> Result<(), CapsuleError> {
        if let Some(history) = &self.history {
            if history.len() > MAX_HISTORY_MESSAGES {
                return Err(CapsuleError::HistoryTooLarge(format!(
                    "History contains {} messages, maximum is {}",
                    history.len(),
                    MAX_HISTORY_MESSAGES
                )));
            }

            let total_chars: usize = history.iter().map(|m| m.content.len()).sum();
            if total_chars > MAX_HISTORY_CHARS {
                return Err(CapsuleError::HistoryTooLarge(format!(
                    "History total size is {} characters, maximum is {}",
                    total_chars, MAX_HISTORY_CHARS
                )));
            }

            for msg in history {
                if !ALLOWED_ROLES.contains(&msg.role.as_str()) {
                    return Err(CapsuleError::HistoryTooLarge(format!(
                        "Invalid role '{}', allowed: {:?}",
                        msg.role, ALLOWED_ROLES
                    )));
                }
            }
        }
        Ok(())
    }
}

/// 채팅 응답
#[derive(Debug, Serialize)]
pub struct ChatResponse {
    /// AI 응답 텍스트
    pub response: String,
    /// Tool calls (함수 호출 요청, 있을 경우)
    #[serde(skip_serializing_if = "Option::is_none")]
    pub tool_calls: Option<serde_json::Value>,
}

/// Public Key 응답
#[derive(Debug, Serialize)]
pub struct PublicKeyResponse {
    /// 서버 공개키 (base64)
    pub public_key: String,
    /// 키 고유 식별자
    pub key_id: String,
    /// 키 만료 예상 시각 (RFC 3339) - 클라이언트 캐시 갱신 힌트
    pub expires_at: String,
}

/// 스트리밍 청크
#[derive(Debug, Serialize)]
pub struct StreamChunk {
    /// 응답 텍스트 조각
    pub content: String,
    /// 완료 여부
    pub done: bool,
}


================================================
FILE: apps/capsule/src/types/mod.rs
================================================
mod encrypted;
mod decrypted;

pub use encrypted::*;
pub use decrypted::*;


================================================
FILE: apps/capsule/tests/api.test.mjs
================================================
/**
 * Capsule API 테스트
 *
 * 사용법:
 *   cd apps/capsule/tests
 *   npm install
 *   npm test                         # 텍스트 전용 테스트
 *   npm test ./path/to/image.jpg     # 이미지 분석 테스트
 */

import { readFileSync } from 'fs';
import { encryptImage } from './crypto.mjs';

const BASE_URL = process.env.CAPSULE_URL || 'http://localhost:3000';

// 테스트 결과 추적
const results = {
  passed: 0,
  failed: 0,
  tests: [],
};

/** 테스트 실행 헬퍼 */
async function test(name, fn) {
  process.stdout.write(`  ${name}... `);
  try {
    await fn();
    console.log('✓');
    results.passed++;
    results.tests.push({ name, status: 'passed' });
  } catch (error) {
    console.log('✗');
    console.log(`    Error: ${error.message}`);
    results.failed++;
    results.tests.push({ name, status: 'failed', error: error.message });
  }
}

/** 단언 헬퍼 */
function assert(condition, message) {
  if (!condition) {
    throw new Error(message || 'Assertion failed');
  }
}

function assertEqual(actual, expected, message) {
  if (actual !== expected) {
    throw new Error(message || `Expected ${expected}, got ${actual}`);
  }
}

/** API 호출 헬퍼 */
async function api(path, options = {}) {
  const response = await fetch(`${BASE_URL}${path}`, {
    headers: { 'Content-Type': 'application/json' },
    ...options,
  });

  if (!response.ok) {
    const error = await response.text();
    throw new Error(`API Error ${response.status}: ${error}`);
  }

  const contentType = response.headers.get('content-type');
  if (contentType && contentType.includes('application/json')) {
    return response.json();
  }
  return response.text();
}

// ============================================
// 테스트 케이스
// ============================================

async function testHealthCheck() {
  const response = await fetch(`${BASE_URL}/health`);
  assertEqual(response.status, 200, 'Health check should return 200');
  const text = await response.text();
  assertEqual(text, 'OK', 'Health check should return OK');
}

async function testPublicKey() {
  const data = await api('/api/public-key');
  assert(data.public_key, 'Response should have public_key');
  assert(data.public_key.length > 0, 'Public key should not be empty');
  // Base64 encoded 32 bytes = 44 characters
  assertEqual(data.public_key.length, 44, 'Public key should be 44 chars (base64 of 32 bytes)');
  return data.public_key;
}

async function testTextChat() {
  const data = await api('/api/chat', {
    method: 'POST',
    body: JSON.stringify({ message: '1+1은?' }),
  });
  assert(data.response, 'Response should have response field');
  assert(data.response.length > 0, 'Response should not be empty');
}

async function testTextChatEmptyMessage() {
  const data = await api('/api/chat', {
    method: 'POST',
    body: JSON.stringify({ message: '' }),
  });
  // 빈 메시지도 처리되어야 함
  assert(data.response !== undefined, 'Response should exist');
}

async function testImageEncryption(publicKey) {
  // 테스트용 더미 이미지 데이터 (1x1 JPEG)
  const dummyJpeg = new Uint8Array([
    0xff, 0xd8, 0xff, 0xe0, 0x00, 0x10, 0x4a, 0x46, 0x49, 0x46, 0x00, 0x01,
    0x01, 0x00, 0x00, 0x01, 0x00, 0x01, 0x00, 0x00, 0xff, 0xdb, 0x00, 0x43,
    0x00, 0x08, 0x06, 0x06, 0x07, 0x06, 0x05, 0x08, 0x07, 0x07, 0x07, 0x09,
    0x09, 0x08, 0x0a, 0x0c, 0x14, 0x0d, 0x0c, 0x0b, 0x0b, 0x0c, 0x19, 0x12,
    0x13, 0x0f, 0x14, 0x1d, 0x1a, 0x1f, 0x1e, 0x1d, 0x1a, 0x1c, 0x1c, 0x20,
    0x24, 0x2e, 0x27, 0x20, 0x22, 0x2c, 0x23, 0x1c, 0x1c, 0x28, 0x37, 0x29,
    0x2c, 0x30, 0x31, 0x34, 0x34, 0x34, 0x1f, 0x27, 0x39, 0x3d, 0x38, 0x32,
    0x3c, 0x2e, 0x33, 0x34, 0x32, 0xff, 0xc0, 0x00, 0x0b, 0x08, 0x00, 0x01,
    0x00, 0x01, 0x01, 0x01, 0x11, 0x00, 0xff, 0xc4, 0x00, 0x1f, 0x00, 0x00,
    0x01, 0x05, 0x01, 0x01, 0x01, 0x01, 0x01, 0x01, 0x00, 0x00, 0x00, 0x00,
    0x00, 0x00, 0x00, 0x00, 0x01, 0x02, 0x03, 0x04, 0x05, 0x06, 0x07, 0x08,
    0x09, 0x0a, 0x0b, 0xff, 0xc4, 0x00, 0xb5, 0x10, 0x00, 0x02, 0x01, 0x03,
    0x03, 0x02, 0x04, 0x03, 0x05, 0x05, 0x04, 0x04, 0x00, 0x00, 0x01, 0x7d,
    0x01, 0x02, 0x03, 0x00, 0x04, 0x11, 0x05, 0x12, 0x21, 0x31, 0x41, 0x06,
    0x13, 0x51, 0x61, 0x07, 0x22, 0x71, 0x14, 0x32, 0x81, 0x91, 0xa1, 0x08,
    0x23, 0x42, 0xb1, 0xc1, 0x15, 0x52, 0xd1, 0xf0, 0x24, 0x33, 0x62, 0x72,
    0x82, 0x09, 0x0a, 0x16, 0x17, 0x18, 0x19, 0x1a, 0x25, 0x26, 0x27, 0x28,
    0x29, 0x2a, 0x34, 0x35, 0x36, 0x37, 0x38, 0x39, 0x3a, 0x43, 0x44, 0x45,
    0x46, 0x47, 0x48, 0x49, 0x4a, 0x53, 0x54, 0x55, 0x56, 0x57, 0x58, 0x59,
    0x5a, 0x63, 0x64, 0x65, 0x66, 0x67, 0x68, 0x69, 0x6a, 0x73, 0x74, 0x75,
    0x76, 0x77, 0x78, 0x79, 0x7a, 0x83, 0x84, 0x85, 0x86, 0x87, 0x88, 0x89,
    0x8a, 0x92, 0x93, 0x94, 0x95, 0x96, 0x97, 0x98, 0x99, 0x9a, 0xa2, 0xa3,
    0xa4, 0xa5, 0xa6, 0xa7, 0xa8, 0xa9, 0xaa, 0xb2, 0xb3, 0xb4, 0xb5, 0xb6,
    0xb7, 0xb8, 0xb9, 0xba, 0xc2, 0xc3, 0xc4, 0xc5, 0xc6, 0xc7, 0xc8, 0xc9,
    0xca, 0xd2, 0xd3, 0xd4, 0xd5, 0xd6, 0xd7, 0xd8, 0xd9, 0xda, 0xe1, 0xe2,
    0xe3, 0xe4, 0xe5, 0xe6, 0xe7, 0xe8, 0xe9, 0xea, 0xf1, 0xf2, 0xf3, 0xf4,
    0xf5, 0xf6, 0xf7, 0xf8, 0xf9, 0xfa, 0xff, 0xda, 0x00, 0x08, 0x01, 0x01,
    0x00, 0x00, 0x3f, 0x00, 0xfb, 0xd5, 0xdb, 0x20, 0xa8, 0xf1, 0x45, 0x10,
    0xff, 0xd9,
  ]);

  const encrypted = await encryptImage(dummyJpeg, publicKey);

  assert(encrypted.ephemeral_public_key, 'Should have ephemeral_public_key');
  assert(encrypted.nonce, 'Should have nonce');
  assert(encrypted.ciphertext, 'Should have ciphertext');

  assertEqual(encrypted.ephemeral_public_key.length, 44, 'Ephemeral public key should be 44 chars');
  assertEqual(encrypted.nonce.length, 32, 'Nonce should be 32 chars (24 bytes base64)');
  assert(encrypted.ciphertext.length > 0, 'Ciphertext should not be empty');
}

async function testImageAnalysis(imagePath, publicKey) {
  // 이미지 로드
  const imageData = new Uint8Array(readFileSync(imagePath));
  console.log(`\n    Image: ${imagePath} (${imageData.length} bytes)`);

  // 이미지 암호화
  const encrypted = await encryptImage(imageData, publicKey);
  console.log(`    Encrypted: ${encrypted.ciphertext.length} chars (base64)`);

  // API 호출
  const data = await api('/api/chat', {
    method: 'POST',
    body: JSON.stringify({
      message: '이 이미지에 무엇이 있는지 간단히 설명해주세요.',
      encrypted_image: encrypted,
    }),
  });

  assert(data.response, 'Response should have response field');
  assert(data.response.length > 0, 'Response should not be empty');
  console.log(`    Response: ${data.response.substring(0, 100)}...`);
}

async function testInvalidEncryptedImage() {
  try {
    await api('/api/chat', {
      method: 'POST',
      body: JSON.stringify({
        message: 'test',
        encrypted_image: {
          ephemeral_public_key: 'invalid',
          nonce: 'invalid',
          ciphertext: 'invalid',
        },
      }),
    });
    throw new Error('Should have thrown error for invalid encrypted image');
  } catch (error) {
    assert(error.message.includes('API Error'), 'Should return API error');
  }
}

// ============================================
// 메인
// ============================================

async function main() {
  console.log(`\nCapsule API Tests`);
  console.log(`Server: ${BASE_URL}`);
  console.log('─'.repeat(50));

  let publicKey = null;

  // 기본 테스트
  console.log('\n[Basic Tests]');
  await test('Health check', testHealthCheck);
  await test('Get public key', async () => {
    publicKey = await testPublicKey();
  });

  // 텍스트 채팅 테스트
  console.log('\n[Text Chat Tests]');
  await test('Text chat', testTextChat);
  await test('Empty message', testTextChatEmptyMessage);

  // 암호화 테스트
  console.log('\n[Encryption Tests]');
  await test('Image encryption', () => testImageEncryption(publicKey));
  await test('Invalid encrypted image', testInvalidEncryptedImage);

  // 이미지 분석 테스트 (이미지 경로가 제공된 경우)
  const imagePath = process.argv[2];
  if (imagePath) {
    console.log('\n[Image Analysis Tests]');
    await test('Image analysis', () => testImageAnalysis(imagePath, publicKey));
  } else {
    console.log('\n[Image Analysis Tests]');
    console.log('  Skipped (no image path provided)');
    console.log('  Usage: npm test ./path/to/image.jpg');
  }

  // 결과 출력
  console.log('\n' + '─'.repeat(50));
  console.log(`Results: ${results.passed} passed, ${results.failed} failed`);

  if (results.failed > 0) {
    console.log('\nFailed tests:');
    results.tests
      .filter((t) => t.status === 'failed')
      .forEach((t) => console.log(`  - ${t.name}: ${t.error}`));
    process.exit(1);
  }

  console.log('\nAll tests passed! ✓\n');
}

main().catch((error) => {
  console.error('\nTest suite failed:', error.message);
  process.exit(1);
});


================================================
FILE: apps/capsule/tests/crypto.mjs
================================================
/**
 * 클라이언트 측 암호화 유틸리티
 * 서버의 암호화 스킴과 동일하게 구현
 */

import { x25519 } from '@noble/curves/ed25519';
import { xchacha20poly1305 } from '@noble/ciphers/chacha';
import { hkdf } from '@noble/hashes/hkdf';
import { sha256 } from '@noble/hashes/sha256';
import { randomBytes } from '@noble/ciphers/webcrypto';

/** HKDF 상수 (서버와 동일해야 함) */
const HKDF_SALT = new TextEncoder().encode('vessel-capsule-v1-salt');
const HKDF_INFO = new TextEncoder().encode('vessel-capsule-v1-key');

/** Base64 인코딩 */
export function bytesToBase64(bytes) {
  return Buffer.from(bytes).toString('base64');
}

/** Base64 디코딩 */
export function base64ToBytes(base64) {
  return new Uint8Array(Buffer.from(base64, 'base64'));
}

/**
 * 이미지를 서버 공개키로 암호화
 *
 * @param {Uint8Array} imageData - 암호화할 이미지 데이터
 * @param {string} serverPublicKeyBase64 - 서버 공개키 (base64)
 * @returns {Promise<Object>} 암호화된 이미지 데이터
 */
export async function encryptImage(imageData, serverPublicKeyBase64) {
  // 1. 서버 공개키 디코딩
  const serverPublicKey = base64ToBytes(serverPublicKeyBase64);

  // 2. 클라이언트 임시 키 쌍 생성
  const ephemeralPrivateKey = randomBytes(32);
  const ephemeralPublicKey = x25519.getPublicKey(ephemeralPrivateKey);

  // 3. Shared secret 계산 (X25519 ECDH)
  const sharedSecret = x25519.getSharedSecret(ephemeralPrivateKey, serverPublicKey);

  // 4. HKDF로 대칭키 유도
  const symmetricKey = hkdf(sha256, sharedSecret, HKDF_SALT, HKDF_INFO, 32);

  // 5. Nonce 생성 (24 bytes)
  const nonce = randomBytes(24);

  // 6. XChaCha20-Poly1305로 암호화
  const cipher = xchacha20poly1305(symmetricKey, nonce);
  const ciphertext = cipher.encrypt(imageData);

  // 민감 데이터 클리어
  ephemeralPrivateKey.fill(0);
  sharedSecret.fill(0);
  symmetricKey.fill(0);

  return {
    ephemeral_public_key: bytesToBase64(ephemeralPublicKey),
    nonce: bytesToBase64(nonce),
    ciphertext: bytesToBase64(ciphertext),
  };
}


================================================
FILE: apps/capsule/tests/package.json
================================================
{
  "name": "capsule-tests",
  "type": "module",
  "private": true,
  "scripts": {
    "test": "node api.test.mjs",
    "test:image": "node api.test.mjs"
  },
  "dependencies": {
    "@noble/ciphers": "^0.5.0",
    "@noble/curves": "^1.3.0",
    "@noble/hashes": "^1.3.3"
  }
}


================================================
FILE: apps/client/.gitignore
================================================
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*

node_modules
dist
dist-ssr
*.local

# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

maindist

================================================
FILE: apps/client/README.md
================================================
# client


================================================
FILE: apps/client/components.json
================================================
{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "new-york",
  "rsc": false,
  "tsx": true,
  "tailwind": {
    "config": "tailwind.config.js",
    "css": "src/index.css",
    "baseColor": "neutral",
    "cssVariables": true,
    "prefix": ""
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/components/ui",
    "lib": "@/lib",
    "hooks": "@/hooks"
  },
  "iconLibrary": "lucide"
}


================================================
FILE: apps/client/eslint.config.js
================================================
import js from "@eslint/js";
import globals from "globals";
import reactHooks from "eslint-plugin-react-hooks";
import reactRefresh from "eslint-plugin-react-refresh";
import tseslint from "typescript-eslint";

export default tseslint.config(
  { ignores: ["dist"] },
  {
    extends: [js.configs.recommended, ...tseslint.configs.recommended],
    files: ["**/*.{ts,tsx}"],
    languageOptions: {
      ecmaVersion: 2020,
      globals: globals.browser,
    },
    plugins: {
      "react-hooks": reactHooks,
      "react-refresh": reactRefresh,
    },
    rules: {
      ...reactHooks.configs.recommended.rules,
      "react-refresh/only-export-components": [
        "warn",
        { allowConstantExport: true },
      ],
    },
  },
);


================================================
FILE: apps/client/index.html
================================================
<!DOCTYPE html>
<html lang="en" class="dark">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vessel</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>


================================================
FILE: apps/client/package.json
================================================
{
  "name": "client",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "main": "maindist/main.js",
  "scripts": {
    "dev": "concurrently \"npm run dev:vite\"",
    "dev:vite": "vite --host",
    "build:main": "tsc -p ./configs/electron",
    "build:app": "tsc -b && vite build",
    "build:vite": "tsc -b && vite build",
    "build": "vite build",
    "lint": "eslint .",
    "preview": "vite preview",
    "test": "vitest run",
    "test:watch": "vitest"
  },
  "dependencies": {
    "@vessel/capsule-client": "file:../../packages/capsule-client",
    "@codemirror/lang-json": "^6.0.2",
    "@emotion/react": "^11.14.0",
    "@monaco-editor/react": "^4.7.0",
    "@radix-ui/react-alert-dialog": "^1.1.14",
    "@radix-ui/react-avatar": "^1.1.10",
    "@radix-ui/react-context-menu": "^2.2.16",
    "@radix-ui/react-dialog": "^1.1.15",
    "@radix-ui/react-dropdown-menu": "^2.1.15",
    "@radix-ui/react-label": "^2.1.7",
    "@radix-ui/react-navigation-menu": "^1.2.14",
    "@radix-ui/react-popover": "^1.1.15",
    "@radix-ui/react-scroll-area": "^1.2.10",
    "@radix-ui/react-select": "^2.2.5",
    "@radix-ui/react-separator": "^1.1.7",
    "@radix-ui/react-slot": "^1.2.3",
    "@radix-ui/react-switch": "^1.2.5",
    "@radix-ui/react-tabs": "^1.1.13",
    "@radix-ui/react-tooltip": "^1.2.7",
    "@shadcn/ui": "^0.0.4",
    "@supabase/supabase-js": "^2.49.4",
    "@tailwindcss/postcss": "^4.1.8",
    "@tauri-apps/api": "^2.2.0",
    "@tauri-apps/plugin-shell": "^2.3.4",
    "@uiw/react-codemirror": "^4.24.2",
    "autoprefixer": "^10.4.21",
    "axios": "^1.11.0",
    "clsx": "^2.1.1",
    "cmdk": "^1.1.1",
    "d3": "^7.9.0",
    "electron": "^35.0.0",
    "js-cookie": "^3.0.5",
    "leaflet": "^1.9.4",
    "maplibre-gl": "^5.6.2",
    "next-themes": "^0.4.6",
    "postcss": "^8.5.4",
    "react-hook-form": "^7.62.0",
    "react-icons": "^5.5.0",
    "react-leaflet": "^5.0.0",
    "react-map-gl": "^8.0.4",
    "react-resizable-panels": "^3.0.5",
    "sonner": "^2.0.5",
    "vite-plugin-dts": "^4.5.3",
    "zustand": "^5.0.5"
  },
  "devDependencies": {
    "vitest": "^3.0.0",
    "@eslint/js": "^9.21.0",
    "@types/d3": "^7.4.3",
    "@types/js-cookie": "^3.0.6",
    "@types/leaflet": "^1.9.20",
    "wait-on": "^8.0.3"
  }
}


================================================
FILE: apps/client/src/App.tsx
================================================
import { AuthPage } from "./pages/auth";

import { createBrowserRouter, RouterProvider } from "react-router";
import {
  DashboardSwipeLayout,
  DashboardSwipeRoutePlaceholder,
} from "./features/dashboard-swipe/DashboardSwipeLayout";
import { DevicePage } from "./pages/devices";
import { FlowPage } from "./pages/flow";
import { AuthInterceptor } from "./features/auth/AuthInterceptor";
import { NotFound } from "./pages/notfound";
import LandingPage from "./pages/landing";
import { MapPage } from "./pages/map";
import { SetupPage } from "./pages/setup";
import { CodePage } from "./pages/code";
import { AuthenticatedLayout } from "./widgets/auth/AuthenticatedLayout";
import { TopBarWrapper } from "./widgets/auth/TopBarWrapper";
import { useDesktopSidecar } from "./hooks/useDesktopSidecar";
import { usePreventBackNavigation } from "./hooks/usePreventBackNavigation";
import { SettingsPage } from "./pages/settings";
import { AccountSettingsPage } from "./pages/settings/account";
import { ServicesSettingsPage } from "./pages/settings/services";
import { UsersSettingsPage } from "./pages/settings/users";
import { NetworksSettingsPage } from "./pages/settings/networks";
import { IntegrationSettingsPage } from "./pages/settings/integration";
import { LogSettingsPage } from "./pages/settings/log";
import { ConfigSettingsPage } from "./pages/settings/config";
import { RecordingsPage } from "./pages/recordings";
import { DesktopSettingsPage } from "./pages/desktop-settings";

const router = createBrowserRouter([
  {
    path: "/",
    element: <LandingPage />,
  },
  {
    path: "/auth",
    element: (
      <TopBarWrapper hide={true}>
        <AuthPage />
      </TopBarWrapper>
    ),
  },
  {
    element: <AuthenticatedLayout />,
    children: [
      {
        element: (
          <AuthInterceptor>
            <DashboardSwipeLayout />
          </AuthInterceptor>
        ),
        children: [
          {
            path: "/dashboard",
            element: <DashboardSwipeRoutePlaceholder />,
          },
          {
            path: "/dynamic-dashboard/new",
            element: <DashboardSwipeRoutePlaceholder />,
          },
          {
            path: "/dynamic-dashboard/:dashboardId",
            element: <DashboardSwipeRoutePlaceholder />,
          },
          {
            path: "/dynamic-dashboard",
            element: <DashboardSwipeRoutePlaceholder />,
          },
        ],
      },
      {
        path: "/devices",
        element: (
          <AuthInterceptor>
            <DevicePage />
          </AuthInterceptor>
        ),
      },
      {
        path: "/flow",
        element: (
          <AuthInterceptor>
            <FlowPage />
          </AuthInterceptor>
        ),
      },
      {
        path: "/map",
        element: (
          <AuthInterceptor>
            <MapPage />
          </AuthInterceptor>
        ),
      },
      {
        path: "/setup",
        element: (
          <AuthInterceptor>
            <SetupPage />
          </AuthInterceptor>
        ),
      },
      {
        path: "/settings",
        element: (
          <AuthInterceptor>
            <SettingsPage />
          </AuthInterceptor>
        ),
      },
      {
        path: "/settings/account",
        element: (
          <AuthInterceptor>
            <AccountSettingsPage />
          </AuthInterceptor>
        ),
      },
      {
        path: "/settings/services",
        element: (
          <AuthInterceptor>
            <ServicesSettingsPage />
          </AuthInterceptor>
        ),
      },
      {
        path: "/settings/users",
        element: (
          <AuthInterceptor>
            <UsersSettingsPage />
          </AuthInterceptor>
        ),
      },
      {
        path: "/settings/networks",
        element: (
          <AuthInterceptor>
            <NetworksSettingsPage />
          </AuthInterceptor>
        ),
      },
      {
        path: "/settings/integration",
        element: (
          <AuthInterceptor>
            <IntegrationSettingsPage />
          </AuthInterceptor>
        ),
      },
      {
        path: "/settings/log",
        element: (
          <AuthInterceptor>
            <LogSettingsPage />
          </AuthInterceptor>
        ),
      },
      {
        path: "/settings/config",
        element: (
          <AuthInterceptor>
            <ConfigSettingsPage />
          </AuthInterceptor>
        ),
      },
      {
        path: "/code",
        element: (
          <AuthInterceptor>
            <CodePage />
          </AuthInterceptor>
        ),
      },
      {
        path: "/recordings",
        element: (
          <AuthInterceptor>
            <RecordingsPage />
          </AuthInterceptor>
        ),
      },
    ],
  },
  {
    path: "*",
    element: (
      <TopBarWrapper>
        <NotFound />
      </TopBarWrapper>
    ),
  },
]);

const isDesktopSettingsWindow = (): boolean => {
  if (typeof window === "undefined") return false;
  try {
    const params = new URLSearchParams(window.location.search);
    if (params.get("view") === "desktop_settings") return true;
    if (params.get("desktop_settings") === "1") return true;
    if (window.location.hash.includes("desktop_settings")) return true;
    return false;
  } catch {
    return false;
  }
};

function App() {
  useDesktopSidecar();
  usePreventBackNavigation();

  if (isDesktopSettingsWindow()) {
    return <DesktopSettingsPage />;
  }

  return (
    <>
      <RouterProvider router={router} />
    </>
  );
}

export default App;


================================================
FILE: apps/client/src/app/pageWrapper/page-wrapper.tsx
================================================
import { isElectron } from "@/lib/electron";
import type { PropsWithChildren } from "react";

export function PageWrapper(props: PropsWithChildren) {
  if (isElectron()) {
    return (
      <div className='relative overflow-scroll h-[calc(100%_-_34px)] top-[34px]'>
        {props.children}
      </div>
    );
  } else {
    return (
      <div className='relative overflow-scroll h-full'>{props.children}</div>
    );
  }
}


================================================
FILE: apps/client/src/app/providers/theme-provider.tsx
================================================
import { createContext, useContext, useEffect, useState } from "react";

type Theme = "dark" | "light" | "system";

type ThemeProviderProps = {
  children: React.ReactNode;
  defaultTheme?: Theme;
  storageKey?: string;
};

type ThemeProviderState = {
  theme: Theme;
  setTheme: (theme: Theme) => void;
};

const initialState: ThemeProviderState = {
  theme: "system",
  setTheme: () => null,
};

const ThemeProviderContext = createContext<ThemeProviderState>(initialState);

export function ThemeProvider({
  children,
  defaultTheme = "system",
  storageKey = "vite-ui-theme",
  ...props
}: ThemeProviderProps) {
  const [theme, setTheme] = useState<Theme>(
    () => (localStorage.getItem(storageKey) as Theme) || defaultTheme
  );

  useEffect(() => {
    const root = window.document.documentElement;

    root.classList.remove("light", "dark");

    if (theme === "system") {
      const systemTheme = window.matchMedia("(prefers-color-scheme: dark)")
        .matches
        ? "dark"
        : "light";

      root.classList.add(systemTheme);
      return;
    }

    root.classList.add(theme);
  }, [theme]);

  const value = {
    theme,
    setTheme: (theme: Theme) => {
      localStorage.setItem(storageKey, theme);
      setTheme(theme);
    },
  };

  return (
    <ThemeProviderContext.Provider {...props} value={value}>
      {children}
    </ThemeProviderContext.Provider>
  );
}

export const useTheme = () => {
  const context = useContext(ThemeProviderContext);

  if (context === undefined)
    throw new Error("useTheme must be used within a ThemeProvider");

  return context;
};


================================================
FILE: apps/client/src/components/icon/Logo.tsx
================================================
export function VesselLogo() {
  return (
    <svg
      width='285'
      height='133'
      viewBox='0 0 285 133'
      fill='none'
      xmlns='http://www.w3.org/2000/svg'
    >
      <path
        d='M168.023 87.8333L161.544 87.2898L155.965 65.3658L138.509 58.843L137.429 54.4945L139.589 54.8568L139.949 52.139L135.99 50.3271L134.37 52.5014L135.27 58.2994H131.671L129.151 36.5567L139.229 36.1943V34.5636L128.251 34.2012L127.891 28.5844L133.47 28.7656L133.29 27.316L127.351 26.5913L126.992 22.6051L137.429 23.5111L137.069 21.6992L126.812 20.9744L126.272 18.4378L128.971 17.8942V15.5387L123.032 14.6328V8.47234H125.552V7.20401H123.032V0.5H121.953L120.693 15.5387L118.893 16.0823V17.8942L120.693 18.9813V20.9744H111.695V22.4239L121.953 23.1487V34.2012H107.736V35.6508L123.032 36.7379L121.953 46.8845L119.793 59.2054L115.114 65.3658L107.196 66.8154L96.398 65.3658L94.5984 72.251L92.6189 65.3658L83.0809 66.8154L67.6042 65.9094L65.6246 70.6203H59.8658L57.8862 76.2372L45.109 74.9689L18.6546 77.6867L17.7548 82.76H0.838379L6.41719 93.0878L136.889 118.998L247.386 131.5L261.423 114.831L282.838 99.7918L216.972 94.8997H173.242L171.622 91.0947L168.563 90.1888L168.023 87.8333Z'
        fill='#EEEEF5'
        stroke='#EEEEF5'
      />
    </svg>
  );
}


================================================
FILE: apps/client/src/components/ui/alert-dialog.tsx
================================================
import * as React from "react";
import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";

import { cn } from "@/lib/utils";
import { buttonVariants } from "@/components/ui/button";

function AlertDialog({
  ...props
}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
  return <AlertDialogPrimitive.Root data-slot='alert-dialog' {...props} />;
}

function AlertDialogTrigger({
  ...props
}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
  return (
    <AlertDialogPrimitive.Trigger data-slot='alert-dialog-trigger' {...props} />
  );
}

function AlertDialogPortal({
  ...props
}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
  return (
    <AlertDialogPrimitive.Portal data-slot='alert-dialog-portal' {...props} />
  );
}

function AlertDialogOverlay({
  className,
  ...props
}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
  return (
    <AlertDialogPrimitive.Overlay
      data-slot='alert-dialog-overlay'
      className={cn(
        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
        className,
      )}
      {...props}
    />
  );
}

function AlertDialogContent({
  className,
  ...props
}: React.ComponentProps<typeof AlertDialogPrimitive.Content>) {
  return (
    <AlertDialogPortal>
      <AlertDialogOverlay />
      <AlertDialogPrimitive.Content
        data-slot='alert-dialog-content'
        className={cn(
          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg duration-200 sm:max-w-lg",
          className,
        )}
        {...props}
      />
    </AlertDialogPortal>
  );
}

function AlertDialogHeader({
  className,
  ...props
}: React.ComponentProps<"div">) {
  return (
    <div
      data-slot='alert-dialog-header'
      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
      {...props}
    />
  );
}

function AlertDialogFooter({
  className,
  ...props
}: React.ComponentProps<"div">) {
  return (
    <div
      data-slot='alert-dialog-footer'
      className={cn(
        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
        className,
      )}
      {...props}
    />
  );
}

function AlertDialogTitle({
  className,
  ...props
}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
  return (
    <AlertDialogPrimitive.Title
      data-slot='alert-dialog-title'
      className={cn("text-lg font-semibold", className)}
      {...props}
    />
  );
}

function AlertDialogDescription({
  className,
  ...props
}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
  return (
    <AlertDialogPrimitive.Description
      data-slot='alert-dialog-description'
      className={cn("text-muted-foreground text-sm", className)}
      {...props}
    />
  );
}

function AlertDialogAction({
  className,
  ...props
}: React.ComponentProps<typeof AlertDialogPrimitive.Action>) {
  return (
    <AlertDialogPrimitive.Action
      className={cn(buttonVariants(), className)}
      {...props}
    />
  );
}

function AlertDialogCancel({
  className,
  ...props
}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) {
  return (
    <AlertDialogPrimitive.Cancel
      className={cn(buttonVariants({ variant: "outline" }), className)}
      {...props}
    />
  );
}

export {
  AlertDialog,
  AlertDialogPortal,
  AlertDialogOverlay,
  AlertDialogTrigger,
  AlertDialogContent,
  AlertDialogHeader,
  AlertDialogFooter,
  AlertDialogTitle,
  AlertDialogDescription,
  AlertDialogAction,
  AlertDialogCancel,
};


================================================
FILE: apps/client/src/components/ui/alert.tsx
================================================
import * as React from "react";
import { cva, type VariantProps } from "class-variance-authority";

import { cn } from "@/lib/utils";

const alertVariants = cva(
  "relative w-full border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7",
  {
    variants: {
      variant: {
        default: "bg-background text-foreground",
        destructive:
          "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
      },
    },
    defaultVariants: {
      variant: "default",
    },
  },
);

const Alert = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
>(({ className, variant, ...props }, ref) => (
  <div
    ref={ref}
    role='alert'
    className={cn(alertVariants({ variant }), className)}
    {...props}
  />
));
Alert.displayName = "Alert";

const AlertTitle = React.forwardRef<
  HTMLParagraphElement,
  React.HTMLAttributes<HTMLHeadingElement>
>(({ className, ...props }, ref) => (
  <h5
    ref={ref}
    className={cn("mb-1 font-medium leading-none tracking-tight", className)}
    {...props}
  />
));
AlertTitle.displayName = "AlertTitle";

const AlertDescription = React.forwardRef<
  HTMLParagraphElement,
  React.HTMLAttributes<HTMLParagraphElement>
>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={cn("text-sm [&_p]:leading-relaxed", className)}
    {...props}
  />
));
AlertDescription.displayName = "AlertDescription";

export { Alert, AlertTitle, AlertDescription };


================================================
FILE: apps/client/src/components/ui/avatar.tsx
================================================
import * as React from "react"
import * as AvatarPrimitive from "@radix-ui/react-avatar"

import { cn } from "@/lib/utils"

function Avatar({
  className,
  ...props
}: React.ComponentProps<typeof AvatarPrimitive.Root>) {
  return (
    <AvatarPrimitive.Root
      data-slot="avatar"
      className={cn(
        "relative flex size-8 shrink-0 overflow-hidden rounded-full",
        className
      )}
      {...props}
    />
  )
}

function AvatarImage({
  className,
  ...props
}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
  return (
    <AvatarPrimitive.Image
      data-slot="avatar-image"
      className={cn("aspect-square size-full", className)}
      {...props}
    />
  )
}

function AvatarFallback({
  className,
  ...props
}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
  return (
    <AvatarPrimitive.Fallback
      data-slot="avatar-fallback"
      className={cn(
        "bg-muted flex size-full items-center justify-center rounded-full",
        className
      )}
      {...props}
    />
  )
}

export { Avatar, AvatarImage, AvatarFallback }


================================================
FILE: apps/client/src/components/ui/badge.tsx
================================================
import * as React from "react";
import { Slot } from "@radix-ui/react-slot";
import { cva, type VariantProps } from "class-variance-authority";

import { cn } from "@/lib/utils";

const badgeVariants = cva(
  "inline-flex items-center justify-center border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
  {
    variants: {
      variant: {
        default:
          "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
        secondary:
          "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
        destructive:
          "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
        outline:
          "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
      },
    },
    defaultVariants: {
      variant: "default",
    },
  },
);

function Badge({
  className,
  variant,
  asChild = false,
  ...props
}: React.ComponentProps<"span"> &
  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
  const Comp = asChild ? Slot : "span";

  return (
    <Comp
      data-slot='badge'
      className={cn(badgeVariants({ variant }), className)}
      {...props}
    />
  );
}

export { Badge, badgeVariants };


================================================
FILE: apps/client/src/components/ui/breadcrumb.tsx
================================================
import * as React from "react"
import { Slot } from "@radix-ui/react-slot"
import { ChevronRight, MoreHorizontal } from "lucide-react"

import { cn } from "@/lib/utils"

function Breadcrumb({ ...props }: React.ComponentProps<"nav">) {
  return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />
}

function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
  return (
    <ol
      data-slot="breadcrumb-list"
      className={cn(
        "text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5",
        className
      )}
      {...props}
    />
  )
}

function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) {
  return (
    <li
      data-slot="breadcrumb-item"
      className={cn("inline-flex items-center gap-1.5", className)}
      {...props}
    />
  )
}

function BreadcrumbLink({
  asChild,
  className,
  ...props
}: React.ComponentProps<"a"> & {
  asChild?: boolean
}) {
  const Comp = asChild ? Slot : "a"

  return (
    <Comp
      data-slot="breadcrumb-link"
      className={cn("hover:text-foreground transition-colors", className)}
      {...props}
    />
  )
}

function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) {
  return (
    <span
      data-slot="breadcrumb-page"
      role="link"
      aria-disabled="true"
      aria-current="page"
      className={cn("text-foreground font-normal", className)}
      {...props}
    />
  )
}

function BreadcrumbSeparator({
  children,
  className,
  ...props
}: React.ComponentProps<"li">) {
  return (
    <li
      data-slot="breadcrumb-separator"
      role="presentation"
      aria-hidden="true"
      className={cn("[&>svg]:size-3.5", className)}
      {...props}
    >
      {children ?? <ChevronRight />}
    </li>
  )
}

function BreadcrumbEllipsis({
  className,
  ...props
}: React.ComponentProps<"span">) {
  return (
    <span
      data-slot="breadcrumb-ellipsis"
      role="presentation"
      aria-hidden="true"
      className={cn("flex size-9 items-center justify-center", className)}
      {...props}
    >
      <MoreHorizontal className="size-4" />
      <span className="sr-only">More</span>
    </span>
  )
}

export {
  Breadcrumb,
  BreadcrumbList,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbPage,
  BreadcrumbSeparator,
  BreadcrumbEllipsis,
}


================================================
FILE: apps/client/src/components/ui/button.tsx
================================================
import * as React from "react";
import { Slot } from "@radix-ui/react-slot";
import { cva, type VariantProps } from "class-variance-authority";

import { cn } from "@/lib/utils";

const buttonVariants = cva(
  "inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive cursor-pointer",
  {
    variants: {
      variant: {
        default:
          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
        destructive:
          "!bg-red-600 !text-white hover:!bg-red-700 shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20",
        outline:
          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
        secondary:
          "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
        ghost:
          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
        link: "text-primary underline-offset-4 hover:underline",
      },
      size: {
        default: "h-9 px-4 py-2 has-[>svg]:px-3",
        sm: "h-8 gap-1.5 px-3 has-[>svg]:px-2.5",
        lg: "h-10 px-6 has-[>svg]:px-4",
        icon: "size-9",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "default",
    },
  },
);

function Button({
  className,
  variant,
  size,
  asChild = false,
  ...props
}: React.ComponentProps<"button"> &
  VariantProps<typeof buttonVariants> & {
    asChild?: boolean;
  }) {
  const Comp = asChild ? Slot : "button";

  return (
    <Comp
      data-slot='button'
      className={cn(buttonVariants({ variant, size, className }))}
      {...props}
    />
  );
}

export { Button, buttonVariants };


================================================
FILE: apps/client/src/components/ui/card.tsx
================================================
import * as React from "react";

import { cn } from "@/lib/utils";

function Card({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot='card'
      className={cn(
        "bg-card text-card-foreground flex flex-col gap-6 border py-6 shadow-sm",
        className,
      )}
      {...props}
    />
  );
}

function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot='card-header'
      className={cn(
        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
        className,
      )}
      {...props}
    />
  );
}

function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot='card-title'
      className={cn("leading-none font-semibold", className)}
      {...props}
    />
  );
}

function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot='card-description'
      className={cn("text-muted-foreground text-sm", className)}
      {...props}
    />
  );
}

function CardAction({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot='card-action'
      className={cn(
        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
        className,
      )}
      {...props}
    />
  );
}

function CardContent({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot='card-content'
      className={cn("px-6", className)}
      {...props}
    />
  );
}

function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot='card-footer'
      className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
      {...props}
    />
  );
}

export {
  Card,
  CardHeader,
  CardFooter,
  CardTitle,
  CardAction,
  CardDescription,
  CardContent,
};


================================================
FILE: apps/client/src/components/ui/command.tsx
================================================
"use client";

import * as React from "react";
import { type DialogProps } from "@radix-ui/react-dialog";
import { Command as CommandPrimitive } from "cmdk";
import { Search } from "lucide-react";

import { cn } from "@/lib/utils";
import { Dialog, DialogContent } from "@/components/ui/dialog";

const Command = React.forwardRef<
  React.ElementRef<typeof CommandPrimitive>,
  React.ComponentPropsWithoutRef<typeof CommandPrimitive>
>(({ className, ...props }, ref) => (
  <CommandPrimitive
    ref={ref}
    className={cn(
      "flex h-full w-full flex-col overflow-hidden bg-popover text-popover-foreground",
      className,
    )}
    {...props}
  />
));
Command.displayName = CommandPrimitive.displayName;

const CommandDialog = ({ children, ...props }: DialogProps) => {
  return (
    <Dialog {...props}>
      <DialogContent className='overflow-hidden p-0'>
        <Command className='[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5'>
          {children}
        </Command>
      </DialogContent>
    </Dialog>
  );
};

const CommandInput = React.forwardRef<
  React.ElementRef<typeof CommandPrimitive.Input>,
  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
>(({ className, ...props }, ref) => (
  <div className='flex items-center border-b px-3' cmdk-input-wrapper=''>
    <Search className='mr-2 h-4 w-4 shrink-0 opacity-50' />
    <CommandPrimitive.Input
      ref={ref}
      className={cn(
        "flex h-10 w-full bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
        className,
      )}
      {...props}
    />
  </div>
));

CommandInput.displayName = CommandPrimitive.Input.displayName;

const CommandList = React.forwardRef<
  React.ElementRef<typeof CommandPrimitive.List>,
  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
>(({ className, ...props }, ref) => (
  <CommandPrimitive.List
    ref={ref}
    className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
    {...props}
  />
));

CommandList.displayName = CommandPrimitive.List.displayName;

const CommandEmpty = React.forwardRef<
  React.ElementRef<typeof CommandPrimitive.Empty>,
  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
>((props, ref) => (
  <CommandPrimitive.Empty
    ref={ref}
    className='py-6 text-center text-sm'
    {...props}
  />
));

CommandEmpty.displayName = CommandPrimitive.Empty.displayName;

const CommandGroup = React.forwardRef<
  React.ElementRef<typeof CommandPrimitive.Group>,
  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
>(({ className, ...props }, ref) => (
  <CommandPrimitive.Group
    ref={ref}
    className={cn(
      "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
      className,
    )}
    {...props}
  />
));

CommandGroup.displayName = CommandPrimitive.Group.displayName;

const CommandSeparator = React.forwardRef<
  React.ElementRef<typeof CommandPrimitive.Separator>,
  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
>(({ className, ...props }, ref) => (
  <CommandPrimitive.Separator
    ref={ref}
    className={cn("-mx-1 h-px bg-border", className)}
    {...props}
  />
));
CommandSeparator.displayName = CommandPrimitive.Separator.displayName;

const CommandItem = React.forwardRef<
  React.ElementRef<typeof CommandPrimitive.Item>,
  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
>(({ className, ...props }, ref) => (
  <CommandPrimitive.Item
    ref={ref}
    className={cn(
      "relative flex cursor-default gap-2 select-none items-center px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
      className,
    )}
    {...props}
  />
));

CommandItem.displayName = CommandPrimitive.Item.displayName;

const CommandShortcut = ({
  className,
  ...props
}: React.HTMLAttributes<HTMLSpanElement>) => {
  return (
    <span
      className={cn(
        "ml-auto text-xs tracking-widest text-muted-foreground",
        className,
      )}
      {...props}
    />
  );
};
CommandShortcut.displayName = "CommandShortcut";

export {
  Command,
  CommandDialog,
  CommandInput,
  CommandList,
  CommandEmpty,
  CommandGroup,
  CommandItem,
  CommandShortcut,
  CommandSeparator,
};


================================================
FILE: apps/client/src/components/ui/context-menu.tsx
================================================
import * as React from "react"
import * as ContextMenuPrimitive from "@radix-ui/react-context-menu"
import { Check, ChevronRight, Circle } from "lucide-react"

import { cn } from "@/lib/utils"

const ContextMenu = ContextMenuPrimitive.Root

const ContextMenuTrigger = ContextMenuPrimitive.Trigger

const ContextMenuGroup = ContextMenuPrimitive.Group

const ContextMenuPortal = ContextMenuPrimitive.Portal

const ContextMenuSub = ContextMenuPrimitive.Sub

const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup

const ContextMenuSubTrigger = React.forwardRef<
  React.ElementRef<typeof ContextMenuPrimitive.SubTrigger>,
  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger> & {
    inset?: boolean
  }
>(({ className, inset, children, ...props }, ref) => (
  <ContextMenuPrimitive.SubTrigger
    ref={ref}
    className={cn(
      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
      inset && "pl-8",
      className
    )}
    {...props}
  >
    {children}
    <ChevronRight className="ml-auto h-4 w-4" />
  </ContextMenuPrimitive.SubTrigger>
))
ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName

const ContextMenuSubContent = React.forwardRef<
  React.ElementRef<typeof ContextMenuPrimitive.SubContent>,
  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubContent>
>(({ className, ...props }, ref) => (
  <ContextMenuPrimitive.SubContent
    ref={ref}
    className={cn(
      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-context-menu-content-transform-origin]",
      className
    )}
    {...props}
  />
))
ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName

const ContextMenuContent = React.forwardRef<
  React.ElementRef<typeof ContextMenuPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content>
>(({ className, ...props }, ref) => (
  <ContextMenuPrimitive.Portal>
    <ContextMenuPrimitive.Content
      ref={ref}
      className={cn(
        "z-50 max-h-[--radix-context-menu-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-context-menu-content-transform-origin]",
        className
      )}
      {...props}
    />
  </ContextMenuPrimitive.Portal>
))
ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName

const ContextMenuItem = React.forwardRef<
  React.ElementRef<typeof ContextMenuPrimitive.Item>,
  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item> & {
    inset?: boolean
  }
>(({ className, inset, ...props }, ref) => (
  <ContextMenuPrimitive.Item
    ref={ref}
    className={cn(
      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
      inset && "pl-8",
      className
    )}
    {...props}
  />
))
ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName

const ContextMenuCheckboxItem = React.forwardRef<
  React.ElementRef<typeof ContextMenuPrimitive.CheckboxItem>,
  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.CheckboxItem>
>(({ className, children, checked, ...props }, ref) => (
  <ContextMenuPrimitive.CheckboxItem
    ref={ref}
    className={cn(
      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
      className
    )}
    checked={checked}
    {...props}
  >
    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
      <ContextMenuPrimitive.ItemIndicator>
        <Check className="h-4 w-4" />
      </ContextMenuPrimitive.ItemIndicator>
    </span>
    {children}
  </ContextMenuPrimitive.CheckboxItem>
))
ContextMenuCheckboxItem.displayName =
  ContextMenuPrimitive.CheckboxItem.displayName

const ContextMenuRadioItem = React.forwardRef<
  React.ElementRef<typeof ContextMenuPrimitive.RadioItem>,
  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.RadioItem>
>(({ className, children, ...props }, ref) => (
  <ContextMenuPrimitive.RadioItem
    ref={ref}
    className={cn(
      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
      className
    )}
    {...props}
  >
    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
      <ContextMenuPrimitive.ItemIndicator>
        <Circle className="h-4 w-4 fill-current" />
      </ContextMenuPrimitive.ItemIndicator>
    </span>
    {children}
  </ContextMenuPrimitive.RadioItem>
))
ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName

const ContextMenuLabel = React.forwardRef<
  React.ElementRef<typeof ContextMenuPrimitive.Label>,
  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Label> & {
    inset?: boolean
  }
>(({ className, inset, ...props }, ref) => (
  <ContextMenuPrimitive.Label
    ref={ref}
    className={cn(
      "px-2 py-1.5 text-sm font-semibold text-foreground",
      inset && "pl-8",
      className
    )}
    {...props}
  />
))
ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName

const ContextMenuSeparator = React.forwardRef<
  React.ElementRef<typeof ContextMenuPrimitive.Separator>,
  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Separator>
>(({ className, ...props }, ref) => (
  <ContextMenuPrimitive.Separator
    ref={ref}
    className={cn("-mx-1 my-1 h-px bg-border", className)}
    {...props}
  />
))
ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName

const ContextMenuShortcut = ({
  className,
  ...props
}: React.HTMLAttributes<HTMLSpanElement>) => {
  return (
    <span
      className={cn(
        "ml-auto text-xs tracking-widest text-muted-foreground",
        className
      )}
      {...props}
    />
  )
}
ContextMenuShortcut.displayName = "ContextMenuShortcut"

export {
  ContextMenu,
  ContextMenuTrigger,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuCheckboxItem,
  ContextMenuRadioItem,
  ContextMenuLabel,
  ContextMenuSeparator,
  ContextMenuShortcut,
  ContextMenuGroup,
  ContextMenuPortal,
  ContextMenuSub,
  ContextMenuSubContent,
  ContextMenuSubTrigger,
  ContextMenuRadioGroup,
}


================================================
FILE: apps/client/src/components/ui/dialog.tsx
================================================
import * as React from "react";
import * as DialogPrimitive from "@radix-ui/react-dialog";
import { XIcon } from "lucide-react";

import { cn } from "@/lib/utils";

function Dialog({
  ...props
}: React.ComponentProps<typeof DialogPrimitive.Root>) {
  return <DialogPrimitive.Root data-slot='dialog' {...props} />;
}

function DialogTrigger({
  ...props
}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
  return <DialogPrimitive.Trigger data-slot='dialog-trigger' {...props} />;
}

function DialogPortal({
  ...props
}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
  return <DialogPrimitive.Portal data-slot='dialog-portal' {...props} />;
}

function DialogClose({
  ...props
}: React.ComponentProps<typeof DialogPrimitive.Close>) {
  return <DialogPrimitive.Close data-slot='dialog-close' {...props} />;
}

function DialogOverlay({
  className,
  ...props
}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
  return (
    <DialogPrimitive.Overlay
      data-slot='dialog-overlay'
      className={cn(
        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
        className,
      )}
      {...props}
    />
  );
}

function DialogContent({
  className,
  children,
  showCloseButton = true,
  ...props
}: React.ComponentProps<typeof DialogPrimitive.Content> & {
  showCloseButton?: boolean;
}) {
  return (
    <DialogPortal data-slot='dialog-portal'>
      <DialogOverlay />
      <DialogPrimitive.Content
        data-slot='dialog-content'
        className={cn(
          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4  border p-6 shadow-lg duration-200 sm:max-w-lg",
          className,
        )}
        {...props}
      >
        {children}
        {showCloseButton && (
          <DialogPrimitive.Close
            data-slot='dialog-close'
            className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
          >
            <XIcon />
            <span className='sr-only'>Close</span>
          </DialogPrimitive.Close>
        )}
      </DialogPrimitive.Content>
    </DialogPortal>
  );
}

function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot='dialog-header'
      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
      {...props}
    />
  );
}

function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot='dialog-footer'
      className={cn(
        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
        className,
      )}
      {...props}
    />
  );
}

function DialogTitle({
  className,
  ...props
}: React.ComponentProps<typeof DialogPrimitive.Title>) {
  return (
    <DialogPrimitive.Title
      data-slot='dialog-title'
      className={cn("text-lg leading-none font-semibold", className)}
      {...props}
    />
  );
}

function DialogDescription({
  className,
  ...props
}: React.ComponentProps<typeof DialogPrimitive.Description>) {
  return (
    <DialogPrimitive.Description
      data-slot='dialog-description'
      className={cn("text-muted-foreground text-sm", className)}
      {...props}
    />
  );
}

export {
  Dialog,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogOverlay,
  DialogPortal,
  DialogTitle,
  DialogTrigger,
};


================================================
FILE: apps/client/src/components/ui/dropdown-menu.tsx
================================================
import * as React from "react";
import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";

import { cn } from "@/lib/utils";

function DropdownMenu({
  ...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
  return <DropdownMenuPrimitive.Root data-slot='dropdown-menu' {...props} />;
}

function DropdownMenuPortal({
  ...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
  return (
    <DropdownMenuPrimitive.Portal data-slot='dropdown-menu-portal' {...props} />
  );
}

function DropdownMenuTrigger({
  ...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
  return (
    <DropdownMenuPrimitive.Trigger
      data-slot='dropdown-menu-trigger'
      {...props}
    />
  );
}

function DropdownMenuContent({
  className,
  sideOffset = 4,
  ...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
  return (
    <DropdownMenuPrimitive.Portal>
      <DropdownMenuPrimitive.Content
        data-slot='dropdown-menu-content'
        sideOffset={sideOffset}
        className={cn(
          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto border p-1 shadow-md",
          className,
        )}
        {...props}
      />
    </DropdownMenuPrimitive.Portal>
  );
}

function DropdownMenuGroup({
  ...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
  return (
    <DropdownMenuPrimitive.Group data-slot='dropdown-menu-group' {...props} />
  );
}

function DropdownMenuItem({
  className,
  inset,
  variant = "default",
  ...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
  inset?: boolean;
  variant?: "default" | "destructive";
}) {
  return (
    <DropdownMenuPrimitive.Item
      data-slot='dropdown-menu-item'
      data-inset={inset}
      data-variant={variant}
      className={cn(
        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
        className,
      )}
      {...props}
    />
  );
}

function DropdownMenuCheckboxItem({
  className,
  children,
  checked,
  ...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
  return (
    <DropdownMenuPrimitive.CheckboxItem
      data-slot='dropdown-menu-checkbox-item'
      className={cn(
        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
        className,
      )}
      checked={checked}
      {...props}
    >
      <span className='pointer-events-none absolute left-2 flex size-3.5 items-center justify-center'>
        <DropdownMenuPrimitive.ItemIndicator>
          <CheckIcon className='size-4' />
        </DropdownMenuPrimitive.ItemIndicator>
      </span>
      {children}
    </DropdownMenuPrimitive.CheckboxItem>
  );
}

function DropdownMenuRadioGroup({
  ...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
  return (
    <DropdownMenuPrimitive.RadioGroup
      data-slot='dropdown-menu-radio-group'
      {...props}
    />
  );
}

function DropdownMenuRadioItem({
  className,
  children,
  ...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
  return (
    <DropdownMenuPrimitive.RadioItem
      data-slot='dropdown-menu-radio-item'
      className={cn(
        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
        className,
      )}
      {...props}
    >
      <span className='pointer-events-none absolute left-2 flex size-3.5 items-center justify-center'>
        <DropdownMenuPrimitive.ItemIndicator>
          <CircleIcon className='size-2 fill-current' />
        </DropdownMenuPrimitive.ItemIndicator>
      </span>
      {children}
    </DropdownMenuPrimitive.RadioItem>
  );
}

function DropdownMenuLabel({
  className,
  inset,
  ...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
  inset?: boolean;
}) {
  return (
    <DropdownMenuPrimitive.Label
      data-slot='dropdown-menu-label'
      data-inset={inset}
      className={cn(
        "px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
        className,
      )}
      {...props}
    />
  );
}

function DropdownMenuSeparator({
  className,
  ...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
  return (
    <DropdownMenuPrimitive.Separator
      data-slot='dropdown-menu-separator'
      className={cn("bg-border -mx-1 my-1 h-px", className)}
      {...props}
    />
  );
}

function DropdownMenuShortcut({
  className,
  ...props
}: React.ComponentProps<"span">) {
  return (
    <span
      data-slot='dropdown-menu-shortcut'
      className={cn(
        "text-muted-foreground ml-auto text-xs tracking-widest",
        className,
      )}
      {...props}
    />
  );
}

function DropdownMenuSub({
  ...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
  return <DropdownMenuPrimitive.Sub data-slot='dropdown-menu-sub' {...props} />;
}

function DropdownMenuSubTrigger({
  className,
  inset,
  children,
  ...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
  inset?: boolean;
}) {
  return (
    <DropdownMenuPrimitive.SubTrigger
      data-slot='dropdown-menu-sub-trigger'
      data-inset={inset}
      className={cn(
        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8",
        className,
      )}
      {...props}
    >
      {children}
      <ChevronRightIcon className='ml-auto size-4' />
    </DropdownMenuPrimitive.SubTrigger>
  );
}

function DropdownMenuSubContent({
  className,
  ...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
  return (
    <DropdownMenuPrimitive.SubContent
      data-slot='dropdown-menu-sub-content'
      className={cn(
        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
        className,
      )}
      {...props}
    />
  );
}

export {
  DropdownMenu,
  DropdownMenuPortal,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuLabel,
  DropdownMenuItem,
  DropdownMenuCheckboxItem,
  DropdownMenuRadioGroup,
  DropdownMenuRadioItem,
  DropdownMenuSeparator,
  DropdownMenuShortcut,
  DropdownMenuSub,
  DropdownMenuSubTrigger,
  DropdownMenuSubContent,
};


================================================
FILE: apps/client/src/components/ui/input.tsx
================================================
import * as React from "react";

import { cn } from "@/lib/utils";

function Input({ className, type, ...props }: React.ComponentProps<"input">) {
  return (
    <input
      type={type}
      data-slot='input'
      className={cn(
        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0  border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
        className,
      )}
      {...props}
    />
  );
}

export { Input };


================================================
FILE: apps/client/src/components/ui/label.tsx
================================================
import * as React from "react"
import * as LabelPrimitive from "@radix-ui/react-label"

import { cn } from "@/lib/utils"

function Label({
  className,
  ...props
}: React.ComponentProps<typeof LabelPrimitive.Root>) {
  return (
    <LabelPrimitive.Root
      data-slot="label"
      className={cn(
        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
        className
      )}
      {...props}
    />
  )
}

export { Label }


================================================
FILE: apps/client/src/components/ui/navigation-menu.tsx
================================================
import * as React from "react"
import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu"
import { cva } from "class-variance-authority"
import { ChevronDownIcon } from "lucide-react"

import { cn } from "@/lib/utils"

function NavigationMenu({
  className,
  children,
  viewport = true,
  ...props
}: React.ComponentProps<typeof NavigationMenuPrimitive.Root> & {
  viewport?: boolean
}) {
  return (
    <NavigationMenuPrimitive.Root
      data-slot="navigation-menu"
      data-viewport={viewport}
      className={cn(
        "group/navigation-menu relative flex max-w-max flex-1 items-center justify-center",
        className
      )}
      {...props}
    >
      {children}
      {viewport && <NavigationMenuViewport />}
    </NavigationMenuPrimitive.Root>
  )
}

function NavigationMenuList({
  className,
  ...props
}: React.ComponentProps<typeof NavigationMenuPrimitive.List>) {
  return (
    <NavigationMenuPrimitive.List
      data-slot="navigation-menu-list"
      className={cn(
        "group flex flex-1 list-none items-center justify-center gap-1",
        className
      )}
      {...props}
    />
  )
}

function NavigationMenuItem({
  className,
  ...props
}: React.ComponentProps<typeof NavigationMenuPrimitive.Item>) {
  return (
    <NavigationMenuPrimitive.Item
      data-slot="navigation-menu-item"
      className={cn("relative", className)}
      {...props}
    />
  )
}

const navigationMenuTriggerStyle = cva(
  "group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50 focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1"
)

function NavigationMenuTrigger({
  className,
  children,
  ...props
}: React.ComponentProps<typeof NavigationMenuPrimitive.Trigger>) {
  return (
    <NavigationMenuPrimitive.Trigger
      data-slot="navigation-menu-trigger"
      className={cn(navigationMenuTriggerStyle(), "group", className)}
      {...props}
    >
      {children}{" "}
      <ChevronDownIcon
        className="relative top-[1px] ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180"
        aria-hidden="true"
      />
    </NavigationMenuPrimitive.Trigger>
  )
}

function NavigationMenuContent({
  className,
  ...props
}: React.ComponentProps<typeof NavigationMenuPrimitive.Content>) {
  return (
    <NavigationMenuPrimitive.Content
      data-slot="navigation-menu-content"
      className={cn(
        "data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 top-0 left-0 w-full p-2 pr-2.5 md:absolute md:w-auto",
        "group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:duration-200 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none",
        className
      )}
      {...props}
    />
  )
}

function NavigationMenuViewport({
  className,
  ...props
}: React.ComponentProps<typeof NavigationMenuPrimitive.Viewport>) {
  return (
    <div
      className={cn(
        "absolute top-full left-0 isolate z-50 flex justify-center"
      )}
    >
      <NavigationMenuPrimitive.Viewport
        data-slot="navigation-menu-viewport"
        className={cn(
          "origin-top-center bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border shadow md:w-[var(--radix-navigation-menu-viewport-width)]",
          className
        )}
        {...props}
      />
    </div>
  )
}

function NavigationMenuLink({
  className,
  ...props
}: React.ComponentProps<typeof NavigationMenuPrimitive.Link>) {
  return (
    <NavigationMenuPrimitive.Link
      data-slot="navigation-menu-link"
      className={cn(
        "data-[active=true]:focus:bg-accent data-[active=true]:hover:bg-accent data-[active=true]:bg-accent/50 data-[active=true]:text-accent-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus-visible:ring-ring/50 [&_svg:not([class*='text-'])]:text-muted-foreground flex flex-col gap-1 rounded-sm p-2 text-sm transition-all outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4",
        className
      )}
      {...props}
    />
  )
}

function NavigationMenuIndicator({
  className,
  ...props
}: React.ComponentProps<typeof NavigationMenuPrimitive.Indicator>) {
  return (
    <NavigationMenuPrimitive.Indicator
      data-slot="navigation-menu-indicator"
      className={cn(
        "data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden",
        className
      )}
      {...props}
    >
      <div className="bg-border relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm shadow-md" />
    </NavigationMenuPrimitive.Indicator>
  )
}

export {
  NavigationMenu,
  NavigationMenuList,
  NavigationMenuItem,
  NavigationMenuContent,
  NavigationMenuTrigger,
  NavigationMenuLink,
  NavigationMenuIndicator,
  NavigationMenuViewport,
  navigationMenuTriggerStyle,
}


================================================
FILE: apps/client/src/components/ui/popover.tsx
================================================
import * as React from "react"
import * as PopoverPrimitive from "@radix-ui/react-popover"

import { cn } from "@/lib/utils"

const Popover = PopoverPrimitive.Root

const PopoverTrigger = PopoverPrimitive.Trigger

const PopoverAnchor = PopoverPrimitive.Anchor

type PopoverContentProps = React.ComponentPropsWithoutRef<
  typeof PopoverPrimitive.Content
> & { container?: HTMLElement | null }

const PopoverContent = React.forwardRef<
  React.ElementRef<typeof PopoverPrimitive.Content>,
  PopoverContentProps
>(({ className, align = "center", sideOffset = 4, container, ...props }, ref) => (
  <PopoverPrimitive.Portal container={container || undefined}>
    <PopoverPrimitive.Content
      ref={ref}
      align={align}
      sideOffset={sideOffset}
      className={cn(
        "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-popover-content-transform-origin]",
        className
      )}
      {...props}
    />
  </PopoverPrimitive.Portal>
))
PopoverContent.displayName = PopoverPrimitive.Content.displayName

export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }


================================================
FILE: apps/client/src/components/ui/resizable.tsx
================================================
import { GripVertical } from "lucide-react"
import * as ResizablePrimitive from "react-resizable-panels"

import { cn } from "@/lib/utils"

const ResizablePanelGroup = ({
  className,
  ...props
}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) => (
  <ResizablePrimitive.PanelGroup
    className={cn(
      "flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
      className
    )}
    {...props}
  />
)

const ResizablePanel = ResizablePrimitive.Panel

const ResizableHandle = ({
  withHandle,
  className,
  ...props
}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
  withHandle?: boolean
}) => (
  <ResizablePrimitive.PanelResizeHandle
    className={cn(
      "relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90",
      className
    )}
    {...props}
  >
    {withHandle && (
      <div className="z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border">
        <GripVertical className="h-2.5 w-2.5" />
      </div>
    )}
  </ResizablePrimitive.PanelResizeHandle>
)

export { ResizablePanelGroup, ResizablePanel, ResizableHandle }


================================================
FILE: apps/client/src/components/ui/scroll-area.tsx
================================================
import * as React from "react"
import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"

import { cn } from "@/lib/utils"

const ScrollArea = React.forwardRef<
  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
>(({ className, children, ...props }, ref) => (
  <ScrollAreaPrimitive.Root
    ref={ref}
    className={cn("relative overflow-hidden", className)}
    {...props}
  >
    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
      {children}
    </ScrollAreaPrimitive.Viewport>
    <ScrollBar />
    <ScrollAreaPrimitive.Corner />
  </ScrollAreaPrimitive.Root>
))
ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName

const ScrollBar = React.forwardRef<
  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
>(({ className, orientation = "vertical", ...props }, ref) => (
  <ScrollAreaPrimitive.ScrollAreaScrollbar
    ref={ref}
    orientation={orientation}
    className={cn(
      "flex touch-none select-none transition-colors",
      orientation === "vertical" &&
        "h-full w-2.5 border-l border-l-transparent p-[1px]",
      orientation === "horizontal" &&
        "h-2.5 flex-col border-t border-t-transparent p-[1px]",
      className
    )}
    {...props}
  >
    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
  </ScrollAreaPrimitive.ScrollAreaScrollbar>
))
ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName

export { ScrollArea, ScrollBar }


================================================
FILE: apps/client/src/components/ui/select.tsx
================================================
import * as React from "react";
import * as SelectPrimitive from "@radix-ui/react-select";
import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react";

import { cn } from "@/lib/utils";

function Select({
  ...props
}: React.ComponentProps<typeof SelectPrimitive.Root>) {
  return <SelectPrimitive.Root data-slot='select' {...props} />;
}

function SelectGroup({
  ...props
}: React.ComponentProps<typeof SelectPrimitive.Group>) {
  return <SelectPrimitive.Group data-slot='select-group' {...props} />;
}

function SelectValue({
  ...props
}: React.ComponentProps<typeof SelectPrimitive.Value>) {
  return <SelectPrimitive.Value data-slot='select-value' {...props} />;
}

function SelectTrigger({
  className,
  size = "default",
  children,
  ...props
}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
  size?: "sm" | "default";
}) {
  return (
    <SelectPrimitive.Trigger
      data-slot='select-trigger'
      data-size={size}
      className={cn(
        "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
        className,
      )}
      {...props}
    >
      {children}
      <SelectPrimitive.Icon asChild>
        <ChevronDownIcon className='size-4 opacity-50' />
      </SelectPrimitive.Icon>
    </SelectPrimitive.Trigger>
  );
}

function SelectContent({
  className,
  children,
  position = "popper",
  ...props
}: React.ComponentProps<typeof SelectPrimitive.Content>) {
  return (
    <SelectPrimitive.Portal>
      <SelectPrimitive.Content
        data-slot='select-content'
        className={cn(
          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto border shadow-md",
          position === "popper" &&
            "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
          className,
        )}
        position={position}
        {...props}
      >
        <SelectScrollUpButton />
        <SelectPrimitive.Viewport
          className={cn(
            "p-1",
            position === "popper" &&
              "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1",
          )}
        >
          {children}
        </SelectPrimitive.Viewport>
        <SelectScrollDownButton />
      </SelectPrimitive.Content>
    </SelectPrimitive.Portal>
  );
}

function SelectLabel({
  className,
  ...props
}: React.ComponentProps<typeof SelectPrimitive.Label>) {
  return (
    <SelectPrimitive.Label
      data-slot='select-label'
      className={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
      {...props}
    />
  );
}

function SelectItem({
  className,
  children,
  ...props
}: React.ComponentProps<typeof SelectPrimitive.Item>) {
  return (
    <SelectPrimitive.Item
      data-slot='select-item'
      className={cn(
        "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
        className,
      )}
      {...props}
    >
      <span className='absolute right-2 flex size-3.5 items-center justify-center'>
        <SelectPrimitive.ItemIndicator>
          <CheckIcon className='size-4' />
        </SelectPrimitive.ItemIndicator>
      </span>
      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
    </SelectPrimitive.Item>
  );
}

function SelectSeparator({
  className,
  ...props
}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
  return (
    <SelectPrimitive.Separator
      data-slot='select-separator'
      className={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)}
      {...props}
    />
  );
}

function SelectScrollUpButton({
  className,
  ...props
}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
  return (
    <SelectPrimitive.ScrollUpButton
      data-slot='select-scroll-up-button'
      className={cn(
        "flex cursor-default items-center justify-center py-1",
        className,
      )}
      {...props}
    >
      <ChevronUpIcon className='size-4' />
    </SelectPrimitive.ScrollUpButton>
  );
}

function SelectScrollDownButton({
  className,
  ...props
}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
  return (
    <SelectPrimitive.ScrollDownButton
      data-slot='select-scroll-down-button'
      className={cn(
        "flex cursor-default items-center justify-center py-1",
        className,
      )}
      {...props}
    >
      <ChevronDownIcon className='size-4' />
    </SelectPrimitive.ScrollDownButton>
  );
}

export {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectLabel,
  SelectScrollDownButton,
  SelectScrollUpButton,
  SelectSeparator,
  SelectTrigger,
  SelectValue,
};


================================================
FILE: apps/client/src/components/ui/separator.tsx
================================================
"use client"

import * as React from "react"
import * as SeparatorPrimitive from "@radix-ui/react-separator"

import { cn } from "@/lib/utils"

function Separator({
  className,
  orientation = "horizontal",
  decorative = true,
  ...props
}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
  return (
    <SeparatorPrimitive.Root
      data-slot="separator"
      decorative={decorative}
      orientation={orientation}
      className={cn(
        "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
        className
      )}
      {...props}
    />
  )
}

export { Separator }


================================================
FILE: apps/client/src/components/ui/sheet.tsx
================================================
import * as React from "react";
import * as SheetPrimitive from "@radix-ui/react-dialog";

import { cn } from "@/lib/utils";

function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
  return <SheetPrimitive.Root data-slot='sheet' {...props} />;
}

function SheetTrigger({
  ...props
}: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
  return <SheetPrimitive.Trigger data-slot='sheet-trigger' {...props} />;
}

function SheetClose({
  ...props
}: React.ComponentProps<typeof SheetPrimitive.Close>) {
  return <SheetPrimitive.Close data-slot='sheet-close' {...props} />;
}

function SheetPortal({
  ...props
}: React.ComponentProps<typeof SheetPrimitive.Portal>) {
  return <SheetPrimitive.Portal data-slot='sheet-portal' {...props} />;
}

function SheetOverlay({
  className,
  ...props
}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {
  return (
    <SheetPrimitive.Overlay
      data-slot='sheet-overlay'
      className={cn(
        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
        className,
      )}
      {...props}
    />
  );
}

function SheetContent({
  className,
  children,
  side = "right",
  ...props
}: React.ComponentProps<typeof SheetPrimitive.Content> & {
  side?: "top" | "right" | "bottom" | "left";
}) {
  return (
    <SheetPortal>
      <SheetOverlay />
      <SheetPrimitive.Content
        data-slot='sheet-content'
        className={cn(
          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-[999] flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 pt-12",
          side === "right" &&
            "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
          side === "left" &&
            "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
          side === "top" &&
            "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b",
          side === "bottom" &&
            "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t",
          className,
        )}
        {...props}
      >
        {children}
        <SheetPrimitive.Close className='ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none'>
          <span className='sr-only'>Close</span>
        </SheetPrimitive.Close>
      </SheetPrimitive.Content>
    </SheetPortal>
  );
}

function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot='sheet-header'
      className={cn("flex flex-col gap-1.5 p-4", className)}
      {...props}
    />
  );
}

function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot='sheet-footer'
      className={cn("mt-auto flex flex-col gap-2 p-4", className)}
      {...props}
    />
  );
}

function SheetTitle({
  className,
  ...props
}: React.ComponentProps<typeof SheetPrimitive.Title>) {
  return (
    <SheetPrimitive.Title
      data-slot='sheet-title'
      className={cn("text-foreground font-semibold", className)}
      {...props}
    />
  );
}

function SheetDescription({
  className,
  ...props
}: React.ComponentProps<typeof SheetPrimitive.Description>) {
  return (
    <SheetPrimitive.Description
      data-slot='sheet-description'
      className={cn("text-muted-foreground text-sm", className)}
      {...props}
    />
  );
}

export {
  Sheet,
  SheetTrigger,
  SheetClose,
  SheetContent,
  SheetHeader,
  SheetFooter,
  SheetTitle,
  SheetDescription,
};


================================================
FILE: apps/client/src/components/ui/sidebar.tsx
================================================
import * as React from "react";
import { Slot } from "@radix-ui/react-slot";
import { cva, VariantProps } from "class-variance-authority";
import { PanelLeftIcon } from "lucide-react";

import { useIsMobile } from "@/hooks/use-mobile";
import { cn } from "@/lib/utils";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Separator } from "@/components/ui/separator";
import {
  Sheet,
  SheetContent,
  SheetDescription,
  SheetHeader,
  SheetTitle,
} from "@/components/ui/sheet";
import { Skeleton } from "@/components/ui/skeleton";
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@/components/ui/tooltip";

const SIDEBAR_COOKIE_NAME = "sidebar_state";
const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
const SIDEBAR_WIDTH = "16rem";
const SIDEBAR_WIDTH_MOBILE = "18rem";
const SIDEBAR_WIDTH_ICON = "3rem";
const SIDEBAR_KEYBOARD_SHORTCUT = "b";

type SidebarContextProps = {
  state: "expanded" | "collapsed";
  open: boolean;
  setOpen: (open: boolean) => void;
  openMobile: boolean;
  setOpenMobile: (open: boolean) => void;
  isMobile: boolean;
  toggleSidebar: () => void;
};

const SidebarContext = React.createContext<SidebarContextProps | null>(null);

function useSidebar() {
  const context = React.useContext(SidebarContext);
  if (!context) {
    throw new Error("useSidebar must be used within a SidebarProvider.");
  }

  return context;
}

function SidebarProvider({
  defaultOpen = true,
  open: openProp,
  onOpenChange: setOpenProp,
  className,
  style,
  children,
  ...props
}: React.ComponentProps<"div"> & {
  defaultOpen?: boolean;
  open?: boolean;
  onOpenChange?: (open: boolean) => void;
}) {
  const isMobile = useIsMobile();
  const [openMobile, setOpenMobile] = React.useState(false);

  // This is the internal state of the sidebar.
  // We use openProp and setOpenProp for control from outside the component.
  const [_open, _setOpen] = React.useState(defaultOpen);
  const open = openProp ?? _open;
  const setOpen = React.useCallback(
    (value: boolean | ((value: boolean) => boolean)) => {
      const openState = typeof value === "function" ? value(open) : value;
      if (setOpenProp) {
        setOpenProp(openState);
      } else {
        _setOpen(openState);
      }

      // This sets the cookie to keep the sidebar state.
      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
    },
    [setOpenProp, open],
  );

  // Helper to toggle the sidebar.
  const toggleSidebar = React.useCallback(() => {
    return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open);
  }, [isMobile, setOpen, setOpenMobile]);

  // Adds a keyboard shortcut to toggle the sidebar.
  React.useEffect(() => {
    const handleKeyDown = (event: KeyboardEvent) => {
      if (
        event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
        (event.metaKey || event.ctrlKey)
      ) {
        event.preventDefault();
        toggleSidebar();
      }
    };

    window.addEventListener("keydown", handleKeyDown);
    return () => window.removeEventListener("keydown", handleKeyDown);
  }, [toggleSidebar]);

  // We add a state so that we can do data-state="expanded" or "collapsed".
  // This makes it easier to style the sidebar with Tailwind classes.
  const state = open ? "expanded" : "collapsed";

  const contextValue = React.useMemo<SidebarContextProps>(
    () => ({
      state,
      open,
      setOpen,
      isMobile,
      openMobile,
      setOpenMobile,
      toggleSidebar,
    }),
    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar],
  );

  return (
    <SidebarContext.Provider value={contextValue}>
      <TooltipProvider delayDuration={0}>
        <div
          data-slot='sidebar-wrapper'
          style={
            {
              "--sidebar-width": SIDEBAR_WIDTH,
              "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
              ...style,
            } as React.CSSProperties
          }
          className={cn(
            "group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full",
            className,
          )}
          {...props}
        >
          {children}
        </div>
      </TooltipProvider>
    </SidebarContext.Provider>
  );
}

function Sidebar({
  side = "left",
  variant = "sidebar",
  collapsible = "offcanvas",
  className,
  children,
  ...props
}: React.ComponentProps<"div"> & {
  side?: "left" | "right";
  variant?: "sidebar" | "floating" | "inset";
  collapsible?: "offcanvas" | "icon" | "none";
}) {
  const { isMobile, state, openMobile, setOpenMobile } = useSidebar();

  if (collapsible === "none") {
    return (
      <div
        data-slot='sidebar'
        className={cn(
          "bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col",
          className,
        )}
        {...props}
      >
        {children}
      </div>
    );
  }

  if (isMobile) {
    return (
      <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
        <SheetContent
          data-sidebar='sidebar'
          data-slot='sidebar'
          data-mobile='true'
          className='bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden'
          style={
            {
              "--sidebar-width": SIDEBAR_WIDTH_MOBILE,
            } as React.CSSProperties
          }
          side={side}
        >
          <SheetHeader className='sr-only'>
            <SheetTitle>Sidebar</SheetTitle>
            <SheetDescription>Displays the mobile sidebar.</SheetDescription>
          </SheetHeader>
          <div className='flex h-full w-full flex-col'>{children}</div>
        </SheetContent>
      </Sheet>
    );
  }

  return (
    <div
      className='group peer text-sidebar-foreground hidden md:block'
      data-state={state}
      data-collapsible={state === "collapsed" ? collapsible : ""}
      data-variant={variant}
      data-side={side}
      data-slot='sidebar'
    >
      {/* This is what handles the sidebar gap on desktop */}
      <div
        data-slot='sidebar-gap'
        className={cn(
          "relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear",
          "group-data-[collapsible=offcanvas]:w-0",
          "group-data-[side=right]:rotate-180",
          variant === "floating" || variant === "inset"
            ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]"
            : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)",
        )}
      />
      <div
        data-slot='sidebar-container'
        className={cn(
          "fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex",
          side === "left"
            ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
            : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
          // Adjust the padding for floating and inset variants.
          variant === "floating" || variant === "inset"
            ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]"
            : "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l",
          className,
        )}
        {...props}
      >
        <div
          data-sidebar='sidebar'
          data-slot='sidebar-inner'
          className='bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-[calc(100% - 20px)] w-full flex-col group-data-[variant=floating]: group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm'
        >
          {children}
        </div>
      </div>
    </div>
  );
}

function SidebarTrigger({
  className,
  onClick,
  ...props
}: React.ComponentProps<typeof Button>) {
  const { toggleSidebar } = useSidebar();

  return (
    <Button
      data-sidebar='trigger'
      data-slot='sidebar-trigger'
      variant='ghost'
      size='icon'
      className={cn("size-7", className)}
      onClick={(event) => {
        onClick?.(event);
        toggleSidebar();
      }}
      {...props}
    >
      <PanelLeftIcon />
      <span className='sr-only'>Toggle Sidebar</span>
    </Button>
  );
}

function SidebarRail({ className, ...props }: React.ComponentProps<"button">) {
  const { toggleSidebar } = useSidebar();

  return (
    <button
      data-sidebar='rail'
      data-slot='sidebar-rail'
      aria-label='Toggle Sidebar'
      tabIndex={-1}
      onClick={toggleSidebar}
      title='Toggle Sidebar'
      className={cn(
        "hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex",
        "in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize",
        "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
        "hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full",
        "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
        "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
        className,
      )}
      {...props}
    />
  );
}

function SidebarInset({ className, ...props }: React.ComponentProps<"main">) {
  return (
    <main
      data-slot='sidebar-inset'
      className={cn(
        "bg-background relative flex w-full flex-1 flex-col",
        "md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2",
        className,
      )}
      {...props}
    />
  );
}

function SidebarInput({
  className,
  ...props
}: React.ComponentProps<typeof Input>) {
  return (
    <Input
      data-slot='sidebar-input'
      data-sidebar='input'
      className={cn("bg-background h-8 w-full shadow-none", className)}
      {...props}
    />
  );
}

function SidebarHeader({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot='sidebar-header'
      data-sidebar='header'
      className={cn("bg-background flex flex-col gap-2 p-2", className)}
      {...props}
    />
  );
}

function SidebarFooter({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot='sidebar-footer'
      data-sidebar='footer'
      className={cn("flex flex-col gap-2 p-2 bg-background", className)}
      {...props}
    />
  );
}

function SidebarSeparator({
  className,
  ...props
}: React.ComponentProps<typeof Separator>) {
  return (
    <Separator
      data-slot='sidebar-separator'
      data-sidebar='separator'
      className={cn("bg-sidebar-border mx-2 w-auto", className)}
      {...props}
    />
  );
}

function SidebarContent({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot='sidebar-content'
      data-sidebar='content'
      className={cn(
        "bg-background flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
        className,
      )}
      {...props}
    />
  );
}

function SidebarGroup({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot='sidebar-group'
      data-sidebar='group'
      className={cn("relative flex w-full min-w-0 flex-col p-2", className)}
      {...props}
    />
  );
}

function SidebarGroupLabel({
  className,
  asChild = false,
  ...props
}: React.ComponentProps<"div"> & { asChild?: boolean }) {
  const Comp = asChild ? Slot : "div";

  return (
    <Comp
      data-slot='sidebar-group-label'
      data-sidebar='group-label'
      className={cn(
        "text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center  px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
        "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
        className,
      )}
      {...props}
    />
  );
}

function SidebarGroupAction({
  className,
  asChild = false,
  ...props
}: React.ComponentProps<"button"> & { asChild?: boolean }) {
  const Comp = asChild ? Slot : "button";

  return (
    <Comp
      data-slot='sidebar-group-action'
      data-sidebar='group-action'
      className={cn(
        "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center  p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
        // Increases the hit area of the button on mobile.
        "after:absolute after:-inset-2 md:after:hidden",
        "group-data-[collapsible=icon]:hidden",
        className,
      )}
      {...props}
    />
  );
}

function SidebarGroupContent({
  className,
  ...props
}: React.ComponentProps<"div">) {
  return (
    <div
      data-slot='sidebar-group-content'
      data-sidebar='group-content'
      className={cn("w-full text-sm", className)}
      {...props}
    />
  );
}

function SidebarMenu({ className, ...props }: React.ComponentProps<"ul">) {
  return (
    <ul
      data-slot='sidebar-menu'
      data-sidebar='menu'
      className={cn(
        "flex w-full min-w-0 flex-col gap-1 bg-background",
        className,
      )}
      {...props}
    />
  );
}

function SidebarMenuItem({ className, ...props }: React.ComponentProps<"li">) {
  return (
    <li
      data-slot='sidebar-menu-item'
      data-sidebar='menu-item'
      className={cn("group/menu-item relative bg-background", className)}
      {...props}
    />
  );
}

const sidebarMenuButtonVariants = cva(
  "peer/menu-button flex w-full items-center gap-2 overflow-hidden  p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
  {
    variants: {
      variant: {
        default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
        outline:
          "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
      },
      size: {
        default: "h-8 text-sm",
        sm: "h-7 text-xs",
        lg: "h-12 text-sm group-data-[collapsible=icon]:p-0!",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "default",
    },
  },
);

function SidebarMenuButton({
  asChild = false,
  isActive = false,
  variant = "default",
  size = "default",
  tooltip,
  className,
  ...props
}: React.ComponentProps<"button"> & {
  asChild?: boolean;
  isActive?: boolean;
  tooltip?: string | React.ComponentProps<typeof TooltipContent>;
} & VariantProps<typeof sidebarMenuButtonVariants>) {
  const Comp = asChild ? Slot : "button";
  const { isMobile, state } = useSidebar();

  const button = (
    <Comp
      data-slot='sidebar-menu-button'
      data-sidebar='menu-button'
      data-size={size}
      data-active={isActive}
      className={cn(sidebarMenuButtonVariants({ variant, size }), className)}
      {...props}
    />
  );

  if (!tooltip) {
    return button;
  }

  if (typeof tooltip === "string") {
    tooltip = {
      children: tooltip,
    };
  }

  return (
    <Tooltip>
      <TooltipTrigger asChild>{button}</TooltipTrigger>
      <TooltipContent
        side='right'
        align='center'
        hidden={state !== "collapsed" || isMobile}
        {...tooltip}
      />
    </Tooltip>
  );
}

function SidebarMenuAction({
  className,
  asChild = false,
  showOnHover = false,
  ...props
}: React.ComponentProps<"button"> & {
  asChild?: boolean;
  showOnHover?: boolean;
}) {
  const Comp = asChild ? Slot : "button";

  return (
    <Comp
      data-slot='sidebar-menu-action'
      data-sidebar='menu-action'
      className={cn(
        "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center  p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
        // Increases the hit area of the button on mobile.
        "after:absolute after:-inset-2 md:after:hidden",
        "peer-data-[size=sm]/menu-button:top-1",
        "peer-data-[size=default]/menu-button:top-1.5",
        "peer-data-[size=lg]/menu-button:top-2.5",
        "group-data-[collapsible=icon]:hidden",
        showOnHover &&
          "peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0",
        className,
      )}
      {...props}
    />
  );
}

function SidebarMenuBadge({
  className,
  ...props
}: React.ComponentProps<"div">) {
  return (
    <div
      data-slot='sidebar-menu-badge'
      data-sidebar='menu-badge'
      className={cn(
        "text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center  px-1 text-xs font-medium tabular-nums select-none",
        "peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
        "peer-data-[size=sm]/menu-button:top-1",
        "peer-data-[size=default]/menu-button:top-1.5",
        "peer-data-[size=lg]/menu-button:top-2.5",
        "group-data-[collapsible=icon]:hidden",
        className,
      )}
      {...props}
    />
  );
}

function SidebarMenuSkeleton({
  className,
  showIcon = false,
  ...props
}: React.ComponentProps<"div"> & {
  showIcon?: boolean;
}) {
  // Random width between 50 to 90%.
  const width = React.useMemo(() => {
    return `${Math.floor(Math.random() * 40) + 50}%`;
  }, []);

  return (
    <div
      data-slot='sidebar-menu-skeleton'
      data-sidebar='menu-skeleton'
      className={cn("flex h-8 items-center gap-2  px-2", className)}
      {...props}
    >
      {showIcon && (
        <Skeleton className='size-4 ' data-sidebar='menu-skeleton-icon' />
      )}
      <Skeleton
        className='h-4 max-w-(--skeleton-width) flex-1'
        data-sidebar='menu-skeleton-text'
        style={
          {
            "--skeleton-width": width,
          } as React.CSSProperties
        }
      />
    </div>
  );
}

function SidebarMenuSub({ className, ...props }: React.ComponentProps<"ul">) {
  return (
    <ul
      data-slot='sidebar-menu-sub'
      data-sidebar='menu-sub'
      className={cn(
        "border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5",
        "group-data-[collapsible=icon]:hidden",
        className,
      )}
      {...props}
    />
  );
}

function SidebarMenuSubItem({
  className,
  ...props
}: React.ComponentProps<"li">) {
  return (
    <li
      data-slot='sidebar-menu-sub-item'
      data-sidebar='menu-sub-item'
      className={cn("group/menu-sub-item relative", className)}
      {...props}
    />
  );
}

function SidebarMenuSubButton({
  asChild = false,
  size = "md",
  isActive = false,
  className,
  ...props
}: React.ComponentProps<"a"> & {
  asChild?: boolean;
  size?: "sm" | "md";
  isActive?: boolean;
}) {
  const Comp = asChild ? Slot : "a";

  return (
    <Comp
      data-slot='sidebar-menu-sub-button'
      data-sidebar='menu-sub-button'
      data-size={size}
      data-active={isActive}
      className={cn(
        "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden  px-2 outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
        "data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
        size === "sm" && "text-xs",
        size === "md" && "text-sm",
        "group-data-[collapsible=icon]:hidden",
        className,
      )}
      {...props}
    />
  );
}

export {
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarGroup,
  SidebarGroupAction,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarHeader,
  SidebarInput,
  SidebarInset,
  SidebarMenu,
  SidebarMenuAction,
  SidebarMenuBadge,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarMenuSkeleton,
  SidebarMenuSub,
  SidebarMenuSubButton,
  SidebarMenuSubItem,
  SidebarProvider,
  SidebarRail,
  SidebarSeparator,
  SidebarTrigger,
  useSidebar,
};


================================================
FILE: apps/client/src/components/ui/skeleton.tsx
================================================
import { cn } from "@/lib/utils"

function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="skeleton"
      className={cn("bg-accent animate-pulse rounded-md", className)}
      {...props}
    />
  )
}

export { Skeleton }


================================================
FILE: apps/client/src/components/ui/sonner.tsx
================================================
import { useTheme } from "next-themes"
import { Toaster as Sonner, ToasterProps } from "sonner"

const Toaster = ({ ...props }: ToasterProps) => {
  const { theme = "system" } = useTheme()

  return (
    <Sonner
      theme={theme as ToasterProps["theme"]}
      className="toaster group"
      style={
        {
          "--normal-bg": "var(--popover)",
          "--normal-text": "var(--popover-foreground)",
          "--normal-border": "var(--border)",
          "--border-radius": "0",
        } as React.CSSProperties
      }
      {...props}
    />
  )
}

export { Toaster }


================================================
FILE: apps/client/src/components/ui/switch.tsx
================================================
import * as React from "react"
import * as SwitchPrimitive from "@radix-ui/react-switch"

import { cn } from "@/lib/utils"

function Switch({
  className,
  ...props
}: React.ComponentProps<typeof SwitchPrimitive.Root>) {
  return (
    <SwitchPrimitive.Root
      data-slot="switch"
      className={cn(
        "peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
        className
      )}
      {...props}
    >
      <SwitchPrimitive.Thumb
        data-slot="switch-thumb"
        className={cn(
          "bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0"
        )}
      />
    </SwitchPrimitive.Root>
  )
}

export { Switch }


================================================
FILE: apps/client/src/components/ui/table.tsx
================================================
import * as React from "react"

import { cn } from "@/lib/utils"

function Table({ className, ...props }: React.ComponentProps<"table">) {
  return (
    <div
      data-slot="table-container"
      className="relative w-full overflow-x-auto"
    >
      <table
        data-slot="table"
        className={cn("w-full caption-bottom text-sm", className)}
        {...props}
      />
    </div>
  )
}

function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
  return (
    <thead
      data-slot="table-header"
      className={cn("[&_tr]:border-b", className)}
      {...props}
    />
  )
}

function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
  return (
    <tbody
      data-slot="table-body"
      className={cn("[&_tr:last-child]:border-0", className)}
      {...props}
    />
  )
}

function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
  return (
    <tfoot
      data-slot="table-footer"
      className={cn(
        "bg-muted/50 border-t font-medium [&>tr]:last:border-b-0",
        className
      )}
      {...props}
    />
  )
}

function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
  return (
    <tr
      data-slot="table-row"
      className={cn(
        "hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
        className
      )}
      {...props}
    />
  )
}

function TableHead({ className, ...props }: React.ComponentProps<"th">) {
  return (
    <th
      data-slot="table-head"
      className={cn(
        "text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
        className
      )}
      {...props}
    />
  )
}

function TableCell({ className, ...props }: React.ComponentProps<"td">) {
  return (
    <td
      data-slot="table-cell"
      className={cn(
        "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
        className
      )}
      {...props}
    />
  )
}

function TableCaption({
  className,
  ...props
}: React.ComponentProps<"caption">) {
  return (
    <caption
      data-slot="table-caption"
      className={cn("text-muted-foreground mt-4 text-sm", className)}
      {...props}
    />
  )
}

export {
  Table,
  TableHeader,
  TableBody,
  TableFooter,
  TableHead,
  TableRow,
  TableCell,
  TableCaption,
}


================================================
FILE: apps/client/src/components/ui/tabs.tsx
================================================
import * as React from "react";
import * as TabsPrimitive from "@radix-ui/react-tabs";

import { cn } from "@/lib/utils";

const Tabs = TabsPrimitive.Root;

const TabsList = React.forwardRef<
  React.ElementRef<typeof TabsPrimitive.List>,
  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
>(({ className, ...props }, ref) => (
  <TabsPrimitive.List
    ref={ref}
    className={cn(
      "inline-flex h-9 items-center justify-center bg-muted p-1 text-muted-foreground",
      className,
    )}
    {...props}
  />
));
TabsList.displayName = TabsPrimitive.List.displayName;

const TabsTrigger = React.forwardRef<
  React.ElementRef<typeof TabsPrimitive.Trigger>,
  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
>(({ className, ...props }, ref) => (
  <TabsPrimitive.Trigger
    ref={ref}
    className={cn(
      "inline-flex items-center justify-center whitespace-nowrap  px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow",
      className,
    )}
    {...props}
  />
));
TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;

const TabsContent = React.forwardRef<
  React.ElementRef<typeof TabsPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
>(({ className, ...props }, ref) => (
  <TabsPrimitive.Content
    ref={ref}
    className={cn(
      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
      className,
    )}
    {...props}
  />
));
TabsContent.displayName = TabsPrimitive.Content.displayName;

export { Tabs, TabsList, TabsTrigger, TabsContent };


================================================
FILE: apps/client/src/components/ui/textarea.tsx
================================================
import * as React from "react";

import { cn } from "@/lib/utils";

function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
  return (
    <textarea
      data-slot='textarea'
      className={cn(
        "border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
        className,
      )}
      {...props}
    />
  );
}

export { Textarea };


================================================
FILE: apps/client/src/components/ui/tooltip.tsx
================================================
"use client"

import * as React from "react"
import * as TooltipPrimitive from "@radix-ui/react-tooltip"

import { cn } from "@/lib/utils"

function TooltipProvider({
  delayDuration = 0,
  ...props
}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
  return (
    <TooltipPrimitive.Provider
      data-slot="tooltip-provider"
      delayDuration={delayDuration}
      {...props}
    />
  )
}

function Tooltip({
  ...props
}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
  return (
    <TooltipProvider>
      <TooltipPrimitive.Root data-slot="tooltip" {...props} />
    </TooltipProvider>
  )
}

function TooltipTrigger({
  ...props
}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
}

function TooltipContent({
  className,
  sideOffset = 0,
  children,
  ...props
}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
  return (
    <TooltipPrimitive.Portal>
      <TooltipPrimitive.Content
        data-slot="tooltip-content"
        sideOffset={sideOffset}
        className={cn(
          "bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
          className
        )}
        {...props}
      >
        {children}
        <TooltipPrimitive.Arrow className="bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
      </TooltipPrimitive.Content>
    </TooltipPrimitive.Portal>
  )
}

export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }


================================================
FILE: apps/client/src/contexts/SupabaseAuthContext.tsx
================================================
import {
  createContext,
  useContext,
  useEffect,
  useState,
  useCallback,
  type ReactNode,
} from "react";
import type { Session } from "@supabase/supabase-js";
import { supabase } from "@/lib/supabase";

const isTauri = (): boolean => {
  return typeof window !== "undefined" && "__TAURI_INTERNALS__" in window;
};

type SupabaseAuthContextType = {
  session: Session | null;
  accessToken: string | null;
  isLoading: boolean;
  signInWithGoogle: () => Promise<void>;
  signOut: () => Promise<void>;
};

const SupabaseAuthContext = createContext<SupabaseAuthContextType | null>(null);

export function SupabaseAuthProvider({ children }: { children: ReactNode }) {
  const [session, setSession] = useState<Session | null>(null);
  const [isLoading, setIsLoading] = useState(true);

  const handleDeepLink = useCallback(async (urls: string[]) => {
    for (const url of urls) {
      if (url.startsWith("vessel://auth/callback")) {
        const hashIndex = url.indexOf("#");
        if (hashIndex === -1) continue;

        const hash = url.slice(hashIndex + 1);
        const params = new URLSearchParams(hash);
        const accessToken = params.get("access_token");
        const refreshToken = params.get("refresh_token");

        if (accessToken && refreshToken) {
          const { data, error } = await supabase.auth.setSession({
            access_token: accessToken,
            refresh_token: refreshToken,
          });

          if (error) {
            console.error("Failed to set session:", error);
          } else if (data.session) {
            setSession(data.session);
          }
        }
      }
    }
  }, []);

  useEffect(() => {
    supabase.auth.getSession().then(({ data: { session } }) => {
      setSession(session);
      setIsLoading(false);
    });

    const {
      data: { subscription },
    } = supabase.auth.onAuthStateChange((_event, session) => {
      setSession(session);
    });

    return () => subscription.unsubscribe();
  }, []);

  useEffect(() => {
    let unlisten: (() => void) | undefined;
    let mounted = true;

    if (isTauri()) {
      import("@tauri-apps/api/event")
        .then(({ listen }) => {
          if (!mounted) return;
          listen<string[]>("deep-link-opened", (event) => {
            handleDeepLink(event.payload);
          })
            .then((fn) => {
              if (mounted) {
                unlisten = fn;
              } else {
                fn();
              }
            })
            .catch((err) => {
              console.error("Failed to listen for deep link:", err);
            });
        })
        .catch((err) => {
          console.error("Failed to import @tauri-apps/api/event:", err);
        });
    }

    return () => {
      mounted = false;
      if (unlisten) {
        unlisten();
      }
    };
  }, [handleDeepLink]);

  const signInWithGoogle = useCallback(async () => {
    if (isTauri()) {
      // Tauri: use deep link and open in external browser
      const { data, error } = await supabase.auth.signInWithOAuth({
        provider: "google",
        options: {
          redirectTo: "vessel://auth/callback",
          skipBrowserRedirect: true,
        },
      });

      if (error) {
        console.error("OAuth error:", error);
        return;
      }

      if (data.url) {
        try {
          const { open } = await import("@tauri-apps/plugin-shell");
          await open(data.url);
        } catch (err) {
          console.error("Failed to open URL:", err);
        }
      }
    } else {
      // Web browser: redirect in same window, Supabase handles the callback automatically
      const { error } = await supabase.auth.signInWithOAuth({
        provider: "google",
        options: {
          redirectTo: `${window.location.origin}/settings`,
        },
      });

      if (error) {
        console.error("OAuth error:", error);
      }
    }
  }, []);

  const signOut = useCallback(async () => {
    const { error } = await supabase.auth.signOut();
    if (error) {
      console.error("Sign out error:", error);
    } else {
      setSession(null);
    }
  }, []);

  return (
    <SupabaseAuthContext.Provider
      value={{
        session,
        accessToken: session?.access_token ?? null,
        isLoading,
        signInWithGoogle,
        signOut,
      }}
    >
      {children}
    </SupabaseAuthContext.Provider>
  );
}

export function useSupabaseAuth() {
  const context = useContext(SupabaseAuthContext);
  if (!context) {
    throw new Error(
      "useSupabaseAuth must be used within a SupabaseAuthProvider",
    );
  }
  return context;
}


================================================
FILE: apps/client/src/entities/configurations/api.ts
================================================
import { apiClient } from "@/shared/api";
import type { SystemConfiguration, SystemConfigurationPayload } from "./types";

export const getConfigs = () =>
  apiClient.get<SystemConfiguration[]>("/configurations");

export const createConfig = (data: SystemConfigurationPayload) =>
  apiClient.post<SystemConfiguration>("/configurations", data);

export const updateConfig = (id: number, data: SystemConfigurationPayload) =>
  apiClient.put<SystemConfiguration>(`/configurations/${id}`, data);

export const deleteConfig = (id: number) =>
  apiClient.delete(`/configurations/${id}`);


================================================
FILE: apps/client/src/entities/configurations/codeService.ts
================================================
import type { SystemConfiguration } from "./types";

export const CODE_SERVICE_CONFIG_KEY = "code_service_enabled";

export function getCodeServiceEnabled(
  configurations: SystemConfiguration[],
): boolean {
  const row = configurations.find((c) => c.key === CODE_SERVICE_CONFIG_KEY);
  return row !== undefined && row.enabled === 1;
}


================================================
FILE: apps/client/src/entities/configurations/store.ts
================================================
import { create } from "zustand";
import * as api from "./api";
import type { SystemConfiguration, SystemConfigurationPayload } from "./types";

interface ConfigState {
  configurations: SystemConfiguration[];
  isLoading: boolean;
  error: string | null;
  fetchConfigs: () => Promise<void>;
  createConfig: (data: SystemConfigurationPayload) => Promise<void>;
  updateConfig: (id: number, data: SystemConfigurationPayload) => Promise<void>;
  deleteConfig: (id: number) => Promise<void>;
}

export const useConfigStore = create<ConfigState>((set, get) => ({
  configurations: [],
  isLoading: false,
  error: null,
  fetchConfigs: async () => {
    set({ isLoading: true, error: null });
    try {
      const response = await api.getConfigs();
      set({ configurations: response.data, isLoading: false });
    } catch (err) {
      const errorMsg = err instanceof Error ? err.message : String(err);
      set({
        error: "Failed to fetch configurations: " + errorMsg,
        isLoading: false,
      });
    }
  },
  createConfig: async (data) => {
    await api.createConfig(data);
    await get().fetchConfigs();
  },
  updateConfig: async (id, data) => {
    await api.updateConfig(id, data);
    await get().fetchConfigs();
  },
  deleteConfig: async (id) => {
    await api.deleteConfig(id);
    await get().fetchConfigs();
  },
}));


================================================
FILE: apps/client/src/entities/configurations/types.ts
================================================
export interface SystemConfiguration {
  id: number;
  key: string;
  value: string;
  enabled: number;
  description: string | null;
  created_at: string;
  updated_at: string;
}

export type SystemConfigurationPayload = Omit<
  SystemConfiguration,
  "id" | "created_at" | "updated_at"
>;


================================================
FILE: apps/client/src/entities/custom-nodes/api.ts
================================================
import { apiClient } from "@/shared/api";
import { CustomNodeDynamicData, CustomNodeFromApi } from "./types";

export const getAllCustomNodes = async (): Promise<CustomNodeFromApi[]> => {
  const response = await apiClient.get("/custom-nodes");
  return response.data;
};

export const createCustomNode = async (node: {
  node_type: string;
  data: CustomNodeDynamicData;
}): Promise<CustomNodeFromApi> => {
  const response = await apiClient.post("/custom-nodes", node);
  return response.data;
};

export const updateCustomNode = async (
  node_type: string,
  data: CustomNodeDynamicData,
): Promise<CustomNodeFromApi> => {
  const response = await apiClient.put(`/custom-nodes/${node_type}`, { data });
  return response.data;
};

export const deleteCustomNode = async (node_type: string): Promise<void> => {
  await apiClient.delete(`/custom-nodes/${node_type}`);
};


================================================
FILE: apps/client/src/entities/custom-nodes/presets.ts
================================================
export interface PresetConnector {
  id: string;
  name: string;
  type: "in" | "out";
}

export type PresetCategory =
  | "Math"
  | "String"
  | "Array"
  | "Random"
  | "Data Utility"
  | "Counter";

export interface RhaiPreset {
  nodeId: string;
  displayName: string;
  description: string;
  category: PresetCategory;
  connectors: PresetConnector[];
  scriptPath: string;
}

export function presetToApiPayload(preset: RhaiPreset) {
  return {
    node_type: preset.nodeId,
    data: {
      connectors: preset.connectors,
      data: { path: preset.scriptPath },
      dataType: { path: "FIXED_STRING" },
      nodeType: preset.nodeId,
    },
  };
}

export const RHAI_PRESETS: RhaiPreset[] = [
  // ============ Math ============
  {
    nodeId: "_math_abs",
    displayName: "Absolute Value",
    description: "Returns the absolute value of a number",
    category: "Math",
    connectors: [
      { id: "id", name: "number", type: "in" },
      { id: "id", name: "number", type: "out" },
    ],
    scriptPath: "{:code}/math_abs.rhai",
  },
  {
    nodeId: "_math_clamp",
    displayName: "Clamp",
    description: "Clamps a number between min and max",
    category: "Math",
    connectors: [
      { id: "id", name: "number", type: "in" },
      { id: "id", name: "min", type: "in" },
      { id: "id", name: "max", type: "in" },
      { id: "id", name: "number", type: "out" },
    ],
    scriptPath: "{:code}/math_clamp.rhai",
  },
  {
    nodeId: "_math_round",
    displayName: "Round",
    description: "Rounds a number to the nearest integer",
    category: "Math",
    connectors: [
      { id: "id", name: "number", type: "in" },
      { id: "id", name: "number", type: "out" },
    ],
    scriptPath: "{:code}/math_round.rhai",
  },
  {
    nodeId: "_math_power",
    displayName: "Power",
    description: "Raises base to the power of exponent",
    category: "Math",
    connectors: [
      { id: "id", name: "base", type: "in" },
      { id: "id", name: "exponent", type: "in" },
      { id: "id", name: "number", type: "out" },
    ],
    scriptPath: "{:code}/math_power.rhai",
  },
  {
    nodeId: "_math_sqrt",
    displayName: "Square Root",
    description: "Calculates the square root of a number",
    category: "Math",
    connectors: [
      { id: "id", name: "number", type: "in" },
      { id: "id", name: "number", type: "out" },
    ],
    scriptPath: "{:code}/math_sqrt.rhai",
  },
  {
    nodeId: "_math_min",
    displayName: "Minimum",
    description: "Returns the smaller of two numbers",
    category: "Math",
    connectors: [
      { id: "id", name: "a", type: "in" },
      { id: "id", name: "b", type: "in" },
      { id: "id", name: "number", type: "out" },
    ],
    scriptPath: "{:code}/math_min.rhai",
  },
  {
    nodeId: "_math_max",
    displayName: "Maximum",
    description: "Returns the larger of two numbers",
    category: "Math",
    connectors: [
      { id: "id", name: "a", type: "in" },
      { id: "id", name: "b", type: "in" },
      { id: "id", name: "number", type: "out" },
    ],
    scriptPath: "{:code}/math_max.rhai",
  },
  {
    nodeId: "_math_map_range",
    displayName: "Map Range",
    description: "Maps a value from one range to another",
    category: "Math",
    connectors: [
      { id: "id", name: "value", type: "in" },
      { id: "id", name: "in_min", type: "in" },
      { id: "id", name: "in_max", type: "in" },
      { id: "id", name: "out_min", type: "in" },
      { id: "id", name: "out_max", type: "in" },
      { id: "id", name: "number", type: "out" },
    ],
    scriptPath: "{:code}/math_map_range.rhai",
  },

  // ============ String ============
  {
    nodeId: "_string_concat",
    displayName: "Concatenate",
    description: "Joins two strings together",
    category: "String",
    connectors: [
      { id: "id", name: "a", type: "in" },
      { id: "id", name: "b", type: "in" },
      { id: "id", name: "string", type: "out" },
    ],
    scriptPath: "{:code}/string_concat.rhai",
  },
  {
    nodeId: "_string_upper",
    displayName: "To Uppercase",
    description: "Converts string to uppercase",
    category: "String",
    connectors: [
      { id: "id", name: "string", type: "in" },
      { id: "id", name: "string", type: "out" },
    ],
    scriptPath: "{:code}/string_upper.rhai",
  },
  {
    nodeId: "_string_lower",
    displayName: "To Lowercase",
    description: "Converts string to lowercase",
    category: "String",
    connectors: [
      { id: "id", name: "string", type: "in" },
      { id: "id", name: "string", type: "out" },
    ],
    scriptPath: "{:code}/string_lower.rhai",
  },
  {
    nodeId: "_string_trim",
    displayName: "Trim",
    description: "Removes whitespace from both ends",
    category: "String",
    connectors: [
      { id: "id", name: "string", type: "in" },
      { id: "id", name: "string", type: "out" },
    ],
    scriptPath: "{:code}/string_trim.rhai",
  },
  {
    nodeId: "_string_length",
    displayName: "String Length",
    description: "Returns the length of a string",
    category: "String",
    connectors: [
      { id: "id", name: "string", type: "in" },
      { id: "id", name: "number", type: "out" },
    ],
    scriptPath: "{:code}/string_length.rhai",
  },
  {
    nodeId: "_string_contains",
    displayName: "Contains",
    description: "Checks if string contains a substring",
    category: "String",
    connectors: [
      { id: "id", name: "string", type: "in" },
      { id: "id", name: "search", type: "in" },
      { id: "id", name: "bool", type: "out" },
    ],
    scriptPath: "{:code}/string_contains.rhai",
  },
  {
    nodeId: "_string_replace",
    displayName: "Replace",
    description: "Replaces occurrences in a string",
    category: "String",
    connectors: [
      { id: "id", name: "string", type: "in" },
      { id: "id", name: "from", type: "in" },
      { id: "id", name: "to", type: "in" },
      { id: "id", name: "string", type: "out" },
    ],
    scriptPath: "{:code}/string_replace.rhai",
  },
  {
    nodeId: "_string_split",
    displayName: "Split",
    description: "Splits string by delimiter into array",
    category: "String",
    connectors: [
      { id: "id", name: "string", type: "in" },
      { id: "id", name: "delimiter", type: "in" },
      { id: "id", name: "array", type: "out" },
    ],
    scriptPath: "{:code}/string_split.rhai",
  },
  {
    nodeId: "_string_substring",
    displayName: "Substring",
    description: "Extracts a portion of a string",
    category: "String",
    connectors: [
      { id: "id", name: "string", type: "in" },
      { id: "id", name: "start", type: "in" },
      { id: "id", name: "length", type: "in" },
      { id: "id", name: "string", type: "out" },
    ],
    scriptPath: "{:code}/string_substring.rhai",
  },
  {
    nodeId: "_string_reverse",
    displayName: "Reverse String",
    description: "Reverses a string",
    category: "String",
    connectors: [
      { id: "id", name: "string", type: "in" },
      { id: "id", name: "string", type: "out" },
    ],
    scriptPath: "{:code}/string_reverse.rhai",
  },

  // ============ Array ============
  {
    nodeId: "_array_length",
    displayName: "Array Length",
    description: "Returns the length of an array",
    category: "Array",
    connectors: [
      { id: "id", name: "array", type: "in" },
      { id: "id", name: "number", type: "out" },
    ],
    scriptPath: "{:code}/array_length.rhai",
  },
  {
    nodeId: "_array_push",
    displayName: "Array Push",
    description: "Appends an item to an array",
    category: "Array",
    connectors: [
      { id: "id", name: "array", type: "in" },
      { id: "id", name: "item", type: "in" },
      { id: "id", name: "array", type: "out" },
    ],
    scriptPath: "{:code}/array_push.rhai",
  },
  {
    nodeId: "_array_reverse",
    displayName: "Array Reverse",
    description: "Reverses an array in place",
    category: "Array",
    connectors: [
      { id: "id", name: "array", type: "in" },
      { id: "id", name: "array", type: "out" },
    ],
    scriptPath: "{:code}/array_reverse.rhai",
  },
  {
    nodeId: "_array_join",
    displayName: "Array Join",
    description: "Joins array elements into a string",
    category: "Array",
    connectors: [
      { id: "id", name: "array", type: "in" },
      { id: "id", name: "delimiter", type: "in" },
      { id: "id", name: "string", type: "out" },
    ],
    scriptPath: "{:code}/array_join.rhai",
  },
  {
    nodeId: "_array_sort",
    displayName: "Array Sort",
    description: "Sorts an array in ascending order",
    category: "Array",
    connectors: [
      { id: "id", name: "array", type: "in" },
      { id: "id", name: "array", type: "out" },
    ],
    scriptPath: "{:code}/array_sort.rhai",
  },
  {
    nodeId: "_array_sum",
    displayName: "Array Sum",
    description: "Sums all numeric elements in an array",
    category: "Array",
    connectors: [
      { id: "id", name: "array", type: "in" },
      { id: "id", name: "number", type: "out" },
    ],
    scriptPath: "{:code}/array_sum.rhai",
  },
  {
    nodeId: "_array_average",
    displayName: "Array Average",
    description: "Calculates the average of array elements",
    category: "Array",
    connectors: [
      { id: "id", name: "array", type: "in" },
      { id: "id", name: "number", type: "out" },
    ],
    scriptPath: "{:code}/array_average.rhai",
  },

  // ============ Random ============
  {
    nodeId: "_random_number",
    displayName: "Random Number",
    description: "Generates a random number (input + random float)",
    category: "Random",
    connectors: [{ id: "id", name: "number", type: "out" }],
    scriptPath: "{:code}/add_node.rhai",
  },
  {
    nodeId: "_random_range",
    displayName: "Random Range",
    description: "Generates random number within a range",
    category: "Random",
    connectors: [
      { id: "id", name: "min", type: "in" },
      { id: "id", name: "max", type: "in" },
      { id: "id", name: "number", type: "out" },
    ],
    scriptPath: "{:code}/random_range.rhai",
  },
  {
    nodeId: "_random_bool",
    displayName: "Random Boolean",
    description: "Generates a random true/false value",
    category: "Random",
    connectors: [{ id: "id", name: "bool", type: "out" }],
    scriptPath: "{:code}/random_bool.rhai",
  },
  {
    nodeId: "_random_choice",
    displayName: "Random Choice",
    description: "Picks a random element from an array",
    category: "Random",
    connectors: [
      { id: "id", name: "array", type: "in" },
      { id: "id", name: "value", type: "out" },
    ],
    scriptPath: "{:code}/random_choice.rhai",
  },

  // ============ Data Utility ============
  {
    nodeId: "_passthrough",
    displayName: "Passthrough",
    description: "Passes input directly to output unchanged",
    category: "Data Utility",
    connectors: [
      { id: "id", name: "value", type: "in" },
      { id: "id", name: "value", type: "out" },
    ],
    scriptPath: "{:code}/passthrough.rhai",
  },
  {
    nodeId: "_timestamp",
    displayName: "Timestamp",
    description: "Outputs the current epoch timestamp in milliseconds",
    category: "Data Utility",
    connectors: [{ id: "id", name: "number", type: "out" }],
    scriptPath: "{:code}/timestamp.rhai",
  },
  {
    nodeId: "_template",
    displayName: "Template",
    description: "Replaces {value} placeholder in a template string",
    category: "Data Utility",
    connectors: [
      { id: "id", name: "template", type: "in" },
      { id: "id", name: "value", type: "in" },
      { id: "id", name: "string", type: "out" },
    ],
    scriptPath: "{:code}/template.rhai",
  },
  {
    nodeId: "_to_json_string",
    displayName: "To JSON String",
    description: "Converts a value to its string representation",
    category: "Data Utility",
    connectors: [
      { id: "id", name: "value", type: "in" },
      { id: "id", name: "string", type: "out" },
    ],
    scriptPath: "{:code}/to_json_string.rhai",
  },
  {
    nodeId: "_parse_json",
    displayName: "Parse JSON",
    description: "Parses a JSON string into an object",
    category: "Data Utility",
    connectors: [
      { id: "id", name: "string", type: "in" },
      { id: "id", name: "value", type: "out" },
    ],
    scriptPath: "{:code}/parse_json.rhai",
  },

  // ============ Counter ============
  {
    nodeId: "_counter",
    displayName: "Counter",
    description: "Increments current value by step",
    category: "Counter",
    connectors: [
      { id: "id", name: "current", type: "in" },
      { id: "id", name: "step", type: "in" },
      { id: "id", name: "number", type: "out" },
    ],
    scriptPath: "{:code}/counter.rhai",
  },
  {
    nodeId: "_accumulator",
    displayName: "Accumulator",
    description: "Adds value to a running total",
    category: "Counter",
    connectors: [
      { id: "id", name: "total", type: "in" },
      { id: "id", name: "value", type: "in" },
      { id: "id", name: "number", type: "out" },
    ],
    scriptPath: "{:code}/accumulator.rhai",
  },
];

export function getPresetCategories(): PresetCategory[] {
  const categories = new Set<PresetCategory>();
  for (const preset of RHAI_PRESETS) {
    categories.add(preset.category);
  }
  return Array.from(categories);
}

export function getPresetsByCategory(category: PresetCategory): RhaiPreset[] {
  return RHAI_PRESETS.filter((p) => p.category === category);
}


================================================
FILE: apps/client/src/entities/custom-nodes/store.ts
================================================
import { create } from "zustand";
import { CustomNodeState } from "./types";
import * as api from "./api";

// const parseNodeData = (nodeFromApi: CustomNodeFromApi): CustomNodeFromApi => {
//   try {
//     return {
//       ...nodeFromApi,
//       data: nodeFromApi.data,
//     };
//   } catch (error) {
//     console.error(
//       `Failed to parse data for node ${nodeFromApi.node_type}`,
//       error,
//     );
//     // Return a default/error state if parsing fails
//     return {
//       node_type: nodeFromApi.node_type,
//       data: {},
//     };
//   }
// };

export const useCustomNodeStore = create<CustomNodeState>((set) => ({
  nodes: [],
  isLoading: false,
  error: null,
  fetchAllNodes: async () => {
    set({ isLoading: true, error: null });
    try {
      const nodesFromApi = await api.getAllCustomNodes();
      set({ nodes: nodesFromApi, isLoading: false });
    } catch {
      set({ error: "Failed to fetch nodes.", isLoading: false });
    }
  },
  createNode: async (node) => {
    set({ isLoading: true, error: null });
    try {
      const newNodeFromApi = await api.createCustomNode(node);
      set((state) => ({
        nodes: [...state.nodes, newNodeFromApi],
        isLoading: false,
      }));
    } catch {
      set({ error: "Failed to create node.", isLoading: false });
    }
  },
  updateNode: async (node_type, data) => {
    set({ isLoading: true, error: null });
    try {
      const updatedNodeFromApi = await api.updateCustomNode(node_type, data);
      set((state) => ({
        nodes: state.nodes.map((n) =>
          n.node_type === node_type ? updatedNodeFromApi : n,
        ),
        isLoading: false,
      }));
    } catch {
      set({ error: "Failed to update node.", isLoading: false });
    }
  },
  deleteNode: async (node_type) => {
    set({ isLoading: true, error: null });
    try {
      await api.deleteCustomNode(node_type);
      set((state) => ({
        nodes: state.nodes.filter((n) => n.node_type !== node_type),
        isLoading: false,
      }));
    } catch {
      set({ error: "Failed to delete node.", isLoading: false });
    }
  },
}));


================================================
FILE: apps/client/src/entities/custom-nodes/types.ts
================================================
export interface CustomNodeFromApi {
  node_type: string;
  data: CustomNodeDynamicData;
}

export type CustomNodeDynamicData = Record<string, unknown>;

export interface CustomNodeData {
  name: string;
  description: string;
  category: string;
  script_path: string;
  connectors: Connector[];
  dataType?: Record<string, string>;
}

export type CustomNode = CustomNodeFromApi;

export interface Connector {
  type: "in" | "out";
  name: string;
  label: string;
}

export interface CustomNodeState {
  nodes: CustomNode[];
  isLoading: boolean;
  error: string | null;
  fetchAllNodes: () => Promise<void>;
  createNode: (node: {
    node_type: string;
    data: CustomNodeDynamicData;
  }) => Promise<void>;
  updateNode: (node_type: string, data: CustomNodeDynamicData) => Promise<void>;
  deleteNode: (node_type: string) => Promise<void>;
}


================================================
FILE: apps/client/src/entities/device/api.ts
================================================
import { apiClient } from "@/shared/api";
import type { Device, DevicePayload, DeviceWithEntity } from "./types";

export const getDevices = () => apiClient.get<Device[]>("/devices");
export const getDeviceById = (pk_id: number) =>
  apiClient.get<DeviceWithEntity>("/devices/id/" + pk_id);

export const createDevice = (data: DevicePayload) =>
  apiClient.post<Device>("/devices", data);
export const updateDevice = (id: number, data: DevicePayload) =>
  apiClient.put<Device>(`/devices/${id}`, data);
export const deleteDevice = (id: number) => apiClient.delete(`/devices/${id}`);


================================================
FILE: apps/client/src/entities/device/store.ts
================================================
import { create } from "zustand";
import * as api from "./api";
import type { Device, DevicePayload } from "./types";

interface DeviceState {
  devices: Device[];
  selectedDevice: Device | null;
  isLoading: boolean;
  error: string | null;
  fetchDevices: () => Promise<void>;
  createDevice: (data: DevicePayload) => Promise<void>;
  updateDevice: (id: number, data: DevicePayload) => Promise<void>;
  deleteDevice: (id: number) => Promise<void>;
  selectDevice: (device: Device | null) => void;
}

export const useDeviceStore = create<DeviceState>((set, get) => ({
  devices: [],
  selectedDevice: null,
  isLoading: false,
  error: null,
  selectDevice: (device) => set({ selectedDevice: device }),
  fetchDevices: async () => {
    set({ isLoading: true, error: null });
    try {
      const response = await api.getDevices();
      set({ devices: response.data, isLoading: false });
    } catch (err) {
      set({ error: "Failed to fetch devices", isLoading: false });
      console.error(err);
    }
  },
  createDevice: async (data) => {
    await api.createDevice(data);
    await get().fetchDevices();
  },
  updateDevice: async (id, data) => {
    await api.updateDevice(id, data);
    await get().fetchDevices();
  },
  deleteDevice: async (id) => {
    await api.deleteDevice(id);
    if (get().selectedDevice?.id === id) {
      set({ selectedDevice: null });
    }
    await get().fetchDevices();
  },
}));


================================================
FILE: apps/client/src/entities/device/types.ts
================================================
import { EntityAll } from "../entity/types";

export interface Device {
  id: number;
  device_id: string;
  name: string | null;
  manufacturer: string | null;
  model: string | null;
}

export interface DeviceWithEntity {
  id: number;
  device_id: string;
  name: string | null;
  manufacturer: string | null;
  model: string | null;
  entities: EntityAll[];
}

export type DevicePayload = Omit<Device, "id">;


================================================
FILE: apps/client/src/entities/device-token/api.ts
================================================
import { apiClient } from "@/shared/api";
import type { DeviceToken, IssuedTokenResponse } from "./types";

export const issueDeviceToken = (deviceId: number) =>
  apiClient.post<IssuedTokenResponse>(`/devices/${deviceId}/token`);

export const getDeviceTokenInfo = (deviceId: number) =>
  apiClient.get<DeviceToken | { message: string }>(
    `/devices/${deviceId}/token`,
  );

export const revokeDeviceToken = (deviceId: number) =>
  apiClient.delete(`/devices/${deviceId}/token`);


================================================
FILE: apps/client/src/entities/device-token/store.ts
================================================
import { create } from "zustand";
import * as api from "./api";
import type { DeviceToken } from "./types";

interface DeviceTokenState {
  tokenInfo: DeviceToken | null;
  newToken: string | null;
  isLoading: boolean;
  error: string | null;
  fetchTokenInfo: (deviceId: number) => Promise<void>;
  issueToken: (deviceId: number) => Promise<void>;
  revokeToken: (deviceId: number) => Promise<void>;
  clearNewToken: () => void;
}

export const useDeviceTokenStore = create<DeviceTokenState>((set, get) => ({
  tokenInfo: null,
  newToken: null,
  isLoading: false,
  error: null,

  fetchTokenInfo: async (deviceId) => {
    set({ isLoading: true, error: null });
    try {
      const response = await api.getDeviceTokenInfo(deviceId);
      if (response.data && "id" in response.data) {
        set({ tokenInfo: response.data, isLoading: false });
      } else {
        set({ tokenInfo: null, isLoading: false });
      }
    } catch (err) {
      console.error("Failed to fetch token info:", err);
      set({ tokenInfo: null, isLoading: false });
    }
  },
  issueToken: async (deviceId) => {
    set({ isLoading: true, error: null });
    try {
      const response = await api.issueDeviceToken(deviceId);
      set({ newToken: response.data.token, isLoading: false });
      await get().fetchTokenInfo(deviceId);
    } catch (err) {
      const errorMsg = err instanceof Error ? err.message : String(err);
      set({ error: "Failed to issue token: " + errorMsg, isLoading: false });
    }
  },
  revokeToken: async (deviceId) => {
    set({ isLoading: true, error: null });
    try {
      await api.revokeDeviceToken(deviceId);
      set({ tokenInfo: null, isLoading: false });
    } catch (err) {
      const errorMsg = err instanceof Error ? err.message : String(err);
      set({ error: "Failed to revoke token: " + errorMsg, isLoading: false });
    }
  },
  clearNewToken: () => {
    set({ newToken: null });
  },
}));


================================================
FILE: apps/client/src/entities/device-token/types.ts
================================================
export interface DeviceToken {
  id: number;
  device_id: number;
  expires_at: string | null;
  last_used_at: string | null;
  created_at: string;
}

export interface IssuedTokenResponse {
  message: string;
  token: string;
}


================================================
FILE: apps/client/src/entities/dynamic-dashboard/api.ts
================================================
import { apiClient } from "@/shared/api";

export type DynamicDashboardDto = {
  id: string;
  name: string;
  layout: unknown;
  created_at: string;
  updated_at: string;
};

export const listDashboards = () =>
  apiClient.get<DynamicDashboardDto[]>("/dynamic-dashboards");

export const getDashboard = (id: string) =>
  apiClient.get<DynamicDashboardDto>(`/dynamic-dashboards/${id}`);

export const createDashboard = (payload: {
  name: string;
  layout: unknown;
}) => apiClient.post<DynamicDashboardDto>("/dynamic-dashboards", payload);

export const updateDashboard = (
  id: string,
  payload: { name?: string; layout?: unknown },
) => apiClient.put<DynamicDashboardDto>(`/dynamic-dashboards/${id}`, payload);

export const deleteDashboard = (id: string) =>
  apiClient.delete(`/dynamic-dashboards/${id}`);


================================================
FILE: apps/client/src/entities/dynamic-dashboard/interaction.ts
================================================
/** Contract version for dashboard → flow WebSocket payloads (listener id + broadcast bus). */
export const DASHBOARD_COMPONENT_EVENT_VERSION = 2 as const;

export const MAX_LISTENER_ID_LENGTH = 128;

/** Match server: alphanumeric, underscore, hyphen only. */
export function isValidListenerId(id: string): boolean {
  const t = id.trim();
  if (!t || t.length > MAX_LISTENER_ID_LENGTH) return false;
  return /^[a-zA-Z0-9_-]+$/.test(t);
}

export type DashboardComponentType = "button" | string;

export type DashboardComponentAction = "click" | "change" | "submit" | string;

/**
 * Client → server: user interaction; server publishes to `dashboard_ui` for
 * `DASHBOARD_EVENT_LISTENER` nodes in **running** flows.
 */
export type DashboardComponentEventPayload = {
  event_version: typeof DASHBOARD_COMPONENT_EVENT_VERSION;
  event_id: string;
  occurred_at: string;
  listener_id: string;
  dashboard_id: string;
  group_id: string;
  item_id: string;
  component_type: DashboardComponentType;
  action: DashboardComponentAction;
  value?: unknown;
  source_session_id: string;
  cooldown_ms?: number;
};


================================================
FILE: apps/client/src/entities/dynamic-dashboard/layoutResolve.ts
================================================
import type { DashboardGroup, DashboardItem } from "./store";

/** Clamp top-left grid position to group bounds (matches store behavior). */
export function clampItemPosition(
  group: DashboardGroup,
  size: { w: number; h: number },
  position: { x: number; y: number },
): { x: number; y: number } {
  return {
    x: Math.min(Math.max(0, position.x), Math.max(0, group.cols - size.w)),
    y: Math.min(Math.max(0, position.y), Math.max(0, group.rows - size.h)),
  };
}

export function itemsCollide(
  a: Pick<DashboardItem, "position" | "size">,
  b: Pick<DashboardItem, "position" | "size">,
): boolean {
  return (
    a.position.x < b.position.x + b.size.w &&
    a.position.x + a.size.w > b.position.x &&
    a.position.y < b.position.y + b.size.h &&
    a.position.y + a.size.h > b.position.y
  );
}

/**
 * Pointer/grid intent → clamped position if it does not overlap other items.
 * Returns null if the move is blocked by collision (keep previous preview).
 */
export function resolveItemPositionOrNull(
  group: DashboardGroup,
  movingItem: DashboardItem,
  desiredPosition: { x: number; y: number },
): { x: number; y: number } | null {
  const nextPos = clampItemPosition(group, movingItem.size, desiredPosition);
  const candidate = { ...movingItem, position: nextPos };
  const collides = group.items.some(
    (other) => other.id !== movingItem.id && itemsCollide(candidate, other),
  );
  if (collides) return null;
  return nextPos;
}


================================================
FILE: apps/client/src/entities/dynamic-dashboard/store.ts
================================================
import { create } from "zustand";
import * as api from "./api";
import { clampItemPosition, itemsCollide } from "./layoutResolve";

export type DashboardItemType =
  | "entity-card"
  | "entity-text"
  | "media"
  | "button"
  | "map"
  | "flow";

export type DashboardItemDataMap = {
  "entity-card": Record<string, never>;
  "entity-text": Record<string, never>;
  media: Record<string, never>;
  button: {
    /** Matches `listenerId` on flow `DASHBOARD_EVENT_LISTENER` node. */
    listener_id?: string;
    debounce_ms?: number;
    cooldown_ms?: number;
    /** @deprecated Ignored; use `listener_id`. */
    action?: string;
  };
  map: {
    layerId?: number;
    center?: [number, number];
    zoom?: number;
  };
  flow: {
    flowId?: number;
    autoRun?: boolean;
  };
};

export type DashboardItem<T extends DashboardItemType = DashboardItemType> = {
  id: string;
  type: T;
  label?: string;
  refId?: string;
  position: { x: number; y: number };
  size: { w: number; h: number };
  minSize: { w: number; h: number };
  data?: DashboardItemDataMap[T];
};

export type DashboardGroup = {
  id: string;
  title: string;
  cols: number;
  rows: number;
  items: DashboardItem[];
};

export type DynamicDashboard = {
  id: string;
  name: string;
  groups: DashboardGroup[];
};

type LayoutPayload = {
  position?: { x: number; y: number };
  size?: { w: number; h: number };
};

type CreateItemPayload = {
  type: DashboardItemType;
  label?: string;
  refId?: string;
  data?: DashboardItemDataMap[DashboardItemType];
  size?: { w: number; h: number };
  minSize?: { w: number; h: number };
};

export interface DynamicDashboardState {
  dashboards: DynamicDashboard[];
  activeDashboardId?: string;
  isLoading: boolean;
  hasLoaded: boolean;
  error?: string | null;
  loadDashboards: () => Promise<void>;
  createDashboard: (name?: string) => Promise<string | null>;
  cloneDashboard: (dashboardId: string) => Promise<string | null>;
  deleteDashboard: (dashboardId: string) => Promise<void>;
  setActiveDashboard: (dashboardId?: string) => void;
  updateDashboardMeta: (
    dashboardId: string,
    data: Partial<Pick<DynamicDashboard, "name">>,
  ) => void;
  addItem: (
    dashboardId: string,
    groupId: string,
    payload: CreateItemPayload,
  ) => string | null;
  updateItemLayout: (
    dashboardId: string,
    groupId: string,
    itemId: string,
    payload: LayoutPayload,
  ) => boolean;
  updateItemData: (
    dashboardId: string,
    groupId: string,
    itemId: string,
    payload: Partial<
      Pick<DashboardItem, "label" | "refId" | "data" | "minSize" | "type">
    >,
  ) => void;
  deleteItem: (dashboardId: string, groupId: string, itemId: string) => void;
}

const saveTimers = new Map<string, ReturnType<typeof setTimeout>>();

const DEFAULT_ITEM_SIZES: Record<DashboardItemType, { w: number; h: number }> =
  {
    "entity-card": { w: 4, h: 3 },
    "entity-text": { w: 3, h: 2 },
    media: { w: 6, h: 4 },
    button: { w: 2, h: 2 },
    map: { w: 8, h: 6 },
    flow: { w: 6, h: 4 },
  };

const DEFAULT_ITEM_DATA = {
  "entity-card": {},
  "entity-text": {},
  media: {},
  button: {},
  map: {},
  flow: {},
} satisfies Record<DashboardItemType, DashboardItemDataMap[DashboardItemType]>;

const createId = () =>
  typeof crypto !== "undefined" && "randomUUID" in crypto
    ? crypto.randomUUID()
    : Math.random().toString(36).slice(2);

const clampSizeToGroup = (
  group: DashboardGroup,
  size: { w: number; h: number },
  minSize: { w: number; h: number },
) => {
  return {
    w: Math.min(group.cols, Math.max(size.w, minSize.w)),
    h: Math.min(group.rows, Math.max(size.h, minSize.h)),
  };
};

const findOpenSlot = (
  group: DashboardGroup,
  size: { w: number; h: number },
): { x: number; y: number } => {
  for (let y = 0; y <= group.rows - size.h; y++) {
    for (let x = 0; x <= group.cols - size.w; x++) {
      const candidate: DashboardItem = {
        id: "preview",
        type: "entity-card",
        position: { x, y },
        size,
        minSize: size,
      };

      const collides = group.items.some((item) => itemsCollide(candidate, item));
      if (!collides) {
        return { x, y };
      }
    }
  }

  return { x: 0, y: 0 };
};

/** Merges multiple layout groups into one canvas (first group's grid size; items from other groups re-placed). */
const mergeGroupsIntoOne = (groups: DashboardGroup[]): DashboardGroup => {
  if (groups.length === 0) {
    return createDefaultGroup("Main");
  }
  if (groups.length === 1) {
    return groups[0];
  }

  const primary: DashboardGroup = {
    ...groups[0],
    items: groups[0].items.map((item) => ({ ...item })),
  };

  const seenIds = new Set(primary.items.map((i) => i.id));

  for (let gi = 1; gi < groups.length; gi++) {
    for (const item of groups[gi].items) {
      let id = item.id;
      if (seenIds.has(id)) {
        id = createId();
      }
      seenIds.add(id);

      const size = clampSizeToGroup(primary, item.size, item.minSize);
      const position = findOpenSlot(primary, size);
      const clampedPos = clampItemPosition(primary, size, position);
      const nextItem: DashboardItem = {
        ...item,
        id,
        size,
        position: clampedPos,
      };
      primary.items = [...primary.items, nextItem];
    }
  }

  return primary;
};

const createDefaultGroup = (title: string): DashboardGroup => ({
  id: createId(),
  title,
  cols: 16,
  rows: 12,
  items: [],
});

const createDefaultDashboard = (name: string): DynamicDashboard => ({
  id: createId(),
  name,
  groups: [createDefaultGroup("Main Group")],
});

export const useDynamicDashboardStore = create<DynamicDashboardState>()(
  (set, get) => {
    const scheduleSync = (dashboardId: string, includeName?: boolean) => {
      const dashboard = get().dashboards.find((d) => d.id === dashboardId);
      if (!dashboard) return;

      if (saveTimers.has(dashboardId)) {
        clearTimeout(saveTimers.get(dashboardId));
      }

      const layoutPayload = { groups: dashboard.groups };

      const timer = setTimeout(async () => {
        try {
          await api.updateDashboard(dashboardId, {
            layout: layoutPayload,
            name: includeName ? dashboard.name : undefined,
          });
        } catch (err) {
          console.error("Failed to sync dashboard layout", err);
        }
      }, 500);

      saveTimers.set(dashboardId, timer);
    };

    const isDashboardGroup = (value: unknown): value is DashboardGroup => {
      if (!value || typeof value !== "object") return false;
      const candidate = value as Partial<DashboardGroup>;
      return (
        typeof candidate.id === "string" &&
        typeof candidate.title === "string" &&
        typeof candidate.cols === "number" &&
        typeof candidate.rows === "number" &&
        Array.isArray(candidate.items)
      );
    };

    const parseLayoutGroups = (layout: unknown): DashboardGroup[] => {
      if (
        layout &&
        typeof layout === "object" &&
        Array.isArray((layout as { groups?: unknown }).groups)
      ) {
        const rawGroups = (layout as { groups: unknown }).groups as unknown[];
        return rawGroups.filter(isDashboardGroup) as DashboardGroup[];
      }
      return [];
    };

    const mapDtoToDashboard = (
      dto: api.DynamicDashboardDto,
    ): DynamicDashboard => {
      const raw = parseLayoutGroups(dto.layout);
      let groups: DashboardGroup[];
      if (raw.length === 0) {
        groups = [createDefaultGroup("Main")];
      } else if (raw.length === 1) {
        groups = raw;
      } else {
        groups = [mergeGroupsIntoOne(raw)];
      }

      return {
        id: dto.id,
        name: dto.name,
        groups,
      };
    };

    return {
      dashboards: [],
      activeDashboardId: undefined,
      isLoading: false,
      hasLoaded: false,
      error: null,
      loadDashboards: async () => {
        set({ isLoading: true, error: null });
        try {
          const res = await api.listDashboards();
          const dashboards = res.data.map(mapDtoToDashboard);
          set((state) => ({
            dashboards,
            hasLoaded: true,
            isLoading: false,
            activeDashboardId: state.activeDashboardId || dashboards[0]?.id,
          }));
        } catch (err) {
          console.error("Failed to load dashboards", err);
          set({ error: "Failed to load dashboards", isLoading: false, hasLoaded: true });
        }
      },
      createDashboard: async (name) => {
        const newDashboard = createDefaultDashboard(
          name || `Dynamic Dashboard ${get().dashboards.length + 1}`,
        );
        try {
          const res = await api.createDashboard({
            name: newDashboard.name,
            layout: { groups: newDashboard.groups },
          });
          const created = mapDtoToDashboard(res.data);
          set((state) => ({
            dashboards: [...state.dashboards, created],
            activeDashboardId: created.id,
          }));
          return created.id;
        } catch (err) {
          console.error("Failed to create dashboard", err);
          set({ error: "Failed to create dashboard" });
          return null;
        }
      },
      cloneDashboard: async (dashboardId) => {
        const target = get().dashboards.find((d) => d.id === dashboardId);
        if (!target) {
          return null;
        }

        const clonedGroups = target.groups.map((g) => ({
          ...g,
          id: createId(),
          items: g.items.map((i) => ({ ...i, id: createId() })),
        }));

        const merged =
          clonedGroups.length <= 1
            ? clonedGroups[0] ?? createDefaultGroup("Main")
            : mergeGroupsIntoOne(clonedGroups);

        const cloned: DynamicDashboard = {
          ...target,
          id: createId(),
          name: `${target.name} (copy)`,
          groups: [merged],
        };

        try {
          const res = await api.createDashboard({
            name: cloned.name,
            layout: { groups: cloned.groups },
          });
          const created = mapDtoToDashboard(res.data);
          set((state) => ({
            dashboards: [...state.dashboards, created],
            activeDashboardId: created.id,
          }));
          return created.id;
        } catch (err) {
          console.error("Failed to clone dashboard", err);
          set({ error: "Failed to clone dashboard" });
          return null;
        }
      },
      deleteDashboard: async (dashboardId) => {
        try {
          await api.deleteDashboard(dashboardId);
        } catch (err) {
          console.error("Failed to delete dashboard", err);
          set({ error: "Failed to delete dashboard" });
        }

        set((state) => {
          const filtered = state.dashboards.filter((d) => d.id !== dashboardId);
          const activeDashboardId =
            state.activeDashboardId === dashboardId
              ? filtered[0]?.id
              : state.activeDashboardId;
          return { dashboards: filtered, activeDashboardId };
        });
      },
      setActiveDashboard: (dashboardId) => {
        set({ activeDashboardId: dashboardId });
      },
      updateDashboardMeta: (dashboardId, data) => {
        set((state) => ({
          dashboards: state.dashboards.map((d) =>
            d.id === dashboardId ? { ...d, ...data } : d,
          ),
        }));
        scheduleSync(dashboardId, true);
      },
      addItem: (dashboardId, groupId, payload) => {
        let createdId: string | null = null;

        set((state) => {
          const dashboards = state.dashboards.map((d) => {
            if (d.id !== dashboardId) {
              return d;
            }

            const groups = d.groups.map((g) => {
              if (g.id !== groupId) {
                return g;
              }

              const baseSize =
                payload.size || DEFAULT_ITEM_SIZES[payload.type] || { w: 3, h: 2 };
              const minSize =
                payload.minSize || DEFAULT_ITEM_SIZES[payload.type] || baseSize;
              const size = clampSizeToGroup(g, baseSize, minSize);
              const position = findOpenSlot(g, size);
              const data = payload.data ?? { ...DEFAULT_ITEM_DATA[payload.type] };
              const newItem: DashboardItem = {
                id: createId(),
                type: payload.type,
                label: payload.label,
                refId: payload.refId,
                position,
                size,
                minSize,
                data,
              };

              createdId = newItem.id;
              return { ...g, items: [...g.items, newItem] };
            });

            return { ...d, groups };
          });

          return { ...state, dashboards };
        });
        scheduleSync(dashboardId);

        return createdId;
      },
      updateItemLayout: (dashboardId, groupId, itemId, payload) => {
        let updated = false;

        set((state) => {
          const dashboards = state.dashboards.map((d) => {
            if (d.id !== dashboardId) {
              return d;
            }

            const groups = d.groups.map((g) => {
              if (g.id !== groupId) {
                return g;
              }

              const items = g.items.map((item) => {
                if (item.id !== itemId) {
                  return item;
                }

                const nextSize = payload.size
                  ? clampSizeToGroup(g, payload.size, item.minSize)
                  : item.size;
                const nextPos = clampItemPosition(
                  g,
                  nextSize,
                  payload.position || item.position,
                );

                const candidate = { ...item, size: nextSize, position: nextPos };
                const collision = g.items.some(
                  (other) =>
                    other.id !== itemId && itemsCollide(candidate, other),
                );

                if (collision) {
                  return item;
                }

                updated = true;
                return candidate;
              });

              return { ...g, items };
            });

            return { ...d, groups };
          });

          return updated ? { ...state, dashboards } : state;
        });

        if (updated) {
          scheduleSync(dashboardId);
        }

        return updated;
      },
      updateItemData: (dashboardId, groupId, itemId, payload) => {
        set((state) => ({
          dashboards: state.dashboards.map((d) => {
            if (d.id !== dashboardId) {
              return d;
            }

            const groups = d.groups.map((g) => {
              if (g.id !== groupId) {
                return g;
              }

              const items = g.items.map((item) =>
                item.id === itemId ? { ...item, ...payload } : item,
              );

              return { ...g, items };
            });

            return { ...d, groups };
          }),
        }));
        scheduleSync(dashboardId);
      },
      deleteItem: (dashboardId, groupId, itemId) => {
        set((state) => ({
          dashboards: state.dashboards.map((d) => {
            if (d.id !== dashboardId) {
              return d;
            }

            const groups = d.groups.map((g) =>
              g.id === groupId
                ? { ...g, items: g.items.filter((item) => item.id !== itemId) }
                : g,
            );

            return { ...d, groups };
          }),
        }));
        scheduleSync(dashboardId);
      },
    };
  },
);


================================================
FILE: apps/client/src/entities/entity/api.ts
================================================
import { apiClient } from "@/shared/api";
import type { Entity, EntityAll, EntityPayload, State } from "./types";

export const getEntities = () => apiClient.get<Entity[]>("/entities");
export const getAllEntities = () => apiClient.get<EntityAll[]>("/entities/all");
export const getEntityHistory = (entityId: string) =>
  apiClient.get<State[]>(
    `/entities/${encodeURIComponent(entityId)}/history`,
  );
export const getEntitiesFilter = (entityType?: string) => {
  return apiClient.get<Entity[]>("/entities", {
    params: {
      entity_type: entityType,
    },
  });
};
export const getAllEntitiesFilter = (entityType?: string) => {
  return apiClient.get<EntityAll[]>("/entities/all", {
    params: {
      entity_type: entityType,
    },
  });
};

export const createEntity = (data: EntityPayload) =>
  apiClient.post<Entity>("/entities", data);

export const updateEntity = (id: number, data: EntityPayload) =>
  apiClient.put<Entity>(`/entities/${id}`, data);

export const deleteEntity = (id: number) => apiClient.delete(`/entities/${id}`);


================================================
FILE: apps/client/src/entities/entity/store.ts
================================================
import { create } from "zustand";
import * as api from "./api";
import type { Entity, EntityPayload } from "./types";

interface EntityState {
  entities: Entity[];
  isLoading: boolean;
  error: string | null;
  autoOpenEntityId: number | null;
  fetchEntities: () => Promise<void>;
  createEntity: (data: EntityPayload) => Promise<void>;
  updateEntity: (id: number, data: EntityPayload) => Promise<void>;
  deleteEntity: (id: number) => Promise<void>;
  setAutoOpenEntityId: (id: number | null) => void;
}

export const useEntityStore = create<EntityState>((set, get) => ({
  entities: [],
  isLoading: false,
  error: null,
  autoOpenEntityId: null,
  setAutoOpenEntityId: (id) => set({ autoOpenEntityId: id }),
  fetchEntities: async () => {
    set({ isLoading: true, error: null });
    try {
      const response = await api.getEntities();
      set({ entities: response.data, isLoading: false });
    } catch (err) {
      set({ error: "Failed to fetch entities" + err, isLoading: false });
    }
  },
  createEntity: async (data) => {
    await api.createEntity(data);
    await get().fetchEntities();
  },
  updateEntity: async (id, data) => {
    await api.updateEntity(id, data);
    await get().fetchEntities();
  },
  deleteEntity: async (id) => {
    await api.deleteEntity(id);
    await get().fetchEntities();
  },
}));


================================================
FILE: apps/client/src/entities/entity/types.ts
================================================
export interface Entity {
  id: number;
  entity_id: string;
  device_id: number | null;
  friendly_name: string | null;
  platform: string | null;
  configuration: string | null;
  entity_type: string | null;
}

interface DynamicConfig {
  [key: string]: unknown;
}

export interface State {
  state_id: number;
  metadata_id: number;
  state: string;
  attributes: string | null;
  last_changed: string;
  last_updated: string;
  created: string;
}

export interface EntityAll {
  id: number;
  entity_id: string;
  device_id: number;
  friendly_name: string;
  platform: string;
  configuration: DynamicConfig | null;
  state: State | null;
  entity_type: string | null;
}

export type EntityPayload = Omit<Entity, "id">;


================================================
FILE: apps/client/src/entities/file/api.ts
================================================
import { DirEntry } from "./types";
import { apiClient } from "@/shared/api";

export const getDirectoryListing = async (
  path: string,
): Promise<DirEntry[]> => {
  const response = await apiClient.get(`/storage/${path}`);

  const entries: { path: string; entries: { name: string; isDir: boolean }[] } =
    response.data;

  return entries.entries.map((entry) => ({
    ...entry,
    path: path ? `${path}/${entry.name}` : entry.name,
  }));
};

export const getFileContent = async (path: string): Promise<string> => {
  const response = await apiClient.get(`/storage/${path}`);
  return response.data;
};

export const updateFileContent = async (
  path: string,
  content: string,
): Promise<void> => {
  await apiClient.put(`/storage/${path}`, { content });
};

export const createNewFolder = async (path: string): Promise<void> => {
  await apiClient.post(`/storage/mkdir/${path}`);
};

export const createNewFile = async (path: string): Promise<void> => {
  await apiClient.put(`/storage/${path}`, { content: "" });
};
export const renameEntry = async (
  oldPath: string,
  newPath: string,
): Promise<void> => {
  await apiClient.post(`/storage/rename/${oldPath}`, { to: newPath });
};

export const deleteEntry = async (path: string): Promise<void> => {
  await apiClient.delete(`/storage/${path}`);
};


================================================
FILE: apps/client/src/entities/file/store.ts
================================================
import { create } from "zustand";
import { IdeState } from "./types";
import { getFileContent, updateFileContent } from "./api";
import { toast } from "sonner";

export interface FileTreeState {
  treeVersion: number;
  refreshFileTree: () => void;
}

export const useFileTreeStore = create<FileTreeState>((set) => ({
  treeVersion: 0,
  refreshFileTree: () =>
    set((state) => ({ treeVersion: state.treeVersion + 1 })),
}));

export const useIdeStore = create<IdeState>((set, get) => ({
  activeFilePath: null,
  activeFileContent: "",
  isDirty: false,
  isLoading: false,
  error: null,

  openFile: async (path) => {
    if (get().isDirty) {
      if (
        !window.confirm(
          "You have unsaved changes. Are you sure you want to open a new file?",
        )
      ) {
        return;
      }
    }
    set({ isLoading: true, error: null });
    try {
      const content = await getFileContent(path);
      set({
        activeFilePath: path,
        activeFileContent: content,
        isDirty: false,
        isLoading: false,
      });
    } catch (err) {
      const errorMsg = "Failed to load file content." + err;
      set({ error: errorMsg, isLoading: false });
      toast.error(errorMsg);
    }
  },

  updateActiveFileContent: (content) => {
    set({ activeFileContent: content, isDirty: true });
  },

  saveActiveFile: async () => {
    const { activeFilePath, activeFileContent } = get();
    if (!activeFilePath) return;

    set({ isLoading: true });
    try {
      await updateFileContent(activeFilePath, activeFileContent);
      set({ isDirty: false, isLoading: false });
      toast.success("File saved successfully!");
    } catch (err) {
      const errorMsg = "Failed to save file." + err;
      set({ error: errorMsg, isLoading: false });
      toast.error(errorMsg);
    }
  },

  closeFile: () => {
    if (get().isDirty) {
      if (
        !window.confirm(
          "You have unsaved changes. Are you sure you want to close?",
        )
      ) {
        return;
      }
    }
    set({ activeFilePath: null, activeFileContent: "", isDirty: false });
  },
}));


================================================
FILE: apps/client/src/entities/file/types.ts
================================================
export interface DirEntry {
  name: string;
  isDir: boolean;
  path: string;
}

export interface IdeState {
  activeFilePath: string | null;
  activeFileContent: string;
  isDirty: boolean;
  isLoading: boolean;
  error: string | null;
  openFile: (path: string) => Promise<void>;
  updateActiveFileContent: (content: string) => void;
  saveActiveFile: () => Promise<void>;
  closeFile: () => void;
}


================================================
FILE: apps/client/src/entities/flow/api.ts
================================================
import { apiClient } from "@/shared/api";
import { Flow, FlowPayload, FlowVersion, FlowVersionPayload } from "./types";

export const getFlows = async (): Promise<Flow[]> => {
  const { data } = await apiClient.get<Flow[]>("/flows");
  return data;
};

export const createFlow = async (payload: FlowPayload): Promise<Flow> => {
  const { data } = await apiClient.post<Flow>("/flows", payload);
  return data;
};

export const deleteFlow = async (id: number): Promise<Flow> => {
  const { data } = await apiClient.delete<Flow>(`/flows/${id}`);
  return data;
};

export const saveFlowVersion = async (
  flowId: number,
  payload: FlowVersionPayload,
): Promise<FlowVersion> => {
  const { data } = await apiClient.post<FlowVersion>(
    `/flows/${flowId}/versions`,
    payload,
  );
  return data;
};

export const getFlowVersions = async (
  flowId: number,
): Promise<FlowVersion[]> => {
  const { data } = await apiClient.get<FlowVersion[]>(
    `/flows/${flowId}/versions`,
  );
  return data;
};


================================================
FILE: apps/client/src/entities/flow/store.ts
================================================
import { create } from "zustand";
import { DataNodeType, Edge, Node } from "@/features/flow/flowTypes";
import {
  getFlows,
  getFlowVersions,
  saveFlowVersion,
  createFlow,
} from "@/entities/flow/api";
import { Flow } from "@/entities/flow/types";

interface FlowState {
  flows: Flow[];
  currentFlowId: number | null;
  isLoading: boolean;
  error: string | null;
  nodes: Node[];
  edges: Edge[];
  refresh: number;
  hasUnsavedChanges: boolean;
  fetchFlows: () => Promise<void>;
  setCurrentFlowId: (flowId: number | null) => void;
  setNodes: (nodes: Node[]) => void;
  setEdges: (edges: Edge[]) => void;
  updateNode: (nodeId: string, data: DataNodeType) => void;
  addRefresh: () => void;
  markDirty: () => void;
  markSaved: () => void;
  createNewFlow: (name: string) => Promise<void>;
  saveGraph: (comment?: string) => Promise<void>;
  loadGraph: () => Promise<void>;
  resetFlowState: () => void;
}

export const useFlowStore = create<FlowState>((set, get) => ({
  flows: [],
  currentFlowId: null,
  nodes: [],
  edges: [],
  isLoading: false,
  error: null,
  refresh: 1,
  hasUnsavedChanges: false,

  fetchFlows: async () => {
    set({ isLoading: true, error: null });
    try {
      const flows = await getFlows();
      set({ flows, isLoading: false });
    } catch (err) {
      const error =
        err instanceof Error ? err.message : "Failed to fetch flows";
      set({ isLoading: false, error });
    }
  },

  setCurrentFlowId: (flowId: number | null) => {
    set({
      currentFlowId: flowId,
      nodes: [],
      edges: [],
      hasUnsavedChanges: false,
    });
    if (flowId) {
      get().loadGraph();
    }
  },

  setNodes: (nodes) => set({ nodes, hasUnsavedChanges: true }),
  setEdges: (edges) => set({ edges, hasUnsavedChanges: true }),

  updateNode: (nodeId: string, data: DataNodeType) => {
    set((state) => ({
      nodes: state.nodes.map((node) =>
        node.id === nodeId
          ? { ...node, data: { ...node.data, ...data } }
          : node,
      ),
      hasUnsavedChanges: true,
    }));
  },

  addRefresh: () => {
    set((state) => ({ refresh: state.refresh + 1 }));
  },

  markDirty: () => set({ hasUnsavedChanges: true }),
  markSaved: () => set({ hasUnsavedChanges: false }),

  createNewFlow: async (name: string) => {
    set({ isLoading: true, error: null });
    try {
      const newFlow = await createFlow({ name, enabled: 1 });
      set((state) => ({
        flows: [...state.flows, newFlow],
        currentFlowId: newFlow.id,
        nodes: [],
        edges: [],
        isLoading: false,
        hasUnsavedChanges: false,
      }));
    } catch (err) {
      const error =
        err instanceof Error ? err.message : "Failed to create flow";
      set({ isLoading: false, error });
    }
  },

  saveGraph: async (comment?: string) => {
    const { nodes, edges, currentFlowId } = get();
    if (!currentFlowId) {
      set({ error: "No flow selected" });
      return;
    }
    set({ isLoading: true, error: null });
    try {
      const graphData = { nodes, edges };
      const graph_json = JSON.stringify(graphData, null, 2);
      await saveFlowVersion(currentFlowId, { graph_json, comment });
      set({ isLoading: false, hasUnsavedChanges: false });
    } catch (err) {
      const error = err instanceof Error ? err.message : "Failed to save graph";
      set({ isLoading: false, error });
      console.error(error);
    }
  },

  loadGraph: async () => {
    const { currentFlowId } = get();
    if (!currentFlowId) return;
    set({ isLoading: true, error: null });
    try {
      const versions = await getFlowVersions(currentFlowId);
      if (versions.length > 0) {
        const latestVersion = versions.sort((a, b) => b.version - a.version)[0];
        const graphData = JSON.parse(latestVersion.graph_json);
        if (graphData.nodes && graphData.edges) {
          set({
            nodes: graphData.nodes,
            edges: graphData.edges,
            isLoading: false,
            hasUnsavedChanges: false,
          });
        }
      } else {
        set({
          isLoading: false,
          nodes: [],
          edges: [],
          hasUnsavedChanges: false,
        });
      }
    } catch (err) {
      const error = err instanceof Error ? err.message : "Failed to load graph";
      set({ isLoading: false, error });
      console.error(error);
    }
  },
  resetFlowState: () =>
    set({
      nodes: [],
      edges: [],
      currentFlowId: null,
      hasUnsavedChanges: false,
    }),
}));


================================================
FILE: apps/client/src/entities/flow/types.ts
================================================
export interface Flow {
  id: number;
  name: string;
  description: string | null;
  enabled: number;
  created_at: string;
  updated_at: string;
}

export interface FlowPayload {
  name: string;
  description?: string;
  enabled?: number;
}

export interface FlowVersion {
  id: number;
  flow_id: number;
  version: number;
  graph_json: string;
  comment: string | null;
  created_at: string;
}

export interface FlowVersionPayload {
  graph_json: string;
  comment?: string;
}


================================================
FILE: apps/client/src/entities/ha/api.ts
================================================
import { apiClient } from "@/shared/api";

import { HaState } from "./types";

export const fetchAllHaStates = async (): Promise<HaState[]> => {
  try {
    const response = await apiClient.get<HaState[]>("/ha/states");
    return response.data;
  } catch (error) {
    console.error("Failed to fetch Home Assistant states:", error);
    throw new Error("Failed to fetch HA states.");
  }
};


================================================
FILE: apps/client/src/entities/ha/store.ts
================================================
import { create } from "zustand";
import { HaStateStore } from "./types";
import { fetchAllHaStates } from "./api";

export const useHaStore = create<HaStateStore>((set) => ({
  states: [],
  status: "idle",
  error: null,

  fetchStates: async () => {
    set({ status: "loading", error: null });
    try {
      const data = await fetchAllHaStates();
      set({ states: data, status: "succeeded" });
    } catch (error) {
      set({
        status: "failed",
        error: "Failed to load states from server." + error,
      });
    }
  },
}));


================================================
FILE: apps/client/src/entities/ha/types.ts
================================================
type JsonPrimitive = string | number | boolean | null;
export type JsonObject = { [key: string]: JsonValue };
type JsonArray = JsonValue[];
export type JsonValue = JsonPrimitive | JsonObject | JsonArray;

export interface HaState {
  entity_id: string;
  state: string;
  attributes: JsonObject;
  last_changed: string;
  last_updated: string;
  context: JsonObject;
}

export interface HaStateStore {
  states: HaState[];
  status: "idle" | "loading" | "succeeded" | "failed";
  error: string | null;
  fetchStates: () => Promise<void>;
}


================================================
FILE: apps/client/src/entities/integrations/api.ts
================================================
import { apiClient } from "@/shared/api";
import type { IntegrationStatus, IntegrationRegisterPayload } from "./types";

export const getIntegrationStatus = () =>
  apiClient.get<IntegrationStatus>("/integrations/status");

export const registerIntegration = (data: IntegrationRegisterPayload) =>
  apiClient.post("/integrations/register", data);

export const deleteIntegration = (integrationId: string) =>
  apiClient.delete(`/integrations/${integrationId}`);


================================================
FILE: apps/client/src/entities/integrations/store.ts
================================================
import { create } from "zustand";
import * as api from "./api";

interface IntegrationState {
  isHaConnected: boolean;
  isRos2Connected: boolean;
  isSdrConnected: boolean;
  isLoading: boolean;
  error: string | null;
  fetchStatus: () => Promise<void>;
  registerIntegration: (
    id: string,
    config: Record<string, string>,
  ) => Promise<void>;
  deleteIntegration: (id: string) => Promise<void>;
}

export const useIntegrationStore = create<IntegrationState>((set, get) => ({
  isHaConnected: false,
  isRos2Connected: false,
  isSdrConnected: false,
  isLoading: false,
  error: null,
  fetchStatus: async () => {
    set({ isLoading: true, error: null });
    try {
      const response = await api.getIntegrationStatus();
      set({
        isHaConnected: response.data.home_assistant.connected,
        isRos2Connected: response.data.ros2.connected,
        isSdrConnected: response.data.sdr.connected,
        isLoading: false,
      });
    } catch (err) {
      const errorMsg = err instanceof Error ? err.message : String(err);
      set({
        error: "Failed to fetch integration status: " + errorMsg,
        isLoading: false,
      });
    }
  },
  registerIntegration: async (id, config) => {
    await api.registerIntegration({ integration_id: id, config });
    await get().fetchStatus();
  },
  deleteIntegration: async (id) => {
    await api.deleteIntegration(id);
    await get().fetchStatus();
  },
}));


================================================
FILE: apps/client/src/entities/integrations/types.ts
================================================
export interface IntegrationStatus {
  home_assistant: { connected: boolean };
  ros2: { connected: boolean };
  sdr: { connected: boolean };
}

export interface IntegrationRegisterPayload {
  integration_id: string;
  config: Record<string, string>;
}


================================================
FILE: apps/client/src/entities/log/api.ts
================================================
import { apiClient } from "@/shared/api";
import { LogContentResponse, LogFileListResponse } from "./types";

export const getLatestLog = async (): Promise<LogContentResponse> => {
  const { data } = await apiClient.get<LogContentResponse>("/logs/latest");
  return data;
};

export const getLogFileList = async (): Promise<LogFileListResponse> => {
  const { data } = await apiClient.get<LogFileListResponse>("/logs");
  return data;
};

export const getLogByFilename = async (
  filename: string,
): Promise<LogContentResponse> => {
  const { data } = await apiClient.get<LogContentResponse>(`/logs/${filename}`);
  return data;
};


================================================
FILE: apps/client/src/entities/log/types.ts
================================================
export type LogContentResponse = {
  filename: string;
  logs: string;
};

export type LogFileListResponse = {
  files: string[];
};


================================================
FILE: apps/client/src/entities/map/api.ts
================================================
import { apiClient } from "@/shared/api";
import {
  MapLayer,
  LayerWithFeatures,
  LayerPayload,
  FeaturePayload,
  MapFeature,
  FeatureWithVertices,
  UpdateFeaturePayload,
} from "./types";

export const getAllLayers = async (): Promise<MapLayer[]> => {
  const response = await apiClient.get<MapLayer[]>("/map/layers");
  return response.data;
};

export const getLayerWithFeatures = async (
  layerId: number,
): Promise<LayerWithFeatures> => {
  const response = await apiClient.get<LayerWithFeatures>(
    `/map/layers/${layerId}`,
  );
  return response.data;
};

export const createLayer = async (payload: LayerPayload): Promise<MapLayer> => {
  const response = await apiClient.post<MapLayer>("/map/layers", payload);
  return response.data;
};

export const updateLayer = async (
  layerId: number,
  payload: LayerPayload,
): Promise<MapLayer> => {
  const response = await apiClient.put<MapLayer>(
    `/map/layers/${layerId}`,
    payload,
  );
  return response.data;
};

export const deleteLayer = async (
  layerId: number,
): Promise<{ message: string }> => {
  const response = await apiClient.delete(`/map/layers/${layerId}`);
  return response.data;
};

export const createFeature = async (
  payload: FeaturePayload,
): Promise<MapFeature> => {
  const response = await apiClient.post<MapFeature>("/map/features", payload);
  return response.data;
};

export const getFeatureWithVertices = async (
  featureId: number,
): Promise<FeatureWithVertices> => {
  const response = await apiClient.get<FeatureWithVertices>(
    `/map/features/${featureId}`,
  );
  return response.data;
};

export const updateFeature = async (
  featureId: number,
  payload: UpdateFeaturePayload,
): Promise<MapFeature> => {
  const response = await apiClient.put<MapFeature>(
    `/map/features/${featureId}`,
    payload,
  );
  return response.data;
};

export const deleteFeature = async (
  featureId: number,
): Promise<{ message: string }> => {
  const response = await apiClient.delete(`/map/features/${featureId}`);
  return response.data;
};


================================================
FILE: apps/client/src/entities/map/store.ts
================================================
import { create } from "zustand";
import * as mapApi from "./api";
import {
  MapDataState,
  MapInteractionState,
  FeaturePayload,
  TileMapType,
} from "./types";

export const useMapDataStore = create<MapDataState>((set, get) => ({
  layer: null,
  isLoading: false,
  error: null,
  layers: [],
  activeLayerId: null,
  fetchAllLayers: async () => {
    try {
      const layers = await mapApi.getAllLayers();
      set({ layers });
      if (layers.length > 0 && !get().activeLayerId) {
        get().setActiveLayer(layers[0].id);
      }
    } catch (err) {
      set({ error: "Failed to fetch layers" + err });
    }
  },
  setActiveLayer: async (layerId) => {
    set({ isLoading: true, activeLayerId: layerId });
    try {
      const layerData = await mapApi.getLayerWithFeatures(layerId);
      set({ layer: layerData, isLoading: false });
    } catch (err) {
      set({
        error: "Failed to fetch active layer data" + err,
        isLoading: false,
      });
    }
  },
  addLayer: async (payload) => {
    try {
      await mapApi.createLayer(payload);
      await get().fetchAllLayers(); // refresh list
    } catch (err) {
      set({ error: "Failed to create layer" + err });
    }
  },
  removeLayer: async (layerId) => {
    try {
      await mapApi.deleteLayer(layerId);
      set((state) => ({
        layers: state.layers.filter((l) => l.id !== layerId),
      }));
      if (get().activeLayerId === layerId) {
        set({ layer: null, activeLayerId: null });
        const remainingLayers = get().layers;
        if (remainingLayers.length > 0) {
          get().setActiveLayer(remainingLayers[0].id);
        }
      }
    } catch (err) {
      set({ error: "Failed to delete layer" + err });
    }
  },
  editLayer: async (layerId, payload) => {
    try {
      await mapApi.updateLayer(layerId, payload);
      await get().fetchAllLayers();
    } catch (err) {
      set({ error: "Failed to update layer" + err });
    }
  },
  fetchLayerData: async (layerId) => {
    set({ isLoading: true, error: null });
    try {
      const layerData = await mapApi.getLayerWithFeatures(layerId);
      set({ layer: layerData, isLoading: false });
    } catch (err) {
      set({ error: "Failed to fetch map data" + err, isLoading: false });
    }
  },
  addFeature: async (payload: FeaturePayload) => {
    try {
      const newFeature = await mapApi.createFeature(payload);
      const featureWithVertices = await mapApi.getFeatureWithVertices(
        newFeature.id,
      );
      const currentLayer = get().layer;
      if (currentLayer) {
        set({
          layer: {
            ...currentLayer,
            features: [...currentLayer.features, featureWithVertices],
          },
        });
      }
    } catch (err) {
      set({ error: "Failed to add feature" + err });
    }
  },
  removeFeature: async (featureId) => {
    try {
      await mapApi.deleteFeature(featureId);
      const currentLayer = get().layer;
      if (currentLayer) {
        set({
          layer: {
            ...currentLayer,
            features: currentLayer.features.filter((f) => f.id !== featureId),
          },
        });
        useMapInteractionStore.getState().setSelectedFeature(null);
      }
    } catch (err) {
      set({ error: "Failed to remove feature" + err });
    }
  },
  updateFeature: async (featureId, payload) => {
    try {
      const updatedFeatureData = await mapApi.updateFeature(featureId, payload);
      const featureWithVertices = await mapApi.getFeatureWithVertices(
        updatedFeatureData.id,
      );
      const currentLayer = get().layer;
      if (currentLayer) {
        set({
          layer: {
            ...currentLayer,
            features: currentLayer.features.map((f) =>
              f.id === featureId ? featureWithVertices : f,
            ),
          },
        });
        useMapInteractionStore
          .getState()
          .setSelectedFeature(featureWithVertices);
      }
    } catch (err) {
      set({ error: "Failed to update feature" + err });
    }
  },
}));

const getStoredTileMapType = (): TileMapType => {
  const stored = localStorage.getItem("mapTileType");
  return stored === "satellite" || stored === "dark" ? stored : "dark";
};

export const useMapInteractionStore = create<MapInteractionState>(
  (set, get) => ({
    selectedFeature: null,
    setSelectedFeature: (feature) => set({ selectedFeature: feature }), // deselect entity when selecting a feature

    drawingMode: null,
    currentVertices: [],
    setDrawingMode: (mode) => {
      get().clearDrawing();
      set({ drawingMode: mode });
    },
    addVertex: (vertex) => {
      set((state) => ({
        currentVertices: [...state.currentVertices, vertex],
      }));
    },
    clearDrawing: () => {
      set({ currentVertices: [], drawingMode: null });
    },

    tileMapType: getStoredTileMapType(),
    setTileMapType: (type) => {
      localStorage.setItem("mapTileType", type);
      set({ tileMapType: type });
    },
  }),
);


================================================
FILE: apps/client/src/entities/map/types.ts
================================================
import { LatLng } from "leaflet";

export interface MapVertex {
  id: number;
  feature_id: number;
  latitude: number;
  longitude: number;
  altitude?: number;
  sequence: number;
}

export interface MapFeature {
  id: number;
  layer_id: number;
  feature_type: "POINT" | "LINE" | "POLYGON";
  name?: string;
  style_properties?: string;
  created_by_user_id: number;
  created_at: string;
  updated_at: string;
}

export interface FeatureWithVertices extends MapFeature {
  vertices: MapVertex[];
}

export interface MapLayer {
  id: number;
  name: string;
  description?: string;
  owner_user_id: number;
  is_visible: number;
  created_at: string;
  updated_at: string;
}

export interface LayerWithFeatures extends MapLayer {
  features: FeatureWithVertices[];
}

export interface LayerPayload {
  name: string;
  description?: string;
  is_visible?: boolean;
}

export interface VertexPayload {
  latitude: number;
  longitude: number;
  altitude?: number;
}

export interface FeaturePayload {
  layer_id: number;
  feature_type: "POINT" | "LINE" | "POLYGON";
  name?: string;
  style_properties?: string;
  vertices: VertexPayload[];
}

export interface UpdateFeaturePayload {
  name?: string;
  style_properties?: string;
  vertices?: VertexPayload[];
}

export type DrawingMode = "POINT" | "LINE" | "POLYGON" | null;

// 타일맵 타입 정의
export type TileMapType = "dark" | "satellite";

export interface TileMapConfig {
  type: TileMapType;
  url: string;
  attribution: string;
  maxNativeZoom: number;
}

export const TILE_MAPS: Record<TileMapType, TileMapConfig> = {
  dark: {
    type: "dark",
    url: "https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png",
    attribution:
      '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
    maxNativeZoom: 20,
  },
  satellite: {
    type: "satellite",
    url: "https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}",
    attribution: "&copy; Esri",
    maxNativeZoom: 18,
  },
};

export interface MapInteractionState {
  selectedFeature: FeatureWithVertices | null;
  setSelectedFeature: (feature: FeatureWithVertices | null) => void;
  drawingMode: DrawingMode;
  currentVertices: LatLng[];
  setDrawingMode: (mode: DrawingMode) => void;
  addVertex: (vertex: LatLng) => void;
  clearDrawing: () => void;
  tileMapType: TileMapType;
  setTileMapType: (type: TileMapType) => void;
}

export interface MapDataState {
  layer: LayerWithFeatures | null;
  isLoading: boolean;
  error: string | null;
  layers: MapLayer[];
  activeLayerId: number | null;
  fetchAllLayers: () => Promise<void>;
  setActiveLayer: (layerId: number) => Promise<void>;
  addLayer: (payload: LayerPayload) => Promise<void>;
  removeLayer: (layerId: number) => Promise<void>;
  editLayer: (layerId: number, payload: LayerPayload) => Promise<void>;
  fetchLayerData: (layerId: number) => Promise<void>;
  addFeature: (payload: FeaturePayload) => Promise<void>;
  removeFeature: (featureId: number) => Promise<void>;
  updateFeature: (
    featureId: number,
    payload: UpdateFeaturePayload,
  ) => Promise<void>;
}


================================================
FILE: apps/client/src/entities/permission/api.ts
================================================
import { apiClient } from "@/shared/api";
import { Permission } from "./types";

export const getPermissions = () => apiClient.get<Permission[]>("/permissions");


================================================
FILE: apps/client/src/entities/permission/store.ts
================================================
import { create } from "zustand";
import { getPermissions } from "./api";
import { Permission } from "./types";

type PermissionState = {
  permissions: Permission[];
  isLoading: boolean;
  error: string | null;
  hasFetched: boolean;
  fetchPermissions: () => Promise<void>;
};

export const usePermissionStore = create<PermissionState>((set, get) => ({
  permissions: [],
  isLoading: false,
  error: null,
  hasFetched: false,
  fetchPermissions: async () => {
    if (get().hasFetched || get().isLoading) return;

    set({ isLoading: true, error: null });
    try {
      const response = await getPermissions();
      set({
        permissions: response.data,
        isLoading: false,
        hasFetched: true,
      });
    } catch (error) {
      set({ error: "Failed to fetch permissions.", isLoading: false });
      console.error(error);
    }
  },
}));


================================================
FILE: apps/client/src/entities/permission/types.ts
================================================
export type Permission = {
  id: number;
  name: string;
  description: string | null;
};


================================================
FILE: apps/client/src/entities/recording/api.ts
================================================
import { apiClient } from "@/shared/api";
import {
  Recording,
  StartRecordingRequest,
  StartRecordingResponse,
  ActiveRecordingInfo,
  TopicRecordingStatus,
} from "./types";

export const getRecordings = async (): Promise<Recording[]> => {
  const { data } = await apiClient.get<Recording[]>("/recordings");
  return data;
};

export const getRecordingsByTopic = async (
  topic: string
): Promise<Recording[]> => {
  const { data } = await apiClient.get<Recording[]>("/recordings", {
    params: { topic },
  });
  return data;
};

export const getRecordingsByStatus = async (
  status: string
): Promise<Recording[]> => {
  const { data } = await apiClient.get<Recording[]>("/recordings", {
    params: { status },
  });
  return data;
};

export const getRecording = async (id: number): Promise<Recording> => {
  const { data } = await apiClient.get<Recording>(`/recordings/${id}`);
  return data;
};

export const startRecording = async (
  payload: StartRecordingRequest
): Promise<StartRecordingResponse> => {
  const { data } = await apiClient.post<StartRecordingResponse>(
    "/recordings",
    payload
  );
  return data;
};

export const stopRecording = async (id: number): Promise<void> => {
  await apiClient.post(`/recordings/${id}/stop`);
};

export const deleteRecording = async (id: number): Promise<void> => {
  await apiClient.delete(`/recordings/${id}`);
};

export const getActiveRecordings = async (): Promise<ActiveRecordingInfo[]> => {
  const { data } = await apiClient.get<ActiveRecordingInfo[]>(
    "/recordings/active"
  );
  return data;
};

export const isTopicRecording = async (
  topic: string
): Promise<TopicRecordingStatus> => {
  const encodedTopic = encodeURIComponent(topic);
  const { data } = await apiClient.get<TopicRecordingStatus>(
    `/recordings/active/${encodedTopic}`
  );
  return data;
};

export const getRecordingStreamUrl = (
  id: number,
  serverUrl: string,
  token: string
): string => {
  try {
    const baseUrl = new URL(serverUrl);
    if (baseUrl.protocol !== "http:" && baseUrl.protocol !== "https:") {
      return "";
    }

    const streamUrl = new URL(`/api/recordings/${id}/stream`, baseUrl.origin);
    streamUrl.searchParams.set("token", token);
    return streamUrl.toString();
  } catch {
    return "";
  }
};


================================================
FILE: apps/client/src/entities/recording/index.ts
================================================
export * from "./types";
export * from "./api";
export { useRecordingStore } from "./store";


================================================
FILE: apps/client/src/entities/recording/store.ts
================================================
import { create } from "zustand";
import * as api from "./api";
import type { Recording, ActiveRecordingInfo } from "./types";

interface RecordingState {
  recordings: Recording[];
  activeRecordings: ActiveRecordingInfo[];
  isLoading: boolean;
  error: string | null;
  fetchRecordings: () => Promise<void>;
  fetchActiveRecordings: () => Promise<void>;
  startRecording: (topic: string) => Promise<number>;
  stopRecording: (id: number) => Promise<void>;
  deleteRecording: (id: number) => Promise<void>;
  isRecording: (topic: string) => boolean;
  getActiveRecordingId: (topic: string) => number | null;
}

export const useRecordingStore = create<RecordingState>((set, get) => ({
  recordings: [],
  activeRecordings: [],
  isLoading: false,
  error: null,

  fetchRecordings: async () => {
    set({ isLoading: true, error: null });
    try {
      const recordings = await api.getRecordings();
      set({ recordings, isLoading: false });
    } catch (err) {
      set({ error: "Failed to fetch recordings", isLoading: false });
      console.error(err);
    }
  },

  fetchActiveRecordings: async () => {
    try {
      const activeRecordings = await api.getActiveRecordings();
      set({ activeRecordings });
    } catch (err) {
      console.error("Failed to fetch active recordings", err);
    }
  },

  startRecording: async (topic: string) => {
    try {
      const response = await api.startRecording({ topic });
      await get().fetchActiveRecordings();
      await get().fetchRecordings();
      return response.id;
    } catch (err) {
      console.error("Failed to start recording", err);
      throw err;
    }
  },

  stopRecording: async (id: number) => {
    try {
      await api.stopRecording(id);
      await get().fetchActiveRecordings();
      // Wait a bit for the recording to be finalized
      setTimeout(() => get().fetchRecordings(), 1000);
    } catch (err) {
      console.error("Failed to stop recording", err);
      throw err;
    }
  },

  deleteRecording: async (id: number) => {
    try {
      await api.deleteRecording(id);
      await get().fetchRecordings();
    } catch (err) {
      console.error("Failed to delete recording", err);
      throw err;
    }
  },

  isRecording: (topic: string) => {
    return get().activeRecordings.some((r) => r.topic === topic);
  },

  getActiveRecordingId: (topic: string) => {
    const active = get().activeRecordings.find((r) => r.topic === topic);
    return active?.recording_id ?? null;
  },
}));


================================================
FILE: apps/client/src/entities/recording/types.ts
================================================
export interface Recording {
  id: number;
  stream_ssrc: number;
  topic: string;
  device_id: string;
  media_type: "audio" | "video";
  filename: string;
  file_path: string;
  file_size: number;
  duration_ms: number;
  status: RecordingStatus;
  started_at: string;
  ended_at: string | null;
  created_by_user_id: number | null;
}

export type RecordingStatus = "recording" | "completed" | "failed";

export interface StartRecordingRequest {
  topic: string;
}

export interface StartRecordingResponse {
  id: number;
  topic: string;
  status: string;
}

export interface ActiveRecordingInfo {
  topic: string;
  recording_id: number;
}

export interface TopicRecordingStatus {
  is_recording: boolean;
  recording_id: number | null;
}


================================================
FILE: apps/client/src/entities/role/api.ts
================================================
import { apiClient } from "@/shared/api";
import { Role, CreateRolePayload, UpdateRolePayload } from "./types";

export const getRoles = () => apiClient.get<Role[]>("/roles");
export const createRole = (data: CreateRolePayload) =>
  apiClient.post<Role>("/roles", data);
export const updateRole = (id: number, data: UpdateRolePayload) =>
  apiClient.put<Role>(`/roles/${id}`, data);
export const deleteRole = (id: number) => apiClient.delete(`/roles/${id}`);


================================================
FILE: apps/client/src/entities/role/store.ts
================================================
import { create } from "zustand";
import { getRoles, createRole, updateRole, deleteRole } from "./api";
import { Role, CreateRolePayload, UpdateRolePayload } from "./types";

type RoleState = {
  roles: Role[];
  isLoading: boolean;
  error: string | null;
  fetchRoles: () => Promise<void>;
  addRole: (data: CreateRolePayload) => Promise<void>;
  editRole: (id: number, data: UpdateRolePayload) => Promise<void>;
  removeRole: (id: number) => Promise<void>;
};

export const useRoleStore = create<RoleState>((set) => ({
  roles: [],
  isLoading: false,
  error: null,
  fetchRoles: async () => {
    set({ isLoading: true, error: null });
    try {
      const response = await getRoles();
      set({ roles: response.data, isLoading: false });
    } catch (error) {
      set({ error: "Failed to fetch roles.", isLoading: false });
      console.error(error);
    }
  },
  addRole: async (data) => {
    try {
      await createRole(data);
      await useRoleStore.getState().fetchRoles();
    } catch (error) {
      const errorMessage = "Failed to add role.";
      set({ error: errorMessage });
      console.error(error);
      throw new Error(errorMessage);
    }
  },
  editRole: async (id, data) => {
    try {
      await updateRole(id, data);
      await useRoleStore.getState().fetchRoles();
    } catch (error) {
      const errorMessage = "Failed to update role.";
      set({ error: errorMessage });
      console.error(error);
      throw new Error(errorMessage);
    }
  },
  removeRole: async (id) => {
    try {
      await deleteRole(id);
      set((state) => ({
        roles: state.roles.filter((role) => role.id !== id),
      }));
    } catch (error) {
      const errorMessage = "Failed to delete role.";
      set({ error: errorMessage });
      console.error(error);
      throw new Error(errorMessage);
    }
  },
}));


================================================
FILE: apps/client/src/entities/role/types.ts
================================================
import { Permission } from "@/entities/permission/types";

export type Role = {
  id: number;
  name: string;
  description: string | null;
  permissions?: Permission[];
};

export type CreateRolePayload = {
  name: string;
  description?: string;
  permission_ids: number[];
};

export type UpdateRolePayload = Partial<CreateRolePayload>;


================================================
FILE: apps/client/src/entities/stat/api.ts
================================================
import { apiClient } from "@/shared/api";
import { Stat } from "./types";

export const getStats = async (): Promise<Stat> => {
  const { data } = await apiClient.get<Stat>("/stat");
  return data;
};


================================================
FILE: apps/client/src/entities/stat/store.ts
================================================
import { create } from "zustand";
import * as api from "./api";
import type { Stat } from "./types";

interface StatState {
  stat: Stat;
  isLoading: boolean;
  error: string | null;
  fetchStat: () => Promise<void>;
}

export const useStatStore = create<StatState>((set) => ({
  stat: {
    count: {
      devices: 0,
      entities: 0,
    },
  },
  isLoading: false,
  error: null,
  fetchStat: async () => {
    set({ isLoading: true, error: null });
    try {
      const response = await api.getStats();
      set({ stat: response, isLoading: false });
    } catch (err) {
      set({ error: "Failed to fetch entities" + err, isLoading: false });
    }
  },
}));


================================================
FILE: apps/client/src/entities/stat/types.ts
================================================
export interface Stat {
  count: {
    devices: number;
    entities: number;
  };
}


================================================
FILE: apps/client/src/entities/tunnel/api.ts
================================================
import { apiClient } from "@/shared/api";
import type {
  StartTunnelRequest,
  StartTunnelResponse,
  TunnelStatus,
} from "./types";

export const getStatus = () => apiClient.get<TunnelStatus>("/tunnel/status");

export const startTunnel = (payload: StartTunnelRequest) =>
  apiClient.post<StartTunnelResponse>("/tunnel/start", payload);

export const stopTunnel = () => apiClient.post("/tunnel/stop");


================================================
FILE: apps/client/src/entities/tunnel/store.ts
================================================
import { create } from "zustand";
import * as api from "./api";
import type { TunnelStatus } from "./types";

type TunnelState = {
  status: TunnelStatus;
  isLoading: boolean;
  error: string | null;
  refresh: () => Promise<void>;
  start: (server: string, target: string, accessToken?: string) => Promise<void>;
  stop: () => Promise<void>;
};

const emptyStatus: TunnelStatus = {
  active: false,
  session_id: null,
  server: null,
  target: null,
};

export const useTunnelStore = create<TunnelState>((set, get) => ({
  status: emptyStatus,
  isLoading: false,
  error: null,
  refresh: async () => {
    set({ isLoading: true, error: null });
    try {
      const res = await api.getStatus();
      set({ status: res.data, isLoading: false });
    } catch (err) {
      const message = err instanceof Error ? err.message : String(err);
      set({ error: message, isLoading: false, status: emptyStatus });
    }
  },
  start: async (server, target, accessToken) => {
    set({ isLoading: true, error: null });
    try {
      const res = await api.startTunnel({ server, target, access_token: accessToken });
      set({
        status: {
          active: true,
          session_id: res.data.session_id,
          server,
          target,
        },
        isLoading: false,
      });
    } catch (err) {
      const message = err instanceof Error ? err.message : String(err);
      set({ error: message, isLoading: false });
      throw err;
    }
  },
  stop: async () => {
    set({ isLoading: true, error: null });
    try {
      await api.stopTunnel();
      set({ status: emptyStatus, isLoading: false });
    } catch (err) {
      const message = err instanceof Error ? err.message : String(err);
      set({ error: message, isLoading: false });
      throw err;
    }
  },
}));


================================================
FILE: apps/client/src/entities/tunnel/types.ts
================================================
export type TunnelStatus = {
  active: boolean;
  session_id?: string | null;
  server?: string | null;
  target?: string | null;
};

export type StartTunnelRequest = {
  server: string;
  target: string;
  access_token?: string;
};

export type StartTunnelResponse = {
  session_id: string;
};


================================================
FILE: apps/client/src/entities/user/api.ts
================================================
import { apiClient } from "@/shared/api";
import { User, CreateUserPayload, UpdateUserPayload } from "./types";

export const getUsers = () => apiClient.get<User[]>("/users");
export const createUser = (data: CreateUserPayload) =>
  apiClient.post<User>("/users", data);
export const updateUser = (id: number, data: UpdateUserPayload) =>
  apiClient.put<User>(`/users/${id}`, data);
export const deleteUser = (id: number) => apiClient.delete(`/users/${id}`);

export const assignRoleToUser = (userId: number, roleId: number) =>
  apiClient.post(`/users/${userId}/roles`, { role_id: roleId });

export const revokeRoleFromUser = (userId: number, roleId: number) =>
  apiClient.delete(`/users/${userId}/roles/${roleId}`);


================================================
FILE: apps/client/src/entities/user/store.ts
================================================
import { create } from "zustand";
import { getUsers, createUser, updateUser, deleteUser } from "./api";
import { User, CreateUserPayload, UpdateUserPayload } from "./types";

type UserState = {
  users: User[];
  isLoading: boolean;
  error: string | null;
  fetchUsers: () => Promise<void>;
  addUser: (data: CreateUserPayload) => Promise<void>;
  editUser: (id: number, data: UpdateUserPayload) => Promise<void>;
  removeUser: (id: number) => Promise<void>;
};

export const useUserStore = create<UserState>((set) => ({
  users: [],
  isLoading: false,
  error: null,
  fetchUsers: async () => {
    set({ isLoading: true, error: null });
    try {
      const response = await getUsers();
      set({ users: response.data, isLoading: false });
    } catch (error) {
      set({ error: "Failed to fetch users.", isLoading: false });
      console.error(error);
    }
  },
  addUser: async (data) => {
    try {
      await createUser(data);
      // After adding, refresh the list
      await useUserStore.getState().fetchUsers();
    } catch (error) {
      set({ error: "Failed to add user." });
      console.error(error);
      throw error; // re-throw to be caught in the component
    }
  },
  editUser: async (id, data) => {
    try {
      await updateUser(id, data);
      await useUserStore.getState().fetchUsers();
    } catch (error) {
      set({ error: "Failed to update user." });
      console.error(error);
      throw error;
    }
  },
  removeUser: async (id) => {
    try {
      await deleteUser(id);
      set((state) => ({
        users: state.users.filter((user) => user.id !== id),
      }));
    } catch (error) {
      set({ error: "Failed to delete user." });
      console.error(error);
      throw error;
    }
  },
}));


================================================
FILE: apps/client/src/entities/user/types.ts
================================================
import { Role } from "../role/types";

export type User = {
  id: number;
  username: string;
  email: string;
  created_at: string;
  updated_at: string;
  roles: Role[];
};

export type CreateUserPayload = {
  username: string;
  email: string;
  password: string;
};

export type UpdateUserPayload = {
  username?: string;
  email?: string;
  password?: string;
};


================================================
FILE: apps/client/src/features/account-switcher/index.tsx
================================================
import * as React from "react";
import { Check, ChevronsUpDown } from "lucide-react";

import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import {
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
} from "@/components/ui/sidebar";
import { VesselLogo } from "@/components/icon/Logo";

export function AccountSwitcher({
  versions,
  defaultVersion,
}: {
  versions: string[];
  defaultVersion: string;
}) {
  const [selectedVersion, setSelectedVersion] = React.useState(defaultVersion);

  return (
    <SidebarMenu>
      <SidebarMenuItem>
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <SidebarMenuButton
              size='lg'
              className='data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground'
            >
              <div className='bg-background text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center'>
                <VesselLogo />
              </div>
              <div className='flex flex-col gap-0.5 leading-none'>
                <span className='font-medium'>Server</span>
                <span className=''>@{selectedVersion}</span>
              </div>
              <ChevronsUpDown className='ml-auto' />
            </SidebarMenuButton>
          </DropdownMenuTrigger>
          <DropdownMenuContent
            className='w-(--radix-dropdown-menu-trigger-width)'
            align='start'
          >
            {versions.map((version) => (
              <DropdownMenuItem
                key={version}
                onSelect={() => setSelectedVersion(version)}
              >
                @{version}{" "}
                {version === selectedVersion && <Check className='ml-auto' />}
              </DropdownMenuItem>
            ))}
          </DropdownMenuContent>
        </DropdownMenu>
      </SidebarMenuItem>
    </SidebarMenu>
  );
}


================================================
FILE: apps/client/src/features/auth/AuthInterceptor.tsx
================================================
import { useEffect } from "react";
import { Navigate, useLocation } from "react-router";
import { parseJwt } from "@/lib/jwt";
import { storage } from "@/lib/storage";
import { isDemoMode } from "@/shared/demo";

export function AuthInterceptor({ children }: { children: React.ReactNode }) {
  const location = useLocation();
  const token = storage.getToken();

  useEffect(() => {
    if (isDemoMode) return;

    const currentToken = storage.getToken();
    if (!currentToken) {
      window.location.href = "/auth";
    } else {
      const parse = parseJwt(currentToken);
      if (!parse?.exp) {
        window.location.href = "/auth";
        return;
      }

      const now = new Date();
      const exp = new Date(parse.exp * 1000);

      if (now.getTime() >= exp.getTime()) {
        window.location.href = "/auth";
      }
    }
  }, [location]);

  if (!token && !isDemoMode) {
    return <Navigate to='/auth' replace />;
  }

  return <>{children}</>;
}


================================================
FILE: apps/client/src/features/auth/DefaultAdminPasswordDialog.tsx
================================================
import { useState } from "react";
import { toast } from "sonner";

import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import {
  authenticateWithPassword,
  fetchAdminUser,
  updateUserPassword,
} from "./api";

type DefaultAdminPasswordDialogProps = {
  open: boolean;
  serverUrl: string;
  onSuccess: (token: string) => void;
};

export function DefaultAdminPasswordDialog({
  open,
  serverUrl,
  onSuccess,
}: DefaultAdminPasswordDialogProps) {
  const [newPassword, setNewPassword] = useState("");
  const [confirmNewPassword, setConfirmNewPassword] = useState("");
  const [isUpdatingPassword, setIsUpdatingPassword] = useState(false);

  const handlePasswordChange = async () => {
    if (!newPassword || !confirmNewPassword) {
      toast.error("Please fill in both password fields.");
      return;
    }

    if (newPassword !== confirmNewPassword) {
      toast.error("Passwords do not match.");
      return;
    }

    if (newPassword === "admin") {
      toast.error("Please choose a password other than the default.");
      return;
    }

    if (!serverUrl) {
      toast.error("Missing server URL. Please reconnect to the server first.");
      return;
    }

    setIsUpdatingPassword(true);

    try {
      const adminUser = await fetchAdminUser();

      await updateUserPassword(adminUser.id, newPassword);

      const refreshedToken = await authenticateWithPassword(serverUrl, {
        id: adminUser.username,
        password: newPassword,
      });

      setNewPassword("");
      setConfirmNewPassword("");
      toast.success("Password updated. Logging you in with the new password.");
      onSuccess(refreshedToken);
    } catch (error) {
      toast.error(
        error instanceof Error
          ? error.message
          : "Failed to update the admin password.",
      );
    } finally {
      setIsUpdatingPassword(false);
    }
  };

  return (
    <Dialog open={open} onOpenChange={() => {}}>
      <DialogContent
        showCloseButton={false}
        onInteractOutside={(event) => event.preventDefault()}
        onEscapeKeyDown={(event) => event.preventDefault()}
      >
        <DialogHeader>
          <DialogTitle>Update Admin Password</DialogTitle>
          <DialogDescription>
            Default admin credentials were used. Please set a new password to
            continue.
          </DialogDescription>
        </DialogHeader>
        <div className='grid gap-4 py-4'>
          <div className='grid gap-2'>
            <Label htmlFor='new-password'>New password</Label>
            <Input
              id='new-password'
              type='password'
              autoComplete='new-password'
              value={newPassword}
              onChange={(e) => setNewPassword(e.target.value)}
              disabled={isUpdatingPassword}
            />
          </div>
          <div className='grid gap-2'>
            <Label htmlFor='confirm-password'>Confirm new password</Label>
            <Input
              id='confirm-password'
              type='password'
              autoComplete='new-password'
              value={confirmNewPassword}
              onChange={(e) => setConfirmNewPassword(e.target.value)}
              disabled={isUpdatingPassword}
            />
          </div>
        </div>
        <DialogFooter>
          <Button
            type='button'
            className='w-full'
            onClick={handlePasswordChange}
            disabled={isUpdatingPassword}
          >
            {isUpdatingPassword ? "Updating..." : "Update password"}
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}


================================================
FILE: apps/client/src/features/auth/api.ts
================================================
import { apiClient } from "@/shared/api";
import { User } from "@/entities/user/types";

export type AuthCredentials = {
  id: string;
  password: string;
};

export const authenticateWithPassword = async (
  baseUrl: string,
  credentials: AuthCredentials,
): Promise<string> => {
  const normalizedBaseUrl = baseUrl.replace(/\/$/, "");

  const response = await fetch(`${normalizedBaseUrl}/api/auth`, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify(credentials),
  });

  if (!response.ok) {
    throw new Error("Wrong ID or password.");
  }

  const data = await response.json();

  if (data.token === "none" || !data.token) {
    throw new Error("Authentication failed. Please check your credentials.");
  }

  return data.token as string;
};

export const fetchAdminUser = async (): Promise<User> => {
  const usersResponse = await apiClient.get<User[]>("/users");
  const adminUser = usersResponse.data.find((user) => user.username === "admin");

  if (!adminUser) {
    throw new Error("Admin user not found on the server.");
  }

  return adminUser;
};

export const updateUserPassword = async (
  userId: number,
  newPassword: string,
): Promise<void> => {
  await apiClient.put(`/users/${userId}`, {
    password: newPassword,
  });
};


================================================
FILE: apps/client/src/features/auth/hook.ts
================================================
import { useCallback } from "react";
import { useNavigate } from "react-router";
import { storage } from "@/lib/storage";

export const useLogout = () => {
  const navigate = useNavigate();

  const logout = useCallback(() => {
    storage.removeToken();
    storage.removeServerUrl();
    navigate("/auth", { replace: true });
  }, [navigate]);

  return { logout };
};


================================================
FILE: apps/client/src/features/auth/index.tsx
================================================
import { useEffect, useState } from "react";
import { toast } from "sonner";

import { cn } from "@/lib/utils";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { useNavigate } from "react-router";
import { ArrowRight, Loader2, Trash2 } from "lucide-react";
import { DEMO_SERVER_URL, DEMO_TOKEN, isDemoMode } from "@/shared/demo";
import { DefaultAdminPasswordDialog } from "./DefaultAdminPasswordDialog";
import { authenticateWithPassword } from "./api";
import { storage } from "@/lib/storage";
import { parseJwt } from "@/lib/jwt";
import {
  ensureSidecarRunning,
  getDesktopServerUrl,
  isTauri,
  openDesktopSettings,
} from "@/shared/desktop";

const MAX_RECENT_URLS = 5;

function sanitizeServerUrl(rawUrl: string): string | null {
  const trimmed = rawUrl.trim().replace(/\/$/, "");

  try {
    const parsed = new URL(trimmed);
    if (parsed.protocol !== "http:" && parsed.protocol !== "https:") {
      return null;
    }
    return parsed.origin;
  } catch {
    return null;
  }
}

export function LoginForm({
  className,
  ...props
}: React.ComponentProps<"div">) {
  const [url, setUrl] = useState("");
  const [id, setId] = useState("");
  const [password, setPassword] = useState("");
  const [showAuthFields, setShowAuthFields] = useState(false);
  const [isLoading, setIsLoading] = useState(false);
  const [recentUrls, setRecentUrls] = useState<string[]>([]);
  const [isPasswordDialogOpen, setIsPasswordDialogOpen] = useState(false);
  const [serverUrlForDialog, setServerUrlForDialog] = useState("");
  const [isTauriClient] = useState<boolean>(() => isTauri());
  const [isResolvingDesktop, setIsResolvingDesktop] = useState<boolean>(() =>
    isTauri(),
  );
  const [desktopError, setDesktopError] = useState<string | null>(null);
  const navigate = useNavigate();

  const connectToServer = async (targetUrl: string) => {
    if (isDemoMode) {
      storage.setServerUrl(DEMO_SERVER_URL);
      storage.setToken(DEMO_TOKEN);
      toast.success("Demo mode enabled. Loading demo dashboard...");
      navigate("/dashboard");
      return;
    }

    if (!targetUrl) {
      toast.error("Server URL cannot be empty.");
      return;
    }
    setIsLoading(true);
    const processedUrl = targetUrl.replace(/\/$/, "");

    try {
      const response = await fetch(`${processedUrl}/info`, {
        method: "GET",
        headers: {
          "Content-Type": "application/json",
        },
      });

      if (!response.ok) {
        throw new Error("Failed.");
      }

      const data = await response.json();

      if (
        data.code === 200 &&
        data.id === "vessel-server" &&
        data.status === "success"
      ) {
        toast.success("Connected to server successfully.");

        const updatedUrls = [
          processedUrl,
          ...recentUrls.filter((u) => u !== processedUrl),
        ].slice(0, MAX_RECENT_URLS);

        setRecentUrls(updatedUrls);
        storage.setRecentUrls(updatedUrls);
        storage.setServerUrl(processedUrl);

        setServerUrlForDialog(processedUrl);
        setShowAuthFields(true);
      } else {
        throw new Error("Failed to connect to the server.");
      }
    } catch (error) {
      toast.error(
        error instanceof Error
          ? error.message
          : "Failed to connect to the server.",
      );
    } finally {
      setIsLoading(false);
    }
  };

  const removeRecentUrl = (toRemove: string) => {
    const updated = recentUrls.filter((u) => u !== toRemove);
    setRecentUrls(updated);
    storage.setRecentUrls(updated);
    const normalized = url.replace(/\/$/, "");
    if (normalized === toRemove) {
      setUrl("");
    }
  };

  const handleConnect = async (e: React.FormEvent) => {
    e.preventDefault();
    await connectToServer(url);
  };

  const handleAuth = async (e: React.FormEvent) => {
    e.preventDefault();
    setIsLoading(true);
    const processedUrl = sanitizeServerUrl(url);

    if (!processedUrl) {
      toast.error("Please enter a valid server URL using http or https.");
      setIsLoading(false);
      return;
    }

    try {
      const token = await authenticateWithPassword(processedUrl, {
        id,
        password,
      });

      storage.setToken(token);
      storage.setServerUrl(processedUrl);

      setServerUrlForDialog(processedUrl);

      if (id === "admin" && password === "admin") {
        setIsPasswordDialogOpen(true);
        toast.message("Default admin password detected", {
          description: "Please change the password before continuing.",
        });
        return;
      }

      toast.success("Successfully authenticated.");
      navigate("/dashboard");
    } catch (error) {
      toast.error(
        error instanceof Error ? error.message : "Failed to authenticate.",
      );
    } finally {
      setIsLoading(false);
    }
  };

  const bootstrapDesktop = async () => {
    setDesktopError(null);
    setIsResolvingDesktop(true);
    try {
      // Make sure the sidecar is running, then ask Rust for its base URL.
      await ensureSidecarRunning();
      let baseUrl: string | null = null;
      for (let attempt = 0; attempt < 5; attempt++) {
        baseUrl = await getDesktopServerUrl();
        if (baseUrl) break;
        await new Promise((r) => setTimeout(r, 250));
      }
      if (!baseUrl) {
        baseUrl = storage.getServerUrl();
      }
      if (!baseUrl) {
        setDesktopError(
          "Could not reach the local Vessel server. Open the tray menu \u2192 Server Settings\u2026 to configure it.",
        );
        return;
      }
      storage.setServerUrl(baseUrl);
      setUrl(baseUrl);
      setShowAuthFields(true);
    } finally {
      setIsResolvingDesktop(false);
    }
  };

  useEffect(() => {
    if (isDemoMode) {
      storage.setServerUrl(DEMO_SERVER_URL);
      storage.setToken(DEMO_TOKEN);
      toast.message("Demo mode active", {
        description: "Using mock data without a backend.",
      });
      navigate("/dashboard");
      return;
    }

    const token = storage.getToken();
    const serverUrl = storage.getServerUrl();

    if (token && serverUrl) {
      const parsed = parseJwt(token);
      if (!parsed?.exp) {
        storage.removeToken();
      } else {
        const now = new Date();
        const exp = new Date(parsed.exp * 1000);
        if (now.getTime() >= exp.getTime()) {
          storage.removeToken();
        } else {
          navigate("/dashboard");
          return;
        }
      }
    }

    if (isTauriClient) {
      void bootstrapDesktop();
      return;
    }

    const storedUrls = storage.getRecentUrls();
    if (storedUrls.length > 0) {
      setRecentUrls(storedUrls);
    }
  }, [navigate, isTauriClient]);

  return (
    <div className={cn("flex flex-col gap-6", className)} {...props}>
      <form onSubmit={showAuthFields ? handleAuth : handleConnect}>
        <div className='flex flex-col gap-6'>
          <div className='flex flex-col items-center gap-2'>
            <a
              href='#'
              className='flex flex-col items-center gap-2 font-medium'
            >
              <div className='flex size-12 items-center justify-center rounded-md'>
                <img src='/icon.png' />
              </div>
            </a>
            {/* <h1 className='text-xl font-bold'>Vessel</h1>
            <div className='text-center text-sm'>
              Physical Device Orchestration Platform
            </div> */}
          </div>
          <div className='flex flex-col gap-6'>
            {isTauriClient && isResolvingDesktop ? (
              <div className='flex flex-col items-center gap-2 text-sm text-muted-foreground'>
                <Loader2 className='size-5 animate-spin' />
                Connecting to local server...
              </div>
            ) : isTauriClient && desktopError ? (
              <div className='flex flex-col gap-3'>
                <p className='text-sm text-red-300'>{desktopError}</p>
                <div className='flex gap-2'>
                  <Button
                    type='button'
                    variant='outline'
                    className='flex-1'
                    onClick={() => void bootstrapDesktop()}
                  >
                    Retry
                  </Button>
                  <Button
                    type='button'
                    variant='secondary'
                    className='flex-1'
                    onClick={() => void openDesktopSettings()}
                  >
                    Server Settings
                  </Button>
                </div>
              </div>
            ) : !showAuthFields ? (
              <div className='grid gap-3'>
                {/* <Label htmlFor='server-url'>Server</Label> */}
                <div className='flex w-full gap-2'>
                  <Input
                    id='server-url'
                    type='text'
                    placeholder='https://your-server.com'
                    required
                    value={url}
                    onChange={(e) => setUrl(e.target.value)}
                    disabled={isLoading}
                    className='flex-1'
                  />
                  <Button
                    type='submit'
                    size='icon'
                    disabled={isLoading}
                    aria-label='Connect'
                    className='shrink-0'
                  >
                    {isLoading ? (
                      <Loader2 className='size-4 animate-spin' />
                    ) : (
                      <ArrowRight className='size-4' />
                    )}
                  </Button>
                </div>
              </div>
            ) : (
              <>
                <div className='grid gap-3'>
                  <Label htmlFor='id'>ID</Label>
                  <Input
                    id='id'
                    type='text'
                    placeholder='admin'
                    required
                    value={id}
                    onChange={(e) => setId(e.target.value)}
                    disabled={isLoading}
                  />
                </div>
                <div className='grid gap-3'>
                  <Label htmlFor='password'>Password</Label>
                  <Input
                    id='password'
                    type='password'
                    required
                    value={password}
                    onChange={(e) => setPassword(e.target.value)}
                    disabled={isLoading}
                  />
                </div>
              </>
            )}
            {!(isTauriClient && (isResolvingDesktop || desktopError)) &&
              showAuthFields && (
                <Button type='submit' className='w-full' disabled={isLoading}>
                  {isLoading ? "Processing..." : "Auth"}
                </Button>
              )}
          </div>

          {!isTauriClient && recentUrls.length > 0 && !showAuthFields && (
            <div className='flex w-full flex-col gap-2 pt-4'>
              {recentUrls.map((recentUrl) => (
                <div key={recentUrl} className='flex w-full gap-2'>
                  <Button
                    type='button'
                    variant='outline'
                    onClick={async () => {
                      setUrl(recentUrl);
                      await connectToServer(recentUrl);
                    }}
                    className='min-w-0 flex-1 justify-start truncate text-left text-xs'
                    size='sm'
                  >
                    {recentUrl}
                  </Button>
                  <Button
                    type='button'
                    variant='link'
                    size='icon'
                    className='size-8 shrink-0 text-muted-foreground'
                    onClick={() => removeRecentUrl(recentUrl)}
                    aria-label={`Remove ${recentUrl} from recent servers`}
                  >
                    <Trash2 className='size-4' />
                  </Button>
                </div>
              ))}
            </div>
          )}
        </div>
      </form>
      {/* <div className='text-muted-foreground *:[a]:hover:text-primary text-center text-xs text-balance *:[a]:underline *:[a]:underline-offset-4'>
        This software is managed as an open source and can be found on this{" "}
        <a
          href='https://github.com/cartesiancs/vessel'
          target='_blank'
          rel='noopener noreferrer'
        >
          GitHub
        </a>
        .
      </div> */}
      <DefaultAdminPasswordDialog
        open={isPasswordDialogOpen}
        serverUrl={serverUrlForDialog}
        onSuccess={(refreshedToken) => {
          storage.setToken(refreshedToken);
          if (serverUrlForDialog) {
            storage.setServerUrl(serverUrlForDialog);
          }
          setIsPasswordDialogOpen(false);
          toast.success(
            "Password updated. Logging you in with the new password.",
          );
          navigate("/dashboard");
        }}
      />
    </div>
  );
}


================================================
FILE: apps/client/src/features/code/CreateItemDialog.tsx
================================================
import React, { useState } from "react";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogFooter,
} from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";

interface CreateItemDialogProps {
  isOpen: boolean;
  onClose: () => void;
  itemType: "file" | "folder";
  onCreate: (name: string) => Promise<void>;
}

export const CreateItemDialog: React.FC<CreateItemDialogProps> = ({
  isOpen,
  onClose,
  itemType,
  onCreate,
}) => {
  const [name, setName] = useState("");
  const [isLoading, setIsLoading] = useState(false);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!name.trim()) return;

    setIsLoading(true);
    await onCreate(name.trim());
    setIsLoading(false);
    onClose();
    setName("");
  };

  return (
    <Dialog open={isOpen} onOpenChange={onClose}>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Create New {itemType}</DialogTitle>
        </DialogHeader>
        <form onSubmit={handleSubmit}>
          <Input
            value={name}
            onChange={(e) => setName(e.target.value)}
            placeholder={`Enter ${itemType} name...`}
            className='my-4'
            autoFocus
          />
          <DialogFooter>
            <Button
              type='button'
              variant='ghost'
              onClick={onClose}
              disabled={isLoading}
            >
              Cancel
            </Button>
            <Button type='submit' disabled={isLoading || !name.trim()}>
              {isLoading ? "Creating..." : "Create"}
            </Button>
          </DialogFooter>
        </form>
      </DialogContent>
    </Dialog>
  );
};


================================================
FILE: apps/client/src/features/code/FileEditor.tsx
================================================
import { Button } from "@/components/ui/button";
import { useIdeStore } from "@/entities/file/store";
import Editor, { loader } from "@monaco-editor/react";
import { Loader2 } from "lucide-react";
import * as monaco from "monaco-editor";

loader.config({ monaco });

const getLanguageFromPath = (path: string) => {
  const extension = path.split(".").pop()?.toLowerCase();
  switch (extension) {
    case "js":
      return "javascript";
    case "ts":
      return "typescript";
    case "json":
      return "json";
    case "css":
      return "css";
    case "html":
      return "html";
    case "md":
      return "markdown";
    case "py":
      return "python";
    case "rs":
      return "rust";
    case "go":
      return "go";
    case "java":
      return "java";
    default:
      return "plaintext";
  }
};

export const FileEditor = () => {
  const {
    activeFilePath,
    activeFileContent,
    updateActiveFileContent,
    saveActiveFile,
    isDirty,
    isLoading,
  } = useIdeStore();

  if (!activeFilePath) {
    return (
      <div className='flex items-center justify-center h-full bg-[#1e1e1e] text-muted-foreground'>
        Select a file to begin editing.
      </div>
    );
  }

  const handleEditorChange = (value: string | undefined) => {
    updateActiveFileContent(value || "");
  };

  return (
    <div className='flex flex-col h-full bg-[#1e1e1e]'>
      <div className='flex items-center justify-between p-2 border-b border-neutral-700 bg-[#252526]'>
        <h2 className='text-sm font-medium text-gray-300'>
          {activeFilePath}{" "}
          {isDirty && <span className='text-yellow-400'>*</span>}
        </h2>
        <Button
          onClick={saveActiveFile}
          disabled={!isDirty || isLoading}
          size='sm'
        >
          {isLoading ? "Saving..." : "Save"}
        </Button>
      </div>
      <div className='flex-grow w-full h-full'>
        <Editor
          path={activeFilePath}
          language={getLanguageFromPath(activeFilePath)}
          value={activeFileContent}
          onChange={handleEditorChange}
          theme='vs-dark'
          loading={<Loader2 className='w-8 h-8 mx-auto mt-10 animate-spin' />}
          options={{
            minimap: { enabled: true },
            fontSize: 14,
            wordWrap: "on",
            scrollBeyondLastLine: false,
          }}
        />
      </div>
    </div>
  );
};


================================================
FILE: apps/client/src/features/code/FileTree.tsx
================================================
import React, { useState, useEffect, useRef } from "react";
import {
  ChevronRight,
  Folder,
  File as FileIcon,
  Loader2,
  FolderPlus,
  FilePlus,
  Trash2,
  FilePenLine,
} from "lucide-react";
import {
  getDirectoryListing,
  createNewFile,
  createNewFolder,
  renameEntry,
  deleteEntry,
} from "@/entities/file/api";
import { toast } from "sonner";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import {
  ContextMenu,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuTrigger,
} from "@/components/ui/context-menu";
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from "@/components/ui/alert-dialog";
import { useFileTreeStore, useIdeStore } from "@/entities/file/store";
import { DirEntry } from "@/entities/file/types";
import { CreateItemDialog } from "./CreateItemDialog";

interface TreeNodeProps {
  entry: DirEntry;
  onDeleteRequest: (entry: DirEntry) => void;
}

const TreeNode: React.FC<TreeNodeProps> = ({ entry, onDeleteRequest }) => {
  const [isOpen, setIsOpen] = useState(false);
  const [children, setChildren] = useState<DirEntry[]>([]);
  const [isLoading, setIsLoading] = useState(false);
  const [isRenaming, setIsRenaming] = useState(false);
  const [newName, setNewName] = useState(entry.name);
  const inputRef = useRef<HTMLInputElement>(null);

  const openFile = useIdeStore((state) => state.openFile);
  const { treeVersion, refreshFileTree } = useFileTreeStore();

  useEffect(() => {
    if (isRenaming) {
      inputRef.current?.focus();
      inputRef.current?.select();
    }
  }, [isRenaming]);

  const fetchChildren = async () => {
    setIsLoading(true);
    try {
      const childEntries = await getDirectoryListing(entry.path);
      setChildren(childEntries);
    } catch {
      toast.error(`Failed to load directory: ${entry.name}`);
    } finally {
      setIsLoading(false);
    }
  };

  const handleToggle = async () => {
    if (isRenaming) return;
    if (!entry.isDir) {
      openFile(entry.path);
      return;
    }
    if (isOpen) {
      setIsOpen(false);
    } else {
      setIsOpen(true);
      if (children.length === 0) {
        await fetchChildren();
      }
    }
  };

  useEffect(() => {
    if (isOpen && entry.isDir) {
      fetchChildren();
    }
  }, [treeVersion, isOpen, entry.isDir, entry.path]);

  const handleRename = async () => {
    if (newName === entry.name || !newName.trim()) {
      setIsRenaming(false);
      setNewName(entry.name);
      return;
    }
    try {
      const parentPath = entry.path.substring(
        0,
        entry.path.lastIndexOf("/") + 1,
      );
      const newPath = `${parentPath}${newName}`;
      await renameEntry(entry.path, newPath);
      toast.success(`Renamed to '${newName}'`);
      refreshFileTree();
    } catch (error) {
      toast.error(`Failed to rename: ${error}`);
      setNewName(entry.name);
    } finally {
      setIsRenaming(false);
    }
  };

  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
    if (e.key === "Enter") {
      handleRename();
    } else if (e.key === "Escape") {
      setIsRenaming(false);
      setNewName(entry.name);
    }
  };

  const Icon = entry.isDir ? Folder : FileIcon;

  return (
    <div className='text-sm'>
      <ContextMenu>
        <ContextMenuTrigger>
          <div
            className='flex items-center p-1 cursor-pointer hover:bg-muted'
            onClick={handleToggle}
          >
            {entry.isDir ? (
              <ChevronRight
                className={`w-4 h-4 mr-0 transition-transform ${
                  isOpen ? "rotate-90" : ""
                }`}
              />
            ) : (
              <div className='w-4 mr-1' />
            )}
            <Icon className='w-4 h-4 mr-2' />
            {isRenaming ? (
              <Input
                ref={inputRef}
                value={newName}
                onChange={(e) => setNewName(e.target.value)}
                onBlur={handleRename}
                onKeyDown={handleKeyDown}
                className='h-6 px-1 text-sm'
                onClick={(e) => e.stopPropagation()}
              />
            ) : (
              <span>{entry.name}</span>
            )}
            {isLoading && <Loader2 className='w-4 h-4 ml-auto animate-spin' />}
          </div>
        </ContextMenuTrigger>
        <ContextMenuContent>
          <ContextMenuItem onSelect={() => setIsRenaming(true)}>
            <FilePenLine className='w-4 h-4 mr-2' />
            Rename
          </ContextMenuItem>
          <ContextMenuItem
            onSelect={() => onDeleteRequest(entry)}
            className='text-red-500 focus:text-red-500'
          >
            <Trash2 className='w-4 h-4 mr-2' />
            Delete
          </ContextMenuItem>
        </ContextMenuContent>
      </ContextMenu>

      {isOpen && (
        <div className='pl-4 border-l border-muted-foreground/20'>
          {children.map((child) => (
            <TreeNode
              key={child.path}
              entry={child}
              onDeleteRequest={onDeleteRequest}
            />
          ))}
        </div>
      )}
    </div>
  );
};

interface ConfirmDeleteDialogProps {
  item: DirEntry | null;
  onClose: () => void;
  onConfirm: (item: DirEntry) => Promise<void>;
}

const ConfirmDeleteDialog: React.FC<ConfirmDeleteDialogProps> = ({
  item,
  onClose,
  onConfirm,
}) => {
  if (!item) return null;

  return (
    <AlertDialog open={!!item} onOpenChange={onClose}>
      <AlertDialogContent>
        <AlertDialogHeader>
          <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
          <AlertDialogDescription>
            This action cannot be undone. This will permanently delete the{" "}
            {item.isDir ? "folder" : "file"}
            <strong className='mx-1'>{item.name}</strong>
            and all its contents.
          </AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter>
          <AlertDialogCancel onClick={onClose}>Cancel</AlertDialogCancel>
          <AlertDialogAction onClick={() => onConfirm(item)}>
            Delete
          </AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  );
};

export const FileTree = () => {
  const [rootEntries, setRootEntries] = useState<DirEntry[]>([]);
  const [isLoading, setIsLoading] = useState(true);
  const [dialogOpen, setDialogOpen] = useState<"file" | "folder" | null>(null);
  const [deleteTarget, setDeleteTarget] = useState<DirEntry | null>(null);

  const { treeVersion, refreshFileTree } = useFileTreeStore();

  const fetchRoot = async () => {
    setIsLoading(true);
    try {
      const entries = await getDirectoryListing("");
      setRootEntries(entries);
    } catch {
      toast.error("Failed to load root directory.");
    } finally {
      setIsLoading(false);
    }
  };

  useEffect(() => {
    fetchRoot();
  }, [treeVersion]);

  const handleCreate = async (name: string, type: "file" | "folder") => {
    try {
      if (type === "file") {
        await createNewFile(name);
      } else {
        await createNewFolder(name);
      }
      toast.success(`${type} '${name}' created successfully.`);
      refreshFileTree();
    } catch {
      toast.error(`Failed to create ${type}.`);
    }
  };

  const handleDelete = async (item: DirEntry) => {
    try {
      await deleteEntry(item.path);
      toast.success(`'${item.name}' deleted successfully.`);
      refreshFileTree();
    } catch (error) {
      toast.error(`Failed to delete '${item.name}': ${error}`);
    } finally {
      setDeleteTarget(null);
    }
  };

  return (
    <div className='p-2'>
      <div className='flex items-center justify-between mb-2'>
        <p className='font-bold text-sm ps-2'>Project</p>
        <div className='flex items-center gap-1'>
          <Button
            variant='ghost'
            size='icon'
            onClick={() => setDialogOpen("folder")}
          >
            <FolderPlus className='w-4 h-4' />
          </Button>
          <Button
            variant='ghost'
            size='icon'
            onClick={() => setDialogOpen("file")}
          >
            <FilePlus className='w-4 h-4' />
          </Button>
        </div>
      </div>

      {isLoading ? (
        <div className='p-4 text-sm'>Loading project...</div>
      ) : (
        rootEntries.map((entry) => (
          <TreeNode
            key={entry.path}
            entry={entry}
            onDeleteRequest={setDeleteTarget}
          />
        ))
      )}

      <CreateItemDialog
        isOpen={dialogOpen !== null}
        onClose={() => setDialogOpen(null)}
        itemType={dialogOpen || "file"}
        onCreate={(name) => handleCreate(name, dialogOpen!)}
      />

      <ConfirmDeleteDialog
        item={deleteTarget}
        onClose={() => setDeleteTarget(null)}
        onConfirm={handleDelete}
      />
    </div>
  );
};


================================================
FILE: apps/client/src/features/configurations/ConfigurationActionButton.tsx
================================================
import { useState } from "react";
import { Controller, useForm } from "react-hook-form";
import { MoreHorizontal, Pencil, Trash2 } from "lucide-react";
import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogContent,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from "@/components/ui/alert-dialog";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Switch } from "@/components/ui/switch";
import { Textarea } from "@/components/ui/textarea";
import { useConfigStore } from "@/entities/configurations/store";
import {
  SystemConfiguration,
  SystemConfigurationPayload,
} from "@/entities/configurations/types";

interface Props {
  config: SystemConfiguration;
}

export function ConfigurationActionButton({ config }: Props) {
  const [isEditOpen, setIsEditOpen] = useState(false);
  const [isDeleteOpen, setIsDeleteOpen] = useState(false);
  const { updateConfig, deleteConfig } = useConfigStore();

  const { register, handleSubmit, control } =
    useForm<SystemConfigurationPayload>({
      defaultValues: {
        key: config.key,
        value: config.value,
        description: config.description ?? "",
        enabled: config.enabled,
      },
    });

  const onUpdate = async (data: SystemConfigurationPayload) => {
    await updateConfig(config.id, data);
    setIsEditOpen(false);
  };

  const onDelete = async () => {
    await deleteConfig(config.id);
    setIsDeleteOpen(false);
  };

  return (
    <>
      {/* Edit Dialog */}
      <Dialog open={isEditOpen} onOpenChange={setIsEditOpen}>
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <Button variant='ghost' className='h-8 w-8 p-0'>
              <span className='sr-only'>Open menu</span>
              <MoreHorizontal className='h-4 w-4' />
            </Button>
          </DropdownMenuTrigger>
          <DropdownMenuContent align='end'>
            <DialogTrigger asChild>
              <DropdownMenuItem>
                <Pencil className='mr-2 h-4 w-4' />
                <span>Edit</span>
              </DropdownMenuItem>
            </DialogTrigger>
            <DropdownMenuItem
              onClick={() => setIsDeleteOpen(true)}
              className='text-red-500 focus:text-red-500'
            >
              <Trash2 className='mr-2 h-4 w-4 text-red-500' />
              <span>Delete</span>
            </DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>

        <DialogContent>
          <DialogHeader>
            <DialogTitle>Edit: {config.key}</DialogTitle>
          </DialogHeader>
          <form onSubmit={handleSubmit(onUpdate)} className='space-y-4 py-2'>
            <div className='space-y-2'>
              <Label htmlFor='key'>Key</Label>
              <Input id='key' {...register("key", { required: true })} />
            </div>
            <div className='space-y-2'>
              <Label htmlFor='value'>Value</Label>
              <Textarea
                id='value'
                {...register("value", { required: true })}
                className='break-all'
              />
            </div>
            <div className='space-y-2'>
              <Label htmlFor='description'>Description</Label>
              <Input id='description' {...register("description")} />
            </div>
            <div className='flex items-center space-x-2'>
              <Controller
                name='enabled'
                control={control}
                render={({ field }) => (
                  <Switch
                    id='enabled'
                    checked={field.value === 1}
                    onCheckedChange={(checked) =>
                      field.onChange(checked ? 1 : 0)
                    }
                  />
                )}
              />
              <Label htmlFor='enabled'>Enabled</Label>
            </div>
            <DialogFooter>
              <Button
                type='button'
                variant='outline'
                onClick={() => setIsEditOpen(false)}
              >
                Cancel
              </Button>
              <Button type='submit'>Save Changes</Button>
            </DialogFooter>
          </form>
        </DialogContent>
      </Dialog>

      {/* Delete Alert Dialog */}
      <AlertDialog open={isDeleteOpen} onOpenChange={setIsDeleteOpen}>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
            <AlertDialogDescription>
              This action cannot be undone. This will permanently delete the
              <span className='font-bold'> {config.key} </span>
              configuration.
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel>Cancel</AlertDialogCancel>
            <AlertDialogAction onClick={onDelete}>Continue</AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </>
  );
}


================================================
FILE: apps/client/src/features/configurations/ConfigurationCreate.tsx
================================================
import { Controller, useForm } from "react-hook-form";
import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogContent,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Switch } from "@/components/ui/switch";
import { Textarea } from "@/components/ui/textarea";
import { useConfigStore } from "@/entities/configurations/store";
import { SystemConfigurationPayload } from "@/entities/configurations/types";

export function ConfigurationCreate({
  isOpen,
  onOpenChange,
}: {
  isOpen: boolean;
  onOpenChange: (open: boolean) => void;
}) {
  const createConfig = useConfigStore((state) => state.createConfig);
  const { register, handleSubmit, reset, control } =
    useForm<SystemConfigurationPayload>({
      defaultValues: {
        key: "",
        value: "",
        description: "",
        enabled: 1,
      },
    });

  const onSubmit = async (data: SystemConfigurationPayload) => {
    await createConfig(data);
    onOpenChange(false);
    reset();
  };

  const handleOpenChange = (open: boolean) => {
    onOpenChange(open);
  };

  return (
    <Dialog open={isOpen} onOpenChange={handleOpenChange}>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Add New System Configuration</DialogTitle>
        </DialogHeader>
        <form onSubmit={handleSubmit(onSubmit)} className='space-y-4 py-2'>
          <div className='space-y-2'>
            <Label htmlFor='key'>Key</Label>
            <Input id='key' {...register("key", { required: true })} />
          </div>
          <div className='space-y-2'>
            <Label htmlFor='value'>Value</Label>
            <Textarea
              id='value'
              {...register("value", { required: true })}
              className='break-all'
            />
          </div>
          <div className='space-y-2'>
            <Label htmlFor='description'>Description</Label>
            <Input id='description' {...register("description")} />
          </div>
          <div className='flex items-center space-x-2'>
            <Controller
              name='enabled'
              control={control}
              render={({ field }) => (
                <Switch
                  id='enabled'
                  checked={field.value === 1}
                  onCheckedChange={(checked) => field.onChange(checked ? 1 : 0)}
                />
              )}
            />
            <Label htmlFor='enabled'>Enabled</Label>
          </div>
          <DialogFooter>
            <Button
              type='button'
              variant='outline'
              onClick={() => onOpenChange(false)}
            >
              Cancel
            </Button>
            <Button type='submit'>Save</Button>
          </DialogFooter>
        </form>
      </DialogContent>
    </Dialog>
  );
}


================================================
FILE: apps/client/src/features/configurations/ConfigurationCreateButton.tsx
================================================
import { useState } from "react";
import { ConfigurationCreate } from "./ConfigurationCreate";
import { Button } from "@/components/ui/button";
import { PlusCircle } from "lucide-react";

export function ConfigurationCreateButton() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      <Button size={"sm"} variant='outline' onClick={() => setIsOpen(true)}>
        <PlusCircle className='mr-2 h-4 w-4' />
        Add Configuration
      </Button>
      <ConfigurationCreate isOpen={isOpen} onOpenChange={setIsOpen} />
    </>
  );
}


================================================
FILE: apps/client/src/features/darkmode/mode-toggle.tsx
================================================
import { Moon, Sun } from "lucide-react";

import { Button } from "@/components/ui/button";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { useTheme } from "@/app/providers/theme-provider";

export function ModeToggle() {
  const { setTheme } = useTheme();

  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="outline" size="icon">
          <Sun className="h-[1.2rem] w-[1.2rem] scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90" />
          <Moon className="absolute h-[1.2rem] w-[1.2rem] scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0" />
          <span className="sr-only">Toggle theme</span>
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="end">
        <DropdownMenuItem onClick={() => setTheme("light")}>
          Light
        </DropdownMenuItem>
        <DropdownMenuItem onClick={() => setTheme("dark")}>
          Dark
        </DropdownMenuItem>
        <DropdownMenuItem onClick={() => setTheme("system")}>
          System
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}


================================================
FILE: apps/client/src/features/dashboard-swipe/DashboardSwipeHeader.tsx
================================================
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from "@/components/ui/alert-dialog";
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb";
import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogContent,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Separator } from "@/components/ui/separator";
import { SidebarTrigger } from "@/components/ui/sidebar";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { useDynamicDashboardStore } from "@/entities/dynamic-dashboard/store";
import { useIntegrationStore } from "@/entities/integrations/store";
import { MoreVertical, Pencil, Plus, Trash2 } from "lucide-react";
import { useEffect, useMemo, useState } from "react";
import {
  useLocation,
  useNavigate,
  useSearchParams,
} from "react-router";

export function DashboardSwipeHeader() {
  const location = useLocation();
  const navigate = useNavigate();
  const [searchParams, setSearchParams] = useSearchParams();

  const {
    dashboards,
    setActiveDashboard: setActiveDashboardStore,
    deleteDashboard,
    updateDashboardMeta,
  } = useDynamicDashboardStore();
  const setActiveDashboard = setActiveDashboardStore;

  const { isHaConnected, isRos2Connected, isSdrConnected } =
    useIntegrationStore();

  const integrationDashboards = useMemo(() => {
    return [
      { id: "main", name: "Dashboard" },
      isHaConnected && { id: "ha", name: "Home Assistant" },
      isRos2Connected && { id: "ros2", name: "ROS2" },
      isSdrConnected && { id: "sdr", name: "RTL-SDR" },
    ].filter(Boolean) as { id: string; name: string }[];
  }, [isHaConnected, isRos2Connected, isSdrConnected]);

  const initialView = searchParams.get("view") || "main";
  const [selectedDashboard, setSelectedDashboard] = useState(initialView);

  useEffect(() => {
    const view = searchParams.get("view");
    if (view && view !== selectedDashboard) {
      setSelectedDashboard(view);
    }
  }, [searchParams, selectedDashboard]);

  const pathname = location.pathname;
  const n = dashboards.length;

  const isNewDynamicPanel =
    pathname === "/dynamic-dashboard/new" ||
    (pathname === "/dynamic-dashboard" && n === 0);

  const isMainDashboardRoute = pathname === "/dashboard";

  const dynamicHeaderDashboardId = useMemo(() => {
    if (isNewDynamicPanel || isMainDashboardRoute) return null;
    if (pathname === "/dynamic-dashboard" && n > 0) {
      return dashboards[0]?.id ?? null;
    }
    const m = pathname.match(/^\/dynamic-dashboard\/([^/]+)$/);
    if (!m || m[1] === "new") return null;
    return m[1];
  }, [isNewDynamicPanel, isMainDashboardRoute, pathname, n, dashboards]);

  const currentDynamicDashboard = useMemo(
    () => dashboards.find((d) => d.id === dynamicHeaderDashboardId),
    [dashboards, dynamicHeaderDashboardId],
  );

  const [deleteConfirmOpen, setDeleteConfirmOpen] = useState(false);
  const [renameOpen, setRenameOpen] = useState(false);
  const [renameDraft, setRenameDraft] = useState("");

  const handleAddDashboard = () => {
    navigate("/dynamic-dashboard");
  };

  const handleSelectIntegration = (value: string) => {
    setSelectedDashboard(value);
    setSearchParams({ view: value }, { replace: true });
  };

  const handleSelectDynamicDashboard = (id: string) => {
    setActiveDashboard(id);
    navigate(`/dynamic-dashboard/${id}`);
  };

  const handleDeleteDashboard = async () => {
    if (!currentDynamicDashboard) {
      setDeleteConfirmOpen(false);
      return;
    }

    const remaining = dashboards.filter(
      (d) => d.id !== currentDynamicDashboard.id,
    );
    await deleteDashboard(currentDynamicDashboard.id);
    setDeleteConfirmOpen(false);

    const nextId = remaining[0]?.id;
    if (nextId) {
      navigate(`/dynamic-dashboard/${nextId}`);
    } else {
      navigate("/dynamic-dashboard/new");
    }
  };

  const openRenameDialog = () => {
    if (currentDynamicDashboard) {
      setRenameDraft(currentDynamicDashboard.name);
      setRenameOpen(true);
    }
  };

  const handleRenameSave = () => {
    const name = renameDraft.trim();
    if (!name || !currentDynamicDashboard) return;
    updateDashboardMeta(currentDynamicDashboard.id, { name });
    setRenameOpen(false);
  };

  const showDynamicChrome =
    !isMainDashboardRoute &&
    !isNewDynamicPanel &&
    dynamicHeaderDashboardId != null;

  return (
    <>
      <header className='flex h-12 shrink-0 items-center gap-2 border-b px-4'>
        <SidebarTrigger className='-ml-1' />
        <Separator
          orientation='vertical'
          className='mr-2 data-[orientation=vertical]:h-4'
        />
        {isMainDashboardRoute && (
          <Breadcrumb>
            <BreadcrumbList>
              <BreadcrumbItem className='hidden md:block'>
                <BreadcrumbLink href='#'>/</BreadcrumbLink>
              </BreadcrumbItem>
              <BreadcrumbSeparator className='hidden md:block' />
              <BreadcrumbItem>
                <div className='flex items-center gap-2'>
                  <Select
                    value={selectedDashboard}
                    onValueChange={handleSelectIntegration}
                  >
                    <SelectTrigger
                      size='sm'
                      className='w-[180px] focus:ring-0'
                    >
                      <SelectValue placeholder='Select a dashboard' />
                    </SelectTrigger>
                    <SelectContent>
                      {integrationDashboards.map((dashboard) => (
                        <SelectItem key={dashboard.id} value={dashboard.id}>
                          {dashboard.name}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                  <Button
                    variant='ghost'
                    size='icon'
                    onClick={handleAddDashboard}
                  >
                    <Plus className='h-4 w-4' />
                  </Button>
                </div>
              </BreadcrumbItem>
            </BreadcrumbList>
          </Breadcrumb>
        )}
        {isNewDynamicPanel && (
          <span className='text-sm font-medium text-muted-foreground'>
            New canvas
          </span>
        )}
        {showDynamicChrome && (
          <>
            <Breadcrumb>
              <BreadcrumbList>
                <BreadcrumbItem className='hidden md:block'>
                  <BreadcrumbLink href='#'>/</BreadcrumbLink>
                </BreadcrumbItem>
                <BreadcrumbSeparator className='hidden md:block' />
                <BreadcrumbItem>
                  <div className='flex items-center gap-2'>
                    <Select
                      value={dynamicHeaderDashboardId}
                      onValueChange={handleSelectDynamicDashboard}
                    >
                      <SelectTrigger size='sm' className='w-[200px] focus:ring-0'>
                        <SelectValue placeholder='Select dashboard' />
                      </SelectTrigger>
                      <SelectContent>
                        {dashboards.map((dashboard) => (
                          <SelectItem key={dashboard.id} value={dashboard.id}>
                            {dashboard.name}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                    {currentDynamicDashboard && (
                      <DropdownMenu>
                        <DropdownMenuTrigger asChild>
                          <Button
                            variant='ghost'
                            size='icon'
                            aria-label='Dashboard actions'
                          >
                            <MoreVertical className='h-4 w-4' />
                          </Button>
                        </DropdownMenuTrigger>
                        <DropdownMenuContent align='start'>
                          <DropdownMenuItem onSelect={openRenameDialog}>
                            <Pencil className='h-4 w-4' />
                            Rename
                          </DropdownMenuItem>
                          <DropdownMenuItem
                            variant='destructive'
                            onSelect={() => setDeleteConfirmOpen(true)}
                          >
                            <Trash2 className='h-4 w-4' />
                            Delete
                          </DropdownMenuItem>
                        </DropdownMenuContent>
                      </DropdownMenu>
                    )}
                  </div>
                </BreadcrumbItem>
              </BreadcrumbList>
            </Breadcrumb>
          </>
        )}
      </header>

      <Dialog open={renameOpen} onOpenChange={setRenameOpen}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Rename dashboard</DialogTitle>
          </DialogHeader>
          <div className='space-y-2 py-2'>
            <Label htmlFor='dashboard-rename-swipe'>Name</Label>
            <Input
              id='dashboard-rename-swipe'
              value={renameDraft}
              onChange={(e) => setRenameDraft(e.target.value)}
              onKeyDown={(e) => {
                if (e.key === "Enter") {
                  e.preventDefault();
                  handleRenameSave();
                }
              }}
            />
          </div>
          <DialogFooter>
            <Button variant='outline' onClick={() => setRenameOpen(false)}>
              Cancel
            </Button>
            <Button onClick={handleRenameSave} disabled={!renameDraft.trim()}>
              Save
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      <AlertDialog
        open={deleteConfirmOpen}
        onOpenChange={(open) => setDeleteConfirmOpen(open)}
      >
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>Delete dashboard?</AlertDialogTitle>
            <AlertDialogDescription>
              This action cannot be undone. The dashboard layout will be
              removed.
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel onClick={() => setDeleteConfirmOpen(false)}>
              Cancel
            </AlertDialogCancel>
            <AlertDialogAction onClick={handleDeleteDashboard}>
              Delete
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </>
  );
}


================================================
FILE: apps/client/src/features/dashboard-swipe/DashboardSwipeLayout.tsx
================================================
import { Footer } from "@/features/footer";
import { AppSidebar } from "@/features/sidebar";
import { WebRTCProvider } from "@/features/rtc/WebRTCProvider";
import {
  SidebarInset,
  SidebarProvider,
} from "@/components/ui/sidebar";
import {
  DashboardMainPanel,
  type DashboardMainPanelContentView,
} from "@/pages/dashboard";
import {
  DynamicDashboardMainPanel,
  NewDynamicDashboardPanel,
} from "@/pages/dynamic-dashboard";
import type { DynamicDashboard } from "@/entities/dynamic-dashboard/store";
import { useDynamicDashboardStore } from "@/entities/dynamic-dashboard/store";
import { useIntegrationStore } from "@/entities/integrations/store";
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import { Outlet, useLocation, useNavigate } from "react-router";
import { DashboardSwipeHeader } from "./DashboardSwipeHeader";

/** Child route element so nested paths match without rendering extra UI. */
export function DashboardSwipeRoutePlaceholder() {
  return null;
}

function maxPanelIndex(
  integrationCount: number,
  dashboards: DynamicDashboard[],
): number {
  return integrationCount + dashboards.length + 1;
}

function panelIndexFromPath(
  pathname: string,
  search: string,
  dashboards: DynamicDashboard[],
  activeIntegrations: DashboardMainPanelContentView[],
): number {
  const n = dashboards.length;
  const k = activeIntegrations.length;
  const lastIdx = maxPanelIndex(k, dashboards);

  if (pathname === "/dashboard") {
    const view = new URLSearchParams(search).get("view") || "main";
    if (view === "main") {
      return 0;
    }
    const i = activeIntegrations.indexOf(view as DashboardMainPanelContentView);
    if (i >= 0) {
      return 1 + i;
    }
    return 0;
  }
  if (pathname === "/dynamic-dashboard/new") {
    return lastIdx;
  }
  if (pathname === "/dynamic-dashboard") {
    return n > 0 ? k + 1 : lastIdx;
  }
  const prefix = "/dynamic-dashboard/";
  if (pathname.startsWith(prefix)) {
    const rest = pathname.slice(prefix.length);
    if (rest === "new") {
      return lastIdx;
    }
    const i = dashboards.findIndex((d) => d.id === rest);
    if (i >= 0) {
      return k + 1 + i;
    }
  }
  return 0;
}

const INTEGRATION_VIEW_IDS: DashboardMainPanelContentView[] = [
  "ha",
  "ros2",
  "sdr",
];

export function DashboardSwipeLayout() {
  const location = useLocation();
  const navigate = useNavigate();
  const scrollRef = useRef<HTMLDivElement | null>(null);
  const syncingRef = useRef(false);
  const scrollEndTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
  const [containerWidth, setContainerWidth] = useState(0);

  const dashboards = useDynamicDashboardStore((s) => s.dashboards);
  const setActiveDashboard = useDynamicDashboardStore(
    (s) => s.setActiveDashboard,
  );
  const loadDashboards = useDynamicDashboardStore((s) => s.loadDashboards);
  const hasLoaded = useDynamicDashboardStore((s) => s.hasLoaded);
  const isLoading = useDynamicDashboardStore((s) => s.isLoading);

  const { isHaConnected, isRos2Connected, isSdrConnected, fetchStatus } =
    useIntegrationStore();

  const activeIntegrations = useMemo(() => {
    const flags = [isHaConnected, isRos2Connected, isSdrConnected];
    return INTEGRATION_VIEW_IDS.filter((_, i) => flags[i]);
  }, [isHaConnected, isRos2Connected, isSdrConnected]);

  const k = activeIntegrations.length;
  const n = dashboards.length;
  const lastIdx = maxPanelIndex(k, dashboards);

  const panelIndex = useMemo(
    () =>
      panelIndexFromPath(
        location.pathname,
        location.search,
        dashboards,
        activeIntegrations,
      ),
    [location.pathname, location.search, dashboards, activeIntegrations],
  );

  useEffect(() => {
    fetchStatus();
  }, [fetchStatus]);

  useEffect(() => {
    if (!hasLoaded && !isLoading) {
      loadDashboards();
    }
  }, [hasLoaded, isLoading, loadDashboards]);

  useEffect(() => {
    if (location.pathname !== "/dashboard") {
      return;
    }
    const view = new URLSearchParams(location.search).get("view") || "main";
    if (view === "main") {
      return;
    }
    const validIntegration = activeIntegrations.includes(
      view as DashboardMainPanelContentView,
    );
    if (!validIntegration) {
      navigate({ pathname: "/dashboard", search: "view=main" }, { replace: true });
    }
  }, [
    location.pathname,
    location.search,
    activeIntegrations,
    navigate,
  ]);

  useEffect(() => {
    if (!hasLoaded || isLoading) {
      return;
    }
    const m = location.pathname.match(/^\/dynamic-dashboard\/([^/]+)$/);
    if (!m || m[1] === "new") {
      return;
    }
    const exists = dashboards.some((d) => d.id === m[1]);
    if (!exists) {
      if (dashboards.length > 0) {
        navigate(`/dynamic-dashboard/${dashboards[0].id}`, { replace: true });
      } else {
        navigate("/dynamic-dashboard/new", { replace: true });
      }
    }
  }, [dashboards, hasLoaded, isLoading, location.pathname, navigate]);

  useEffect(() => {
    const m = location.pathname.match(/^\/dynamic-dashboard\/([^/]+)$/);
    if (m && m[1] !== "new") {
      setActiveDashboard(m[1]);
    }
  }, [location.pathname, setActiveDashboard]);

  useEffect(() => {
    const el = scrollRef.current;
    if (!el) return;

    const ro = new ResizeObserver((entries) => {
      const w = entries[0]?.contentRect.width;
      if (w && w > 0) {
        setContainerWidth(w);
      }
    });
    ro.observe(el);
    setContainerWidth(el.clientWidth);
    return () => ro.disconnect();
  }, []);

  useEffect(() => {
    const el = scrollRef.current;
    if (!el || containerWidth < 1) return;

    syncingRef.current = true;
    const target = panelIndex * containerWidth;
    el.scrollTo({ left: target, behavior: "auto" });

    const t = window.requestAnimationFrame(() => {
      syncingRef.current = false;
    });
    return () => window.cancelAnimationFrame(t);
  }, [panelIndex, containerWidth, location.pathname, location.search]);

  const resolveScrollToUrl = useCallback(() => {
    const el = scrollRef.current;
    if (!el || containerWidth < 1 || syncingRef.current) return;

    const idx = Math.round(el.scrollLeft / containerWidth);
    const clamped = Math.max(0, Math.min(lastIdx, idx));

    if (clamped === 0) {
      const viewParam = new URLSearchParams(location.search).get("view");
      const isMainView = viewParam === "main" || viewParam === null;
      if (location.pathname !== "/dashboard" || !isMainView) {
        navigate({ pathname: "/dashboard", search: "view=main" }, { replace: true });
      }
      return;
    }

    if (clamped >= 1 && clamped <= k) {
      const view = activeIntegrations[clamped - 1];
      const params = new URLSearchParams(location.search);
      if (
        location.pathname !== "/dashboard" ||
        params.get("view") !== view
      ) {
        navigate(
          { pathname: "/dashboard", search: `view=${view}` },
          { replace: true },
        );
      }
      return;
    }

    if (clamped === lastIdx) {
      if (location.pathname !== "/dynamic-dashboard/new") {
        navigate("/dynamic-dashboard/new", { replace: true });
      }
      return;
    }

    if (clamped >= k + 1 && clamped <= k + n) {
      const id = dashboards[clamped - k - 1]?.id;
      if (id && location.pathname !== `/dynamic-dashboard/${id}`) {
        navigate(`/dynamic-dashboard/${id}`, { replace: true });
      }
    }
  }, [
    activeIntegrations,
    containerWidth,
    dashboards,
    k,
    lastIdx,
    location.pathname,
    location.search,
    n,
    navigate,
  ]);

  useEffect(() => {
    const el = scrollRef.current;
    if (!el) return;

    const onScroll = () => {
      if (syncingRef.current) return;
      if (scrollEndTimerRef.current) {
        clearTimeout(scrollEndTimerRef.current);
      }
      scrollEndTimerRef.current = setTimeout(() => {
        resolveScrollToUrl();
      }, 40);
    };

    el.addEventListener("scroll", onScroll, { passive: true });
    return () => {
      el.removeEventListener("scroll", onScroll);
      if (scrollEndTimerRef.current) {
        clearTimeout(scrollEndTimerRef.current);
      }
    };
  }, [resolveScrollToUrl]);

  return (
    <WebRTCProvider>
      <SidebarProvider>
        <AppSidebar />
        <SidebarInset className='flex min-h-0 min-w-0 flex-1 flex-col overflow-x-hidden'>
          <DashboardSwipeHeader />
          <div
            ref={scrollRef}
            className='grid min-h-0 w-full max-w-full flex-1 basis-0 grid-flow-col auto-cols-[100%] grid-rows-[minmax(0,1fr)] snap-x snap-mandatory overflow-x-auto overflow-y-hidden overscroll-x-contain [scroll-behavior:auto]'
            style={{ WebkitOverflowScrolling: "touch" }}
          >
            <section
              className='box-border flex min-h-0 max-w-full min-w-0 snap-center snap-always flex-col overflow-hidden'
              aria-label='Main dashboard'
            >
              <DashboardMainPanel contentView='main' />
            </section>
            {activeIntegrations.map((view) => (
              <section
                key={view}
                className='box-border flex min-h-0 max-w-full min-w-0 snap-center snap-always flex-col overflow-hidden'
                aria-label={`Dashboard ${view}`}
              >
                <DashboardMainPanel contentView={view} />
              </section>
            ))}
            {dashboards.map((d) => (
              <section
                key={d.id}
                className='box-border flex min-h-0 max-w-full min-w-0 snap-center snap-always flex-col overflow-hidden'
                aria-label={`Dynamic dashboard ${d.name}`}
              >
                <DynamicDashboardMainPanel dashboardId={d.id} />
              </section>
            ))}
            <section
              className='box-border flex min-h-0 max-w-full min-w-0 snap-center snap-always flex-col overflow-hidden'
              aria-label='New dynamic dashboard'
            >
              <NewDynamicDashboardPanel />
            </section>
          </div>
          <Outlet />
          <Footer />
        </SidebarInset>
      </SidebarProvider>
    </WebRTCProvider>
  );
}


================================================
FILE: apps/client/src/features/device/DeviceCreateButton.tsx
================================================
import { useState } from "react";
import { useForm } from "react-hook-form";
import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogContent,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { PlusCircle } from "lucide-react";
import { DevicePayload } from "@/entities/device/types";
import { useDeviceStore } from "@/entities/device/store";

export function DeviceCreateButton() {
  const [isOpen, setIsOpen] = useState(false);
  const createDevice = useDeviceStore((state) => state.createDevice);
  const { register, handleSubmit, reset } = useForm<DevicePayload>();

  const onSubmit = async (data: DevicePayload) => {
    await createDevice(data);
    reset();
    setIsOpen(false);
  };

  return (
    <Dialog open={isOpen} onOpenChange={setIsOpen}>
      <DialogTrigger asChild>
        <Button size='sm'>
          <PlusCircle className='h-4 w-4 mr-2' />
          New Device
        </Button>
      </DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Create New Device</DialogTitle>
        </DialogHeader>
        <form onSubmit={handleSubmit(onSubmit)} className='space-y-4 py-2'>
          <div className='space-y-2'>
            <Label htmlFor='device_id'>Device ID</Label>
            <Input
              id='device_id'
              {...register("device_id", { required: true })}
            />
          </div>
          <div className='space-y-2'>
            <Label htmlFor='name'>Name</Label>
            <Input id='name' {...register("name")} />
          </div>
          <div className='space-y-2'>
            <Label htmlFor='manufacturer'>Manufacturer (optional)</Label>
            <Input id='manufacturer' {...register("manufacturer")} />
          </div>
          <div className='space-y-2'>
            <Label htmlFor='model'>Model (optional)</Label>
            <Input id='model' {...register("model")} />
          </div>
          <DialogFooter>
            <Button
              type='button'
              variant='outline'
              onClick={() => setIsOpen(false)}
            >
              Cancel
            </Button>
            <Button type='submit'>Save</Button>
          </DialogFooter>
        </form>
      </DialogContent>
    </Dialog>
  );
}


================================================
FILE: apps/client/src/features/device/DeviceDeleteButton.tsx
================================================
import { useState } from "react";
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/ui/alert-dialog";
import { Trash2 } from "lucide-react";
import { useDeviceStore } from "@/entities/device/store";
import { DropdownMenuItem } from "@/components/ui/dropdown-menu";
import { Button } from "@/components/ui/button";

interface Props {
  deviceId: number;
}

export function DeviceDeleteButton({ deviceId }: Props) {
  const [isOpen, setIsOpen] = useState(false);
  const deleteDevice = useDeviceStore((state) => state.deleteDevice);

  const handleDelete = async () => {
    await deleteDevice(deviceId);
    setIsOpen(false);
  };

  return (
    <AlertDialog open={isOpen} onOpenChange={setIsOpen}>
      <AlertDialogTrigger asChild>
        <DropdownMenuItem
          onSelect={(e) => e.preventDefault()}
          className='text-red-500 focus:text-red-500'
        >
          <Trash2 className='mr-2 h-4 w-4 text-red-500 focus:text-red-500' />
          <span>Delete</span>
        </DropdownMenuItem>
      </AlertDialogTrigger>
      <AlertDialogContent>
        <AlertDialogHeader>
          <AlertDialogTitle>Are you sure?</AlertDialogTitle>
          <AlertDialogDescription>
            This will permanently delete the device and all its entities.
          </AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter>
          <AlertDialogCancel>Cancel</AlertDialogCancel>
          <AlertDialogAction asChild>
            <Button variant={"destructive"} onClick={handleDelete}>
              Delete
            </Button>
          </AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  );
}


================================================
FILE: apps/client/src/features/device/DeviceKeyButton.tsx
================================================
import { useState } from "react";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";
import { Key } from "lucide-react";
import { DropdownMenuItem } from "@/components/ui/dropdown-menu";
import { DeviceTokenManager } from "@/features/device-token/DeviceTokenManager";

interface Props {
  deviceId: number;
}

export function DeviceKeyButton({ deviceId }: Props) {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <Dialog open={isOpen} onOpenChange={setIsOpen}>
      <DialogTrigger asChild>
        <DropdownMenuItem onSelect={(e) => e.preventDefault()}>
          <Key className='mr-2 h-4 w-4' />
          <span>Key</span>
        </DropdownMenuItem>
      </DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Access Token</DialogTitle>
          <DialogDescription>
            Manage the permanent access token for this device.
          </DialogDescription>
        </DialogHeader>
        <DeviceTokenManager deviceId={deviceId} />
      </DialogContent>
    </Dialog>
  );
}


================================================
FILE: apps/client/src/features/device/DeviceUpdateButton.tsx
================================================
import { useState } from "react";
import { useForm } from "react-hook-form";
import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogContent,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Pencil } from "lucide-react";
import { useDeviceStore } from "@/entities/device/store";
import { Device, DevicePayload } from "@/entities/device/types";
import { DropdownMenuItem } from "@/components/ui/dropdown-menu";

interface Props {
  device: Device;
}

export function DeviceUpdateButton({ device }: Props) {
  const [isOpen, setIsOpen] = useState(false);
  const updateDevice = useDeviceStore((state) => state.updateDevice);
  const { register, handleSubmit } = useForm<DevicePayload>({
    defaultValues: {
      device_id: device.device_id,
      name: device.name ?? "",
      manufacturer: device.manufacturer ?? "",
      model: device.model ?? "",
    },
  });

  const onSubmit = async (data: DevicePayload) => {
    await updateDevice(device.id, data);
    setIsOpen(false);
  };

  return (
    <Dialog open={isOpen} onOpenChange={setIsOpen}>
      <DialogTrigger asChild>
        <DropdownMenuItem onSelect={(e) => e.preventDefault()}>
          <Pencil className='mr-2 h-4 w-4' />
          <span>Edit</span>
        </DropdownMenuItem>
      </DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Edit Device</DialogTitle>
        </DialogHeader>
        <form onSubmit={handleSubmit(onSubmit)} className='space-y-4 py-2'>
          <div className='space-y-2'>
            <Label htmlFor='device_id_edit'>Device ID</Label>
            <Input
              id='device_id_edit'
              {...register("device_id", { required: true })}
            />
          </div>
          <div className='space-y-2'>
            <Label htmlFor='name_edit'>Name</Label>
            <Input id='name_edit' {...register("name")} />
          </div>
          <div className='space-y-2'>
            <Label htmlFor='manufacturer_edit'>Manufacturer</Label>
            <Input id='manufacturer_edit' {...register("manufacturer")} />
          </div>
          <div className='space-y-2'>
            <Label htmlFor='model_edit'>Model</Label>
            <Input id='model_edit' {...register("model")} />
          </div>
          <DialogFooter>
            <Button
              type='button'
              variant='outline'
              onClick={() => setIsOpen(false)}
            >
              Cancel
            </Button>
            <Button type='submit'>Save Changes</Button>
          </DialogFooter>
        </form>
      </DialogContent>
    </Dialog>
  );
}


================================================
FILE: apps/client/src/features/device-token/DeviceTokenManager.tsx
================================================
import { useEffect, useState } from "react";
import { Copy, Check, Key, AlertTriangle, RefreshCw } from "lucide-react";
import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
  DialogFooter,
} from "@/components/ui/dialog";
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/ui/alert-dialog";
import { Badge } from "@/components/ui/badge";
import { useDeviceTokenStore } from "@/entities/device-token/store";

interface Props {
  deviceId: number;
}

export function DeviceTokenManager({ deviceId }: Props) {
  const {
    tokenInfo,
    newToken,
    isLoading,
    fetchTokenInfo,
    issueToken,
    revokeToken,
    clearNewToken,
  } = useDeviceTokenStore();
  const [isCopied, setIsCopied] = useState(false);

  useEffect(() => {
    if (deviceId) {
      fetchTokenInfo(deviceId);
    }
  }, [deviceId, fetchTokenInfo]);

  const handleCopy = () => {
    if (!newToken) return;
    navigator.clipboard.writeText(newToken);
    setIsCopied(true);
    setTimeout(() => setIsCopied(false), 2000);
  };

  return (
    <>
      <div className='space-y-4'>
        {tokenInfo ? (
          <div className='flex items-center justify-between p-3 border'>
            <div>
              <p className='font-semibold'>Token is active</p>
              <p className='text-sm text-muted-foreground'>
                Created at: {new Date(tokenInfo.created_at).toLocaleString()}
              </p>
            </div>
            <div className='flex items-center gap-2'>
              <Button
                variant='outline'
                size='sm'
                onClick={() => issueToken(deviceId)}
                disabled={isLoading}
              >
                <RefreshCw className='mr-2 h-4 w-4' />
                Re-issue
              </Button>
              <AlertDialog>
                <AlertDialogTrigger asChild>
                  <Button
                    variant='destructive'
                    size='sm'
                    disabled={isLoading}
                  >
                    Revoke
                  </Button>
                </AlertDialogTrigger>
                <AlertDialogContent>
                  <AlertDialogHeader>
                    <AlertDialogTitle>Are you sure?</AlertDialogTitle>
                    <AlertDialogDescription>
                      This will permanently revoke the access token. The
                      device will no longer be able to connect.
                    </AlertDialogDescription>
                  </AlertDialogHeader>
                  <AlertDialogFooter>
                    <AlertDialogCancel>Cancel</AlertDialogCancel>
                    <AlertDialogAction onClick={() => revokeToken(deviceId)}>
                      Continue
                    </AlertDialogAction>
                  </AlertDialogFooter>
                </AlertDialogContent>
              </AlertDialog>
            </div>
          </div>
        ) : (
          <div className='flex items-center justify-between p-3 border bg-muted/50'>
            <div>
              <p className='font-semibold text-muted-foreground'>
                No active token
              </p>
              <p className='text-sm text-muted-foreground'>
                Issue a new token to allow this device to connect.
              </p>
            </div>
            <Button onClick={() => issueToken(deviceId)} disabled={isLoading}>
              <Key className='mr-2 h-4 w-4' />
              Issue Token
            </Button>
          </div>
        )}
      </div>

      <Dialog open={!!newToken} onOpenChange={() => clearNewToken()}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>New Access Token Generated</DialogTitle>
            <DialogDescription>
              <Badge variant='destructive' className='my-2'>
                <AlertTriangle className='mr-2 h-4 w-4' />
                Store this token securely. It will not be shown again.
              </Badge>
            </DialogDescription>
          </DialogHeader>
          <div className='relative my-4'>
            <pre className='p-4 bg-muted rounded-md font-mono text-sm break-all'>
              {newToken}
            </pre>
            <Button
              size='icon'
              variant='ghost'
              className='absolute top-2 right-2 h-8 w-8'
              onClick={handleCopy}
            >
              {isCopied ? (
                <Check className='h-4 w-4 text-green-500' />
              ) : (
                <Copy className='h-4 w-4' />
              )}
            </Button>
          </div>
          <DialogFooter>
            <Button onClick={() => clearNewToken()}>
              I have copied the token
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </>
  );
}


================================================
FILE: apps/client/src/features/dynamic-dashboard/GroupCanvas.tsx
================================================
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import type { PointerEvent as ReactPointerEvent } from "react";
import { toast } from "sonner";
import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";
import { resolveItemPositionOrNull } from "@/entities/dynamic-dashboard/layoutResolve";
import {
  DashboardGroup,
  DashboardItem,
  useDynamicDashboardStore,
} from "@/entities/dynamic-dashboard/store";
import { EntityAll } from "@/entities/entity/types";
import { StreamState } from "@/features/entity/useEntitiesData";
import { EntityCard } from "@/features/entity/Card";
import { StreamReceiver } from "@/features/rtc/StreamReceiver";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSub,
  DropdownMenuSubContent,
  DropdownMenuSubTrigger,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Plus, X } from "lucide-react";
import { useSidebar } from "@/components/ui/sidebar";
import { useFlowStore } from "@/entities/flow/store";
import { useMapDataStore } from "@/entities/map/store";
import { MapPanel } from "./panels/MapPanel";
import { FlowPanel } from "./panels/FlowPanel";
import { useWebSocket } from "@/features/ws/WebSocketProvider";
import { getFlowRunSessionId } from "@/features/ws/ws";
import { createDashboardEventDispatcher } from "./events/dispatcher";
import { isValidListenerId } from "@/entities/dynamic-dashboard/interaction";

const isMapItem = (
  candidate: DashboardItem,
): candidate is DashboardItem<"map"> => candidate.type === "map";

const isFlowItem = (
  candidate: DashboardItem,
): candidate is DashboardItem<"flow"> => candidate.type === "flow";

const isButtonItem = (
  candidate: DashboardItem,
): candidate is DashboardItem<"button"> => candidate.type === "button";

const MOBILE_ROW_UNIT_PX = 28;

/** Viewport Y (px): show delete drop target while dragging above this line. */
const DRAG_DELETE_SHOW_MAX_CLIENT_Y = 100;

/** Fixed delete chip below app header (~h-12). */
const DRAG_DELETE_TARGET_TOP = "3.5rem";

/** Spring for smooth magnet-snap motion — near-critical damping for minimal overshoot. */
const DRAG_SPRING_STIFFNESS = 400;
const DRAG_SPRING_DAMPING = 40;

type Vec2 = { x: number; y: number };

type DragSpringSim = {
  px: number;
  py: number;
  vx: number;
  vy: number;
};

/** Clamp span so position + span stays within the grid (CSS grid 1×1…N tracks). */
function clampGridSpan(position: number, span: number, limit: number): number {
  const maxSpan = Math.max(1, limit - position);
  return Math.max(1, Math.min(span, maxSpan));
}

/** Session data for an active drag (stable across preview updates → effect does not rebind on each cell). */
type DragSessionState = {
  itemId: string;
  startX: number;
  startY: number;
  origin: { x: number; y: number };
};

/** Which edge/corner is being dragged for frame resize. */
type ResizeEdge = "n" | "s" | "e" | "w" | "ne" | "nw" | "se" | "sw";

type ResizeState = {
  itemId: string;
  startX: number;
  startY: number;
  originSize: { w: number; h: number };
  originPos: { x: number; y: number };
  minSize: { w: number; h: number };
  edge: ResizeEdge;
};

const FRAME_STRIP_CLASS =
  "absolute z-[25] touch-none border-0 bg-transparent p-0";

function resizeCursorForEdge(edge: ResizeEdge): string {
  switch (edge) {
    case "n":
    case "s":
      return "ns-resize";
    case "e":
    case "w":
      return "ew-resize";
    case "ne":
    case "sw":
      return "nesw-resize";
    case "nw":
    case "se":
      return "nwse-resize";
    default:
      return "default";
  }
}

function startResize(
  event: ReactPointerEvent<Element>,
  item: DashboardItem,
  edge: ResizeEdge,
  clearDrag: () => void,
  setResizing: (v: ResizeState | null) => void,
) {
  event.preventDefault();
  event.stopPropagation();
  clearDrag();
  setResizing({
    itemId: item.id,
    startX: event.clientX,
    startY: event.clientY,
    originSize: { ...item.size },
    originPos: { ...item.position },
    minSize: { ...item.minSize },
    edge,
  });
}

type GroupCanvasProps = {
  dashboardId: string;
  group: DashboardGroup;
  entities: EntityAll[];
  streamsState: StreamState[];
};

export function GroupCanvas({
  dashboardId,
  group,
  entities,
  streamsState,
}: GroupCanvasProps) {
  const { isMobile } = useSidebar();
  const addItem = useDynamicDashboardStore((state) => state.addItem);
  const updateItemLayout = useDynamicDashboardStore(
    (state) => state.updateItemLayout,
  );
  const updateItemData = useDynamicDashboardStore(
    (state) => state.updateItemData,
  );
  const deleteItem = useDynamicDashboardStore((state) => state.deleteItem);
  const { layers, fetchAllLayers } = useMapDataStore();
  const { flows, fetchFlows } = useFlowStore();
  const { wsManager } = useWebSocket();

  const dashboardDispatcher = useMemo(
    () =>
      createDashboardEventDispatcher({
        send: (msg) => wsManager?.send(msg),
        isConnected: () => wsManager?.isConnected() ?? false,
      }),
    [wsManager],
  );

  const [dragSession, setDragSession] = useState<DragSessionState | null>(null);
  const dragPreviewRef = useRef<{ x: number; y: number } | null>(null);
  const dragSpringTargetRef = useRef<Vec2>({ x: 0, y: 0 });
  const [resizing, setResizing] = useState<ResizeState | null>(null);
  const [dragNearTopForDelete, setDragNearTopForDelete] = useState(false);
  const [dragOverDeleteTarget, setDragOverDeleteTarget] = useState(false);
  const containerRef = useRef<HTMLDivElement | null>(null);
  const deleteDropTargetRef = useRef<HTMLDivElement | null>(null);
  const [editingButtonItem, setEditingButtonItem] =
    useState<DashboardItem<"button"> | null>(null);

  const dragSpringSimRef = useRef<DragSpringSim>({
    px: 0,
    py: 0,
    vx: 0,
    vy: 0,
  });
  const dragSpringRafRef = useRef<number | null>(null);
  const dragSpringLastTRef = useRef<number | null>(null);
  const [dragSpringVisual, setDragSpringVisual] = useState<Vec2>({
    x: 0,
    y: 0,
  });
  const resetDragSpring = useCallback(() => {
    if (dragSpringRafRef.current != null) {
      cancelAnimationFrame(dragSpringRafRef.current);
      dragSpringRafRef.current = null;
    }
    dragSpringLastTRef.current = null;
    dragSpringSimRef.current = { px: 0, py: 0, vx: 0, vy: 0 };
    setDragSpringVisual({ x: 0, y: 0 });
  }, []);

  const ensureDragSpringLoop = useCallback(() => {
    if (dragSpringRafRef.current != null) return;
    dragSpringLastTRef.current = performance.now();

    const tick = (now: number) => {
      const last = dragSpringLastTRef.current ?? now;
      const dt = Math.min((now - last) / 1000, 0.064);
      dragSpringLastTRef.current = now;

      const s = dragSpringSimRef.current;
      const t = dragSpringTargetRef.current;
      const k = DRAG_SPRING_STIFFNESS;
      const c = DRAG_SPRING_DAMPING;
      const errX = s.px - t.x;
      const errY = s.py - t.y;
      const ax = -k * errX - c * s.vx;
      const ay = -k * errY - c * s.vy;
      s.vx += ax * dt;
      s.vy += ay * dt;
      s.px += s.vx * dt;
      s.py += s.vy * dt;

      setDragSpringVisual({ x: s.px, y: s.py });

      const settled =
        Math.abs(errX) < 0.4 &&
        Math.abs(errY) < 0.4 &&
        Math.abs(s.vx) < 8 &&
        Math.abs(s.vy) < 8;

      if (settled) {
        s.px = t.x;
        s.py = t.y;
        s.vx = s.vy = 0;
        setDragSpringVisual({ x: t.x, y: t.y });
        dragSpringRafRef.current = null;
        dragSpringLastTRef.current = null;
        return;
      }

      dragSpringRafRef.current = requestAnimationFrame(tick);
    };

    dragSpringRafRef.current = requestAnimationFrame(tick);
  }, []);

  const clearDrag = useCallback(() => {
    resetDragSpring();
    dragSpringTargetRef.current = { x: 0, y: 0 };
    setDragSession(null);
    dragPreviewRef.current = null;
    setDragNearTopForDelete(false);
    setDragOverDeleteTarget(false);
  }, [resetDragSpring]);

  useEffect(() => {
    return () => {
      if (dragSpringRafRef.current != null) {
        cancelAnimationFrame(dragSpringRafRef.current);
      }
    };
  }, []);

  const cols = Math.max(1, group.cols);
  const rows = Math.max(1, group.rows);

  const findEntityByRef = (refId?: string) => {
    if (!refId) return undefined;
    return (
      entities.find((e) => e.entity_id === refId) ||
      entities.find((e) => String(e.id) === refId)
    );
  };

  useEffect(() => {
    if (!dragSession) {
      setDragNearTopForDelete(false);
      setDragOverDeleteTarget(false);
    }
  }, [dragSession]);

  useEffect(() => {
    if (layers.length === 0) {
      fetchAllLayers().catch((err) => {
        console.error("Failed to load layers for dashboard", err);
      });
    }
    if (flows.length === 0) {
      fetchFlows().catch((err) => {
        console.error("Failed to load flows for dashboard", err);
      });
    }
  }, [fetchAllLayers, fetchFlows, flows.length, layers.length]);

  useEffect(() => {
    if (!dragSession) {
      return;
    }

    const handleMove = (event: PointerEvent) => {
      const nearTop = event.clientY < DRAG_DELETE_SHOW_MAX_CLIENT_Y;
      setDragNearTopForDelete((prev) => (prev === nearTop ? prev : nearTop));

      let overDelete = false;
      const targetEl = deleteDropTargetRef.current;
      if (targetEl && nearTop) {
        const tr = targetEl.getBoundingClientRect();
        overDelete =
          event.clientX >= tr.left &&
          event.clientX <= tr.right &&
          event.clientY >= tr.top &&
          event.clientY <= tr.bottom;
      }
      setDragOverDeleteTarget((prev) =>
        prev === overDelete ? prev : overDelete,
      );

      if (overDelete) {
        return;
      }

      const el = containerRef.current;
      if (!el) return;
      const rect = el.getBoundingClientRect();
      const cellW = rect.width / cols;
      const cellH = rect.height / rows;
      if (cellW < 1e-6 || cellH < 1e-6) return;

      const dx = Math.round((event.clientX - dragSession.startX) / cellW);
      const dy = Math.round((event.clientY - dragSession.startY) / cellH);

      const desired = {
        x: dragSession.origin.x + dx,
        y: dragSession.origin.y + dy,
      };

      const dash = useDynamicDashboardStore
        .getState()
        .dashboards.find((d) => d.id === dashboardId);
      const g = dash?.groups.find((gr) => gr.id === group.id);
      const movingItem = g?.items.find((it) => it.id === dragSession.itemId);
      if (!g || !movingItem) return;

      const resolved = resolveItemPositionOrNull(g, movingItem, desired);
      if (!resolved) {
        return;
      }

      const prev = dragPreviewRef.current ?? dragSession.origin;
      if (prev.x === resolved.x && prev.y === resolved.y) {
        return;
      }

      dragPreviewRef.current = resolved;
      dragSpringTargetRef.current = {
        x: (resolved.x - dragSession.origin.x) * cellW,
        y: (resolved.y - dragSession.origin.y) * cellH,
      };
      ensureDragSpringLoop();
    };

    const handleUp = (event: PointerEvent) => {
      const session = dragSession;
      const finalPreview = dragPreviewRef.current;

      const targetEl = deleteDropTargetRef.current;
      let droppedOnDelete = false;
      if (targetEl && session) {
        const tr = targetEl.getBoundingClientRect();
        droppedOnDelete =
          event.clientX >= tr.left &&
          event.clientX <= tr.right &&
          event.clientY >= tr.top &&
          event.clientY <= tr.bottom;
      }

      if (droppedOnDelete && session) {
        deleteItem(dashboardId, group.id, session.itemId);
        clearDrag();
        return;
      }

      if (session && finalPreview) {
        const stored = useDynamicDashboardStore
          .getState()
          .dashboards.find((d) => d.id === dashboardId)
          ?.groups.find((gr) => gr.id === group.id)
          ?.items.find((it) => it.id === session.itemId);
        if (
          stored &&
          (stored.position.x !== finalPreview.x ||
            stored.position.y !== finalPreview.y)
        ) {
          updateItemLayout(dashboardId, group.id, session.itemId, {
            position: finalPreview,
          });
        }
      }

      clearDrag();
    };

    window.addEventListener("pointermove", handleMove);
    window.addEventListener("pointerup", handleUp);
    window.addEventListener("pointercancel", handleUp);

    return () => {
      window.removeEventListener("pointermove", handleMove);
      window.removeEventListener("pointerup", handleUp);
      window.removeEventListener("pointercancel", handleUp);
    };
  }, [
    clearDrag,
    cols,
    dashboardId,
    deleteItem,
    dragSession,
    ensureDragSpringLoop,
    group.id,
    rows,
    updateItemLayout,
  ]);

  useEffect(() => {
    if (!resizing) {
      return;
    }

    const handleMove = (event: PointerEvent) => {
      const el = containerRef.current;
      if (!el) return;
      const rect = el.getBoundingClientRect();
      const cellW = rect.width / cols;
      const cellH = rect.height / rows;
      if (cellW < 1e-6 || cellH < 1e-6) return;

      const dw = Math.round((event.clientX - resizing.startX) / cellW);
      const dh = Math.round((event.clientY - resizing.startY) / cellH);

      const { originPos, originSize, minSize, edge } = resizing;
      let nextX = originPos.x;
      let nextY = originPos.y;
      let nextW = originSize.w;
      let nextH = originSize.h;

      const maxGrowW = cols - originPos.x;
      const maxGrowH = rows - originPos.y;
      const rightEdge = originPos.x + originSize.w;
      const bottomEdge = originPos.y + originSize.h;

      switch (edge) {
        case "se": {
          nextW = Math.max(minSize.w, Math.min(maxGrowW, originSize.w + dw));
          nextH = Math.max(minSize.h, Math.min(maxGrowH, originSize.h + dh));
          break;
        }
        case "e": {
          nextW = Math.max(minSize.w, Math.min(maxGrowW, originSize.w + dw));
          break;
        }
        case "s": {
          nextH = Math.max(minSize.h, Math.min(maxGrowH, originSize.h + dh));
          break;
        }
        case "w": {
          let x = originPos.x + dw;
          x = Math.max(0, x);
          x = Math.min(x, rightEdge - minSize.w);
          nextW = rightEdge - x;
          nextX = x;
          break;
        }
        case "n": {
          let y = originPos.y + dh;
          y = Math.max(0, y);
          y = Math.min(y, bottomEdge - minSize.h);
          nextH = bottomEdge - y;
          nextY = y;
          break;
        }
        case "ne": {
          nextW = Math.max(minSize.w, Math.min(maxGrowW, originSize.w + dw));
          let y = originPos.y + dh;
          y = Math.max(0, y);
          y = Math.min(y, bottomEdge - minSize.h);
          nextH = bottomEdge - y;
          nextY = y;
          break;
        }
        case "nw": {
          let x = originPos.x + dw;
          x = Math.max(0, x);
          x = Math.min(x, rightEdge - minSize.w);
          nextW = rightEdge - x;
          nextX = x;
          let y = originPos.y + dh;
          y = Math.max(0, y);
          y = Math.min(y, bottomEdge - minSize.h);
          nextH = bottomEdge - y;
          nextY = y;
          break;
        }
        case "sw": {
          let x = originPos.x + dw;
          x = Math.max(0, x);
          x = Math.min(x, rightEdge - minSize.w);
          nextW = rightEdge - x;
          nextX = x;
          nextH = Math.max(minSize.h, Math.min(maxGrowH, originSize.h + dh));
          break;
        }
        default:
          break;
      }

      updateItemLayout(dashboardId, group.id, resizing.itemId, {
        position: { x: nextX, y: nextY },
        size: { w: nextW, h: nextH },
      });
    };

    const handleUp = () => {
      setResizing(null);
    };

    window.addEventListener("pointermove", handleMove);
    window.addEventListener("pointerup", handleUp);
    window.addEventListener("pointercancel", handleUp);

    return () => {
      window.removeEventListener("pointermove", handleMove);
      window.removeEventListener("pointerup", handleUp);
      window.removeEventListener("pointercancel", handleUp);
    };
  }, [cols, dashboardId, group.id, resizing, rows, updateItemLayout]);

  const handleAddEntityCard = (entityId?: string) => {
    if (!entityId) return;
    addItem(dashboardId, group.id, {
      type: "entity-card",
      refId: entityId,
      label: "Entity",
    });
  };

  // const handleAddEntityText = (entityId?: string) => {
  //   if (!entityId) return;
  //   addItem(dashboardId, group.id, {
  //     type: "entity-text",
  //     refId: entityId,
  //     label: "Entity Text",
  //   });
  // };

  // const handleAddMedia = (entityId?: string) => {
  //   if (!entityId) return;
  //   addItem(dashboardId, group.id, {
  //     type: "media",
  //     refId: entityId,
  //     label: "Media",
  //   });
  // };

  const handleAddButton = () => {
    addItem(dashboardId, group.id, {
      type: "button",
      label: "Action",
      data: {},
    });
  };

  const handleAddMapPanel = (layerId: number) => {
    addItem(dashboardId, group.id, {
      type: "map",
      label: "Map",
      data: { layerId },
    });
  };

  const handleAddFlowPanel = (flowId: number) => {
    addItem(dashboardId, group.id, {
      type: "flow",
      label: "Flow",
      data: { flowId },
    });
  };

  const renderItem = (item: DashboardItem) => {
    if (item.type === "entity-card") {
      const entity = findEntityByRef(item.refId);
      if (!entity) {
        return <Placeholder text='Entity not found' />;
      }
      return <EntityCard item={entity} streamsState={streamsState} />;
    }

    if (item.type === "entity-text") {
      const entity = findEntityByRef(item.refId);
      if (!entity) {
        return <Placeholder text='Entity not found' />;
      }
      return (
        <div className='flex h-full flex-col justify-between'>
          <div>
            <p className='text-sm text-muted-foreground'>
              {entity.friendly_name}
            </p>
            <p className='text-3xl font-semibold'>
              {entity.state?.state ?? "N/A"}
            </p>
          </div>
          <p className='text-xs text-muted-foreground'>{entity.platform}</p>
        </div>
      );
    }

    if (item.type === "media") {
      const entity = findEntityByRef(item.refId);
      const topic =
        (entity?.configuration?.state_topic as string) ||
        (entity?.configuration?.rtsp_url as string);

      if (!topic) {
        return <Placeholder text='No stream topic' />;
      }

      return (
        <div className='h-full w-full'>
          <StreamReceiver topic={topic} streamType='video' />
        </div>
      );
    }

    if (isButtonItem(item)) {
      const listenerId = item.data?.listener_id?.trim() ?? "";
      const handleButtonClick = () => {
        if (!listenerId || !isValidListenerId(listenerId)) {
          toast.message("Configure the button", {
            description: "Set a listener id (letters, numbers, _ and - only).",
          });
          return;
        }
        dashboardDispatcher.dispatch({
          dashboard_id: dashboardId,
          group_id: group.id,
          item_id: item.id,
          listener_id: listenerId,
          component_type: "button",
          action: "click",
          source_session_id: getFlowRunSessionId(),
          debounce_ms: item.data?.debounce_ms,
          cooldown_ms: item.data?.cooldown_ms,
        });
      };

      return (
        <div className='pointer-events-auto flex h-full min-h-0 w-full flex-col gap-2'>
          <div className='flex min-h-0 flex-1 items-stretch justify-center'>
            <Button
              className='h-full w-full'
              variant='outline'
              type='button'
              onClick={handleButtonClick}
            >
              {item.label || "Action"}
            </Button>
          </div>
        </div>
      );
    }

    if (isMapItem(item)) {
      return (
        <div className='pointer-events-auto flex h-full min-h-0 w-full flex-col'>
          <MapPanel
            data={item.data}
            onLayerChange={(layerId) =>
              updateItemData(dashboardId, group.id, item.id, {
                data: { ...(item.data ?? {}), layerId },
              })
            }
          />
        </div>
      );
    }

    if (isFlowItem(item)) {
      return (
        <div className='pointer-events-auto flex h-full min-h-0 w-full flex-col'>
          <FlowPanel
            data={item.data}
            onFlowChange={(flowId) =>
              updateItemData(dashboardId, group.id, item.id, {
                data: { ...(item.data ?? {}), flowId },
              })
            }
          />
        </div>
      );
    }

    return <Placeholder text='Unknown item' />;
  };

  const groupToolbar = (
    <div className='mb-3 flex flex-wrap items-center justify-between gap-2'>
      <div className='flex items-center gap-2 px-4'></div>
      <div className='flex flex-wrap items-center gap-2 px-4'>
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <Button variant='outline' size='sm'>
              <Plus className='h-4 w-4 mr-1' />
              Add Item
            </Button>
          </DropdownMenuTrigger>
          <DropdownMenuContent align='end'>
            <DropdownMenuSub>
              <DropdownMenuSubTrigger>Add Entity</DropdownMenuSubTrigger>
              <DropdownMenuSubContent>
                {entities.map((entity) => (
                  <DropdownMenuItem
                    key={entity.id}
                    onClick={() => handleAddEntityCard(entity.entity_id)}
                  >
                    {entity.friendly_name}
                  </DropdownMenuItem>
                ))}
              </DropdownMenuSubContent>
            </DropdownMenuSub>
            <DropdownMenuItem onClick={handleAddButton}>
              Add Button
            </DropdownMenuItem>
            <DropdownMenuSub>
              <DropdownMenuSubTrigger disabled={layers.length === 0}>
                Add Map
              </DropdownMenuSubTrigger>
              <DropdownMenuSubContent>
                {layers.map((layer) => (
                  <DropdownMenuItem
                    key={layer.id}
                    onClick={() => handleAddMapPanel(layer.id)}
                  >
                    {layer.name}
                  </DropdownMenuItem>
                ))}
              </DropdownMenuSubContent>
            </DropdownMenuSub>
            <DropdownMenuSub>
              <DropdownMenuSubTrigger disabled={flows.length === 0}>
                Add Flow
              </DropdownMenuSubTrigger>
              <DropdownMenuSubContent>
                {flows.map((flow) => (
                  <DropdownMenuItem
                    key={flow.id}
                    onClick={() => handleAddFlowPanel(flow.id)}
                  >
                    {flow.name}
                  </DropdownMenuItem>
                ))}
              </DropdownMenuSubContent>
            </DropdownMenuSub>
          </DropdownMenuContent>
        </DropdownMenu>
      </div>
    </div>
  );

  if (isMobile) {
    return (
      <Card className='flex flex-col border-0 py-4'>
        {groupToolbar}
        <div className='flex flex-col gap-3 px-4'>
          {group.items.map((item) => (
            <div
              key={item.id}
              className='relative overflow-hidden rounded-lg border bg-card shadow-sm'
              style={{
                minHeight: Math.max(120, item.size.h * MOBILE_ROW_UNIT_PX),
              }}
            >
              <div className='flex h-full min-h-0 flex-col p-2'>
                {renderItem(item)}
              </div>
            </div>
          ))}
        </div>
      </Card>
    );
  }

  return (
    <Card className='flex h-full min-h-0 flex-col border-0 py-4'>
      {groupToolbar}

      <div className='flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden'>
        <div
          ref={containerRef}
          className='grid h-full min-h-0 w-full min-w-0 flex-1 overflow-hidden bg-background'
          style={{
            gridTemplateColumns: `repeat(${cols}, minmax(0, 1fr))`,
            gridTemplateRows: `repeat(${rows}, minmax(0, 1fr))`,
            backgroundImage:
              "linear-gradient(to right, rgba(0,0,0,0.08) 1px, transparent 1px), linear-gradient(to bottom, rgba(0,0,0,0.08) 1px, transparent 1px)",
            backgroundSize: `calc(100% / ${cols}) calc(100% / ${rows})`,
          }}
        >
          {group.items.map((item) => {
            const isMoveDragging = dragSession?.itemId === item.id;
            const displayPos = isMoveDragging
              ? dragSession.origin
              : item.position;
            const spanW = clampGridSpan(displayPos.x, item.size.w, cols);
            const spanH = clampGridSpan(displayPos.y, item.size.h, rows);
            const activeResizeEdge =
              resizing?.itemId === item.id ? resizing.edge : null;
            const springFollows = isMoveDragging;
            return (
              <div
                key={item.id}
                className='relative min-h-0 min-w-0 overflow-hidden bg-card shadow-sm'
                style={{
                  gridColumn: `${displayPos.x + 1} / span ${spanW}`,
                  gridRow: `${displayPos.y + 1} / span ${spanH}`,
                  cursor: activeResizeEdge
                    ? resizeCursorForEdge(activeResizeEdge)
                    : "default",
                  transform: springFollows
                    ? `translate3d(${dragSpringVisual.x}px, ${dragSpringVisual.y}px, 0)`
                    : undefined,
                  zIndex: springFollows ? 80 : undefined,
                  willChange: springFollows ? "transform" : undefined,
                }}
              >
                <div className='group/movehit pointer-events-auto absolute inset-x-0 top-2 z-[36] h-3'>
                  <button
                    type='button'
                    aria-label={`Move ${item.label || item.type}`}
                    className='pointer-events-none absolute left-1/2 top-1 z-[37] h-2 w-14 shrink-0 -translate-x-1/2 cursor-grab touch-none rounded-full bg-white opacity-0 shadow-sm transition-opacity duration-200 group-hover/movehit:pointer-events-auto group-hover/movehit:opacity-100 active:cursor-grabbing'
                    onDoubleClick={(event) => {
                      event.preventDefault();
                      event.stopPropagation();
                      if (isButtonItem(item)) {
                        setEditingButtonItem(item);
                      }
                    }}
                    onPointerDown={(event) => {
                      event.preventDefault();
                      event.stopPropagation();
                      setResizing(null);
                      resetDragSpring();
                      setDragNearTopForDelete(false);
                      setDragOverDeleteTarget(false);
                      const origin = { ...item.position };
                      dragPreviewRef.current = origin;
                      dragSpringTargetRef.current = { x: 0, y: 0 };
                      setDragSession({
                        itemId: item.id,
                        startX: event.clientX,
                        startY: event.clientY,
                        origin,
                      });
                    }}
                  />
                </div>

                <button
                  type='button'
                  aria-label='Resize from top edge'
                  className={`${FRAME_STRIP_CLASS} left-2 right-2 top-0 h-2 cursor-ns-resize`}
                  onPointerDown={(e) =>
                    startResize(e, item, "n", clearDrag, setResizing)
                  }
                />
                <button
                  type='button'
                  aria-label='Resize from bottom edge'
                  className={`${FRAME_STRIP_CLASS} bottom-0 left-2 right-2 h-2 cursor-ns-resize`}
                  onPointerDown={(e) =>
                    startResize(e, item, "s", clearDrag, setResizing)
                  }
                />
                <button
                  type='button'
                  aria-label='Resize from left edge'
                  className={`${FRAME_STRIP_CLASS} bottom-2 left-0 top-2 w-2 cursor-ew-resize`}
                  onPointerDown={(e) =>
                    startResize(e, item, "w", clearDrag, setResizing)
                  }
                />
                <button
                  type='button'
                  aria-label='Resize from right edge'
                  className={`${FRAME_STRIP_CLASS} bottom-2 right-0 top-2 w-2 cursor-ew-resize`}
                  onPointerDown={(e) =>
                    startResize(e, item, "e", clearDrag, setResizing)
                  }
                />
                <button
                  type='button'
                  aria-label='Resize from top-left'
                  className={`${FRAME_STRIP_CLASS} left-0 top-0 h-3 w-3 cursor-nwse-resize`}
                  onPointerDown={(e) =>
                    startResize(e, item, "nw", clearDrag, setResizing)
                  }
                />
                <button
                  type='button'
                  aria-label='Resize from top-right'
                  className={`${FRAME_STRIP_CLASS} right-0 top-0 h-3 w-3 cursor-nesw-resize`}
                  onPointerDown={(e) =>
                    startResize(e, item, "ne", clearDrag, setResizing)
                  }
                />
                <button
                  type='button'
                  aria-label='Resize from bottom-left'
                  className={`${FRAME_STRIP_CLASS} bottom-0 left-0 h-3 w-3 cursor-nesw-resize`}
                  onPointerDown={(e) =>
                    startResize(e, item, "sw", clearDrag, setResizing)
                  }
                />
                <button
                  type='button'
                  aria-label='Resize from bottom-right'
                  className={`${FRAME_STRIP_CLASS} bottom-0 right-0 h-3 w-3 cursor-nwse-resize`}
                  onPointerDown={(e) =>
                    startResize(e, item, "se", clearDrag, setResizing)
                  }
                />

                <div className='relative z-0 flex h-full min-h-0 flex-col p-2'>
                  {renderItem(item)}
                </div>
              </div>
            );
          })}
        </div>
      </div>

      {dragSession && dragNearTopForDelete ? (
        <div
          ref={deleteDropTargetRef}
          className={`pointer-events-none fixed left-1/2 z-[300] flex h-14 w-14 -translate-x-1/2 items-center justify-center rounded-full bg-dark transition-[transform,box-shadow] ${
            dragOverDeleteTarget ? "scale-110" : "scale-100"
          } `}
          style={{ top: DRAG_DELETE_TARGET_TOP }}
          aria-hidden
        >
          <X className='h-7 w-7 text-white' strokeWidth={2.25} />
        </div>
      ) : null}

      <Dialog
        open={editingButtonItem !== null}
        onOpenChange={(open) => {
          if (!open) setEditingButtonItem(null);
        }}
      >
        <DialogContent className='sm:max-w-md'>
          <DialogHeader>
            <DialogTitle>Edit Button</DialogTitle>
          </DialogHeader>
          {editingButtonItem && (
            <ButtonConfigEditor
              item={editingButtonItem}
              onSave={(data) => {
                updateItemData(dashboardId, group.id, editingButtonItem.id, {
                  data,
                  label: data.label,
                });
                setEditingButtonItem(null);
              }}
            />
          )}
        </DialogContent>
      </Dialog>
    </Card>
  );
}

type ButtonConfigEditorProps = {
  item: DashboardItem<"button">;
  onSave: (data: { listener_id?: string; label?: string }) => void;
};

function ButtonConfigEditor({ item, onSave }: ButtonConfigEditorProps) {
  const [listenerId, setListenerId] = useState(item.data?.listener_id ?? "");
  const [label, setLabel] = useState(item.label ?? "");

  const handleSave = () => {
    const trimmedId = listenerId.trim();
    if (trimmedId && !isValidListenerId(trimmedId)) {
      toast.error("Invalid listener ID", {
        description: "Use only letters, numbers, _ and -",
      });
      return;
    }
    onSave({
      listener_id: trimmedId || undefined,
      label: label.trim() || undefined,
    });
  };

  return (
    <div className='flex flex-col gap-4'>
      <div className='grid gap-2'>
        <Label htmlFor='button-label'>Label</Label>
        <Input
          id='button-label'
          value={label}
          placeholder='Button text'
          onChange={(e) => setLabel(e.target.value)}
        />
      </div>
      <div className='grid gap-2'>
        <Label htmlFor='listener-id'>Listener ID</Label>
        <Input
          id='listener-id'
          className='font-mono'
          value={listenerId}
          placeholder='e.g. lights-toggle'
          onChange={(e) => setListenerId(e.target.value)}
        />
      </div>
      <Button onClick={handleSave}>Save</Button>
    </div>
  );
}

function Placeholder({ text }: { text: string }) {
  return (
    <div className='flex h-full items-center justify-center border border-dashed text-xs text-muted-foreground'>
      {text}
    </div>
  );
}


================================================
FILE: apps/client/src/features/dynamic-dashboard/events/dispatcher.test.ts
================================================
import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
import { createDashboardEventDispatcher } from "./dispatcher";
import { DASHBOARD_COMPONENT_EVENT_VERSION } from "@/entities/dynamic-dashboard/interaction";

describe("createDashboardEventDispatcher", () => {
  const baseCtx = {
    dashboard_id: "d1",
    group_id: "g1",
    item_id: "i1",
    listener_id: "btn-a",
    component_type: "button" as const,
    action: "click" as const,
    source_session_id: "sess-1",
  };

  beforeEach(() => {
    vi.useFakeTimers({ toFake: ["Date"] });
  });

  afterEach(() => {
    vi.useRealTimers();
  });

  it("sends dashboard_component_event v2 with listener_id", () => {
    const send = vi.fn();
    const d = createDashboardEventDispatcher({
      send,
      isConnected: () => true,
    });
    d.dispatch(baseCtx);
    expect(send).toHaveBeenCalledTimes(1);
    const msg = send.mock.calls[0][0] as {
      type: string;
      payload: {
        event_version: number;
        listener_id: string;
      };
    };
    expect(msg.type).toBe("dashboard_component_event");
    expect(msg.payload.event_version).toBe(DASHBOARD_COMPONENT_EVENT_VERSION);
    expect(msg.payload.listener_id).toBe("btn-a");
  });

  it("does not send when disconnected", () => {
    const send = vi.fn();
    const d = createDashboardEventDispatcher({
      send,
      isConnected: () => false,
    });
    d.dispatch(baseCtx);
    expect(send).not.toHaveBeenCalled();
  });

  it("enforces cooldown between same listener+item+action", () => {
    const send = vi.fn();
    const d = createDashboardEventDispatcher({
      send,
      isConnected: () => true,
    });
    const t0 = new Date("2024-01-01T00:00:00.000Z").getTime();
    vi.setSystemTime(t0);
    d.dispatch({ ...baseCtx, cooldown_ms: 500 });
    d.dispatch({ ...baseCtx, cooldown_ms: 500 });
    expect(send).toHaveBeenCalledTimes(1);
    vi.setSystemTime(t0 + 600);
    d.dispatch({ ...baseCtx, cooldown_ms: 500 });
    expect(send).toHaveBeenCalledTimes(2);
  });
});


================================================
FILE: apps/client/src/features/dynamic-dashboard/events/dispatcher.ts
================================================
import {
  DASHBOARD_COMPONENT_EVENT_VERSION,
  type DashboardComponentEventPayload,
  type DashboardComponentAction,
  type DashboardComponentType,
} from "@/entities/dynamic-dashboard/interaction";
import type { WebSocketMessage } from "@/features/ws/ws";

export const DEFAULT_DASHBOARD_COOLDOWN_MS = 320;
export const MIN_DASHBOARD_COOLDOWN_MS = 100;

const createEventId = () =>
  typeof crypto !== "undefined" && "randomUUID" in crypto
    ? crypto.randomUUID()
    : `evt_${Date.now()}_${Math.random().toString(36).slice(2)}`;

export type DashboardEventDispatchContext = {
  dashboard_id: string;
  group_id: string;
  item_id: string;
  listener_id: string;
  component_type: DashboardComponentType;
  action: DashboardComponentAction;
  value?: unknown;
  source_session_id: string;
  debounce_ms?: number;
  cooldown_ms?: number;
};

export type DashboardEventDispatcherDeps = {
  send: (msg: WebSocketMessage) => void;
  isConnected: () => boolean;
};

/**
 * Coalesces rapid events (debounce) and enforces cooldown between sends.
 */
export function createDashboardEventDispatcher(deps: DashboardEventDispatcherDeps) {
  const lastSentByKey = new Map<string, number>();
  const debounceTimers = new Map<string, ReturnType<typeof setTimeout>>();

  const cooldownMsFor = (ctx: DashboardEventDispatchContext) =>
    Math.max(
      MIN_DASHBOARD_COOLDOWN_MS,
      ctx.cooldown_ms ?? DEFAULT_DASHBOARD_COOLDOWN_MS,
    );

  const debounceFor = (ctx: DashboardEventDispatchContext) =>
    Math.max(0, ctx.debounce_ms ?? 0);

  function buildPayload(
    ctx: DashboardEventDispatchContext,
  ): DashboardComponentEventPayload {
    return {
      event_version: DASHBOARD_COMPONENT_EVENT_VERSION,
      event_id: createEventId(),
      occurred_at: new Date().toISOString(),
      listener_id: ctx.listener_id.trim(),
      dashboard_id: ctx.dashboard_id,
      group_id: ctx.group_id,
      item_id: ctx.item_id,
      component_type: ctx.component_type,
      action: ctx.action,
      value: ctx.value,
      source_session_id: ctx.source_session_id,
      cooldown_ms: ctx.cooldown_ms,
    };
  }

  function sendNow(ctx: DashboardEventDispatchContext) {
    if (!deps.isConnected()) {
      return;
    }
    const key = `${ctx.listener_id}:${ctx.item_id}:${ctx.action}`;
    const now = Date.now();
    const last = lastSentByKey.get(key) ?? 0;
    if (now - last < cooldownMsFor(ctx)) {
      return;
    }
    lastSentByKey.set(key, now);

    const payload = buildPayload(ctx);
    deps.send({
      type: "dashboard_component_event",
      payload,
    } as WebSocketMessage);
  }

  return {
    dispatch(ctx: DashboardEventDispatchContext) {
      const ms = debounceFor(ctx);
      const key = `${ctx.listener_id}:${ctx.item_id}:${ctx.action}`;
      if (ms <= 0) {
        sendNow(ctx);
        return;
      }
      const existing = debounceTimers.get(key);
      if (existing) {
        clearTimeout(existing);
      }
      debounceTimers.set(
        key,
        setTimeout(() => {
          debounceTimers.delete(key);
          sendNow(ctx);
        }, ms),
      );
    },
    _reset() {
      lastSentByKey.clear();
      for (const t of debounceTimers.values()) {
        clearTimeout(t);
      }
      debounceTimers.clear();
    },
  };
}

export type DashboardEventDispatcher = ReturnType<
  typeof createDashboardEventDispatcher
>;


================================================
FILE: apps/client/src/features/dynamic-dashboard/panels/ButtonPanel.tsx
================================================
import { useEffect, useState } from "react";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import type { DashboardItemDataMap } from "@/entities/dynamic-dashboard/store";
import { isValidListenerId } from "@/entities/dynamic-dashboard/interaction";

type ButtonPanelProps = {
  data?: DashboardItemDataMap["button"];
  onDataChange?: (next: NonNullable<DashboardItemDataMap["button"]>) => void;
  disabled?: boolean;
};

export function ButtonPanel({
  data,
  onDataChange,
  disabled,
}: ButtonPanelProps) {
  const [listenerId, setListenerId] = useState(data?.listener_id ?? "");

  useEffect(() => {
    setListenerId(data?.listener_id ?? "");
  }, [data?.listener_id]);

  const commit = (raw: string) => {
    const trimmed = raw.trim();
    if (!trimmed) {
      onDataChange?.({ ...data, listener_id: undefined });
      return;
    }
    if (!isValidListenerId(trimmed)) {
      return;
    }
    onDataChange?.({
      ...data,
      listener_id: trimmed,
    });
  };

  return (
    <div
      className='flex flex-col gap-2 rounded-md border border-dashed bg-muted/30 p-2 text-xs'
      onPointerDown={(e) => e.stopPropagation()}
    >
      <div className='grid gap-1'>
        <Label className='text-[10px] uppercase'>Listener id</Label>
        <Input
          className='h-8 font-mono text-xs'
          disabled={disabled}
          value={listenerId}
          placeholder='e.g. lights-toggle'
          onChange={(e) => setListenerId(e.target.value)}
          onBlur={() => commit(listenerId)}
          onKeyDown={(e) => {
            if (e.key === "Enter") {
              (e.target as HTMLInputElement).blur();
            }
          }}
        />
      </div>
    </div>
  );
}


================================================
FILE: apps/client/src/features/dynamic-dashboard/panels/FlowPanel.tsx
================================================
import { useEffect, useMemo, useState } from "react";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { useFlowStore } from "@/entities/flow/store";
import {
  useWebSocket,
  useWebSocketMessage,
} from "@/features/ws/WebSocketProvider";
import { getFlowRunSessionId, WebSocketMessage } from "@/features/ws/ws";
import { DashboardItemDataMap } from "@/entities/dynamic-dashboard/store";
import { Play, Square } from "lucide-react";

type FlowPanelProps = {
  data?: DashboardItemDataMap["flow"];
  onFlowChange?: (flowId?: number) => void;
};

type FlowStatusPayload = {
  id: number;
  name: string;
  is_running: boolean;
}[];

export function FlowPanel({ data, onFlowChange }: FlowPanelProps) {
  const { flows, fetchFlows } = useFlowStore();
  const { wsManager } = useWebSocket();
  const [selectedFlowId, setSelectedFlowId] = useState<number | undefined>(
    data?.flowId,
  );
  const [isRunning, setIsRunning] = useState(false);

  useEffect(() => {
    fetchFlows().catch((err) => {
      console.error("Failed to fetch flows for flow panel", err);
    });
  }, [fetchFlows]);

  useEffect(() => {
    if (typeof data?.flowId === "number") {
      setSelectedFlowId(data.flowId);
    }
    setIsRunning(data?.autoRun ?? false);
  }, [data?.autoRun, data?.flowId]);

  const selectedFlowName = useMemo(() => {
    if (typeof selectedFlowId !== "number") return "No flow selected";
    return flows.find((f) => f.id === selectedFlowId)?.name ?? "Unknown flow";
  }, [flows, selectedFlowId]);

  const requestStatus = (flowId?: number) => {
    if (!wsManager || typeof flowId !== "number") {
      return;
    }
    wsManager.send({
      type: "get_all_flows",
      payload: {},
    });
  };

  useWebSocketMessage((msg: WebSocketMessage) => {
    if (msg.type !== "get_all_flows_response" || !msg.payload) return;
    const payload = msg.payload as FlowStatusPayload;
    if (!Array.isArray(payload)) return;

    const match = payload.find((flow) => flow.id === selectedFlowId);
    if (match) {
      setIsRunning(Boolean(match.is_running));
    }
  });

  useEffect(() => {
    requestStatus(selectedFlowId);
  }, [selectedFlowId]);

  const handleSelect = (value: string) => {
    const nextId = Number(value);
    const validId = Number.isFinite(nextId) ? nextId : undefined;
    setSelectedFlowId(validId);
    onFlowChange?.(validId);
    requestStatus(validId);
  };

  const handleRun = () => {
    if (!wsManager || typeof selectedFlowId !== "number") {
      return;
    }
    wsManager.send({
      type: "compute_flow",
      payload: {
        flow_id: selectedFlowId,
        run_context: { session_id: getFlowRunSessionId() },
      },
    });
    requestStatus(selectedFlowId);
  };

  const handleStop = () => {
    if (!wsManager || typeof selectedFlowId !== "number") {
      return;
    }
    wsManager.send({
      type: "stop_flow",
      payload: { flow_id: selectedFlowId },
    });
    requestStatus(selectedFlowId);
  };

  return (
    <div className='flex h-full w-full flex-col gap-3'>
      <div className='flex items-center justify-between gap-2 text-xs'>
        <Select
          value={
            typeof selectedFlowId === "number"
              ? String(selectedFlowId)
              : undefined
          }
          onValueChange={handleSelect}
        >
          <SelectTrigger className='h-8 w-[180px]'>
            <SelectValue placeholder='Select flow' />
          </SelectTrigger>
          <SelectContent>
            {flows.map((flow) => (
              <SelectItem key={flow.id} value={String(flow.id)}>
                {flow.name}
              </SelectItem>
            ))}
          </SelectContent>
        </Select>
        <Badge variant={isRunning ? "default" : "outline"}>
          {isRunning ? "Running" : "Stopped"}
        </Badge>
      </div>
      <div className='flex flex-1 flex-col justify-between border border-dashed p-3 text-sm'>
        <div className='space-y-1'>
          <p className='text-xs text-muted-foreground'>Selected flow</p>
          <p className='font-semibold'>{selectedFlowName}</p>
        </div>
        <div className='flex items-center justify-end gap-2'>
          <Button
            size='sm'
            variant='outline'
            onClick={handleStop}
            disabled={!selectedFlowId}
          >
            <Square className='mr-1 h-3 w-3' />
            Stop
          </Button>
          <Button size='sm' onClick={handleRun} disabled={!selectedFlowId}>
            <Play className='mr-1 h-3 w-3' />
            Run
          </Button>
        </div>
      </div>
    </div>
  );
}


================================================
FILE: apps/client/src/features/dynamic-dashboard/panels/MapPanel.tsx
================================================
import { useEffect, useMemo, useState } from "react";
import { MapContainer, TileLayer, useMap } from "react-leaflet";
import "leaflet/dist/leaflet.css";
import { Badge } from "@/components/ui/badge";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { useMapDataStore, useMapInteractionStore } from "@/entities/map/store";
import { FeatureRenderer } from "@/features/map-draw/FeatureRenderer";
import { DashboardItemDataMap } from "@/entities/dynamic-dashboard/store";

type MapPanelProps = {
  data?: DashboardItemDataMap["map"];
  onLayerChange?: (layerId?: number) => void;
};

const FALLBACK_CENTER: [number, number] = [37.5665, 126.978];
const FALLBACK_ZOOM = 5;

export function MapPanel({ data, onLayerChange }: MapPanelProps) {
  const { layers, layer, activeLayerId, fetchAllLayers, setActiveLayer } =
    useMapDataStore();
  const clearSelection = useMapInteractionStore(
    (state) => state.setSelectedFeature,
  );
  const [localLayerId, setLocalLayerId] = useState<number | undefined>(
    data?.layerId,
  );

  useEffect(() => {
    fetchAllLayers().catch((err) => {
      console.error("Failed to fetch layers for map panel", err);
    });
  }, [fetchAllLayers]);

  useEffect(() => {
    if (typeof data?.layerId === "number") {
      setLocalLayerId(data.layerId);
    }
  }, [data?.layerId]);

  useEffect(() => {
    if (typeof localLayerId !== "number" || activeLayerId === localLayerId) {
      return;
    }

    setActiveLayer(localLayerId).catch((err) => {
      console.error("Failed to activate layer in map panel", err);
    });
    clearSelection(null);
  }, [activeLayerId, clearSelection, localLayerId, setActiveLayer]);

  const viewCenter = useMemo<[number, number]>(() => {
    if (data?.center) return data.center;
    const positions =
      layer?.features.flatMap((feature) =>
        feature.vertices.map(
          (v) => [v.latitude, v.longitude] as [number, number],
        ),
      ) || [];

    if (positions.length === 0) {
      return FALLBACK_CENTER;
    }

    const [latSum, lngSum] = positions.reduce(
      (acc, [lat, lng]) => [acc[0] + lat, acc[1] + lng],
      [0, 0],
    );
    return [latSum / positions.length, lngSum / positions.length];
  }, [data?.center, layer?.features]);

  const zoom = data?.zoom ?? FALLBACK_ZOOM;

  const handleLayerChange = (value: string) => {
    const nextId = Number(value);
    const validId = Number.isFinite(nextId) ? nextId : undefined;
    setLocalLayerId(validId);
    onLayerChange?.(validId);
  };

  return (
    <div className='flex h-full w-full flex-col gap-2'>
      <div className='flex items-center justify-between gap-2 text-xs'>
        <Select
          value={
            typeof localLayerId === "number" ? String(localLayerId) : undefined
          }
          onValueChange={handleLayerChange}
        >
          <SelectTrigger className='h-8 w-[180px]'>
            <SelectValue placeholder='Select layer' />
          </SelectTrigger>
          <SelectContent>
            {layers.map((l) => (
              <SelectItem key={l.id} value={String(l.id)}>
                {l.name}
              </SelectItem>
            ))}
          </SelectContent>
        </Select>
        <Badge variant='outline'>{layer?.features.length ?? 0} features</Badge>
      </div>
      <div className='relative h-full w-full overflow-hidden bg-muted/50'>
        {typeof localLayerId !== "number" ? (
          <div className='flex h-full items-center justify-center text-xs text-muted-foreground'>
            Select a layer to preview the map.
          </div>
        ) : (
          <MapContainer
            center={viewCenter}
            zoom={zoom}
            maxZoom={22}
            scrollWheelZoom
            zoomControl={false}
            className='h-full w-full'
          >
            <TileLayer
              attribution='&copy; OpenStreetMap contributors'
              url='https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png'
              maxNativeZoom={20}
              maxZoom={22}
            />
            {layer?.features.map((feature) => (
              <FeatureRenderer
                key={`feature-${feature.id}`}
                feature={feature}
              />
            ))}
            <ResizeInvalidator />
          </MapContainer>
        )}
      </div>
    </div>
  );
}

function ResizeInvalidator() {
  const map = useMap();

  useEffect(() => {
    const container = map.getContainer();
    const handle = () => map.invalidateSize();
    handle();

    const observer = new ResizeObserver(() => handle());
    observer.observe(container);

    return () => observer.disconnect();
  }, [map]);

  return null;
}


================================================
FILE: apps/client/src/features/entity/AllEntities.tsx
================================================
import { Fragment } from "react";
// import { EntityAll } from "@/entities/entity/types";
import { EntityCard } from "./Card";
import {
  // StreamState,
  useEntitiesData,
} from "@/features/entity/useEntitiesData";

export function AllEntities() {
  const { entities, streamsState } = useEntitiesData();

  return (
    <>
      <div className='grid grid-cols-1 gap-4 px-0 sm:grid-cols-2 lg:grid-cols-4 lg:px-6'>
        {entities.map((item) => (
          <Fragment key={item.id}>
            <EntityCard item={item} streamsState={streamsState} />
          </Fragment>
        ))}
      </div>
    </>
  );
}


================================================
FILE: apps/client/src/features/entity/AnalyzeMenuItem.tsx
================================================
import { useState } from "react";
import { Eye, Loader2 } from "lucide-react";
import { DropdownMenuItem } from "@/components/ui/dropdown-menu";
import { useWebRTC } from "../rtc/WebRTCProvider";
import { captureFrameFromStream } from "../rtc/captureFrame";
import { useChatStore } from "../llm-chat/store";
import { cn } from "@/lib/utils";

interface AnalyzeMenuItemProps {
  topic: string;
  className?: string;
}

export function AnalyzeMenuItem({ topic, className }: AnalyzeMenuItemProps) {
  const { streams } = useWebRTC();
  const { setPendingImage, openPanel } = useChatStore();
  const [isCapturing, setIsCapturing] = useState(false);

  const streamInfo = streams.get(topic);
  const hasStream = !!streamInfo?.stream;

  const handleClick = async () => {
    if (!streamInfo?.stream) return;

    setIsCapturing(true);
    try {
      const frameFile = await captureFrameFromStream(streamInfo.stream);
      setPendingImage(frameFile);
      openPanel();
    } catch (error) {
      console.error("Frame capture failed:", error);
    } finally {
      setIsCapturing(false);
    }
  };

  return (
    <DropdownMenuItem
      onClick={handleClick}
      disabled={!hasStream || isCapturing}
      className={cn("flex items-center gap-2", className)}
    >
      {isCapturing ? (
        <>
          <Loader2 className='h-4 w-4 animate-spin' />
          <span>Capturing...</span>
        </>
      ) : (
        <>
          <Eye className='h-4 w-4' />
          <span>Analyze Frame</span>
        </>
      )}
    </DropdownMenuItem>
  );
}


================================================
FILE: apps/client/src/features/entity/Card.tsx
================================================
import { useState } from "react";
import { EntityAll } from "@/entities/entity/types";
import {
  Card,
  CardHeader,
  CardDescription,
  CardTitle,
  CardFooter,
} from "@/components/ui/card";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { Button } from "@/components/ui/button";
import { MoreVertical } from "lucide-react";
import { formatSimpleDateTime } from "@/lib/time";
import { StreamReceiver } from "../rtc/StreamReceiver";
import { RecordingMenuItem } from "../recording/RecordingButton";
import { AnalyzeMenuItem } from "./AnalyzeMenuItem";
import { StateHistorySheet } from "./StateHistorySheet";
import { useNavigate } from "react-router";

type StreamState = {
  topic: string;
  is_online: boolean;
};

const isEnabledStream = (topic: string, streams?: StreamState[]) => {
  if (!streams) {
    return false;
  }

  const index = streams.findIndex((item) => item.topic == topic);
  if (index == -1) {
    return false;
  }

  return streams[index].is_online;
};

export function EntityCard({
  item,
  streamsState,
}: {
  item: EntityAll;
  streamsState?: StreamState[];
}) {
  const navigate = useNavigate();

  if (item.platform === "sdr") {
    return (
      <Card key={item.id}>
        <CardHeader className='px-4'>
          <CardDescription>{item.friendly_name}</CardDescription>
          <CardTitle className='text-2xl font-semibold tabular-nums'>
            RTL-SDR
          </CardTitle>
        </CardHeader>
        <CardFooter className='flex-row items-center justify-between px-4 text-sm'>
          <Button
            size='sm'
            variant='outline'
            className='w-full'
            onClick={() => navigate("/dashboard?view=sdr")}
          >
            Open Panel
          </Button>
        </CardFooter>
      </Card>
    );
  }
  if (
    item.platform == "UDP" &&
    item.configuration &&
    item.entity_type == "AUDIO"
  ) {
    return (
      <Card key={item.id}>
        <CardHeader className='px-4'>
          <CardDescription>{item.friendly_name}</CardDescription>
          <CardTitle className='text-2xl font-semibold tabular-nums'>
            {item.configuration && (
              <StreamReceiver
                topic={item.configuration.state_topic as string}
                streamType='audio'
              />
            )}
          </CardTitle>
        </CardHeader>
        <CardFooter className='flex-row items-center justify-between px-4 text-sm'>
          <div className='flex flex-col gap-1'>
            <div className='font-medium'>{item.platform}</div>
            <div className='text-muted-foreground'>
              {isEnabledStream(
                item.configuration.state_topic as string,
                streamsState,
              ) ? (
                <Online />
              ) : (
                <Offline />
              )}
            </div>
          </div>
          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <Button variant='ghost' size='icon' className='h-8 w-8'>
                <MoreVertical className='h-4 w-4' />
              </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent align='end'>
              <RecordingMenuItem
                topic={item.configuration.state_topic as string}
              />
            </DropdownMenuContent>
          </DropdownMenu>
        </CardFooter>
      </Card>
    );
  }

  if (
    item.platform == "RTSP" &&
    item.configuration &&
    item.entity_type == "VIDEO"
  ) {
    return (
      <Card key={item.id}>
        <CardHeader className='px-4'>
          <CardDescription>{item.friendly_name}</CardDescription>
          <CardTitle className='text-2xl font-semibold tabular-nums'>
            {item.configuration && (
              <StreamReceiver
                topic={item.configuration.rtsp_url as string}
                streamType='video'
              />
            )}
          </CardTitle>
        </CardHeader>
        <CardFooter className='flex-row items-center justify-between px-4 text-sm'>
          <div className='flex flex-col gap-1'>
            <div className='font-medium'>{item.platform}</div>
            <div className='text-muted-foreground'>
              {isEnabledStream(
                item.configuration.rtsp_url as string,
                streamsState,
              ) ? (
                <Online />
              ) : (
                <Offline />
              )}
            </div>
          </div>
          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <Button variant='ghost' size='icon' className='h-8 w-8'>
                <MoreVertical className='h-4 w-4' />
              </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent align='end'>
              <RecordingMenuItem
                topic={item.configuration.rtsp_url as string}
              />
              <AnalyzeMenuItem topic={item.configuration.rtsp_url as string} />
            </DropdownMenuContent>
          </DropdownMenu>
        </CardFooter>
      </Card>
    );
  }

  if (
    item.platform == "UDP" &&
    item.configuration &&
    item.entity_type == "VIDEO"
  ) {
    return (
      <Card key={item.id}>
        <CardHeader className='px-4'>
          <CardDescription>{item.friendly_name}</CardDescription>
          <CardTitle className='text-2xl font-semibold tabular-nums'>
            {item.configuration && (
              <StreamReceiver
                topic={item.configuration.state_topic as string}
                streamType='video'
              />
            )}
          </CardTitle>
        </CardHeader>
        <CardFooter className='flex-row items-center justify-between px-4 text-sm'>
          <div className='flex flex-col gap-1'>
            <div className='font-medium'>{item.platform}</div>
            <div className='text-muted-foreground'>
              {isEnabledStream(
                item.configuration.state_topic as string,
                streamsState,
              ) ? (
                <Online />
              ) : (
                <Offline />
              )}
            </div>
          </div>
          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <Button variant='ghost' size='icon' className='h-8 w-8'>
                <MoreVertical className='h-4 w-4' />
              </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent align='end'>
              <RecordingMenuItem
                topic={item.configuration.state_topic as string}
              />
              <AnalyzeMenuItem
                topic={item.configuration.state_topic as string}
              />
            </DropdownMenuContent>
          </DropdownMenu>
        </CardFooter>
      </Card>
    );
  }

  return <DefaultEntityCard item={item} />;
}

function DefaultEntityCard({ item }: { item: EntityAll }) {
  const [historyOpen, setHistoryOpen] = useState(false);

  return (
    <>
      <Card key={item.id}>
        <CardHeader className='px-4'>
          <CardDescription>{item.friendly_name}</CardDescription>
          <button
            type='button'
            onClick={() => setHistoryOpen(true)}
            className='block w-full min-w-0 max-w-full text-left cursor-pointer hover:underline focus:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded'
          >
            <CardTitle className='text-2xl font-semibold font-mono tabular-nums truncate'>
              {item.state?.state || "N/A"}
            </CardTitle>
          </button>
        </CardHeader>
        <CardFooter className='flex-col items-start gap-1 px-4 text-sm'>
          <div className='font-medium'>{item.platform}</div>
          <div className='text-muted-foreground'>
            {formatSimpleDateTime(item.state?.last_updated || "")}
          </div>
        </CardFooter>
      </Card>
      <StateHistorySheet
        entityId={item.entity_id}
        entityName={item.friendly_name}
        open={historyOpen}
        onOpenChange={setHistoryOpen}
      />
    </>
  );
}

function Dot({ color }: { color: string }) {
  return <span className={`w-2 h-2 ${color} rounded`}></span>;
}

function Offline() {
  return (
    <span className='flex flex-row text-gray-600 justify-center items-center gap-1'>
      <Dot color='bg-gray-600' /> Offline
    </span>
  );
}

function Online() {
  return (
    <span className='flex flex-row text-emerald-500 justify-center items-center gap-1 '>
      <Dot color='bg-emerald-500' /> Online
    </span>
  );
}


================================================
FILE: apps/client/src/features/entity/EntityCreateButton.tsx
================================================
import { useEffect, useState } from "react";
import { Controller, useForm } from "react-hook-form";

import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogContent,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { AlertCircleIcon, PlusCircle } from "lucide-react";
import { useDeviceStore } from "@/entities/device/store";
import { useEntityStore } from "@/entities/entity/store";
import { EntityPayload } from "@/entities/entity/types";
import {
  Select,
  SelectContent,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { JsonCodeEditor } from "../json/JsonEditor";
import { EntitySelectTypes } from "./SelectTypes";
import { EntitySelectPlatforms } from "./SelectPlatforms";
import { toast } from "sonner";
import { Alert, AlertTitle, AlertDescription } from "@/components/ui/alert";

export function EntityCreateButton() {
  const [isOpen, setIsOpen] = useState(false);
  const [jsonError, setJsonError] = useState<string | null>(null);

  const createEntity = useEntityStore((state) => state.createEntity);
  const selectedDevice = useDeviceStore((state) => state.selectedDevice);
  const { register, handleSubmit, reset, watch, control, setValue } =
    useForm<EntityPayload>();

  const entityId = watch("entity_id");

  useEffect(() => {
    if (isOpen && selectedDevice) {
      reset({
        entity_id: `${selectedDevice.device_id}-`,
        friendly_name: "",
        platform: "",
        configuration: "",
        entity_type: "",
      });
    }
  }, [isOpen, selectedDevice, reset]);

  useEffect(() => {
    if (entityId) {
      const friendlyName = entityId
        .split("-")
        .filter(Boolean)
        .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
        .join(" ");
      setValue("friendly_name", friendlyName);
    }
  }, [entityId, setValue]);

  useEffect(() => {
    if (entityId && entityId.includes(" ")) {
      setValue("entity_id", entityId.replace(/ /g, "-"));
    }
  }, [entityId, setValue]);

  const onSubmit = async (data: EntityPayload) => {
    if (!selectedDevice) return;
    let configPayload: string | null = null;

    try {
      if (data.configuration && data.configuration.trim() !== "") {
        configPayload = JSON.parse(data.configuration);
      }
    } catch (error) {
      console.error("Invalid JSON format:", error);
      toast("Invalid JSON format. Please check the syntax.");
      setJsonError("Invalid JSON format. Please check the syntax.");

      return;
    }

    const payload = {
      ...data,
      device_id: selectedDevice.id,
      configuration: configPayload,
    };

    await createEntity(payload);
    setIsOpen(false);
  };

  if (!selectedDevice) return null;

  return (
    <Dialog open={isOpen} onOpenChange={setIsOpen}>
      <DialogTrigger asChild>
        <Button size='sm'>
          <PlusCircle className='h-4 w-4 mr-2' />
          New Entity
        </Button>
      </DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Create New Entity for {selectedDevice.name}</DialogTitle>
        </DialogHeader>
        <form onSubmit={handleSubmit(onSubmit)} className='space-y-4 py-2'>
          <div className='space-y-2'>
            <Label htmlFor='entity_id_create'>Entity ID</Label>
            <Input
              id='entity_id_create'
              {...register("entity_id", { required: true })}
            />
          </div>
          <div className='space-y-2'>
            <Label htmlFor='friendly_name_create'>Friendly Name</Label>
            <Input id='friendly_name_create' {...register("friendly_name")} />
          </div>
          <div className='space-y-2'>
            <Label htmlFor='platform_update'>Platform (Protocol)</Label>
            <Controller
              control={control}
              name='platform'
              render={({ field }) => (
                <Select
                  onValueChange={field.onChange}
                  defaultValue={field.value ?? ""}
                >
                  <SelectTrigger id='platform_update' className='w-full'>
                    <SelectValue placeholder='Select a platform' />
                  </SelectTrigger>
                  <SelectContent className='w-full'>
                    <EntitySelectPlatforms />
                  </SelectContent>
                </Select>
              )}
            />
          </div>
          <div className='space-y-2'>
            <Label htmlFor='entity_type'>Type</Label>
            <Controller
              control={control}
              name='entity_type'
              render={({ field }) => (
                <Select
                  onValueChange={field.onChange}
                  defaultValue={field.value ?? ""}
                >
                  <SelectTrigger id='entity_type' className='w-full'>
                    <SelectValue placeholder='Select a type' />
                  </SelectTrigger>
                  <SelectContent className='w-full'>
                    <EntitySelectTypes />
                  </SelectContent>
                </Select>
              )}
            />
          </div>

          <div className='space-y-2'>
            <Label htmlFor='configuration_update'>Configuration (JSON)</Label>
            <Controller
              control={control}
              name='configuration'
              render={({ field }) => (
                <JsonCodeEditor
                  value={field.value ?? ""}
                  onChange={field.onChange}
                />
              )}
            />
            {jsonError && (
              <Alert variant='destructive'>
                <AlertCircleIcon className='w-5' />
                <AlertTitle>Error</AlertTitle>
                <AlertDescription>
                  <p>{jsonError}</p>
                </AlertDescription>
              </Alert>
            )}
          </div>

          <DialogFooter>
            <Button
              type='button'
              variant='outline'
              onClick={() => setIsOpen(false)}
            >
              Cancel
            </Button>
            <Button type='submit'>Save</Button>
          </DialogFooter>
        </form>
      </DialogContent>
    </Dialog>
  );
}


================================================
FILE: apps/client/src/features/entity/EntityDeleteButton.tsx
================================================
import { useState } from "react";
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/ui/alert-dialog";
import { Trash2 } from "lucide-react";
import { useEntityStore } from "@/entities/entity/store";
import { DropdownMenuItem } from "@/components/ui/dropdown-menu";

interface Props {
  entityId: number;
}

export function EntityDeleteButton({ entityId }: Props) {
  const [isOpen, setIsOpen] = useState(false);
  const deleteEntity = useEntityStore((state) => state.deleteEntity);

  const handleDelete = async () => {
    await deleteEntity(entityId);
    setIsOpen(false);
  };

  return (
    <AlertDialog open={isOpen} onOpenChange={setIsOpen}>
      <AlertDialogTrigger asChild>
        <DropdownMenuItem
          onSelect={(e) => e.preventDefault()}
          className='text-red-500 focus:text-red-500'
        >
          <Trash2 className='mr-2 h-4 w-4 text-red-500 focus:text-red-500' />
          <span>Delete</span>
        </DropdownMenuItem>
      </AlertDialogTrigger>
      <AlertDialogContent>
        <AlertDialogHeader>
          <AlertDialogTitle>Are you sure?</AlertDialogTitle>
          <AlertDialogDescription>
            This action cannot be undone. This will permanently delete the
            entity.
          </AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter>
          <AlertDialogCancel>Cancel</AlertDialogCancel>
          <AlertDialogAction
            onClick={handleDelete}
            className='bg-red-600 hover:bg-red-700 text-white'
          >
            Delete
          </AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  );
}


================================================
FILE: apps/client/src/features/entity/EntityUpdateButton.tsx
================================================
import { useEffect, useState } from "react";
import { useForm, Controller } from "react-hook-form";
import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogContent,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import {
  Select,
  SelectContent,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { AlertCircleIcon, Pencil } from "lucide-react";
import { useEntityStore } from "@/entities/entity/store";
import { Entity, EntityPayload } from "@/entities/entity/types";
import { DropdownMenuItem } from "@/components/ui/dropdown-menu";
import { JsonCodeEditor } from "../json/JsonEditor";
import { EntitySelectTypes } from "./SelectTypes";
import { EntitySelectPlatforms } from "./SelectPlatforms";
import { toast } from "sonner";
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";

interface Props {
  entity: Entity;
  defaultOpen?: boolean;
}

type EntityFormValues = Omit<EntityPayload, "configuration"> & {
  configuration: string;
};

export function EntityUpdateButton({ entity, defaultOpen = false }: Props) {
  const [isOpen, setIsOpen] = useState(defaultOpen);
  const [jsonError, setJsonError] = useState<string | null>(null);
  const updateEntity = useEntityStore((state) => state.updateEntity);
  const setAutoOpenEntityId = useEntityStore((state) => state.setAutoOpenEntityId);
  const { register, handleSubmit, control, watch, setValue } =
    useForm<EntityFormValues>({
      defaultValues: {
        entity_id: entity.entity_id,
        device_id: entity.device_id,
        friendly_name: entity.friendly_name ?? "",
        platform: entity.platform ?? "",
        entity_type: entity.entity_type ?? "",
        configuration: entity.configuration
          ? JSON.stringify(entity.configuration, null, 2)
          : "",
      },
    });

  const entityId = watch("entity_id");

  useEffect(() => {
    if (entityId && entityId.includes(" ")) {
      setValue("entity_id", entityId.replace(/ /g, "-"));
    }
  }, [entityId, setValue]);

  const onSubmit = async (data: EntityFormValues) => {
    setJsonError(null);
    let configPayload: string | null = null;

    try {
      if (data.configuration && data.configuration.trim() !== "") {
        configPayload = JSON.parse(data.configuration);
      }
    } catch (error) {
      console.error("Invalid JSON format:", error);
      toast("Invalid JSON format. Please check the syntax.");
      setJsonError("Invalid JSON format. Please check the syntax.");
      return;
    }

    const finalPayload: EntityPayload = {
      ...data,
      configuration: configPayload,
    };

    await updateEntity(entity.id, finalPayload);
    setIsOpen(false);
    if (defaultOpen) {
      setAutoOpenEntityId(null);
    }
  };

  const handleOpenChange = (open: boolean) => {
    setIsOpen(open);
    if (!open && defaultOpen) {
      setAutoOpenEntityId(null);
    }
  };

  return (
    <Dialog open={isOpen} onOpenChange={handleOpenChange}>
      {!defaultOpen && (
        <DialogTrigger asChild>
          <DropdownMenuItem onSelect={(e) => e.preventDefault()}>
            <Pencil className='mr-2 h-4 w-4' />
            <span>Edit</span>
          </DropdownMenuItem>
        </DialogTrigger>
      )}
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Edit Entity</DialogTitle>
        </DialogHeader>
        <form onSubmit={handleSubmit(onSubmit)} className='space-y-4 py-2'>
          <div className='space-y-2'>
            <Label htmlFor='entity_id_update'>Entity ID</Label>
            <Input
              id='entity_id_update'
              {...register("entity_id", { required: true })}
            />
          </div>
          <div className='space-y-2'>
            <Label htmlFor='friendly_name_update'>Friendly Name</Label>
            <Input id='friendly_name_update' {...register("friendly_name")} />
          </div>
          <div className='space-y-2'>
            <Label htmlFor='platform_update'>Platform (Protocol)</Label>
            <Controller
              control={control}
              name='platform'
              render={({ field }) => (
                <Select
                  onValueChange={field.onChange}
                  defaultValue={field.value ?? ""}
                >
                  <SelectTrigger id='platform_update' className='w-full'>
                    <SelectValue placeholder='Select a platform' />
                  </SelectTrigger>
                  <SelectContent className='w-full'>
                    <EntitySelectPlatforms />
                  </SelectContent>
                </Select>
              )}
            />
          </div>

          <div className='space-y-2'>
            <Label htmlFor='entity_type_update'>Type</Label>
            <Controller
              control={control}
              name='entity_type'
              render={({ field }) => (
                <Select
                  onValueChange={field.onChange}
                  defaultValue={field.value ?? ""}
                >
                  <SelectTrigger id='entity_type_update' className='w-full'>
                    <SelectValue placeholder='Select a type' />
                  </SelectTrigger>
                  <SelectContent className='w-full'>
                    <EntitySelectTypes />
                  </SelectContent>
                </Select>
              )}
            />
          </div>

          <div className='space-y-2'>
            <Label htmlFor='configuration_update'>Configuration (JSON)</Label>
            <Controller
              control={control}
              name='configuration'
              render={({ field }) => (
                <JsonCodeEditor value={field.value} onChange={field.onChange} />
              )}
            />
            {jsonError && (
              <Alert variant='destructive'>
                <AlertCircleIcon className='w-5' />
                <AlertTitle>Error</AlertTitle>
                <AlertDescription>
                  <p>{jsonError}</p>
                </AlertDescription>
              </Alert>
            )}
          </div>
          <DialogFooter>
            <Button
              type='button'
              variant='outline'
              onClick={() => setIsOpen(false)}
            >
              Cancel
            </Button>
            <Button type='submit'>Save Changes</Button>
          </DialogFooter>
        </form>
      </DialogContent>
    </Dialog>
  );
}


================================================
FILE: apps/client/src/features/entity/SelectPlatforms.tsx
================================================
import { SelectItem } from "@/components/ui/select";

export function EntitySelectPlatforms() {
  return (
    <>
      <SelectItem value='MQTT'>MQTT</SelectItem>
      <SelectItem value='UDP'>RTP over UDP</SelectItem>
      <SelectItem value='RTSP'>RTSP</SelectItem>
      <SelectItem value='HTTP'>HTTP</SelectItem>
    </>
  );
}


================================================
FILE: apps/client/src/features/entity/SelectTypes.tsx
================================================
import { SelectItem } from "@/components/ui/select";
import { Baseline, Database, Locate, Play } from "lucide-react";

export function EntitySelectTypes() {
  return (
    <>
      <SelectItem value='NONE'>
        <Database /> NONE
      </SelectItem>
      <SelectItem value='AUDIO'>
        <Play /> AUDIO
      </SelectItem>
      <SelectItem value='GPS'>
        <Locate /> GPS
      </SelectItem>
      <SelectItem value='TEXT'>
        <Baseline /> TEXT
      </SelectItem>
      <SelectItem value='VIDEO'>
        <Play /> VIDEO
      </SelectItem>
    </>
  );
}


================================================
FILE: apps/client/src/features/entity/StateHistorySheet.tsx
================================================
import { useEffect, useMemo, useRef, useState } from "react";
import { scaleTime } from "d3-scale";
import {
  Sheet,
  SheetContent,
  SheetDescription,
  SheetHeader,
  SheetTitle,
} from "@/components/ui/sheet";
import { ScrollArea } from "@/components/ui/scroll-area";
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@/components/ui/tooltip";
import { Skeleton } from "@/components/ui/skeleton";
import { formatSimpleDateTime } from "@/lib/time";
import * as api from "@/entities/entity/api";
import type { State } from "@/entities/entity/types";

type Props = {
  entityId: string;
  entityName: string;
  open: boolean;
  onOpenChange: (open: boolean) => void;
};

const STRIP_WIDTH = 360;
const STRIP_HEIGHT = 80;
const STRIP_PADDING_X = 16;
const AXIS_Y = STRIP_HEIGHT - 24;

export function StateHistorySheet({
  entityId,
  entityName,
  open,
  onOpenChange,
}: Props) {
  const [history, setHistory] = useState<State[] | null>(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [now, setNow] = useState<Date>(() => new Date());
  const requestId = useRef(0);

  useEffect(() => {
    if (!open) {
      return;
    }
    const id = ++requestId.current;
    setLoading(true);
    setError(null);
    setNow(new Date());

    api
      .getEntityHistory(entityId)
      .then((res) => {
        if (id !== requestId.current) return;
        setHistory(res.data);
        setLoading(false);
      })
      .catch((err) => {
        if (id !== requestId.current) return;
        console.error("Failed to fetch entity history:", err);
        setError("Failed to load history.");
        setLoading(false);
      });
  }, [open, entityId]);

  const sortedAsc = useMemo(() => {
    if (!history) return [];
    return [...history].sort(
      (a, b) =>
        new Date(a.last_updated).getTime() -
        new Date(b.last_updated).getTime(),
    );
  }, [history]);

  const sortedDesc = useMemo(() => [...sortedAsc].reverse(), [sortedAsc]);

  const firstRecord = sortedAsc[0];
  const lastRecord = sortedAsc[sortedAsc.length - 1];

  const xScale = useMemo(() => {
    if (!firstRecord) return null;
    const start = new Date(firstRecord.last_updated);
    const end = now > new Date(lastRecord.last_updated) ? now : new Date(lastRecord.last_updated);
    return scaleTime()
      .domain([start, end])
      .range([STRIP_PADDING_X, STRIP_WIDTH - STRIP_PADDING_X]);
  }, [firstRecord, lastRecord, now]);

  return (
    <Sheet open={open} onOpenChange={onOpenChange}>
      <SheetContent side='right' className='w-full sm:max-w-md flex flex-col'>
        <SheetHeader>
          <SheetTitle className='truncate'>{entityName || entityId}</SheetTitle>
          <SheetDescription className='truncate'>
            <span className='font-mono text-xs'>{entityId}</span>
          </SheetDescription>
        </SheetHeader>

        <div className='flex flex-col gap-4 px-4 pb-4 flex-1 min-h-0'>
          {loading && (
            <div className='flex flex-col gap-2'>
              <Skeleton className='h-20 w-full' />
              <Skeleton className='h-6 w-full' />
              <Skeleton className='h-6 w-full' />
              <Skeleton className='h-6 w-full' />
            </div>
          )}

          {!loading && error && (
            <div className='text-sm text-destructive'>{error}</div>
          )}

          {!loading && !error && sortedAsc.length === 0 && (
            <div className='text-sm text-muted-foreground'>
              No state history recorded yet.
            </div>
          )}

          {!loading && !error && sortedAsc.length > 0 && xScale && (
            <>
              <div className='grid grid-cols-3 gap-2 text-xs'>
                <SummaryCell
                  label='First'
                  value={formatSimpleDateTime(firstRecord!.last_updated)}
                />
                <SummaryCell
                  label='Last'
                  value={formatSimpleDateTime(lastRecord!.last_updated)}
                />
                <SummaryCell
                  label='Changes'
                  value={`${sortedAsc.length}`}
                />
              </div>

              <TooltipProvider delayDuration={100}>
                <svg
                  width='100%'
                  viewBox={`0 0 ${STRIP_WIDTH} ${STRIP_HEIGHT}`}
                  className='border rounded bg-muted/30'
                >
                  <line
                    x1={STRIP_PADDING_X}
                    x2={STRIP_WIDTH - STRIP_PADDING_X}
                    y1={AXIS_Y}
                    y2={AXIS_Y}
                    className='stroke-muted-foreground/40'
                    strokeWidth={1}
                  />
                  <text
                    x={STRIP_PADDING_X}
                    y={AXIS_Y + 16}
                    className='fill-muted-foreground'
                    fontSize={10}
                  >
                    first
                  </text>
                  <text
                    x={STRIP_WIDTH - STRIP_PADDING_X}
                    y={AXIS_Y + 16}
                    textAnchor='end'
                    className='fill-muted-foreground'
                    fontSize={10}
                  >
                    now
                  </text>
                  {sortedAsc.map((record) => {
                    const cx = xScale(new Date(record.last_updated));
                    return (
                      <Tooltip key={record.state_id}>
                        <TooltipTrigger asChild>
                          <circle
                            cx={cx}
                            cy={AXIS_Y}
                            r={4}
                            className='fill-primary cursor-pointer hover:r-6'
                          />
                        </TooltipTrigger>
                        <TooltipContent side='top' className='z-1000'>
                          <div className='text-xs'>
                            <div className='font-mono'>
                              {formatSimpleDateTime(record.last_updated)}
                            </div>
                            <div className='font-semibold'>
                              {record.state ?? "—"}
                            </div>
                          </div>
                        </TooltipContent>
                      </Tooltip>
                    );
                  })}
                  {(() => {
                    const lastX = xScale(new Date(lastRecord!.last_updated));
                    const nowX = xScale(now);
                    if (nowX > lastX + 6) {
                      return (
                        <circle
                          cx={nowX}
                          cy={AXIS_Y}
                          r={3}
                          className='fill-muted-foreground/60'
                        />
                      );
                    }
                    return null;
                  })()}
                </svg>
              </TooltipProvider>

              <ScrollArea className='flex-1 min-h-0 border rounded'>
                <ul className='divide-y'>
                  {sortedDesc.map((record) => (
                    <li
                      key={record.state_id}
                      className='flex items-center justify-between gap-3 px-3 py-2 text-sm'
                    >
                      <span className='text-muted-foreground font-mono text-xs whitespace-nowrap'>
                        {formatSimpleDateTime(record.last_updated)}
                      </span>
                      <span className='font-mono font-medium truncate text-right'>
                        {record.state ?? "—"}
                      </span>
                    </li>
                  ))}
                </ul>
              </ScrollArea>
            </>
          )}
        </div>
      </SheetContent>
    </Sheet>
  );
}

function SummaryCell({ label, value }: { label: string; value: string }) {
  return (
    <div className='flex flex-col gap-0.5 rounded border px-2 py-1.5'>
      <span className='text-[10px] uppercase tracking-wide text-muted-foreground'>
        {label}
      </span>
      <span className='font-mono text-xs truncate'>{value}</span>
    </div>
  );
}


================================================
FILE: apps/client/src/features/entity/useEntitiesData.ts
================================================
import { useCallback, useEffect, useState } from "react";
import * as api from "@/entities/entity/api";
import { EntityAll, State } from "@/entities/entity/types";
import { useWebSocket, useWebSocketMessage } from "../ws/WebSocketProvider";
import { WebSocketMessage } from "../ws/ws";

export type StreamState = {
  topic: string;
  is_online: boolean;
};

export type ChangeStatePayload = {
  entity_id: string;
  state: State;
};

export function useEntitiesData() {
  const [entities, setEntities] = useState<EntityAll[]>([]);
  const [streamsState, setStreamsState] = useState<StreamState[]>([]);
  const { wsManager, isConnected } = useWebSocket();

  const getAllEntities = useCallback(async () => {
    try {
      const response = await api.getAllEntities();
      setEntities(response.data);
    } catch (error) {
      console.error("Failed to fetch all entities:", error);
    }
  }, []);

  const handleMessage = useCallback(
    (msg: WebSocketMessage) => {
      try {
        if (msg.type === "stream_state") {
          const loads = msg.payload as StreamState[];
          setStreamsState(loads);
        }

        if (msg.type == "change_state") {
          const index = entities.findIndex((item) => {
            return (
              item.entity_id == (msg.payload as ChangeStatePayload).entity_id
            );
          });

          if (index == -1) {
            return false;
          }

          if (entities[index].state) {
            entities[index].state = (msg.payload as ChangeStatePayload).state;

            setEntities([...entities]);
          }
        }
      } catch (err) {
        console.error("Error handling signaling message:", err);
      }
    },
    [entities],
  );

  useEffect(() => {
    if (wsManager && isConnected) {
      wsManager.send({
        type: "get_all_stream_state",
        payload: {},
      });

      const interval = setInterval(() => {
        wsManager.send({
          type: "get_all_stream_state",
          payload: {},
        });
      }, 5000);

      return () => clearInterval(interval);
    }
  }, [wsManager, isConnected]);

  useWebSocketMessage(handleMessage);

  useEffect(() => {
    getAllEntities();
  }, [getAllEntities]);

  return { entities, streamsState, refresh: getAllEntities };
}


================================================
FILE: apps/client/src/features/error/index.tsx
================================================
import { Button } from "@/components/ui/button";

export function ErrorRender() {
  return (
    <div className='bg-background flex h-[calc(100%_-_34px)] items-center justify-center p-6 md:p-10'>
      <div className='flex w-full max-w-lg flex-col items-center text-center md:flex-row md:items-center md:gap-8 md:text-left'>
        <h1 className='text-9xl font-extrabold tracking-tighter text-blue-500'>
          ERR
        </h1>
        <div className='mt-4 md:mt-0'>
          <h2 className='text-2xl mb-2 font-semibold text-foreground'>
            An error has occurred. Please try again.
          </h2>
          <Button onClick={() => (location.href = "/")}>Go To Main</Button>
        </div>
      </div>
    </div>
  );
}


================================================
FILE: apps/client/src/features/flow/AddCustomNode.tsx
================================================
import { useEffect, useState } from "react";
import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
  DialogFooter,
} from "@/components/ui/dialog";
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from "@/components/ui/alert-dialog";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Badge } from "@/components/ui/badge";
import {
  Blocks,
  Edit,
  PlusCircle,
  Trash2,
  Loader2,
  Download,
} from "lucide-react";
import { useCustomNodeStore } from "@/entities/custom-nodes/store";
import {
  CustomNode,
  CustomNodeDynamicData,
  CustomNodeFromApi,
} from "@/entities/custom-nodes/types";
import {
  RHAI_PRESETS,
  getPresetCategories,
  getPresetsByCategory,
  presetToApiPayload,
  type RhaiPreset,
  type PresetCategory,
} from "@/entities/custom-nodes/presets";
import { toast } from "sonner";
import { JsonCodeEditor } from "../json/JsonEditor";

function CustomNodeForm({
  onSubmit,
  onCancel,
  initialNode,
}: {
  onSubmit: (node: CustomNodeFromApi) => void;
  onCancel: () => void;
  initialNode?: CustomNode | null | undefined;
}) {
  const [nodeType, setNodeType] = useState(initialNode?.node_type || "_");
  const [data, setData] = useState(JSON.stringify(initialNode?.data) || "");
  const isEditing = !!initialNode;

  useEffect(() => {
    try {
      if (initialNode?.data) {
        setData(JSON.stringify(initialNode?.data));
      }
    } catch {
      console.log("");
    }
  }, [initialNode]);

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    try {
      onSubmit({
        node_type: nodeType,
        data: JSON.parse(data) as CustomNodeDynamicData,
      });
    } catch {
      toast("Invalid JSON in data field.");
    }
  };

  const handleNodeTypeChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    let value = e.target.value;
    if (!value.startsWith("_")) {
      value = `_${value}`;
    }
    setNodeType(value);
  };

  return (
    <form onSubmit={handleSubmit} className='space-y-4 py-4'>
      <div>
        <Label htmlFor='node_type'>Node Type (ID)</Label>
        <Input
          id='node_type'
          value={nodeType}
          onChange={handleNodeTypeChange}
          required
          disabled={isEditing}
          placeholder='e.g., custom-adder'
        />
      </div>
      <div>
        <Label htmlFor='data'>Data (JSON)</Label>

        <JsonCodeEditor value={data as string} onChange={(e) => setData(e)} />
      </div>
      <DialogFooter>
        <Button type='button' variant='ghost' onClick={onCancel}>
          Cancel
        </Button>
        <Button type='submit'>
          {isEditing ? "Save Changes" : "Create Node"}
        </Button>
      </DialogFooter>
    </form>
  );
}

export function AddCustomNode() {
  const {
    nodes,
    fetchAllNodes,
    createNode,
    updateNode,
    deleteNode,
    isLoading,
  } = useCustomNodeStore();
  const [isDialogOpen, setDialogOpen] = useState(false);
  const [view, setView] = useState<"list" | "form" | "presets">("list");
  const [editingNode, setEditingNode] = useState<CustomNode | null>(null);
  const [deletingNode, setDeletingNode] = useState<CustomNode | null>(null);
  const [selectedCategory, setSelectedCategory] =
    useState<PresetCategory | null>(null);

  useEffect(() => {
    fetchAllNodes();
  }, [isDialogOpen, fetchAllNodes]);

  const handleAddNew = () => {
    setEditingNode(null);
    setView("form");
  };

  const handleEdit = (node: CustomNode) => {
    setEditingNode(node);
    setView("form");
  };

  const handleBackToList = () => {
    setEditingNode(null);
    setSelectedCategory(null);
    setView("list");
  };

  const handleAddFromPreset = () => {
    setSelectedCategory(null);
    setView("presets");
  };

  const handleRegisterPreset = async (preset: RhaiPreset) => {
    const alreadyExists = nodes.some((n) => n.node_type === preset.nodeId);
    if (alreadyExists) {
      toast(`Node "${preset.displayName}" is already registered.`);
      return;
    }
    const payload = presetToApiPayload(preset);
    await createNode(payload);
    toast(`Preset "${preset.displayName}" registered successfully.`);
  };

  const handleRegisterAll = async () => {
    const presetsToRegister = (
      selectedCategory ? getPresetsByCategory(selectedCategory) : RHAI_PRESETS
    ).filter((preset) => !nodes.some((n) => n.node_type === preset.nodeId));

    if (presetsToRegister.length === 0) {
      toast("All presets are already registered.");
      return;
    }

    for (const preset of presetsToRegister) {
      const payload = presetToApiPayload(preset);
      await createNode(payload);
    }
    toast(`${presetsToRegister.length} presets registered successfully.`);
  };

  const handleSubmit = async (nodeData: CustomNodeFromApi) => {
    if (editingNode) {
      await updateNode(editingNode.node_type, nodeData.data);
    } else {
      await createNode(nodeData);
    }
    handleBackToList();
  };

  const handleDeleteConfirm = async () => {
    if (deletingNode) {
      await deleteNode(deletingNode.node_type);
      setDeletingNode(null);
    }
  };

  return (
    <>
      <Dialog open={isDialogOpen} onOpenChange={setDialogOpen}>
        <DialogTrigger asChild>
          <Button size={"sm"} variant={"secondary"}>
            <Blocks className='h-4 w-4' />
          </Button>
        </DialogTrigger>
        <DialogContent className='min-w-[80vw] h-[80vh] flex flex-col'>
          <DialogHeader>
            <DialogTitle>Custom Node Registry</DialogTitle>
            <DialogDescription>
              Manage custom script nodes available in the flow editor.
            </DialogDescription>
          </DialogHeader>

          {view === "list" && (
            <div className='flex-grow overflow-y-auto pr-2'>
              <div className='flex justify-end mb-4 gap-2'>
                <Button
                  size='sm'
                  variant={"outline"}
                  onClick={handleAddFromPreset}
                >
                  <Download className='mr-2 h-4 w-4' /> Add from Preset
                </Button>
                <Button size='sm' variant={"outline"}>
                  <PlusCircle className='mr-2 h-4 w-4' /> Select dir
                </Button>
                <Button size='sm' onClick={handleAddNew}>
                  <PlusCircle className='mr-2 h-4 w-4' /> Add New Node
                </Button>
              </div>
              <div className='space-y-2'>
                {isLoading && !nodes.length ? (
                  <div className='flex justify-center items-center h-40'>
                    <Loader2 className='h-8 w-8 animate-spin text-muted-foreground' />
                  </div>
                ) : (
                  nodes.map((node) => (
                    <div
                      key={node.node_type}
                      className='flex items-center justify-between p-3 border'
                    >
                      <div>
                        <p className='font-semibold'>{node.node_type}</p>
                        <p className='text-sm text-muted-foreground truncate max-w-xs'>
                          {JSON.stringify(node)}
                        </p>
                      </div>
                      <div className='flex items-center gap-2'>
                        <Button
                          variant='outline'
                          size='icon'
                          onClick={() => handleEdit(node)}
                        >
                          <Edit className='h-4 w-4' />
                        </Button>
                        <Button
                          variant='destructive'
                          size='icon'
                          onClick={() => setDeletingNode(node)}
                        >
                          <Trash2 className='h-4 w-4' />
                        </Button>
                      </div>
                    </div>
                  ))
                )}
                {!isLoading && !nodes.length && (
                  <div className='text-center text-muted-foreground py-10'>
                    No custom nodes found.
                  </div>
                )}
              </div>
            </div>
          )}

          {view === "form" && (
            <CustomNodeForm
              onSubmit={handleSubmit}
              onCancel={handleBackToList}
              initialNode={editingNode}
            />
          )}

          {view === "presets" && (
            <div className='flex-grow overflow-y-auto pr-2'>
              <div className='flex justify-between items-center mb-4'>
                <Button size='sm' variant='ghost' onClick={handleBackToList}>
                  Back to List
                </Button>
                <Button
                  size='sm'
                  variant='outline'
                  onClick={handleRegisterAll}
                  disabled={isLoading}
                >
                  <Download className='mr-2 h-4 w-4' />
                  {selectedCategory
                    ? `Register All ${selectedCategory}`
                    : "Register All"}
                </Button>
              </div>

              <div className='flex flex-wrap gap-2 mb-4'>
                {getPresetCategories().map((cat) => (
                  <Badge
                    key={cat}
                    variant={selectedCategory === cat ? "default" : "outline"}
                    className='cursor-pointer'
                    onClick={() =>
                      setSelectedCategory(selectedCategory === cat ? null : cat)
                    }
                  >
                    {cat}
                  </Badge>
                ))}
              </div>

              <div className='space-y-2'>
                {(selectedCategory
                  ? getPresetsByCategory(selectedCategory)
                  : RHAI_PRESETS
                ).map((preset) => {
                  const isRegistered = nodes.some(
                    (n) => n.node_type === preset.nodeId,
                  );
                  return (
                    <div
                      key={preset.nodeId}
                      className='flex items-center justify-between p-3 border rounded-md'
                    >
                      <div className='flex-1'>
                        <div className='flex items-center gap-2'>
                          <p className='font-semibold text-sm'>
                            {preset.displayName}
                          </p>
                          <Badge variant='secondary' className='text-xs'>
                            {preset.category}
                          </Badge>
                          {isRegistered && (
                            <Badge
                              variant='outline'
                              className='text-xs text-green-500'
                            >
                              Registered
                            </Badge>
                          )}
                        </div>
                        <p className='text-xs text-muted-foreground mt-1'>
                          {preset.description}
                        </p>
                        <p className='text-xs text-muted-foreground'>
                          In:{" "}
                          {preset.connectors
                            .filter((c) => c.type === "in")
                            .map((c) => c.name)
                            .join(", ") || "none"}{" "}
                          | Out:{" "}
                          {preset.connectors
                            .filter((c) => c.type === "out")
                            .map((c) => c.name)
                            .join(", ")}
                        </p>
                      </div>
                      <Button
                        size='sm'
                        variant={isRegistered ? "outline" : "default"}
                        disabled={isRegistered || isLoading}
                        onClick={() => handleRegisterPreset(preset)}
                      >
                        {isRegistered ? "Added" : "Register"}
                      </Button>
                    </div>
                  );
                })}
              </div>
            </div>
          )}
        </DialogContent>
      </Dialog>

      <AlertDialog
        open={!!deletingNode}
        onOpenChange={() => setDeletingNode(null)}
      >
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>Are you sure?</AlertDialogTitle>
            <AlertDialogDescription>
              This action cannot be undone. This will permanently delete the
              <span className='font-semibold mx-1'>
                {deletingNode?.node_type}
              </span>
              node.
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel>Cancel</AlertDialogCancel>
            <AlertDialogAction onClick={handleDeleteConfirm}>
              Continue
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </>
  );
}


================================================
FILE: apps/client/src/features/flow/Flow.tsx
================================================
import { useEffect, useState } from "react";
import { Graph } from "./Graph";
import { Button } from "@/components/ui/button";

import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
  DialogClose,
} from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { MoreHorizontal, Plus, Trash2 } from "lucide-react";
import { File } from "lucide-react";
import { deleteFlow } from "@/entities/flow/api";
import { Flow } from "@/entities/flow/types";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import {
  AlertDialogHeader,
  AlertDialogFooter,
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogTitle,
} from "@/components/ui/alert-dialog";
import { useFlowStore } from "@/entities/flow/store";
import { RunFlowButton } from "./RunFlow";
import { FlowLog } from "../flow-log/FlowLog";

export default function FlowPage() {
  const {
    nodes,
    edges,
    setNodes,
    setEdges,
    flows,
    fetchFlows,
    currentFlowId,
    resetFlowState,
  } = useFlowStore();

  // const saveAndRunFlow = async () => {
  //   await saveGraph();
  //   await fetchFlows();
  // };

  useEffect(() => {
    fetchFlows();

    return () => {
      resetFlowState();
    };
  }, [fetchFlows, resetFlowState]);

  useEffect(() => {
    console.log("Fetched flows from API:", flows);
  }, [flows]);

  return (
    <div className='flex flex-col h-[calc(100vh-3rem)] w-full bg-background'>
      <div className='flex-1 flex flex-col relative overflow-hidden'>
        {currentFlowId ? (
          <>
            <div
              className='flex-1 relative min-h-0'
              data-allow-backspace='true'
            >
              <Graph
                nodes={nodes}
                edges={edges}
                onNodesChange={setNodes}
                onEdgesChange={setEdges}
              />
            </div>
            <FlowLog />
          </>
        ) : (
          <div
            style={{
              display: "flex",
              justifyContent: "center",
              alignItems: "center",
              height: "calc(100% - 34px)",
              color: "#888",
            }}
          >
            <h2>Select or create a flow to begin.</h2>
          </div>
        )}
      </div>
    </div>
  );
}

export function FlowHeader() {
  const { error } = useFlowStore();

  // const [saveComment, setSaveComment] = useState("");

  // const handleSave = () => {
  //   saveGraph(saveComment || undefined);
  //   setSaveComment("");
  // };

  return (
    <header
      style={{
        display: "flex",
        gap: "1rem",
        alignItems: "center",
      }}
    >
      <RunFlowButton />
      {/* <Dialog onOpenChange={(open) => !open && setSaveComment("")}>
        <DialogTrigger asChild>
          <Button
            size={"sm"}
            variant={"outline"}
            disabled={!currentFlowId || isLoading}
          >
            {isLoading ? "Saving..." : "Save Current Flow"}
          </Button>
        </DialogTrigger>
        <DialogContent className='sm:max-w-[425px]'>
          <DialogHeader>
            <DialogTitle>Save Flow Version</DialogTitle>
            <DialogDescription>
              Enter an optional comment for this version of the flow.
            </DialogDescription>
          </DialogHeader>
          <div className='grid gap-4 py-4'>
            <div className='grid grid-cols-4 items-center gap-4'>
              <Label htmlFor='comment' className='text-right'>
                Comment
              </Label>
              <Input
                id='comment'
                value={saveComment}
                onChange={(e) => setSaveComment(e.target.value)}
                className='col-span-3'
                placeholder='e.g., Initial setup'
              />
            </div>
          </div>
          <DialogFooter>
            <DialogClose asChild>
              <Button type='button' onClick={handleSave}>
                Save Version
              </Button>
            </DialogClose>
          </DialogFooter>
        </DialogContent>
      </Dialog> */}

      {error && (
        <p style={{ color: "red", marginLeft: "auto" }}>Error: {error}</p>
      )}
    </header>
  );
}

export function FlowSidebar() {
  const {
    flows,
    currentFlowId,
    createNewFlow,
    setCurrentFlowId,
    fetchFlows,
    hasUnsavedChanges,
  } = useFlowStore();
  const [newFlowName, setNewFlowName] = useState("");
  const [flowToDelete, setFlowToDelete] = useState<Flow | null>(null);
  const [pendingFlowId, setPendingFlowId] = useState<number | null>(null);
  const [showUnsavedPrompt, setShowUnsavedPrompt] = useState(false);

  const unsavedMessage =
    "You have unsaved changes in this flow. Switch flows without saving?";

  const handleCreateFlow = async () => {
    if (newFlowName) {
      await createNewFlow(newFlowName);
      await fetchFlows();
      setNewFlowName("");
    }
  };

  const handleFlowSelect = (flowId: number) => {
    if (hasUnsavedChanges && flowId !== currentFlowId) {
      setPendingFlowId(flowId);
      setShowUnsavedPrompt(true);
      return;
    }
    setCurrentFlowId(flowId);
  };

  const handleConfirmSwitch = () => {
    if (pendingFlowId !== null) {
      setCurrentFlowId(pendingFlowId);
    }
    setPendingFlowId(null);
    setShowUnsavedPrompt(false);
  };

  const handleCancelSwitch = () => {
    setPendingFlowId(null);
    setShowUnsavedPrompt(false);
  };

  const handleDeleteConfirm = async () => {
    if (flowToDelete) {
      await deleteFlow(flowToDelete.id);
      await fetchFlows();
      setFlowToDelete(null);
    }
  };

  return (
    <aside className='w-86 border-r bg-card text-card-foreground p-4 overflow-hidden h-full'>
      <div className='flex flex-col h-full'>
        <div className='flex items-center justify-between mb-4 shrink-0'>
          <h2 className='mb-1 text-md font-semibold tracking-tight'>Flows</h2>
          <div className='flex items-center'>
            <Dialog onOpenChange={(open) => !open && setNewFlowName("")}>
              <DialogTrigger asChild>
                <Button variant='ghost' size='icon'>
                  <Plus className='h-4 w-4 ' />
                </Button>
              </DialogTrigger>
              <DialogContent className='sm:max-w-[425px]'>
                <DialogHeader>
                  <DialogTitle>Create New Flow</DialogTitle>
                  <DialogDescription>
                    Enter a name for your new flow. Click create when you're
                    done.
                  </DialogDescription>
                </DialogHeader>
                <div className='grid gap-4 py-4'>
                  <div className='grid grid-cols-4 items-center gap-4'>
                    <Label htmlFor='name' className='text-right'>
                      Name
                    </Label>
                    <Input
                      id='name'
                      value={newFlowName}
                      onChange={(e) => setNewFlowName(e.target.value)}
                      className='col-span-3'
                      placeholder='My Awesome Flow'
                    />
                  </div>
                </div>
                <DialogFooter>
                  <DialogClose asChild>
                    <Button type='button' onClick={handleCreateFlow}>
                      Create
                    </Button>
                  </DialogClose>
                </DialogFooter>
              </DialogContent>
            </Dialog>
          </div>
        </div>
        <div className='flex-1 overflow-y-auto min-h-0 -mr-4 pr-4'>
          <div className='flex flex-col gap-1'>
            {flows.map((flow) => (
              <div
                key={flow.id}
                className='flex w-full items-center group rounded-md gap-2'
              >
                <Button
                  variant='ghost'
                  onClick={() => handleFlowSelect(flow.id)}
                  className={` justify-start flex-grow hover:bg-transparent ${
                    currentFlowId === flow.id
                      ? "bg-accent text-accent-foreground"
                      : ""
                  }`}
                >
                  <File className='mr-0 h-4 w-4' />
                  <span className='truncate'>{flow.name}</span>
                </Button>
                <DropdownMenu>
                  <DropdownMenuTrigger asChild>
                    <Button
                      variant='ghost'
                      size='icon'
                      className='h-8 w-8 opacity-0 group-hover:opacity-100 focus:opacity-100'
                    >
                      <MoreHorizontal className='h-4 w-4 ' />
                    </Button>
                  </DropdownMenuTrigger>
                  <DropdownMenuContent>
                    <DropdownMenuItem
                      onSelect={() => setFlowToDelete(flow)}
                      className='text-red-600 hover:!text-red-600 focus:text-red-600'
                    >
                      <Trash2 className='text-red-600 hover:!text-red-600 mr-2 h-4 w-4' />
                      Delete
                    </DropdownMenuItem>
                  </DropdownMenuContent>
                </DropdownMenu>
              </div>
            ))}
          </div>
        </div>
      </div>

      <AlertDialog
        open={!!flowToDelete}
        onOpenChange={(open) => !open && setFlowToDelete(null)}
      >
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
            <AlertDialogDescription>
              This action cannot be undone. This will permanently delete the "
              {flowToDelete?.name}" flow.
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel onClick={() => setFlowToDelete(null)}>
              Cancel
            </AlertDialogCancel>
            <AlertDialogAction asChild>
              <Button variant={"destructive"} onClick={handleDeleteConfirm}>
                Continue
              </Button>
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>

      <AlertDialog open={showUnsavedPrompt} onOpenChange={setShowUnsavedPrompt}>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>Unsaved changes</AlertDialogTitle>
            <AlertDialogDescription>
              {unsavedMessage} Unsaved changes will be lost.
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel onClick={handleCancelSwitch}>
              Stay on this flow
            </AlertDialogCancel>
            <AlertDialogAction onClick={handleConfirmSwitch}>
              Switch anyway
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </aside>
  );
}


================================================
FILE: apps/client/src/features/flow/Graph.tsx
================================================
import { useState, useRef, useEffect, useCallback, useMemo } from "react";
import * as d3 from "d3";
import { Plus, Minus, Lock, LockOpen, SquarePlus } from "lucide-react";
import { Button } from "@/components/ui/button";
import {
  GraphProps,
  Node,
  Edge,
  Connector,
  NodeRenderer,
  NodeTypes,
} from "./flowTypes";

// import { renderButtonNode } from "./nodes/ButtonNode";
import { renderTitleNode } from "./nodes/TitleNode";
import { Options } from "./Options";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuPortal,
  DropdownMenuSub,
  DropdownMenuSubContent,
  DropdownMenuSubTrigger,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { renderProcessingNode } from "./nodes/ProcessingNode";
import { getCustomNode, getDefalutNode } from "./flowUtils";
import { renderVarNode } from "./nodes/VarNode";
import { renderCalcNode } from "./nodes/CalcNode";
import { renderHttpNode } from "./nodes/HttpNode";
import { formatConstantCase } from "@/lib/string";
import { renderLogicNode } from "./nodes/LogicNode";
import { renderIntervalNode } from "./nodes/IntervalNode";
import { renderMQTTNode } from "./nodes/MQTTNode";
import { renderButtonNode } from "./nodes/ButtonNode";
import { zoomIdentity } from "d3-zoom";
import { AddCustomNode } from "./AddCustomNode";
import { useCustomNodeStore } from "@/entities/custom-nodes/store";
import { useIntegrationStore } from "@/entities/integrations/store";
import { SelectedItemActions } from "./SelectedItemActions";

type NodeGroup = {
  label: string;
  nodes: string[];
};

const nodeColor = "#2a2c36";
const nodeHoverColor = "#444754";

const nodeLightColor = "#d1d4e3";
const highlightColor = "#1976d2";

const ros2NodeKey = ["EXT_ROS2_WEBSOCKET_ON", "EXT_ROS2_WEBSOCKET_SEND"];

export function Graph({
  nodes,
  edges,
  width = "100%",
  height = "100%",
  gridSize = 20,
  gridColor = "#2f2f38",
  edgeColor = "#666",
  edgeWidth = 2,
  onNodesChange,
  onEdgesChange,
}: GraphProps) {
  const [selectedConnector, setSelectedConnector] = useState<string | null>(
    null,
  );
  const [locked, setLocked] = useState(false);
  const [selectedElement, setSelectedElement] = useState<{
    type: "node" | "edge";
    id: string;
  } | null>(null);
  const [open, setOpen] = useState(false);
  const [openedNode, setOpenedNode] = useState<Node | null>(null);
  const { nodes: customNodes } = useCustomNodeStore();

  const svgRef = useRef<SVGSVGElement>(null);
  const gRef = useRef<SVGGElement>(null);
  const zoomRef = useRef<d3.ZoomBehavior<SVGSVGElement, unknown> | null>(null);
  const transformRef = useRef<d3.ZoomTransform>(zoomIdentity);

  const edgesRef = useRef(edges);
  const nodesRef = useRef(nodes);

  const { isRos2Connected, fetchStatus } = useIntegrationStore();

  useEffect(() => {
    fetchStatus();
  }, [fetchStatus]);

  const [nodeRenderers, setNodeRenderers] = useState<
    Record<string, NodeRenderer>
  >({});

  const nodeGroups: NodeGroup[] = useMemo(() => {
    const baseGroups: NodeGroup[] = [
      {
        label: "Default",
        nodes: ["START", "LOG_MESSAGE", "SHOW_TOAST"],
      },
      {
        label: "Data",
        nodes: [
          "SET_VARIABLE",
          "SET_VARIABLE_WITH_EXEC",
          "TYPE_CONVERTER",
          "RTP_STREAM_IN",
          "DECODE_OPUS",
          "GST_DECODER",
        ],
      },
      {
        label: "Logic",
        nodes: [
          "CALCULATION",
          "LOGIC_OPERATOR",
          "INTERVAL",
          "BRANCH",
          "JSON_SELECTOR",
          "JSON_MODIFY",
        ],
      },
      {
        label: "Communication",
        nodes: [
          "HTTP_REQUEST",
          "MQTT_PUBLISH",
          "MQTT_SUBSCRIBE",
          "DASHBOARD_EVENT_LISTENER",
          "WEBSOCKET_SEND",
          "WEBSOCKET_ON",
        ],
      },
      {
        label: "AI/ML",
        nodes: ["YOLO_DETECT"],
      },
    ];

    if (isRos2Connected) {
      baseGroups.push({
        label: "ROS2",
        nodes: ros2NodeKey,
      });
    }

    const customNodeTypes = customNodes.map((item) => {
      try {
        return item.node_type;
      } catch {
        return "";
      }
    });

    if (customNodeTypes.length > 0) {
      baseGroups.push({
        label: "Custom Node",
        nodes: customNodeTypes,
      });
    }

    return baseGroups;
  }, [customNodes, isRos2Connected]);

  const handleClickOption = (node: Node) => {
    setOpenedNode(node);
    setOpen(true);
  };

  const handleOpenOptions = (isOpen: boolean) => {
    setOpen(isOpen);
  };

  useEffect(() => {
    const baseRenderers: Record<string, NodeRenderer> = {
      START: (g, d) => renderTitleNode(g, d),
      SET_VARIABLE: (g, d) => renderVarNode(g, d, () => handleClickOption(d)),
      SET_VARIABLE_WITH_EXEC: (g, d) =>
        renderVarNode(g, d, () => handleClickOption(d)),
      CONDITION: (g, d) => renderProcessingNode(g, d),
      LOG_MESSAGE: (g, d) => renderProcessingNode(g, d),
      SHOW_TOAST: (g, d) =>
        renderButtonNode(g, d, () => handleClickOption(d)),
      CALCULATION: (g, d) => renderCalcNode(g, d, () => handleClickOption(d)),
      HTTP_REQUEST: (g, d) => renderHttpNode(g, d, () => handleClickOption(d)),
      INTERVAL: (g, d) => renderIntervalNode(g, d, () => handleClickOption(d)),
      LOGIC_OPERATOR: (g, d) =>
        renderLogicNode(g, d, () => handleClickOption(d)),
      MQTT_PUBLISH: (g, d) => renderMQTTNode(g, d, () => handleClickOption(d)),
      MQTT_SUBSCRIBE: (g, d) =>
        renderMQTTNode(g, d, () => handleClickOption(d)),
      DASHBOARD_EVENT_LISTENER: (g, d) =>
        renderMQTTNode(g, d, () => handleClickOption(d)),
      TYPE_CONVERTER: (g, d) =>
        renderButtonNode(g, d, () => handleClickOption(d)),
      RTP_STREAM_IN: (g, d) =>
        renderButtonNode(g, d, () => handleClickOption(d)),
      DECODE_OPUS: (g, d) => renderProcessingNode(g, d),
      DECODE_H264: (g, d) => renderProcessingNode(g, d),
      BRANCH: (g, d) => renderProcessingNode(g, d),
      JSON_SELECTOR: (g, d) =>
        renderButtonNode(g, d, () => handleClickOption(d)),
      JSON_MODIFY: (g, d) => renderButtonNode(g, d, () => handleClickOption(d)),
      YOLO_DETECT: (g, d) => renderButtonNode(g, d, () => handleClickOption(d)),
      GST_DECODER: (g, d) => renderButtonNode(g, d, () => handleClickOption(d)),
      WEBSOCKET_SEND: (g, d) =>
        renderButtonNode(g, d, () => handleClickOption(d)),
      WEBSOCKET_ON: (g, d) =>
        renderButtonNode(g, d, () => handleClickOption(d)),
    };

    if (isRos2Connected) {
      ros2NodeKey.forEach((element) => {
        baseRenderers[element] = (g, d) =>
          renderButtonNode(g, d, () => handleClickOption(d));
      });
    }

    const customNodeRenderers = customNodes.reduce((acc, customNode) => {
      acc[customNode.node_type] = (g, d) =>
        renderButtonNode(g, d, () => handleClickOption(d));
      return acc;
    }, {} as Record<string, NodeRenderer>);

    setNodeRenderers({
      ...baseRenderers,
      ...customNodeRenderers,
    });
  }, [customNodes, isRos2Connected]);

  useEffect(() => {
    edgesRef.current = edges;
    nodesRef.current = nodes;
  }, [edges, nodes]);

  const dragLineRef = useRef<d3.Selection<
    SVGLineElement,
    unknown,
    null,
    undefined
  > | null>(null);
  const dragSourceRef = useRef<string | null>(null);
  const isDraggingRef = useRef(false);

  const handleAddNode = useCallback(
    (type: NodeTypes) => {
      if (!onNodesChange || !svgRef.current) return;

      const currentTransform = transformRef.current;

      const svgRect = svgRef.current.getBoundingClientRect();
      const viewCenterX = svgRect.width / 2;
      const viewCenterY = svgRect.height / 2;

      const [worldX, worldY] = currentTransform.invert([
        viewCenterX,
        viewCenterY,
      ]);

      const id = `${type}-${Date.now()}`;
      const isCustomNode = type[0] == "_";
      if (isCustomNode) {
        console.log(type);
        const customNode = getCustomNode(
          customNodes,
          type,
          id,
          worldX,
          worldY,
        ) as unknown as Node;

        if (!customNode) {
          return false;
        }

        onNodesChange([
          ...nodesRef.current,
          {
            ...(customNode as Node),
          },
        ]);

        return false;
      }

      const value = getDefalutNode(type, id, worldX, worldY);

      onNodesChange([
        ...nodesRef.current,
        {
          ...value,
        },
      ]);
    },
    [onNodesChange, customNodes],
  );

  useEffect(() => {
    if (!svgRef.current) return;
    const svg = d3.select<SVGSVGElement, unknown>(svgRef.current);
    if (!svg.select("defs").size()) {
      svg
        .append("defs")
        .append("pattern")
        .attr("id", "grid")
        .attr("width", gridSize)
        .attr("height", gridSize)
        .attr("patternUnits", "userSpaceOnUse")
        .append("circle")
        .attr("cx", gridSize / 2)
        .attr("cy", gridSize / 2)
        .attr("r", 1)
        .attr("fill", gridColor);
    }

    const zoom = d3
      .zoom<SVGSVGElement, unknown>()
      .scaleExtent([0.2, 2])
      .on("zoom", (e) => {
        transformRef.current = e.transform;

        if (!locked)
          d3.select<SVGGElement, unknown>(gRef.current!).attr(
            "transform",
            e.transform,
          );
      });
    zoomRef.current = zoom;
    svg.call(zoom);

    svg.on("click.clearSelection", () => {
      setSelectedElement(null);
    });

    return () => {
      svg.on("click.clearSelection", null);
    };
  }, [gridSize, gridColor, locked]);

  const deleteSelectedNode = useCallback(() => {
    if (!selectedElement || selectedElement.type !== "node") return;

    const removedNode = nodesRef.current.find(
      (n) => n.id === selectedElement.id,
    );
    const removedConnIds = removedNode
      ? removedNode.connectors.map((c) => c.id)
      : [];

    onNodesChange?.(
      nodesRef.current.filter((n) => n.id !== selectedElement.id),
    );
    onEdgesChange?.(
      edgesRef.current.filter(
        (ed) =>
          !removedConnIds.includes(ed.source) &&
          !removedConnIds.includes(ed.target),
      ),
    );

    setSelectedElement(null);
  }, [selectedElement, onNodesChange, onEdgesChange]);

  useEffect(() => {
    const handleKeyDown = (e: KeyboardEvent) => {
      if (e.key !== "Backspace") return;
      if (selectedElement?.type === "node") {
        deleteSelectedNode();
      } else if (selectedElement?.type === "edge") {
        onEdgesChange?.(
          edgesRef.current.filter((ed) => ed.id !== selectedElement.id),
        );
        setSelectedElement(null);
      }
    };

    window.addEventListener("keydown", handleKeyDown);
    return () => {
      window.removeEventListener("keydown", handleKeyDown);
    };
  }, [selectedElement, onEdgesChange, deleteSelectedNode]);

  useEffect(() => {
    const g = d3.select(gRef.current);

    g.selectAll<SVGRectElement, unknown>("rect.grid-bg")
      .data([null])
      .join("rect")
      .attr("class", "grid-bg")
      .attr("x", -5000)
      .attr("y", -5000)
      .attr("width", 10000)
      .attr("height", 10000)
      .attr("fill", "url(#grid)")
      .attr("pointer-events", "none");

    const nodeSel = g
      .selectAll<SVGGElement, Node>("g.node")
      .data(nodes, (d) => d.id);

    nodeSel.exit().remove();

    const nodeEnter = nodeSel
      .enter()
      .append("g")
      .attr("class", "node")
      .attr("cursor", "pointer");

    nodeEnter
      .append("rect")
      .attr("class", "node-body")
      .attr("width", (d) => d.width)
      .attr("height", (d) => d.height)
      .attr("fill", "#07070f")
      .attr("stroke", nodeColor)
      .attr("stroke-width", 1);

    nodeEnter
      .append("rect")
      .attr("class", "node-header")
      .attr("width", (d) => d.width)
      .attr("height", 10)
      .attr("fill", nodeColor);

    nodeEnter
      .append("text")
      .attr("x", (d) => d.width / 2)
      .attr("y", 2)
      .attr("text-anchor", "middle")
      .attr("dominant-baseline", "hanging")
      .attr("fill", nodeLightColor)
      .attr("font-size", 8)
      .attr("font-weight", 800)
      .text((d) => {
        if (d.nodeType === "DASHBOARD_EVENT_LISTENER") {
          return "Dashboard";
        }
        return d.nodeType || "";
      });

    const nodesMerged = nodeEnter.merge(nodeSel);

    nodesMerged
      .attr(
        "transform",
        (d) => `translate(${d.x - d.width / 2},${d.y - d.height / 2})`,
      )
      .select<SVGRectElement>("rect")
      .attr("stroke", (d) =>
        selectedElement?.type === "node" && selectedElement.id === d.id
          ? highlightColor
          : nodeColor,
      );

    nodesMerged
      .select<SVGRectElement>(".node-body")
      .attr("stroke", (d) =>
        selectedElement?.type === "node" && selectedElement.id === d.id
          ? highlightColor
          : nodeColor,
      );

    nodesMerged
      .on("mouseover", function (event, d) {
        if (selectedElement?.type === "node" && selectedElement.id === d.id)
          return;
        d3.select(this)
          .select(".node-body")
          .transition()
          .duration(100)
          .attr("stroke", nodeHoverColor);

        d3.select(this)
          .select(".node-header")
          .transition()
          .duration(100)
          .attr("fill", nodeHoverColor);
      })
      .on("mouseout", function (event, d) {
        if (selectedElement?.type === "node" && selectedElement.id === d.id)
          return;
        d3.select(this)
          .select(".node-body")
          .transition()
          .duration(100)
          .attr("stroke", nodeColor);

        d3.select(this)
          .select(".node-header")
          .transition()
          .duration(100)
          .attr("fill", nodeColor);
      });

    nodesMerged
      .select<SVGRectElement>(".node-header")
      .attr("fill", (d) =>
        selectedElement?.type === "node" && selectedElement.id === d.id
          ? highlightColor
          : nodeColor,
      );

    nodesMerged.each(function (d) {
      const g = d3.select<SVGGElement, Node>(this);
      //console.log("Rendering nodes:");
      g.selectAll(".node-content").remove();
      const renderer = d.nodeType ? nodeRenderers[d.nodeType] : null;
      if (renderer) renderer(g, d);
    });

    const drag = d3.drag<SVGGElement, Node>().on("drag", (e, d) => {
      if (locked || isDraggingRef.current) return;
      const updated = nodesRef.current.map((n) =>
        n.id === d.id ? { ...n, x: e.x, y: e.y } : n,
      );
      onNodesChange?.(updated);
    });

    nodesMerged.on("click", (e, d) => {
      e.stopPropagation();
      setSelectedElement({ type: "node", id: d.id });
    });

    nodesMerged.call(drag);

    const connSel = nodesMerged
      .selectAll<SVGGElement, Connector>("g.connector")
      .data(
        (d) => d.connectors,
        (c) => c.id,
      );

    connSel.exit().remove();

    const connEnter = connSel.enter().append("g").attr("class", "connector");

    connEnter.append("circle").attr("r", 3);

    connEnter
      .append("text")
      .attr("font-size", 8)
      .attr("dy", 4)
      .attr("text-anchor", (c) => (c.type === "in" ? "end" : "start"))
      .attr("dx", (c) => (c.type === "in" ? -6 : 6))
      .attr("fill", nodeLightColor)
      .text((c) => c.name);

    connEnter
      .merge(connSel)
      .attr("data-connector-id", (c) => c.id)
      .attr("data-connector-type", (c) => c.type)
      .attr("transform", (c, i, els) => {
        const parentEl = els[i].parentNode as SVGGElement;
        const parent = d3.select<SVGGElement, Node>(parentEl).datum();
        const list = parent.connectors.filter((x) => x.type === c.type);
        const idx = list.findIndex((x) => x.id === c.id);
        const h = parent.height;
        const spacing = list.length > 0 ? h / list.length : 0;
        const dx = c.type === "in" ? 0 : parent.width;
        const dy = spacing * idx + spacing / 2;
        return `translate(${dx},${dy})`;
      })
      .select("circle")
      .attr("fill", (c) =>
        selectedConnector === c.id ? highlightColor : nodeLightColor,
      );

    const edgeSel = g
      .selectAll<SVGPathElement, Edge>("path.edge")
      .data(edges, (d) => d.id);

    edgeSel.exit().remove();

    const edgeEnter = edgeSel
      .enter()
      .append("path")
      .attr("class", "edge")
      .attr("fill", "none")
      .style("cursor", "pointer")
      .attr("stroke", edgeColor)
      .attr("stroke-width", edgeWidth);

    edgeEnter
      .merge(edgeSel)
      .attr("stroke", (d) =>
        selectedElement?.type === "edge" && selectedElement.id === d.id
          ? highlightColor
          : edgeColor,
      )
      .attr("d", (d) => {
        const srcNode = nodes.find((n) =>
          n.connectors.some((c) => c.id === d.source),
        )!;
        const srcConn = srcNode.connectors.find((c) => c.id === d.source)!;
        const srcW = srcNode.width;
        const srcH = srcNode.height;
        const srcDx = srcConn.type === "in" ? 0 : srcW;
        const srcList = srcNode.connectors.filter(
          (c) => c.type === srcConn.type,
        );
        const srcIdx = srcList.findIndex((c) => c.id === srcConn.id);
        const srcSpacing = srcList.length > 0 ? srcH / srcList.length : 0;
        const srcDy = srcSpacing * srcIdx + srcSpacing / 2;
        const x1 = srcNode.x - srcW / 2 + srcDx;
        const y1 = srcNode.y - srcH / 2 + srcDy;

        const tgtNode = nodes.find((n) =>
          n.connectors.some((c) => c.id === d.target),
        )!;
        const tgtConn = tgtNode.connectors.find((c) => c.id === d.target)!;
        const tgtW = tgtNode.width;
        const tgtH = tgtNode.height;
        const tgtDx = tgtConn.type === "in" ? 0 : tgtW;
        const tgtList = tgtNode.connectors.filter(
          (c) => c.type === tgtConn.type,
        );
        const tgtIdx = tgtList.findIndex((c) => c.id === tgtConn.id);
        const tgtSpacing = tgtList.length > 0 ? tgtH / tgtList.length : 0;
        const tgtDy = tgtSpacing * tgtIdx + tgtSpacing / 2;
        const x2 = tgtNode.x - tgtW / 2 + tgtDx;
        const y2 = tgtNode.y - tgtH / 2 + tgtDy;

        const mx = (x1 + x2) / 2;
        return `M${x1},${y1} C${mx},${y1} ${mx},${y2} ${x2},${y2}`;
      })
      .on("click", (e, d) => {
        e.stopPropagation();
        setSelectedElement({ type: "edge", id: d.id });
      });

    g.selectAll<SVGPathElement, Edge>(".edge-hit").remove();

    g.selectAll<SVGPathElement, Edge>("path.edge")
      .style("pointer-events", "none")
      .style("transition", "stroke 0.2s ease")
      .each(function (d) {
        const original = this as SVGPathElement;
        const hit = original.cloneNode(false) as SVGPathElement;
        hit.setAttribute("class", "edge-hit");
        hit.setAttribute("fill", "none");
        hit.setAttribute("stroke", "transparent");
        hit.setAttribute("stroke-width", "12");
        hit.style.pointerEvents = "stroke";
        hit.addEventListener("click", (e) => {
          e.stopPropagation();
          setSelectedElement({ type: "edge", id: d.id });
        });

        hit.addEventListener("mouseover", () => {
          hit.setAttribute("stroke", "#26282b90");
        });
        hit.addEventListener("mouseout", () => {
          hit.setAttribute("stroke", "transparent");
        });
        original.parentNode!.insertBefore(hit, original);
      });

    let magnetTarget: { id: string; x: number; y: number } | null = null;
    const magnetRadius = 10;

    connEnter.on("mousedown", (e, c) => {
      e.stopPropagation();
      if (c.type !== "out") return;
      setSelectedConnector(c.id);
      dragSourceRef.current = c.id;
      isDraggingRef.current = true;
      const gNode = gRef.current;
      if (!gNode) return;
      const [x, y] = d3.pointer(e, gNode);
      dragLineRef.current = d3
        .select(gNode)
        .append("line")
        .attr("class", "drag-temp")
        .attr("stroke", highlightColor)
        .attr("stroke-width", edgeWidth)
        .attr("pointer-events", "none")
        .attr("x1", x)
        .attr("y1", y)
        .attr("x2", x)
        .attr("y2", y);

      d3.select(svgRef.current)
        .on("mousemove.dragline", (ev) => {
          if (!isDraggingRef.current || !dragLineRef.current) return;
          const [mx, my] = d3.pointer(ev, gNode);
          magnetTarget = null;
          nodesRef.current.forEach((node) => {
            node.connectors.forEach((connItem) => {
              if (connItem.type !== "in") return;
              const w = node.width;
              const h = node.height;
              const dx = connItem.type === "in" ? 0 : w;
              const list = node.connectors.filter(
                (x) => x.type === connItem.type,
              );
              const idx = list.findIndex((x) => x.id === connItem.id);
              const spacing = list.length > 0 ? h / list.length : 0;
              const dy = spacing * idx + spacing / 2;
              const cx = node.x - w / 2 + dx;
              const cy = node.y - h / 2 + dy;
              const dist = Math.hypot(mx - cx, my - cy);
              if (dist < magnetRadius) {
                magnetTarget = { id: connItem.id, x: cx, y: cy };
              }
            });
          });

          if (magnetTarget) {
            const magnetH = magnetTarget as { x: number; y: number };
            dragLineRef.current.attr("x2", magnetH.x).attr("y2", magnetH.y);
          } else {
            dragLineRef.current.attr("x2", mx).attr("y2", my);
          }
        })
        .on("mouseup.dragline", (ev) => {
          d3.select(svgRef.current).on(".dragline", null);
          dragLineRef.current?.remove();
          dragLineRef.current = null;
          isDraggingRef.current = false;
          setSelectedConnector(null);
          let targetId: string | null = null;
          if (magnetTarget) {
            targetId = magnetTarget.id;
          } else {
            const targetEl = (ev.target as HTMLElement).closest(
              "g.connector",
            ) as SVGGElement | null;
            if (targetEl) {
              const type = targetEl.getAttribute("data-connector-type");
              const id = targetEl.getAttribute("data-connector-id");
              if (type === "in" && id) {
                targetId = id;
              }
            }
          }
          if (targetId && dragSourceRef.current) {
            const isExistConnection =
              edgesRef.current.filter((item) => {
                return (
                  item.source == dragSourceRef.current &&
                  item.target == targetId
                );
              }).length > 0;

            if (isExistConnection == false) {
              onEdgesChange?.([
                ...edgesRef.current,
                {
                  id: `${dragSourceRef.current}-${targetId}-${Date.now()}`,
                  source: dragSourceRef.current,
                  target: targetId,
                },
              ]);
            }
          }
          dragSourceRef.current = null;
          magnetTarget = null;
        });
    });

    nodesMerged.raise();
  }, [
    nodes,
    edges,
    locked,
    selectedConnector,
    selectedElement,
    edgeColor,
    edgeWidth,
    onNodesChange,
    onEdgesChange,
  ]);

  const handleZoom = useCallback((k: number) => {
    if (!zoomRef.current) return;
    if (!svgRef.current) return;

    const scaleBy = zoomRef.current.scaleBy;

    d3.select<SVGSVGElement, unknown>(svgRef.current)
      .transition()
      .duration(200)
      .call(scaleBy, k);
  }, []);

  return (
    <div
      style={{
        width,
        height,
        position: "relative",
      }}
    >
      <svg ref={svgRef} width='100%' height='100%'>
        <g ref={gRef} />
      </svg>
      <SelectedItemActions
        selectedElement={selectedElement}
        onDeleteNode={deleteSelectedNode}
      />
      <div
        style={{
          position: "absolute",
          top: 32,
          right: 16,
          display: "flex",
          flexDirection: "column",
          gap: 8,
        }}
      >
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <Button size={"sm"} variant={"secondary"}>
              <SquarePlus size={18} />
            </Button>
          </DropdownMenuTrigger>
          <DropdownMenuContent>
            {nodeGroups.map((group) => (
              <DropdownMenuSub key={group.label}>
                <DropdownMenuSubTrigger>
                  <span>{group.label}</span>
                </DropdownMenuSubTrigger>
                <DropdownMenuPortal>
                  <DropdownMenuSubContent>
                    {group.nodes.map((nodeType) => (
                      <DropdownMenuItem
                        key={nodeType}
                        onClick={() => handleAddNode(nodeType as NodeTypes)}
                      >
                        {formatConstantCase(nodeType)}
                      </DropdownMenuItem>
                    ))}
                  </DropdownMenuSubContent>
                </DropdownMenuPortal>
              </DropdownMenuSub>
            ))}
          </DropdownMenuContent>
        </DropdownMenu>

        <Button
          size={"sm"}
          variant={"secondary"}
          onClick={() => handleZoom(1.2)}
        >
          <Plus size={18} />
        </Button>
        <Button
          size={"sm"}
          variant={"secondary"}
          onClick={() => handleZoom(0.8)}
        >
          <Minus size={18} />
        </Button>
        <Button
          size={"sm"}
          variant={"secondary"}
          onClick={() => setLocked((p) => !p)}
        >
          {locked ? <Lock size={18} /> : <LockOpen size={18} />}
        </Button>
        <AddCustomNode />

        <Options
          open={open}
          selectedNode={openedNode}
          setOpen={handleOpenOptions}
        />
      </div>
    </div>
  );
}


================================================
FILE: apps/client/src/features/flow/Options.tsx
================================================
import { useState, useEffect, useCallback } from "react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import {
  Sheet,
  SheetContent,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetTitle,
} from "@/components/ui/sheet";
import { DataNodeType, DataNodeTypeType, Node } from "./flowTypes";
import { useFlowStore } from "@/entities/flow/store";

interface OptionsProps {
  open: boolean;
  selectedNode: Node | null;
  setOpen: (open: boolean) => void;
}

const getDefaultValueForType = (type: string) => {
  switch (type.toUpperCase()) {
    case "NUMBER":
      return "0";
    case "BOOLEAN":
      return "false";
    case "JSON":
      return "{}";
    case "STRING":
    default:
      return "";
  }
};

export function Options({ open, selectedNode, setOpen }: OptionsProps) {
  const { updateNode, addRefresh } = useFlowStore();

  const [formData, setFormData] = useState<DataNodeType | object>({});
  const [formTypeData, setFormTypeData] = useState<DataNodeTypeType>({});

  const resolveDynamicTypes = useCallback(
    (
      currentData: DataNodeType | object,
      baseDataType: DataNodeTypeType | undefined,
    ) => {
      if (!baseDataType) return {};

      const resolved: DataNodeTypeType = {};
      const dependsOnRegex = /^DEPENDS_ON\[(.*?):(.*?)\]$/;

      for (const key in baseDataType) {
        const typeDef = baseDataType[key] as string;
        const match = typeDef.match(dependsOnRegex);

        if (match) {
          const controllerField = match[1];
          const mappingsString = match[2];
          const controllingValue =
            currentData[controllerField as keyof typeof currentData];

          const mapping = new Map(
            mappingsString.split(",").map((part) => {
              const [val, type] = part.split(">");
              return [val, type];
            }),
          );

          resolved[key] = mapping.get(controllingValue as string) || "ANY";
        } else {
          resolved[key] = typeDef;
        }
      }
      return resolved;
    },
    [],
  );

  useEffect(() => {
    if (selectedNode?.data && selectedNode?.dataType) {
      setFormData(selectedNode.data);
      const initialResolvedTypes = resolveDynamicTypes(
        selectedNode.data,
        selectedNode.dataType,
      );
      setFormTypeData(initialResolvedTypes);
    } else {
      setFormData({});
      setFormTypeData({});
    }
  }, [selectedNode, resolveDynamicTypes]);

  const handleInputChange = (key: string, value: string | number) => {
    const originalValue =
      selectedNode?.data?.[key as keyof typeof selectedNode.data];
    let processedValue: string | number = value;

    if (typeof originalValue === "number") {
      processedValue = parseFloat(value as string);
      if (isNaN(processedValue)) {
        processedValue = 0;
      }
    }

    const updatedFormData = { ...formData, [key]: processedValue };
    setFormData(updatedFormData);

    const newResolvedTypes = resolveDynamicTypes(
      updatedFormData,
      selectedNode?.dataType,
    );
    setFormTypeData(newResolvedTypes);

    const dataToReset: Record<string, string | number> = {};
    for (const field in newResolvedTypes) {
      if (formTypeData[field] !== newResolvedTypes[field]) {
        dataToReset[field] = getDefaultValueForType(newResolvedTypes[field]);
      }
    }

    if (Object.keys(dataToReset).length > 0) {
      setFormData((prev) => ({
        ...prev,
        ...dataToReset,
      }));
    }
  };

  const handleSubmit = () => {
    if (selectedNode) {
      updateNode(selectedNode.id, formData as DataNodeType);
      setOpen(false);
      addRefresh();
    }
  };

  const renderFormFields = () => {
    if (!selectedNode || !Object.keys(formData).length) {
      return (
        <p className='text-sm text-muted-foreground'>
          This node has no editable properties.
        </p>
      );
    }

    return Object.entries(formData).map(([key, value]) => {
      const inputId = `${selectedNode.id}-${key}`;
      const ifExist = key in formTypeData;

      if (!ifExist) {
        return null;
      }

      const selectRegex = /^SELECT\[(.*)\]$/;
      const match = formTypeData[key]?.match(selectRegex);

      if (match && match[1]) {
        return (
          <div key={inputId} className='grid grid-cols-4 items-center gap-4'>
            <Label htmlFor={inputId} className='text-right'>
              {key}
            </Label>
            <Select
              value={String(value)}
              onValueChange={(val) => handleInputChange(key, val)}
            >
              <SelectTrigger id={inputId} className='col-span-3'>
                <SelectValue placeholder={`Select ${key}`} />
              </SelectTrigger>
              <SelectContent className='z-[9999]'>
                <>
                  {match[1].split(",").map((item) => (
                    <SelectItem key={item} value={item}>
                      {item}
                    </SelectItem>
                  ))}
                </>
              </SelectContent>
            </Select>
          </div>
        );
      }

      switch (formTypeData[key]) {
        case "NUMBER":
          return (
            <div key={inputId} className='grid grid-cols-4 items-center gap-4'>
              <Label htmlFor={inputId} className='text-right'>
                {key}
              </Label>
              <Input
                id={inputId}
                type='number'
                value={String(value)}
                onChange={(e) => handleInputChange(key, e.target.value)}
                className='col-span-3'
              />
            </div>
          );
        case "STRING":
        case "ANY":
          return (
            <div key={inputId} className='grid grid-cols-4 items-center gap-4'>
              <Label htmlFor={inputId} className='text-right'>
                {key}
              </Label>
              <Input
                id={inputId}
                value={String(value)}
                onChange={(e) => handleInputChange(key, e.target.value)}
                className='col-span-3'
              />
            </div>
          );
        case "JSON":
          return (
            <div key={inputId} className='grid grid-cols-4 items-center gap-4'>
              <Label htmlFor={inputId} className='text-right'>
                {key}
              </Label>
              <textarea
                id={inputId}
                value={String(value)}
                onChange={(e) => handleInputChange(key, e.target.value)}
                className='col-span-3 p-2 border rounded-md h-24 font-mono'
                rows={4}
              />
            </div>
          );
        case "BOOLEAN":
          return (
            <div key={inputId} className='grid grid-cols-4 items-center gap-4'>
              <Label htmlFor={inputId} className='text-right'>
                {key}
              </Label>
              <Select
                value={String(value)}
                onValueChange={(val) => handleInputChange(key, val)}
              >
                <SelectTrigger id={inputId} className='col-span-3'>
                  <SelectValue />
                </SelectTrigger>
                <SelectContent className='z-[9999]'>
                  <SelectItem value='true'>true</SelectItem>
                  <SelectItem value='false'>false</SelectItem>
                </SelectContent>
              </Select>
            </div>
          );
        case "FIXED_STRING":
          return (
            <div key={inputId} className='grid grid-cols-4 items-center gap-4'>
              <Label htmlFor={inputId} className='text-right'>
                {key}
              </Label>
              <Input
                id={inputId}
                value={String(value)}
                onChange={(e) => handleInputChange(key, e.target.value)}
                className='col-span-3'
                disabled={true}
              />
            </div>
          );
        default:
          return null;
      }
    });
  };

  return (
    <Sheet open={open} onOpenChange={setOpen}>
      <SheetContent>
        <SheetHeader>
          <SheetTitle>Edit: {selectedNode?.title || "Node"}</SheetTitle>
          <SheetDescription>
            Modify the properties of the selected node here.
          </SheetDescription>
        </SheetHeader>
        <div className='grid gap-4 p-4'>{renderFormFields()}</div>
        <SheetFooter>
          <Button onClick={handleSubmit}>Save Changes</Button>
        </SheetFooter>
      </SheetContent>
    </Sheet>
  );
}


================================================
FILE: apps/client/src/features/flow/OptionsVariation.tsx
================================================


================================================
FILE: apps/client/src/features/flow/RunFlow.tsx
================================================
import { Button } from "@/components/ui/button";
import { useFlowStore } from "@/entities/flow/store";
import { Play, Square } from "lucide-react";
import { toast } from "sonner";
import { useWebSocket, useWebSocketMessage } from "@/features/ws/WebSocketProvider";
import { useCallback, useEffect, useState } from "react";
import { getFlowRunSessionId, WebSocketMessage } from "@/features/ws/ws";

export function RunFlowButton() {
  const { wsManager } = useWebSocket();

  const { currentFlowId, saveGraph } = useFlowStore();

  const [isRun, setIsRun] = useState(false);

  const handleSend = async () => {
    if (!currentFlowId || !wsManager) {
      toast.error("WebSocket is not connected or no flow is selected.");
      return;
    }

    if (currentFlowId && wsManager) {
      await saveGraph();
      wsManager.send({
        type: "compute_flow",
        payload: {
          flow_id: currentFlowId,
          run_context: { session_id: getFlowRunSessionId() },
        },
      });

      setTimeout(() => {
        wsManager.send({
          type: "get_all_flows",
          payload: {},
        });
      }, 500);
    }
  };

  const handleSendStop = async () => {
    if (!currentFlowId || !wsManager) {
      toast.error("WebSocket is not connected or no flow is selected.");
      return;
    }

    if (currentFlowId && wsManager) {
      await saveGraph();
      wsManager.send({
        type: "stop_flow",
        payload: {
          flow_id: currentFlowId,
        },
      });

      setTimeout(() => {
        wsManager.send({
          type: "get_all_flows",
          payload: {},
        });
      }, 500);
      setIsRun(false);
    }
  };

  const handleMessage = useCallback(
    (msg: WebSocketMessage) => {
      try {
        if (msg.type === "get_all_flows_response") {
          const loads = msg.payload as {
            id: number;
            name: string;
            is_running: boolean;
          }[];
          const index = loads.findIndex((item) => {
            return item.id == currentFlowId;
          });

          if (index != -1) {
            setIsRun(!loads[index].is_running);
          }
        }
      } catch (err) {
        console.error("Error handling signaling message:", err);
      }
    },
    [currentFlowId],
  );

  useEffect(() => {
    if (currentFlowId && wsManager) {
      wsManager.send({
        type: "get_all_flows",
        payload: {},
      });
    }
  }, [currentFlowId, wsManager]);

  useWebSocketMessage(handleMessage);

  if (!currentFlowId) {
    return null;
  }

  return (
    <>
      {isRun ? (
        <Button onClick={handleSend} size={"icon"} variant={"outline"}>
          <Play />
        </Button>
      ) : (
        <Button onClick={handleSendStop} size={"icon"} variant={"destructive"}>
          <Square />
        </Button>
      )}
    </>
  );
}


================================================
FILE: apps/client/src/features/flow/SelectedItemActions.tsx
================================================
import { Button } from "@/components/ui/button";
import { Trash2 } from "lucide-react";

type SelectedElement = {
  type: "node" | "edge";
  id: string;
} | null;

type Props = {
  selectedElement: SelectedElement;
  onDeleteNode: () => void;
};

// Floating action bar anchored at the top; avoids overlap with nodes.
export function SelectedItemActions({ selectedElement, onDeleteNode }: Props) {
  if (!selectedElement || selectedElement.type !== "node") {
    return null;
  }

  return (
    <div
      style={{
        position: "absolute",
        top: 12,
        left: "12px",
        display: "flex",
        gap: 8,
        zIndex: 10,
      }}
    >
      <Button
        size={"sm"}
        variant={"outline"}
        onClick={onDeleteNode}
        style={{ display: "flex", alignItems: "center", gap: 6 }}
      >
        <Trash2 size={14} />
      </Button>
    </div>
  );
}


================================================
FILE: apps/client/src/features/flow/flow-chat/buildSystemPrompt.ts
================================================
import type { Node, Edge } from "@/features/flow/flowTypes";
import type { Flow } from "@/entities/flow/types";
import { DEFINITION_NODE } from "@/features/flow/flowNode";

export function buildFlowSystemPrompt(
  currentNodes: Node[],
  currentEdges: Edge[],
  availableFlows: Flow[],
  currentFlowName: string | null,
): string {
  const nodeSchemas = Object.entries(DEFINITION_NODE).map(([type, def]) => {
    const connectors = def.connectors.map(
      (c: { name: string; type: string }) => `${c.name}(${c.type})`,
    );
    const dataFields = def.data
      ? Object.entries(def.data).map(([k, v]) => `${k}: ${JSON.stringify(v)}`)
      : [];
    const dataTypeFields = def.dataType
      ? Object.entries(def.dataType).map(([k, v]) => `${k}: ${v}`)
      : [];

    return [
      `- ${type}`,
      `  connectors: [${connectors.join(", ")}]`,
      dataFields.length > 0
        ? `  data defaults: {${dataFields.join(", ")}}`
        : null,
      dataTypeFields.length > 0
        ? `  data types: {${dataTypeFields.join(", ")}}`
        : null,
    ]
      .filter(Boolean)
      .join("\n");
  });

  const flowsList = availableFlows
    .map((f) => `- ${f.name} (id: ${f.id})`)
    .join("\n");

  const currentGraph =
    currentNodes.length > 0
      ? JSON.stringify({ nodes: currentNodes, edges: currentEdges }, null, 2)
      : "(empty)";

  return `You are a flow builder assistant, a visual node-based automation platform.
Your job is to create or modify flows by calling the provided tools.

## Available Node Types

${nodeSchemas.join("\n\n")}

## ID Generation Rules

- Node ID: \`{NODE_TYPE}-{timestamp}\` (e.g. \`INTERVAL-1709876543210\`)
  Use Date.now() style timestamps. Each node MUST have a unique ID.
- Connector ID: \`{nodeId}-{connectorType}{index}\` (e.g. \`INTERVAL-1709876543210-out0\`)
  connectorType is "in" or "out", index is 0-based position in the connectors array.

## Edge Rules

- \`source\` must be an "out" type connector ID
- \`target\` must be an "in" type connector ID
- Edge ID: \`{source}-{target}\`

## Node Position Layout Rules

- Layout nodes left-to-right following data flow direction
- Start position: (100, 100)
- Horizontal gap between nodes: 250px
- Vertical gap between parallel nodes: 150px
- Node dimensions: width=120, height=50

## Current State

Current flow: ${currentFlowName ?? "(none selected)"}

Registered flows:
${flowsList || "(none)"}

Current graph:
${currentGraph}

## Instructions

- Always use tools to modify the flow. Never describe changes in plain text.
- When generating a complete flow, use the \`generate_flow\` tool.
- When adding to an existing flow, use \`add_nodes\` and \`add_edges\`.
- When modifying, use \`update_node\` or \`remove_nodes\`.
- Ensure all edges connect valid connector IDs with correct in/out types.
- After tool execution, briefly summarize what was done.`;
}


================================================
FILE: apps/client/src/features/flow/flow-chat/executeToolCalls.ts
================================================
import type { ToolCallResult } from "@vessel/capsule-client";
import type { Node, Edge, DataNodeType } from "@/features/flow/flowTypes";

export interface ToolExecutionResult {
  toolCallId: string;
  name: string;
  success: boolean;
  message: string;
}

interface FlowStoreActions {
  nodes: Node[];
  edges: Edge[];
  setNodes: (nodes: Node[]) => void;
  setEdges: (edges: Edge[]) => void;
  updateNode: (nodeId: string, data: DataNodeType) => void;
}

function validateEdges(
  edges: Edge[],
  allNodes: Node[],
): { valid: Edge[]; errors: string[] } {
  const valid: Edge[] = [];
  const errors: string[] = [];

  const connectorMap = new Map<string, "in" | "out">();
  for (const node of allNodes) {
    for (const c of node.connectors) {
      connectorMap.set(c.id, c.type as "in" | "out");
    }
  }

  const existingEdgeIds = new Set<string>();

  for (const edge of edges) {
    const sourceType = connectorMap.get(edge.source);
    const targetType = connectorMap.get(edge.target);

    if (!sourceType) {
      errors.push(`Edge ${edge.id}: source connector "${edge.source}" not found`);
      continue;
    }
    if (!targetType) {
      errors.push(`Edge ${edge.id}: target connector "${edge.target}" not found`);
      continue;
    }
    if (sourceType !== "out") {
      errors.push(`Edge ${edge.id}: source "${edge.source}" is not an "out" connector`);
      continue;
    }
    if (targetType !== "in") {
      errors.push(`Edge ${edge.id}: target "${edge.target}" is not an "in" connector`);
      continue;
    }

    const edgeKey = `${edge.source}->${edge.target}`;
    if (existingEdgeIds.has(edgeKey)) {
      errors.push(`Edge ${edge.id}: duplicate connection ${edgeKey}`);
      continue;
    }
    existingEdgeIds.add(edgeKey);
    valid.push(edge);
  }

  return { valid, errors };
}

function executeGenerateFlow(
  args: { nodes: Node[]; edges: Edge[] },
  store: FlowStoreActions,
): ToolExecutionResult & { toolCallId: string } {
  const { valid, errors } = validateEdges(args.edges, args.nodes);

  store.setNodes(args.nodes);
  store.setEdges(valid);

  const msg = errors.length > 0
    ? `Generated flow with ${args.nodes.length} nodes and ${valid.length} edges. ${errors.length} edges skipped: ${errors.join("; ")}`
    : `Generated flow with ${args.nodes.length} nodes and ${valid.length} edges.`;

  return { toolCallId: "", name: "generate_flow", success: true, message: msg };
}

function executeAddNodes(
  args: { nodes: Node[] },
  store: FlowStoreActions,
): ToolExecutionResult & { toolCallId: string } {
  const newNodes = [...store.nodes, ...args.nodes];
  store.setNodes(newNodes);

  return {
    toolCallId: "",
    name: "add_nodes",
    success: true,
    message: `Added ${args.nodes.length} node(s).`,
  };
}

function executeAddEdges(
  args: { edges: Edge[] },
  store: FlowStoreActions,
): ToolExecutionResult & { toolCallId: string } {
  const allNodes = store.nodes;
  const { valid, errors } = validateEdges(args.edges, allNodes);

  // Also check for duplicates with existing edges
  const existingKeys = new Set(
    store.edges.map((e) => `${e.source}->${e.target}`),
  );
  const actuallyNew = valid.filter((e) => {
    const key = `${e.source}->${e.target}`;
    if (existingKeys.has(key)) {
      errors.push(`Edge ${e.id}: already exists`);
      return false;
    }
    return true;
  });

  store.setEdges([...store.edges, ...actuallyNew]);

  const msg = errors.length > 0
    ? `Added ${actuallyNew.length} edge(s). ${errors.length} skipped: ${errors.join("; ")}`
    : `Added ${actuallyNew.length} edge(s).`;

  return { toolCallId: "", name: "add_edges", success: true, message: msg };
}

function executeRemoveNodes(
  args: { node_ids: string[] },
  store: FlowStoreActions,
): ToolExecutionResult & { toolCallId: string } {
  const idsToRemove = new Set(args.node_ids);
  const removedNodes = store.nodes.filter((n) => idsToRemove.has(n.id));
  const removedConnIds = new Set(
    removedNodes.flatMap((n) => n.connectors.map((c) => c.id)),
  );

  store.setNodes(store.nodes.filter((n) => !idsToRemove.has(n.id)));
  store.setEdges(
    store.edges.filter(
      (e) => !removedConnIds.has(e.source) && !removedConnIds.has(e.target),
    ),
  );

  return {
    toolCallId: "",
    name: "remove_nodes",
    success: true,
    message: `Removed ${removedNodes.length} node(s) and their connected edges.`,
  };
}

function executeUpdateNode(
  args: { node_id: string; data: Record<string, unknown> },
  store: FlowStoreActions,
): ToolExecutionResult & { toolCallId: string } {
  const node = store.nodes.find((n) => n.id === args.node_id);
  if (!node) {
    return {
      toolCallId: "",
      name: "update_node",
      success: false,
      message: `Node "${args.node_id}" not found.`,
    };
  }

  store.updateNode(args.node_id, args.data as DataNodeType);

  return {
    toolCallId: "",
    name: "update_node",
    success: true,
    message: `Updated node "${args.node_id}".`,
  };
}

export function executeFlowToolCalls(
  toolCalls: ToolCallResult[],
  store: FlowStoreActions,
): ToolExecutionResult[] {
  const results: ToolExecutionResult[] = [];

  for (const tc of toolCalls) {
    let args: Record<string, unknown>;
    try {
      args = JSON.parse(tc.function.arguments);
    } catch {
      results.push({
        toolCallId: tc.id,
        name: tc.function.name,
        success: false,
        message: `Failed to parse arguments: invalid JSON`,
      });
      continue;
    }

    let result: ToolExecutionResult;

    switch (tc.function.name) {
      case "generate_flow":
        result = executeGenerateFlow(
          args as { nodes: Node[]; edges: Edge[] },
          store,
        );
        break;
      case "add_nodes":
        result = executeAddNodes(args as { nodes: Node[] }, store);
        break;
      case "add_edges":
        result = executeAddEdges(args as { edges: Edge[] }, store);
        break;
      case "remove_nodes":
        result = executeRemoveNodes(args as { node_ids: string[] }, store);
        break;
      case "update_node":
        result = executeUpdateNode(
          args as { node_id: string; data: Record<string, unknown> },
          store,
        );
        break;
      default:
        result = {
          toolCallId: tc.id,
          name: tc.function.name,
          success: false,
          message: `Unknown tool: ${tc.function.name}`,
        };
    }

    result.toolCallId = tc.id;
    results.push(result);
  }

  return results;
}


================================================
FILE: apps/client/src/features/flow/flow-chat/flowTools.ts
================================================
import type { Tool } from "@vessel/capsule-client";

export const FLOW_TOOLS: Tool[] = [
  {
    type: "function",
    function: {
      name: "generate_flow",
      description:
        "Generate a complete flow graph by replacing all nodes and edges. Use this when creating a new flow from scratch or completely rebuilding the current flow.",
      parameters: {
        type: "object",
        properties: {
          nodes: {
            type: "array",
            description: "Array of flow nodes",
            items: {
              type: "object",
              properties: {
                id: { type: "string", description: "Unique node ID (format: {NODE_TYPE}-{timestamp})" },
                title: { type: "string", description: "Display title (same as id)" },
                x: { type: "number", description: "X position" },
                y: { type: "number", description: "Y position" },
                width: { type: "number", description: "Node width (default: 120)" },
                height: { type: "number", description: "Node height (default: 50)" },
                nodeType: { type: "string", description: "Node type (e.g. START, INTERVAL, LOG_MESSAGE)" },
                connectors: {
                  type: "array",
                  items: {
                    type: "object",
                    properties: {
                      id: { type: "string", description: "Connector ID (format: {nodeId}-{type}{index})" },
                      name: { type: "string", description: "Connector name" },
                      type: { type: "string", enum: ["in", "out"], description: "Connector direction" },
                    },
                    required: ["id", "name", "type"],
                  },
                },
                data: {
                  type: "object",
                  description: "Node-specific configuration data",
                },
              },
              required: ["id", "title", "x", "y", "width", "height", "nodeType", "connectors"],
            },
          },
          edges: {
            type: "array",
            description: "Array of flow edges",
            items: {
              type: "object",
              properties: {
                id: { type: "string", description: "Edge ID (format: {source}-{target})" },
                source: { type: "string", description: "Source connector ID (must be 'out' type)" },
                target: { type: "string", description: "Target connector ID (must be 'in' type)" },
              },
              required: ["id", "source", "target"],
            },
          },
        },
        required: ["nodes", "edges"],
      },
    },
  },
  {
    type: "function",
    function: {
      name: "add_nodes",
      description: "Add new nodes to the existing flow without removing existing ones.",
      parameters: {
        type: "object",
        properties: {
          nodes: {
            type: "array",
            description: "Array of nodes to add",
            items: {
              type: "object",
              properties: {
                id: { type: "string" },
                title: { type: "string" },
                x: { type: "number" },
                y: { type: "number" },
                width: { type: "number" },
                height: { type: "number" },
                nodeType: { type: "string" },
                connectors: {
                  type: "array",
                  items: {
                    type: "object",
                    properties: {
                      id: { type: "string" },
                      name: { type: "string" },
                      type: { type: "string", enum: ["in", "out"] },
                    },
                    required: ["id", "name", "type"],
                  },
                },
                data: { type: "object" },
              },
              required: ["id", "title", "x", "y", "width", "height", "nodeType", "connectors"],
            },
          },
        },
        required: ["nodes"],
      },
    },
  },
  {
    type: "function",
    function: {
      name: "add_edges",
      description: "Add new edges (connections) to the existing flow.",
      parameters: {
        type: "object",
        properties: {
          edges: {
            type: "array",
            description: "Array of edges to add",
            items: {
              type: "object",
              properties: {
                id: { type: "string" },
                source: { type: "string", description: "Source connector ID (out type)" },
                target: { type: "string", description: "Target connector ID (in type)" },
              },
              required: ["id", "source", "target"],
            },
          },
        },
        required: ["edges"],
      },
    },
  },
  {
    type: "function",
    function: {
      name: "remove_nodes",
      description: "Remove nodes from the flow. Connected edges are automatically removed.",
      parameters: {
        type: "object",
        properties: {
          node_ids: {
            type: "array",
            items: { type: "string" },
            description: "Array of node IDs to remove",
          },
        },
        required: ["node_ids"],
      },
    },
  },
  {
    type: "function",
    function: {
      name: "update_node",
      description: "Update the data (configuration) of an existing node.",
      parameters: {
        type: "object",
        properties: {
          node_id: { type: "string", description: "ID of the node to update" },
          data: {
            type: "object",
            description: "New data fields to merge into the node's data",
          },
        },
        required: ["node_id", "data"],
      },
    },
  },
];


================================================
FILE: apps/client/src/features/flow/flow-chat/index.ts
================================================
export { buildFlowSystemPrompt } from "./buildSystemPrompt";
export { FLOW_TOOLS } from "./flowTools";
export { executeFlowToolCalls } from "./executeToolCalls";
export type { ToolExecutionResult } from "./executeToolCalls";


================================================
FILE: apps/client/src/features/flow/flowNode.ts
================================================
import { Node } from "./flowTypes";

export type DefaultValueType = {
  connectors: Node["connectors"];
  nodeType: string;
  data: Node["data"];
  dataType: Node["dataType"];
};

export const DEFINITION_NODE = {
  START: {
    connectors: [{ id: `id`, name: "out", type: "out" }],
    nodeType: "START",
    data: undefined,
    dataType: undefined,
  },
  SET_VARIABLE: {
    connectors: [{ id: `id`, name: "out", type: "out" }],
    nodeType: "SET_VARIABLE",
    data: {
      variable: "",
      variableType: "string",
    },
    dataType: {
      variable:
        "DEPENDS_ON[variableType:string>STRING,number>NUMBER,boolean>BOOLEAN,json>JSON]",

      variableType: "SELECT[string,number,boolean,json]",
    },
  },
  SET_VARIABLE_WITH_EXEC: {
    connectors: [
      { id: `id`, name: "exec", type: "in" },
      { id: `id`, name: "out", type: "out" },
    ],
    nodeType: "SET_VARIABLE_WITH_EXEC",
    data: {
      variable: "",
      variableType: "string",
    },
    dataType: {
      variable:
        "DEPENDS_ON[variableType:string>STRING,number>NUMBER,boolean>BOOLEAN,json>JSON]",

      variableType: "SELECT[string,number,boolean,json]",
    },
  },
  CONDITION: {
    connectors: [
      { id: `id`, name: "input", type: "in" },
      { id: `id`, name: "true", type: "out" },
      { id: `id`, name: "false", type: "out" },
    ],
    nodeType: "CONDITION",
    data: {
      operator: "GreaterThan",
      operand: 0,
    },
    dataType: {
      operator: "SELECT[GreaterThan,LessThan,EqualTo]",
      operand: "NUMBER",
    },
  },
  LOG_MESSAGE: {
    connectors: [{ id: `id`, name: "message", type: "in" }],
    nodeType: "LOG_MESSAGE",
    data: undefined,
    dataType: undefined,
  },
  SHOW_TOAST: {
    connectors: [
      { id: `id`, name: "exec", type: "in" },
      { id: `id`, name: "out", type: "out" },
    ],
    nodeType: "SHOW_TOAST",
    data: {
      level: "info",
      title: "",
      message: "",
      durationMs: 4000,
    },
    dataType: {
      level: "SELECT[info,success,warning,error]",
      title: "STRING",
      message: "STRING",
      durationMs: "NUMBER",
    },
  },
  CALCULATION: {
    connectors: [
      { id: `id`, name: "a", type: "in" },
      { id: `id`, name: "b", type: "in" },
      { id: `id`, name: "number", type: "out" },
    ],
    nodeType: "CALCULATION",
    data: {
      operatorCalc: "+",
    },
    dataType: {
      operatorCalc: "SELECT[+,-,/,*,%]",
    },
  },
  HTTP_REQUEST: {
    connectors: [
      { id: `id`, name: "execution", type: "in" },
      { id: `id`, name: "result", type: "out" },
    ],
    nodeType: "HTTP_REQUEST",
    data: {
      url: "",
      httpMethod: "GET",
    },
    dataType: {
      url: "STRING",
      httpMethod: "SELECT[GET,POST,DELETE,PUT]",
    },
  },
  LOOP: {
    connectors: [
      { id: `id`, name: "start", type: "in" },
      { id: `id`, name: "body", type: "out" },
    ],
    nodeType: "LOOP",
    data: {
      iterations: 5,
    },
    dataType: {
      iterations: "NUMBER",
    },
  },
  LOGIC_OPERATOR: {
    connectors: [
      { id: `id`, name: "a", type: "in" },
      { id: `id`, name: "b", type: "in" },
      { id: `id`, name: "bool", type: "out" },
    ],
    nodeType: "LOGIC_OPERATOR",
    data: {
      operator: "AND",
    },
    dataType: {
      operator: "SELECT[AND,OR,XOR,NAND,NOR,XNOR,>,<,==,!=,>=,<=]",
    },
  },
  INTERVAL: {
    connectors: [{ id: `id`, name: "exec", type: "out" }],
    nodeType: "INTERVAL",
    data: {
      interval: 10,
      unit: "seconds",
    },
    dataType: {
      interval: "NUMBER",
      unit: "SELECT[milliseconds,seconds,minutes]",
    },
  },
  MQTT_PUBLISH: {
    connectors: [{ id: `id`, name: "payload", type: "in" }],
    nodeType: "MQTT_PUBLISH",
    data: {
      topic: "default/topic",
      qos: 1,
      retain: false,
    },
    dataType: {
      topic: "STRING",
      qos: "SELECT[0,1,2]",
      retain: "BOOLEAN",
    },
  },
  MQTT_SUBSCRIBE: {
    connectors: [{ id: `id`, name: "payload", type: "out" }],
    nodeType: "MQTT_SUBSCRIBE",
    data: {
      topic: "default/topic",
    },
    dataType: {
      topic: "STRING",
    },
  },
  DASHBOARD_EVENT_LISTENER: {
    connectors: [{ id: `id`, name: "payload", type: "out" }],
    nodeType: "DASHBOARD_EVENT_LISTENER",
    data: {
      listenerId: "my-listener",
    },
    dataType: {
      listenerId: "STRING",
    },
  },
  TYPE_CONVERTER: {
    connectors: [
      { id: `id`, name: "in", type: "in" },
      { id: `id`, name: "out", type: "out" },
    ],
    nodeType: "TYPE_CONVERTER",
    data: {
      targetType: "string",
    },
    dataType: {
      targetType: "SELECT[string,number,boolean]",
    },
  },
  RTP_STREAM_IN: {
    connectors: [
      { id: `id`, name: "payload", type: "out" },
      { id: `id`, name: "raw_packet", type: "out" },
    ],
    nodeType: "RTP_STREAM_IN",
    data: {
      topic: "default/audio",
    },
    dataType: {
      topic: "STRING",
    },
  },
  DECODE_OPUS: {
    connectors: [
      { id: `id`, name: "payload", type: "in" },
      { id: `id`, name: "info", type: "out" },
    ],
    nodeType: "DECODE_OPUS",
    data: undefined,
    dataType: undefined,
  },
  BRANCH: {
    connectors: [
      { id: `id`, name: "data", type: "in" },
      { id: `id`, name: "condition", type: "in" },
      { id: `id`, name: "true_output", type: "out" },
      { id: `id`, name: "false_output", type: "out" },
    ],
    nodeType: "BRANCH",
    data: undefined,
    dataType: undefined,
  },
  JSON_SELECTOR: {
    connectors: [
      { id: `id`, name: "json", type: "in" },
      { id: `id`, name: "value", type: "out" },
    ],
    nodeType: "JSON_SELECTOR",
    data: {
      path: "path.to.value",
    },
    dataType: {
      path: "STRING",
    },
  },
  JSON_MODIFY: {
    connectors: [
      { id: `id`, name: "json", type: "in" },
      { id: `id`, name: "data", type: "in" },
      { id: `id`, name: "value", type: "out" },
    ],
    nodeType: "JSON_MODIFY",
    data: {
      path: "path.to.value",
    },
    dataType: {
      path: "STRING",
    },
  },
  DECODE_H264: {
    connectors: [
      { id: `id`, name: "payload", type: "in" },
      { id: `id`, name: "frame", type: "out" },
    ],
    nodeType: "DECODE_H264",
    data: undefined,
    dataType: undefined,
  },
  YOLO_DETECT: {
    connectors: [
      { id: `id`, name: "frame", type: "in" },
      { id: `id`, name: "detections", type: "out" },
    ],
    nodeType: "YOLO_DETECT",
    data: {
      model_path: "assets/yolov8n.onnx",
      labels_path: "assets/coco.names",
      confidence_threshold: 0.5,
      nms_threshold: 0.4,
      input_size: 640,
    },
    dataType: {
      model_path: "STRING",
      labels_path: "STRING",
      confidence_threshold: "NUMBER",
      nms_threshold: "NUMBER",
      input_size: "NUMBER",
    },
  },
  GST_DECODER: {
    connectors: [{ id: "id", name: "frame", type: "out" }],
    nodeType: "GST_DECODER",
    data: {
      topic: "go_video_stream_1",
    },
    dataType: {
      topic: "STRING",
    },
  },
  WEBSOCKET_ON: {
    connectors: [{ id: "id", name: "payload", type: "out" }],
    nodeType: "WEBSOCKET_ON",
    data: {
      url: "ws://localhost:6174",
    },
    dataType: {
      url: "STRING",
    },
  },
  WEBSOCKET_SEND: {
    connectors: [{ id: "id", name: "payload", type: "in" }],
    nodeType: "WEBSOCKET_SEND",
    data: {
      url: "ws://localhost:6174",
    },
    dataType: {
      url: "STRING",
    },
  },
  EXT_ROS2_WEBSOCKET_ON: {
    connectors: [{ id: "id", name: "payload", type: "out" }],
    nodeType: "WEBSOCKET_ON",
    data: {
      url: "{:ros2_websocket_url}",
    },
    dataType: {
      url: "FIXED_STRING",
    },
  },
  EXT_ROS2_WEBSOCKET_SEND: {
    connectors: [{ id: "id", name: "payload", type: "in" }],
    nodeType: "WEBSOCKET_SEND",
    data: {
      url: "{:ros2_websocket_url}",
    },
    dataType: {
      url: "FIXED_STRING",
    },
  },
} as const;


================================================
FILE: apps/client/src/features/flow/flowTypes.ts
================================================
import { DEFINITION_NODE } from "./flowNode";

export type Connector = {
  id: string;
  name: string;
  type: "in" | "out" | "execution";
};

export type NodeRenderer = (
  g: d3.Selection<SVGGElement, Node, null, undefined>,
  d: Node,
) => void;

export type NodeTypes = keyof typeof DEFINITION_NODE;

export type NumberNodeType = {
  number: number;
};

export type TextNodeType = {
  string: string;
};

export type AddNodeType = {
  a: number;
  b: number;
};

export type SetVariableNodeType = {
  variable: string | number | boolean;
  variableType?: "string" | "number" | "boolean";
};

export type ConditionNodeType = {
  operator: "GreaterThan" | "LessThan" | "EqualTo";
  operand: number;
};

export type CalculationNodeType = {
  operatorCalc: "+" | "-" | "/" | "*" | "%";
};

export type LogicOpetatorNodeType = {
  operator:
    | "AND"
    | "OR"
    | "XOR"
    | "NAND"
    | "XNOR"
    | "NOR"
    | "<"
    | ">"
    | "="
    | "!="
    | ">="
    | "<=";
};

export type HTTPRequestNodeType = {
  url: string;
  httpMethod: "POST" | "GET" | "DELETE" | "PUT";
};

export type LoopNodeType = {
  iterations: number;
};

export type IntervalNodeType = {
  interval: number;
  unit: "milliseconds" | "seconds" | "minutes";
};

export type MqttPublishNodeType = {
  topic: string;
  qos: 0 | 1 | 2;
  retain: boolean;
};

export type MqttSubscribeNodeType = {
  topic: string;
};

export type TypeConverterNodeType = {
  targetType: "string" | "number" | "boolean";
};

export type RtpStreamInNodeType = {
  topic: string;
};

export type JsonSelectorNodeType = {
  path: string;
};

export type GstDecoderNodeType = {
  topic: string;
};

export type YoloDetectNodeType = {
  model_path: string;
  labels_path: string;
  confidence_threshold: number;
  nms_threshold: number;
  input_size: number;
};

export type WebSocketOnNodeType = {
  url: string;
};

export type WebSocketSendNodeType = {
  url: string;
};

type Generalize<T> = {
  -readonly [K in keyof T]: T[K] extends string
    ? string
    : T[K] extends number
    ? number
    : T[K] extends boolean
    ? boolean
    : T[K];
};

type AllSpecificDataNodeTypes = {
  [K in keyof typeof DEFINITION_NODE]: (typeof DEFINITION_NODE)[K]["data"];
};
type SpecificDataNodeType =
  AllSpecificDataNodeTypes[keyof AllSpecificDataNodeTypes];

export type DataNodeType = Generalize<Exclude<SpecificDataNodeType, undefined>>;

export type DataNodeTypeType = Record<string, string>;

export type Node = {
  id: string;
  title: string;
  x: number;
  y: number;
  width: number;
  height: number;
  connectors: Connector[];
  nodeType?: string;
  data?: DataNodeType;
  dataType?: DataNodeTypeType;
};

export type Edge = {
  id: string;
  source: string;
  target: string;
};

export interface GraphProps {
  nodes: Node[];
  edges: Edge[];
  width?: string | number;
  height?: string | number;
  gridSize?: number;
  gridColor?: string;
  edgeColor?: string;
  edgeWidth?: number;
  onNodesChange?: (nodes: Node[]) => void;
  onEdgesChange?: (edges: Edge[]) => void;
}


================================================
FILE: apps/client/src/features/flow/flowUtils.ts
================================================
import { CustomNode, CustomNodeDynamicData } from "@/entities/custom-nodes/types";
import { DEFINITION_NODE } from "./flowNode";
import { NodeTypes, Node, DataNodeTypeType } from "./flowTypes";

export function getDefalutValue(type: NodeTypes, id: string) {
  const value = JSON.parse(JSON.stringify(DEFINITION_NODE[type]));

  for (let index = 0; index < value.connectors.length; index++) {
    value.connectors[
      index
    ].id = `${id}-${value.connectors[index].type}${index}`;
  }

  return value;
}

export function getDefalutNode(
  type: NodeTypes,
  id: string,
  x: number = 100,
  y: number = 100,
): Node {
  const defaultValue = getDefalutValue(type, id);

  return {
    id: id,
    title: id,
    x: x,
    y: y,
    width: 120,
    height: 50,
    ...defaultValue,
  };
}

export function getCustomValue(
  customNodes: CustomNode[],
  type: string,
  id: string,
) {
  const value = customNodes.filter((item) => {
    return item.node_type == type;
  });

  if (value) {
    if (value.length <= 0) {
      return null;
    }

    let valueData = value[0].data;
    if (typeof valueData === "string") {
      try {
        valueData = JSON.parse(valueData);
      } catch {
        return null;
      }
    }

    if (!valueData) {
      return null;
    }

    // 중첩 구조 처리: {"data":{"connectors":[...],...},...} → 내부 data 사용
    const nested = valueData.data as Record<string, unknown> | undefined;
    if (!valueData.connectors && nested && nested.connectors) {
      valueData = nested as CustomNodeDynamicData;
    }

    valueData.nodeType = value[0].node_type;

    if (!valueData.connectors) {
      valueData.connectors = [];
    }

    const connectors = valueData.connectors as Array<Record<string, unknown>>;
    for (let index = 0; index < connectors.length; index++) {
      connectors[index].id = `${id}-${connectors[index].type}${index}`;
    }

    return valueData;
  }

  return null;
}

export function getCustomNode(
  customNodes: CustomNode[],
  type: NodeTypes,
  id: string,
  x: number = 100,
  y: number = 100,
) {
  const defaultValue = getCustomValue(customNodes, type, id);

  if (!defaultValue) {
    return null;
  }

  return {
    id: id,
    title: id,
    x: x,
    y: y,
    width: 120,
    height: 50,
    ...defaultValue,
  };
}

export function getNodeValue(
  nodes: DataNodeTypeType,
  type: NodeTypes,
  id: string,
) {
  const value = JSON.parse(JSON.stringify(nodes[type]));

  for (let index = 0; index < value.connectors.length; index++) {
    value.connectors[
      index
    ].id = `${id}-${value.connectors[index].type}${index}`;
  }

  return value;
}

export function getNode(
  nodes: DataNodeTypeType,
  type: NodeTypes,
  id: string,
  x: number = 100,
  y: number = 100,
): Node {
  const defaultValue = getNodeValue(nodes, type, id);

  return {
    id: id,
    title: id,
    x: x,
    y: y,
    width: 120,
    height: 50,
    ...defaultValue,
  };
}


================================================
FILE: apps/client/src/features/flow/nodes/ButtonNode.tsx
================================================
import { Node } from "../flowTypes";

export function renderButtonNode(
  g: d3.Selection<SVGGElement, Node, null, undefined>,
  d: Node,
  onOpen: () => void,
) {
  const w = d.width;
  const h = d.height;
  const group = g
    .append("g")
    .attr("class", "node-content")
    .style("cursor", "pointer");
  group
    .append("rect")
    .attr("x", w / 2 - 40)
    .attr("y", h / 2 - 10)
    .attr("width", 80)
    .attr("height", 20)
    .attr("rx", 4)
    .attr("fill", "#2a2c36");
  group
    .append("text")
    .attr("x", w / 2)
    .attr("y", h / 2 + 1)
    .attr("text-anchor", "middle")
    .attr("dominant-baseline", "middle")
    .attr("font-size", 8)
    .attr("fill", "#fff")
    .text("Change Attr");
  group.on("click", (e) => {
    e.stopPropagation();
    onOpen();
  });
}


================================================
FILE: apps/client/src/features/flow/nodes/CalcNode.tsx
================================================
import { CalculationNodeType, Node } from "../flowTypes";

export function renderCalcNode(
  g: d3.Selection<SVGGElement, Node, null, undefined>,
  d: Node,
  onOpen: () => void,
) {
  const w = d.width;
  const h = d.height;
  const group = g
    .append("g")
    .attr("class", "node-content")
    .style("cursor", "pointer");
  group
    .append("rect")
    .attr("x", w / 2 - 40)
    .attr("y", h / 2 - 10)
    .attr("width", 80)
    .attr("height", 20)
    .attr("rx", 4)
    .attr("fill", "#2a2c36");
  group
    .append("text")
    .attr("x", w / 2)
    .attr("y", h / 2 + 1)
    .attr("text-anchor", "middle")
    .attr("dominant-baseline", "middle")
    .attr("font-size", 8)
    .attr("fill", "#fff")
    .text(`${(d.data as CalculationNodeType)?.operatorCalc ?? ""}`);
  group.on("click", (e) => {
    e.stopPropagation();
    onOpen();
  });
}


================================================
FILE: apps/client/src/features/flow/nodes/HttpNode.tsx
================================================
import { HTTPRequestNodeType, Node } from "../flowTypes";

export function renderHttpNode(
  g: d3.Selection<SVGGElement, Node, null, undefined>,
  d: Node,
  onOpen: () => void,
) {
  const w = d.width;
  const h = d.height;
  const group = g
    .append("g")
    .attr("class", "node-content")
    .style("cursor", "pointer");
  group
    .append("rect")
    .attr("x", w / 2 - 40)
    .attr("y", h / 2 - 10)
    .attr("width", 80)
    .attr("height", 20)
    .attr("rx", 4)
    .attr("fill", "#2a2c36");
  group
    .append("text")
    .attr("x", w / 2)
    .attr("y", h / 2 + 1)
    .attr("text-anchor", "middle")
    .attr("dominant-baseline", "middle")
    .attr("font-size", 8)
    .attr("fill", "#fff")
    .text(`${(d.data as HTTPRequestNodeType)?.httpMethod ?? ""}`);
  group.on("click", (e) => {
    e.stopPropagation();
    onOpen();
  });
}


================================================
FILE: apps/client/src/features/flow/nodes/IntervalNode.tsx
================================================
import { IntervalNodeType, Node } from "../flowTypes";

export function renderIntervalNode(
  g: d3.Selection<SVGGElement, Node, null, undefined>,
  d: Node,
  onOpen: () => void,
) {
  const w = d.width;
  const h = d.height;
  const group = g
    .append("g")
    .attr("class", "node-content")
    .style("cursor", "pointer");
  group
    .append("rect")
    .attr("x", w / 2 - 40)
    .attr("y", h / 2 - 10)
    .attr("width", 80)
    .attr("height", 20)
    .attr("rx", 4)
    .attr("fill", "#2a2c36");
  group
    .append("text")
    .attr("x", w / 2)
    .attr("y", h / 2 + 1)
    .attr("text-anchor", "middle")
    .attr("dominant-baseline", "middle")
    .attr("font-size", 8)
    .attr("fill", "#fff")
    .text(`Interval ${(d.data as IntervalNodeType)?.interval ?? ""}`);
  group.on("click", (e) => {
    e.stopPropagation();
    onOpen();
  });
}


================================================
FILE: apps/client/src/features/flow/nodes/LogicNode.tsx
================================================
import { LogicOpetatorNodeType, Node } from "../flowTypes";

export function renderLogicNode(
  g: d3.Selection<SVGGElement, Node, null, undefined>,
  d: Node,
  onOpen: () => void,
) {
  const w = d.width;
  const h = d.height;
  const group = g
    .append("g")
    .attr("class", "node-content")
    .style("cursor", "pointer");
  group
    .append("rect")
    .attr("x", w / 2 - 40)
    .attr("y", h / 2 - 10)
    .attr("width", 80)
    .attr("height", 20)
    .attr("rx", 4)
    .attr("fill", "#2a2c36");
  group
    .append("text")
    .attr("x", w / 2)
    .attr("y", h / 2 + 1)
    .attr("text-anchor", "middle")
    .attr("dominant-baseline", "middle")
    .attr("font-size", 8)
    .attr("fill", "#fff")
    .text(`${(d.data as LogicOpetatorNodeType)?.operator ?? ""}`);
  group.on("click", (e) => {
    e.stopPropagation();
    onOpen();
  });
}


================================================
FILE: apps/client/src/features/flow/nodes/LoopNode.tsx
================================================
import { LoopNodeType, Node } from "../flowTypes";

export function renderLoopNode(
  g: d3.Selection<SVGGElement, Node, null, undefined>,
  d: Node,
  onOpen: () => void,
) {
  const w = d.width;
  const h = d.height;
  const group = g
    .append("g")
    .attr("class", "node-content")
    .style("cursor", "pointer");
  group
    .append("rect")
    .attr("x", w / 2 - 40)
    .attr("y", h / 2 - 10)
    .attr("width", 80)
    .attr("height", 20)
    .attr("rx", 4)
    .attr("fill", "#2a2c36");
  group
    .append("text")
    .attr("x", w / 2)
    .attr("y", h / 2 + 1)
    .attr("text-anchor", "middle")
    .attr("dominant-baseline", "middle")
    .attr("font-size", 8)
    .attr("fill", "#fff")
    .text(`Edit Loop ${(d.data as LoopNodeType)?.iterations ?? ""}`);
  group.on("click", (e) => {
    e.stopPropagation();
    onOpen();
  });
}


================================================
FILE: apps/client/src/features/flow/nodes/MQTTNode.tsx
================================================
import { MqttPublishNodeType, Node } from "../flowTypes";

function mqttLikeCenterLabel(d: Node): string {
  if (d.nodeType === "DASHBOARD_EVENT_LISTENER") {
    const id = (d.data as { listenerId?: string } | undefined)?.listenerId;
    return id?.trim() ?? "";
  }
  return (d.data as MqttPublishNodeType)?.topic ?? "";
}

export function renderMQTTNode(
  g: d3.Selection<SVGGElement, Node, null, undefined>,
  d: Node,
  onOpen: () => void,
) {
  const w = d.width;
  const h = d.height;
  const group = g
    .append("g")
    .attr("class", "node-content")
    .style("cursor", "pointer");
  group
    .append("rect")
    .attr("x", w / 2 - 40)
    .attr("y", h / 2 - 10)
    .attr("width", 80)
    .attr("height", 20)
    .attr("rx", 4)
    .attr("fill", "#2a2c36");
  group
    .append("text")
    .attr("x", w / 2)
    .attr("y", h / 2 + 1)
    .attr("text-anchor", "middle")
    .attr("dominant-baseline", "middle")
    .attr("font-size", 8)
    .attr("fill", "#fff")
    .text(mqttLikeCenterLabel(d));
  group.on("click", (e) => {
    e.stopPropagation();
    onOpen();
  });
}


================================================
FILE: apps/client/src/features/flow/nodes/NumberNode.tsx
================================================
import { Node, NumberNodeType } from "../flowTypes";

export function renderNumberNode(
  g: d3.Selection<SVGGElement, Node, null, undefined>,
  d: Node,
  onOpen: () => void,
) {
  const w = d.width;
  const h = d.height;
  const group = g
    .append("g")
    .attr("class", "node-content")
    .style("cursor", "pointer");
  group
    .append("rect")
    .attr("x", w / 2 - 40)
    .attr("y", h / 2 - 10)
    .attr("width", 80)
    .attr("height", 20)
    .attr("rx", 4)
    .attr("fill", "#2a2c36");
  group
    .append("text")
    .attr("x", w / 2)
    .attr("y", h / 2 + 1)
    .attr("text-anchor", "middle")
    .attr("dominant-baseline", "middle")
    .attr("font-size", 8)
    .attr("fill", "#fff")
    .text(`Edit Number ${(d.data as unknown as NumberNodeType)?.number ?? 0}`);
  group.on("click", (e) => {
    e.stopPropagation();
    onOpen();
  });
}


================================================
FILE: apps/client/src/features/flow/nodes/ProcessingNode.tsx
================================================
import { Node } from "../flowTypes";

export function renderProcessingNode(
  g: d3.Selection<SVGGElement, Node, null, undefined>,
  d: Node,
) {
  const w = d.width;
  const h = d.height;
  g.append("text")
    .attr("class", "node-content")
    .attr("x", w / 2)
    .attr("y", h / 2 + 4)
    .attr("text-anchor", "middle")
    .attr("dominant-baseline", "middle")
    .attr("font-size", 8)
    .attr("fill", "#fff")
    .text(d.nodeType || "PROCESSING");
}


================================================
FILE: apps/client/src/features/flow/nodes/TitleNode.tsx
================================================
import { Node } from "../flowTypes";

export function renderTitleNode(
  g: d3.Selection<SVGGElement, Node, null, undefined>,
  d: Node,
) {
  const w = d.width;
  const h = d.height;
  g.append("text")
    .attr("class", "node-content")
    .attr("x", w / 2)
    .attr("y", h / 2 + 4)
    .attr("text-anchor", "middle")
    .attr("dominant-baseline", "middle")
    .attr("font-size", 8)
    .attr("fill", "#fff")
    .text(d.title);
}


================================================
FILE: apps/client/src/features/flow/nodes/VarNode.tsx
================================================
import { Node } from "../flowTypes";

export function renderVarNode(
  g: d3.Selection<SVGGElement, Node, null, undefined>,
  d: Node,
  onOpen: () => void,
) {
  const w = d.width;
  const h = d.height;
  const group = g
    .append("g")
    .attr("class", "node-content")
    .style("cursor", "pointer");
  group
    .append("rect")
    .attr("x", w / 2 - 40)
    .attr("y", h / 2 - 10)
    .attr("width", 80)
    .attr("height", 20)
    .attr("rx", 4)
    .attr("fill", "#2a2c36");
  group
    .append("text")
    .attr("x", w / 2)
    .attr("y", h / 2 + 1)
    .attr("text-anchor", "middle")
    .attr("dominant-baseline", "middle")
    .attr("font-size", 8)
    .attr("fill", "#fff")
    .text(`Edit Variable`);
  group.on("click", (e) => {
    e.stopPropagation();
    onOpen();
  });
}


================================================
FILE: apps/client/src/features/flow-log/FlowLog.tsx
================================================
import { useEffect, useState, useRef, useCallback } from "react";
import { X, ChevronDown, ChevronUp, Terminal } from "lucide-react";
import { useWebSocketMessage } from "../ws/WebSocketProvider";
import { WebSocketMessage } from "../ws/ws";

export function FlowLog() {
  const [logMessages, setLogMessages] = useState<string[]>([]);
  const [isPanelOpen, setIsPanelOpen] = useState(false);
  const [isCollapsed, setIsCollapsed] = useState(false);
  const logContainerRef = useRef<HTMLDivElement>(null);

  const handleMessage = useCallback((msg: WebSocketMessage) => {
    setIsPanelOpen(true);
    setIsCollapsed(false);
    try {
      if (msg.type === "log_message") {
        const timestamp = new Date().toLocaleTimeString("en-US", {
          hour12: false,
        });
        setLogMessages((prev) => [
          ...prev,
          `[${timestamp}] ${JSON.stringify(msg.payload)}`,
        ]);
      }
    } catch (err) {
      console.error("Error handling signaling message:", err);
    }
  }, []);

  useWebSocketMessage(handleMessage);

  useEffect(() => {
    if (logContainerRef.current) {
      logContainerRef.current.scrollTop = logContainerRef.current.scrollHeight;
    }
  }, [logMessages]);

  if (!isPanelOpen) {
    return null;
  }

  return (
    <div
      className={`absolute bottom-0 left-0 right-0  bg-neutral-900 text-white border-t-2 border-neutral-700 shadow-lg transition-all duration-300 ease-in-out z-10 ${
        isCollapsed ? "h-12" : "h-64"
      }`}
    >
      <div
        className='flex items-center justify-between p-3 bg-neutral-800 cursor-pointer'
        onClick={() => setIsCollapsed(!isCollapsed)}
      >
        <div className='flex items-center gap-2'>
          <Terminal size={16} className='text-gray-400' />
          <h3 className='font-semibold text-sm tracking-wider select-none'>
            LOGS
          </h3>
        </div>
        <div className='flex items-center gap-2'>
          <button
            onClick={(e) => {
              e.stopPropagation();
              setIsCollapsed(!isCollapsed);
            }}
            className='p-1 rounded hover:bg-gray-700'
            aria-label={isCollapsed ? "Expand logs" : "Collapse logs"}
          >
            {isCollapsed ? <ChevronUp size={16} /> : <ChevronDown size={16} />}
          </button>
          <button
            onClick={(e) => {
              e.stopPropagation();
              setIsPanelOpen(false);
              setLogMessages([]);
            }}
            className='p-1 rounded hover:bg-gray-700'
            aria-label='Close logs'
          >
            <X size={16} />
          </button>
        </div>
      </div>
      {!isCollapsed && (
        <div
          ref={logContainerRef}
          className='h-[calc(100%-3rem)] overflow-y-auto p-4'
        >
          <pre className='text-sm font-mono whitespace-pre-wrap break-words'>
            {logMessages.map((message, index) => (
              <div key={index} className='text-gray-300'>
                {message}
              </div>
            ))}
          </pre>
        </div>
      )}
    </div>
  );
}


================================================
FILE: apps/client/src/features/footer/index.tsx
================================================
import { useState, useEffect, useCallback } from "react";
import { useWebSocket, useWebSocketMessage } from "../ws/WebSocketProvider";
import { WebSocketMessage } from "../ws/ws";

export function Footer() {
  const { wsManager } = useWebSocket();
  const [latency, setLatency] = useState(0);

  useEffect(() => {
    if (!wsManager) return;

    const intervalId = setInterval(() => {
      wsManager.send({
        type: "ping",
        payload: { timestamp: Date.now() },
      });
    }, 10200);

    return () => {
      console.log("CLEARING INTERVAL");
      clearInterval(intervalId);
    };
  }, [wsManager]);

  const handleMessage = useCallback((msg: WebSocketMessage) => {
    try {
      if (msg.type === "pong") {
        const latency =
          Date.now() - (msg.payload as { timestamp: number }).timestamp;
        setLatency(latency);
      }
    } catch (err) {
      console.error("Error handling signaling message:", err);
    }
  }, []);

  useWebSocketMessage(handleMessage);

  return (
    <div className='flex h-5 w-full bg-background z-[999] fixed border-t bottom-0 px-2 gap-2'>
      <b className='text-xs text-neutral-600 font-medium'>Vessel 0.1</b>
      <b className='text-xs text-neutral-600 font-medium'>{latency}ms</b>
      <b className='text-xs text-neutral-600 font-medium'>
        <TokenExpiration />
      </b>
      <b className='text-xs font-medium'>
        <WebSocketStatusIndicator />
      </b>
    </div>
  );
}

import { WebSocketStatusIndicator } from "../ws/IsConnected";
import { parseJwt } from "@/lib/jwt";
import { isDemoMode } from "@/shared/demo";
import { storage } from "@/lib/storage";

const TokenExpiration: React.FC = () => {
  const [timeLeft, setTimeLeft] = useState<string>("");

  useEffect(() => {
    const calculateTimeLeft = () => {
      const token = storage.getToken();

      if (!token || isDemoMode) {
        setTimeLeft("");
        return;
      }

      const decodedToken = parseJwt(token);

      if (!decodedToken || typeof decodedToken.exp !== "number") {
        setTimeLeft("");
        return;
      }

      const expirationTime = decodedToken.exp * 1000;
      const currentTime = new Date().getTime();
      const remainingTime = expirationTime - currentTime;

      if (remainingTime <= 0) {
        setTimeLeft("");
        return;
      }

      const hours = Math.floor((remainingTime / (1000 * 60 * 60)) % 24);
      const minutes = Math.floor((remainingTime / (1000 * 60)) % 60);
      const seconds = Math.floor((remainingTime / 1000) % 60);

      setTimeLeft(`${hours}h ${minutes}m ${seconds}s left`);
    };

    calculateTimeLeft();
    const intervalId = setInterval(calculateTimeLeft, 1000);

    return () => clearInterval(intervalId);
  }, []);

  return <div>{timeLeft}</div>;
};


================================================
FILE: apps/client/src/features/gps/parseGps.ts
================================================
export const parseGpsState = (
  state: string | null | undefined,
): [number, number] | null => {
  if (!state) return null;

  const latMatch = state.match(/lat=([-\d.]+)/);
  const lngMatch = state.match(/lng=([-\d.]+)/);

  if (latMatch && lngMatch && latMatch[1] && lngMatch[1]) {
    const lat = parseFloat(latMatch[1]);
    const lng = parseFloat(lngMatch[1]);
    if (!isNaN(lat) && !isNaN(lng)) {
      return [lat, lng];
    }
  }
  return null;
};


================================================
FILE: apps/client/src/features/ha/HaEntitiesTable.tsx
================================================
import {
  Card,
  CardContent,
  CardHeader,
  CardTitle,
  CardDescription,
} from "@/components/ui/card";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import { Badge } from "@/components/ui/badge";
import { HaState } from "@/entities/ha/types";

interface HaEntitiesTableProps {
  states: HaState[];
}

export const HaEntitiesTable: React.FC<HaEntitiesTableProps> = ({ states }) => {
  return (
    <Card>
      <CardHeader>
        <CardTitle>All Entities</CardTitle>
        <CardDescription>
          Live states of all entities from your Home Assistant instance.
        </CardDescription>
      </CardHeader>
      <CardContent>
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead>Entity ID</TableHead>
              <TableHead>State</TableHead>
              <TableHead>Attributes</TableHead>
              <TableHead>Last Updated</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {states.map((entity) => (
              <TableRow key={entity.entity_id}>
                <TableCell className='font-medium'>
                  {entity.entity_id}
                </TableCell>
                <TableCell>
                  <Badge
                    variant={
                      entity.state === "on" || entity.state === "home"
                        ? "default"
                        : "secondary"
                    }
                  >
                    {entity.state}
                  </Badge>
                </TableCell>
                <TableCell>
                  <pre className='text-xs bg-muted p-2 rounded-md overflow-x-auto'>
                    <code>{JSON.stringify(entity.attributes, null, 2)}</code>
                  </pre>
                </TableCell>
                <TableCell>
                  {new Date(entity.last_updated).toLocaleString()}
                </TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </CardContent>
    </Card>
  );
};


================================================
FILE: apps/client/src/features/ha/HaStatBlock.tsx
================================================
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { HaState } from "@/entities/ha/types";
import { Lightbulb, Power, Router, Thermometer } from "lucide-react";
import React, { useMemo } from "react";

interface HaStatBlockProps {
  states: HaState[];
}

const StatCard = ({
  title,
  value,
  icon: Icon,
}: {
  title: string;
  value: string | number;
  icon: React.ElementType;
}) => (
  <Card>
    <CardHeader className='flex flex-row items-center justify-between space-y-0 pb-2'>
      <CardTitle className='text-sm font-medium'>{title}</CardTitle>
      <Icon className='h-4 w-4 text-muted-foreground' />
    </CardHeader>
    <CardContent>
      <div className='text-2xl font-bold'>{value}</div>
    </CardContent>
  </Card>
);

export const HaStatBlock: React.FC<HaStatBlockProps> = ({ states }) => {
  const stats = useMemo(() => {
    const totalEntities = states.length;
    const lightsOn = states.filter(
      (s) => s.entity_id.startsWith("light.") && s.state === "on",
    ).length;
    const switchesOn = states.filter(
      (s) => s.entity_id.startsWith("switch.") && s.state === "on",
    ).length;
    const availableSensors = states.filter(
      (s) => s.entity_id.startsWith("sensor.") && s.state !== "unavailable",
    ).length;

    return { totalEntities, lightsOn, switchesOn, availableSensors };
  }, [states]);

  return (
    <div className='grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-4'>
      <StatCard
        title='Total Entities'
        value={stats.totalEntities}
        icon={Router}
      />
      <StatCard title='Lights On' value={stats.lightsOn} icon={Lightbulb} />
      <StatCard title='Switches On' value={stats.switchesOn} icon={Power} />
      <StatCard
        title='Available Sensors'
        value={stats.availableSensors}
        icon={Thermometer}
      />
    </div>
  );
};


================================================
FILE: apps/client/src/features/ha/index.tsx
================================================
import React, { useEffect } from "react";
import { useHaStore } from "@/entities/ha/store";
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
import { Loader2, AlertTriangle } from "lucide-react";
import { HaStatBlock } from "./HaStatBlock";
import { HaEntitiesTable } from "./HaEntitiesTable";

export const HaDashboard = () => {
  const { states, status, error, fetchStates } = useHaStore();

  useEffect(() => {
    if (status === "idle") {
      fetchStates();
    }
  }, [status, fetchStates]);

  if (status === "loading" || status === "idle") {
    return (
      <div className='flex items-center justify-center py-20'>
        <Loader2 className='h-10 w-10 animate-spin text-muted-foreground' />
      </div>
    );
  }

  if (status === "failed") {
    return (
      <div className='flex flex-1 flex-col gap-4 w-full'>
        <Alert variant='destructive' className='m-4 w-auto'>
          <AlertTriangle className='h-4 w-4' />
          <AlertTitle>Error</AlertTitle>
          <AlertDescription>
            {error || "An unknown error occurred."}
          </AlertDescription>
        </Alert>
      </div>
    );
  }

  return (
    <div className='flex flex-1 flex-col gap-4'>
      <div className='py-4 md:py-6'>
        <HaStatBlock states={states} />
      </div>
      <div className='py-6'>
        <HaEntitiesTable states={states} />
      </div>
    </div>
  );
};


================================================
FILE: apps/client/src/features/integration/HA.tsx
================================================
import React from "react";

import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";

import { StepComponentProps } from "./types";

export const HA_Step1_URL: React.FC<StepComponentProps> = ({
  value,
  onChange,
}) => (
  <div className='grid gap-4 py-4'>
    <div className='grid grid-cols-4 items-center gap-4'>
      <Label htmlFor='ha-url' className='text-right'>
        HA URL
      </Label>
      <Input
        id='ha-url'
        placeholder='http://homeassistant.local:8123'
        className='col-span-3'
        value={value}
        onChange={onChange}
      />
    </div>
    <p className='text-sm text-muted-foreground px-4 text-center'>
      Enter the network address of your Home Assistant instance.
    </p>
  </div>
);

export const HA_Step2_Token: React.FC<StepComponentProps> = ({
  value,
  onChange,
}) => (
  <div className='grid gap-4 py-4'>
    <div className='grid grid-cols-4 items-center gap-4'>
      <Label htmlFor='ha-token' className='text-right'>
        Access Token
      </Label>
      <Input
        id='ha-token'
        type='password'
        placeholder='Paste your Long-Lived Access Token'
        className='col-span-3'
        value={value}
        onChange={onChange}
      />
    </div>
    <p className='text-sm text-muted-foreground px-4 text-center'>
      Create and copy a Long-Lived Access Token from your HA profile page.
    </p>
  </div>
);


================================================
FILE: apps/client/src/features/integration/Integration.tsx
================================================
import React, { useState, useEffect, useMemo } from "react";

import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogFooter,
  DialogDescription,
} from "@/components/ui/dialog";
import { Home, Bot, Radio, ArrowRight, CheckCircle, Loader2 } from "lucide-react";
import { useIntegrationStore } from "@/entities/integrations/store";
import {
  StepComponentProps,
  FinalStepProps,
  IntegrationId,
  IntegrationWizardModalProps,
} from "./types";
import { HA_Step1_URL, HA_Step2_Token } from "./HA";
import { ROS2_Step1_Bridge, ROS2_Step2_Address } from "./ROS";
import { SDR_Step1_Info, SDR_Step2_Host, SDR_Step3_Port } from "./SDR";
import { useNavigate } from "react-router";
import { toast } from "sonner";

const FinalStep: React.FC<FinalStepProps> = ({ integrationName }) => (
  <div className='py-8 text-center flex flex-col items-center justify-center gap-4'>
    <CheckCircle className='h-16 w-16 text-green-500' />
    <h3 className='text-2xl font-bold'>Connection Complete!</h3>
    <p className='text-muted-foreground'>
      Successfully configured the {integrationName} integration.
    </p>
  </div>
);

const wizardConfig: {
  [key in IntegrationId]: {
    name: string;
    registrationId: string;
    steps: {
      title: string;
      configKey?: string;
      component: React.FC<StepComponentProps>;
    }[];
    buildConfig: (formData: Record<string, string>) => Record<string, string>;
  };
} = {
  "home-assistant": {
    name: "Home Assistant",
    registrationId: "home_assistant",
    steps: [
      {
        title: "Connect to Home Assistant",
        configKey: "home_assistant_url",
        component: HA_Step1_URL,
      },
      {
        title: "Provide Access Token",
        configKey: "home_assistant_token",
        component: HA_Step2_Token,
      },
    ],
    buildConfig: (formData) => ({
      url: formData["home_assistant_url"] || "",
      token: formData["home_assistant_token"] || "",
    }),
  },
  ros2: {
    name: "ROS2",
    registrationId: "ros2",
    steps: [
      {
        title: "Prerequisites",
        component: ROS2_Step1_Bridge,
      },
      {
        title: "Enter Bridge Address",
        configKey: "ros2_websocket_url",
        component: ROS2_Step2_Address,
      },
    ],
    buildConfig: (formData) => ({
      websocket_url: formData["ros2_websocket_url"] || "",
    }),
  },
  sdr: {
    name: "RTL-SDR",
    registrationId: "sdr",
    steps: [
      {
        title: "RTL-SDR (rtl_tcp) Prerequisites",
        component: SDR_Step1_Info,
      },
      {
        title: "Enter Server Host",
        configKey: "sdr_host",
        component: SDR_Step2_Host,
      },
      {
        title: "Enter Server Port",
        configKey: "sdr_port",
        component: SDR_Step3_Port,
      },
    ],
    buildConfig: (formData) => ({
      host: formData["sdr_host"] || "",
      port: formData["sdr_port"] || "1234",
    }),
  },
};

const IntegrationWizardModal: React.FC<IntegrationWizardModalProps> = ({
  integrationId,
  onClose,
  onComplete,
}) => {
  const [currentStep, setCurrentStep] = useState(0);
  const [formData, setFormData] = useState<{ [key: string]: string }>({});
  const [isSaving, setIsSaving] = useState(false);
  const { registerIntegration } = useIntegrationStore();

  const config = wizardConfig[integrationId];
  const totalSteps = config.steps.length;
  const isLastStep = currentStep === totalSteps;

  const handleDataChange = (key: string | undefined, value: string) => {
    if (key) {
      setFormData((prev) => ({ ...prev, [key]: value }));
    }
  };

  const isLastConfigStep = currentStep === totalSteps - 1;

  const handleNext = async () => {
    if (isLastConfigStep) {
      // On the last configurable step, register the entire integration
      setIsSaving(true);
      try {
        const integrationConfig = config.buildConfig(formData);
        await registerIntegration(config.registrationId, integrationConfig);
        setCurrentStep((prev) => prev + 1);
      } catch (error) {
        console.error("Failed to register integration:", error);
        toast("Failed to register integration.");
      } finally {
        setIsSaving(false);
      }
    } else {
      setCurrentStep((prev) => prev + 1);
    }
  };
  const handleBack = () => setCurrentStep((prev) => Math.max(prev - 1, 0));

  const stepInfo = !isLastStep ? config.steps[currentStep] : null;
  const CurrentStepComponent = isLastStep ? (
    <FinalStep integrationName={config.name} />
  ) : (
    stepInfo &&
    React.createElement(stepInfo.component, {
      value: formData[stepInfo.configKey!] || "",
      onChange: (e: React.ChangeEvent<HTMLInputElement>) =>
        handleDataChange(stepInfo.configKey, e.target.value),
    })
  );

  const currentTitle = isLastStep
    ? "Setup Complete"
    : config.steps[currentStep].title;

  return (
    <Dialog open={true} onOpenChange={!isSaving ? onClose : undefined}>
      <DialogContent className='sm:max-w-[425px]'>
        <DialogHeader>
          <DialogTitle>{currentTitle}</DialogTitle>
          {!isLastStep && (
            <DialogDescription>
              Step {currentStep + 1} of {totalSteps}
            </DialogDescription>
          )}
        </DialogHeader>

        {CurrentStepComponent}

        <DialogFooter>
          {currentStep > 0 && !isLastStep && (
            <Button variant='outline' onClick={handleBack} disabled={isSaving}>
              Back
            </Button>
          )}
          {isLastStep ? (
            <Button onClick={onComplete} className='w-full'>
              Finish
            </Button>
          ) : (
            <Button onClick={handleNext} disabled={isSaving}>
              {isSaving ? (
                <Loader2 className='mr-2 h-4 w-4 animate-spin' />
              ) : (
                "Next"
              )}
              {!isSaving && <ArrowRight className='ml-2 h-4 w-4' />}
            </Button>
          )}
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
};

const initialIntegrations: {
  id: IntegrationId;
  name: string;
  description: string;
  icon: React.ReactNode;
  status: "Connected" | "Not Connected";
}[] = [
  {
    id: "home-assistant",
    name: "Home Assistant",
    description:
      "Connect and control your Home Assistant devices and entities directly.",
    icon: <Home className='h-8 w-8 text-cyan-500' />,
    status: "Not Connected",
  },
  {
    id: "ros2",
    name: "ROS2",
    description:
      "Integrate with your ROS2 ecosystem for advanced robotics control and monitoring.",
    icon: <Bot className='h-8 w-8 text-green-500' />,
    status: "Not Connected",
  },
  {
    id: "sdr",
    name: "RTL-SDR",
    description:
      "Connect to an RTL-SDR receiver via rtl_tcp for software-defined radio control and spectrum monitoring.",
    icon: <Radio className='h-8 w-8 text-purple-500' />,
    status: "Not Connected",
  },
];

export function Intergration() {
  const [selectedIntegration, setSelectedIntegration] =
    useState<IntegrationId | null>(null);
  const { isHaConnected, isRos2Connected, isSdrConnected, fetchStatus } =
    useIntegrationStore();
  const navigate = useNavigate();

  useEffect(() => {
    fetchStatus();
  }, [fetchStatus]);

  const integrations = useMemo(() => {
    return initialIntegrations.map((int) => {
      if (int.id === "home-assistant") {
        return {
          ...int,
          status: isHaConnected
            ? ("Connected" as const)
            : ("Not Connected" as const),
        };
      }
      if (int.id === "ros2") {
        return {
          ...int,
          status: isRos2Connected
            ? ("Connected" as const)
            : ("Not Connected" as const),
        };
      }
      if (int.id === "sdr") {
        return {
          ...int,
          status: isSdrConnected
            ? ("Connected" as const)
            : ("Not Connected" as const),
        };
      }
      return int;
    });
  }, [isHaConnected, isRos2Connected, isSdrConnected]);

  const handleConnectClick = (integrationId: IntegrationId) => {
    setSelectedIntegration(integrationId);
  };

  const handleWizardComplete = () => {
    fetchStatus();
    setSelectedIntegration(null);
  };

  const handleWizardClose = () => {
    setSelectedIntegration(null);
  };

  return (
    <>
      {integrations.map((integration) => (
        <div
          key={integration.id}
          className='flex items-center gap-4 border p-4'
        >
          {integration.icon}
          <div className='flex-grow'>
            <h3 className='font-semibold'>{integration.name}</h3>
            <p className='text-sm text-muted-foreground'>
              {integration.description}
            </p>
          </div>
          <div className='flex items-center gap-4 ml-auto'>
            {integration.status === "Connected" ? (
              <Button
                size='sm'
                variant='secondary'
                onClick={() => navigate(`/devices?configure=${integration.id}`)}
              >
                Configure
              </Button>
            ) : (
              <Button
                size='sm'
                onClick={() => handleConnectClick(integration.id)}
              >
                Connect
              </Button>
            )}
          </div>
        </div>
      ))}

      {selectedIntegration && (
        <IntegrationWizardModal
          integrationId={selectedIntegration}
          onClose={handleWizardClose}
          onComplete={handleWizardComplete}
        />
      )}
    </>
  );
}


================================================
FILE: apps/client/src/features/integration/ROS.tsx
================================================
import React from "react";

import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";

import { StepComponentProps } from "./types";

export const ROS2_Step1_Bridge: React.FC = () => (
  <div className='py-4 text-center'>
    <h4 className='font-semibold'>ROS2 Bridge Server</h4>
    <p className='text-sm text-muted-foreground mt-2'>
      Ensure that the `rosbridge_server` is running on your ROS2 machine.
      <br />
      Example command:
    </p>
    <code className='text-xs bg-muted p-2 rounded-md block mt-2'>
      ros2 launch rosbridge_server rosbridge_websocket_launch.xml
    </code>
  </div>
);

export const ROS2_Step2_Address: React.FC<StepComponentProps> = ({
  value,
  onChange,
}) => (
  <div className='grid gap-4 py-4'>
    <div className='grid grid-cols-4 items-center gap-4'>
      <Label htmlFor='ros-address' className='text-right'>
        WebSocket URL
      </Label>
      <Input
        id='ros-address'
        placeholder='ws://<your_ros_ip>:9090'
        className='col-span-3'
        value={value}
        onChange={onChange}
      />
    </div>
    <p className='text-sm text-muted-foreground px-4 text-center'>
      Enter the WebSocket address of your rosbridge server.
    </p>
  </div>
);


================================================
FILE: apps/client/src/features/integration/SDR.tsx
================================================
import React from "react";

import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";

import { StepComponentProps } from "./types";

export const SDR_Step1_Info: React.FC = () => (
  <div className='py-4 text-center'>
    <h4 className='font-semibold'>RTL-SDR (rtl_tcp)</h4>
    <p className='text-sm text-muted-foreground mt-2'>
      Ensure that rtl_tcp is running and accessible on the network.
      <br />
      The server typically listens on port 1234.
    </p>
    <code className='text-xs bg-muted p-2 rounded-md block mt-2'>
      rtl_tcp -a 0.0.0.0
    </code>
  </div>
);

export const SDR_Step2_Host: React.FC<StepComponentProps> = ({
  value,
  onChange,
}) => (
  <div className='grid gap-4 py-4'>
    <div className='grid grid-cols-4 items-center gap-4'>
      <Label htmlFor='sdr-host' className='text-right'>
        Host
      </Label>
      <Input
        id='sdr-host'
        placeholder='192.168.1.100'
        className='col-span-3'
        value={value}
        onChange={onChange}
      />
    </div>
    <p className='text-sm text-muted-foreground px-4 text-center'>
      Enter the hostname or IP address of the rtl_tcp server.
    </p>
  </div>
);

export const SDR_Step3_Port: React.FC<StepComponentProps> = ({
  value,
  onChange,
}) => (
  <div className='grid gap-4 py-4'>
    <div className='grid grid-cols-4 items-center gap-4'>
      <Label htmlFor='sdr-port' className='text-right'>
        Port
      </Label>
      <Input
        id='sdr-port'
        placeholder='1234'
        className='col-span-3'
        value={value}
        onChange={onChange}
      />
    </div>
    <p className='text-sm text-muted-foreground px-4 text-center'>
      Enter the TCP port of the rtl_tcp server (default: 1234).
    </p>
  </div>
);


================================================
FILE: apps/client/src/features/integration/constants.ts
================================================
export const INTEGRATION_DEVICE_ID: Record<string, string> = {
  "home-assistant": "home_assistant",
  ros2: "ros2_bridge",
  sdr: "sdr_server",
};

export const INTEGRATION_ENTITY_ID: Record<string, string> = {
  "home-assistant": "home_assistant.bridge",
  ros2: "ros2.bridge",
  sdr: "sdr.server",
};


================================================
FILE: apps/client/src/features/integration/types.ts
================================================
export type IntegrationId = "home-assistant" | "ros2" | "sdr";

export interface StepComponentProps {
  value: string;
  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
}

export interface FinalStepProps {
  integrationName: string;
}

export interface IntegrationWizardModalProps {
  integrationId: IntegrationId;
  onClose: () => void;
  onComplete: () => void;
}


================================================
FILE: apps/client/src/features/json/JsonEditor.tsx
================================================
import CodeMirror, {
  EditorView,
  ReactCodeMirrorProps,
} from "@uiw/react-codemirror";
import { json } from "@codemirror/lang-json";

interface JsonCodeEditorProps extends ReactCodeMirrorProps {
  value: string;
  onChange: (value: string) => void;
}

export const JsonCodeEditor: React.FC<JsonCodeEditorProps> = ({
  value,
  onChange,
  ...props
}) => {
  return (
    <div className='rounded-md border'>
      <CodeMirror
        value={value}
        onChange={onChange}
        height='240px'
        extensions={[json(), EditorView.lineWrapping]}
        theme='dark'
        style={{
          fontSize: "0.875rem",
          fontFamily: "var(--font-mono)",
        }}
        {...props}
      />
    </div>
  );
};


================================================
FILE: apps/client/src/features/llm-chat/ChatInput.tsx
================================================
import { useState, useRef, useEffect, useMemo } from "react";
import { Button } from "@/components/ui/button";
import { SendIcon, ImageIcon, XIcon } from "lucide-react";

interface ChatInputProps {
  onSend: (content: string) => void;
  onSendWithImage: (content: string, image: File) => void;
  pendingImage: File | null;
  onImageSelect: (image: File | null) => void;
  disabled?: boolean;
}

export function ChatInput({
  onSend,
  onSendWithImage,
  pendingImage,
  onImageSelect,
  disabled,
}: ChatInputProps) {
  const [value, setValue] = useState("");
  const textareaRef = useRef<HTMLTextAreaElement>(null);
  const fileInputRef = useRef<HTMLInputElement>(null);

  // Memoize pendingImage's Object URL (prevent duplicate creation)
  const imagePreviewUrl = useMemo(() => {
    if (!pendingImage) return null;
    return URL.createObjectURL(pendingImage);
  }, [pendingImage]);

  // cleanup on unmount or when image changes
  useEffect(() => {
    return () => {
      if (imagePreviewUrl) {
        URL.revokeObjectURL(imagePreviewUrl);
      }
    };
  }, [imagePreviewUrl]);

  const handleSubmit = () => {
    if (disabled) return;

    if (pendingImage) {
      // Send with image if image is attached
      const message = value.trim() || "Please analyze this image";
      onSendWithImage(message, pendingImage);
      setValue("");
    } else {
      // Send text only
      const trimmed = value.trim();
      if (!trimmed) return;
      onSend(trimmed);
      setValue("");
    }
  };

  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
    if (e.key === "Enter" && !e.shiftKey) {
      e.preventDefault();
      handleSubmit();
    }
  };

  const handleImageSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (file) {
      // Validate image type
      if (!file.type.startsWith("image/")) {
        alert("Only image files can be uploaded.");
        return;
      }
      // Size limit (20MB)
      if (file.size > 20 * 1024 * 1024) {
        alert("Image size must be 20MB or less.");
        return;
      }
      onImageSelect(file);
    }
    // Allow reselecting the same file
    e.target.value = "";
  };

  const handleRemoveImage = () => {
    onImageSelect(null);
  };

  useEffect(() => {
    if (textareaRef.current) {
      textareaRef.current.style.height = "auto";
      textareaRef.current.style.height = `${Math.min(textareaRef.current.scrollHeight, 120)}px`;
    }
  }, [value]);

  const canSubmit = pendingImage || value.trim();

  return (
    <div className="border-t p-4 pb-9">
      {/* Image preview */}
      {imagePreviewUrl && (
        <div className="mb-2 relative inline-block">
          <img
            src={imagePreviewUrl}
            alt="Preview"
            className="h-20 rounded border object-cover"
          />
          <button
            type="button"
            onClick={handleRemoveImage}
            className="absolute -top-2 -right-2 bg-destructive text-destructive-foreground rounded-full p-0.5 hover:bg-destructive/90"
          >
            <XIcon className="size-3" />
          </button>
        </div>
      )}

      <div className="flex gap-2">
        {/* Image select button */}
        <Button
          type="button"
          variant="ghost"
          size="icon"
          onClick={() => fileInputRef.current?.click()}
          disabled={disabled}
          title="Attach image"
        >
          <ImageIcon className="size-4" />
        </Button>
        <input
          ref={fileInputRef}
          type="file"
          accept="image/*"
          onChange={handleImageSelect}
          className="hidden"
        />

        <textarea
          ref={textareaRef}
          value={value}
          onChange={(e) => setValue(e.target.value)}
          onKeyDown={handleKeyDown}
          placeholder={
            pendingImage ? "Ask about this image..." : "Type a message..."
          }
          disabled={disabled}
          rows={1}
          className="flex-1 resize-none border bg-background px-3 py-2 text-sm outline-none placeholder:text-muted-foreground focus:ring-2 focus:ring-ring disabled:opacity-50"
        />

        <Button
          onClick={handleSubmit}
          disabled={disabled || !canSubmit}
          size="icon"
          title="Send"
        >
          <SendIcon className="size-4" />
        </Button>
      </div>
    </div>
  );
}


================================================
FILE: apps/client/src/features/llm-chat/ChatMessage.tsx
================================================
import { cn } from "@/lib/utils";
import { LoaderCircle } from "lucide-react";
import type { ChatMessage as ChatMessageType } from "./types";

interface ChatMessageProps {
  message: ChatMessageType;
}

export function ChatMessage({ message }: ChatMessageProps) {
  if (message.role === "tool") return null;

  const isUser = message.role === "user";

  return (
    <div
      className={cn("flex w-full", isUser ? "justify-end" : "justify-start")}
    >
      <div
        className={cn(
          "max-w-[80%] px-3 py-2 text-sm",
          isUser
            ? "bg-primary text-primary-foreground"
            : "bg-muted text-foreground",
        )}
      >
        {/* Display image if present */}
        {message.image?.previewUrl && (
          <img
            src={message.image.previewUrl}
            alt={message.image.fileName || "Uploaded image"}
            className='max-w-full rounded mb-2'
          />
        )}

        {/* Tool call in progress */}
        {message.isToolCalling && (
          <div className='mb-2 flex items-center gap-2 text-xs text-muted-foreground px-2 py-1.5 rounded bg-blue-500/10'>
            <LoaderCircle className='h-3.5 w-3.5 animate-spin text-blue-400' />
            <span className='text-blue-400'>Generating flow...</span>
          </div>
        )}

        {/* Tool call results */}
        {!message.isToolCalling &&
          message.toolResults &&
          message.toolResults.length > 0 && (
            <div className='mb-2 space-y-1'>
              {message.toolResults.map((r, i) => (
                <div
                  key={i}
                  className={cn(
                    "flex items-center gap-1.5 text-xs px-2 py-1",
                    r.success
                      ? "bg-green-500/10 text-green-400"
                      : "bg-red-500/10 text-red-400",
                  )}
                >
                  <span className='font-mono truncate w-50'>
                    {r.name} {r.message}
                  </span>
                </div>
              ))}
            </div>
          )}

        {/* Text content */}
        <p className='whitespace-pre-wrap break-words'>
          {message.content}
          {message.isStreaming && (
            <span className='animate-pulse ml-0.5'>▊</span>
          )}
        </p>

        <span
          className={cn(
            "mt-1 block text-xs opacity-60",
            isUser ? "text-right" : "text-left",
          )}
        >
          {message.timestamp.toLocaleTimeString([], {
            hour: "2-digit",
            minute: "2-digit",
          })}
        </span>
      </div>
    </div>
  );
}


================================================
FILE: apps/client/src/features/llm-chat/ChatMessages.tsx
================================================
import { useEffect, useRef } from "react";
import { ScrollArea } from "@/components/ui/scroll-area";
import { ChatMessage } from "./ChatMessage";
import type { ChatMessage as ChatMessageType } from "./types";

interface ChatMessagesProps {
  messages: ChatMessageType[];
  isLoading?: boolean;
}

export function ChatMessages({ messages, isLoading }: ChatMessagesProps) {
  const bottomRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    bottomRef.current?.scrollIntoView({ behavior: "smooth" });
  }, [messages]);

  return (
    <ScrollArea className='flex-1 px-4'>
      <div className='flex flex-col gap-3 py-4'>
        {messages.length === 0 ? (
          <div className='flex h-full items-center justify-center text-muted-foreground text-sm'>
            <p>Type a message to start the conversation.</p>
          </div>
        ) : (
          messages.map((message) => (
            <ChatMessage key={message.id} message={message} />
          ))
        )}
        {isLoading && (
          <div className='flex justify-start'>
            <div className='bg-muted rounded-lg px-3 py-2'>
              <div className='flex gap-1'>
                <span className='size-2 animate-bounce rounded-full bg-foreground/40' />
                <span className='size-2 animate-bounce rounded-full bg-foreground/40 [animation-delay:0.1s]' />
                <span className='size-2 animate-bounce rounded-full bg-foreground/40 [animation-delay:0.2s]' />
              </div>
            </div>
          </div>
        )}
        <div ref={bottomRef} />
      </div>
    </ScrollArea>
  );
}


================================================
FILE: apps/client/src/features/llm-chat/ChatPanel.tsx
================================================
import { Button } from "@/components/ui/button";
import { XIcon, TrashIcon } from "lucide-react";
import { isElectron } from "@/lib/electron";
import { cn } from "@/lib/utils";
import { useChatStore } from "./store";
import { ChatMessages } from "./ChatMessages";
import { ChatInput } from "./ChatInput";

const PANEL_WIDTH = 400;
const ELECTRON_TOP_OFFSET = 34;

export function ChatPanel() {
  const {
    isOpen,
    messages,
    isLoading,
    pendingImage,
    closePanel,
    sendMessage,
    sendMessageWithImage,
    setPendingImage,
    clearMessages,
  } = useChatStore();

  const topOffset = isElectron() ? ELECTRON_TOP_OFFSET : 0;

  return (
    <div
      className={cn(
        "fixed right-0 z-40 flex flex-col border-l bg-background shadow-lg transition-transform duration-300 ease-in-out",
        !isOpen && "translate-x-full",
      )}
      style={{
        top: topOffset,
        height: `calc(100vh - ${topOffset}px)`,
        width: PANEL_WIDTH,
      }}
    >
      {/* Header */}
      <div className='flex items-center justify-between border-b px-4 h-[48px]'>
        <div className='flex items-center gap-2'>
          <h2 className='font-semibold'>Assistant</h2>
        </div>
        <div className='flex items-center gap-1'>
          <Button
            variant='ghost'
            size='icon'
            onClick={clearMessages}
            disabled={messages.length === 0}
            title='Clear conversation'
          >
            <TrashIcon className='size-4' />
          </Button>
          <Button
            variant='ghost'
            size='icon'
            onClick={closePanel}
            title='Close panel (⌘K)'
          >
            <XIcon className='size-4' />
          </Button>
        </div>
      </div>

      {/* Messages */}
      <ChatMessages messages={messages} isLoading={isLoading} />

      {/* Input */}
      <ChatInput
        onSend={sendMessage}
        onSendWithImage={sendMessageWithImage}
        pendingImage={pendingImage}
        onImageSelect={setPendingImage}
        disabled={isLoading}
      />
    </div>
  );
}

export { PANEL_WIDTH };


================================================
FILE: apps/client/src/features/llm-chat/ChatPanelContainer.tsx
================================================
import { useIsMobile } from "@/hooks/use-mobile";
import { useChatStore } from "./store";
import { useChatKeyboard } from "./useChatKeyboard";
import { ChatPanel } from "./ChatPanel";
import { ChatPanelMobile } from "./ChatPanelMobile";

export function ChatPanelContainer() {
  const isMobile = useIsMobile();
  const isOpen = useChatStore((s) => s.isOpen);

  // Cmd+K 단축키 등록
  useChatKeyboard();

  // 모바일에서는 열려있을 때만 Sheet 표시
  if (isMobile) {
    return isOpen ? <ChatPanelMobile /> : null;
  }

  // 데스크톱에서는 항상 패널 렌더링 (열기/닫기 애니메이션 처리)
  return <ChatPanel />;
}


================================================
FILE: apps/client/src/features/llm-chat/ChatPanelMobile.tsx
================================================
import { Button } from "@/components/ui/button";
import {
  Sheet,
  SheetContent,
  SheetHeader,
  SheetTitle,
} from "@/components/ui/sheet";
import { TrashIcon, MessageSquareIcon } from "lucide-react";
import { useChatStore } from "./store";
import { ChatMessages } from "./ChatMessages";
import { ChatInput } from "./ChatInput";

export function ChatPanelMobile() {
  const {
    isOpen,
    messages,
    isLoading,
    pendingImage,
    closePanel,
    sendMessage,
    sendMessageWithImage,
    setPendingImage,
    clearMessages,
  } = useChatStore();

  return (
    <Sheet open={isOpen} onOpenChange={(open) => !open && closePanel()}>
      <SheetContent side="right" className="flex flex-col p-0">
        <SheetHeader className="flex-row items-center justify-between border-b px-4 py-3">
          <div className="flex items-center gap-2">
            <MessageSquareIcon className="size-5 text-muted-foreground" />
            <SheetTitle>AI Assistant</SheetTitle>
          </div>
          <Button
            variant="ghost"
            size="icon"
            onClick={clearMessages}
            disabled={messages.length === 0}
            title="Clear conversation"
          >
            <TrashIcon className="size-4" />
          </Button>
        </SheetHeader>

        <ChatMessages messages={messages} isLoading={isLoading} />

        <ChatInput
          onSend={sendMessage}
          onSendWithImage={sendMessageWithImage}
          pendingImage={pendingImage}
          onImageSelect={setPendingImage}
          disabled={isLoading}
        />
      </SheetContent>
    </Sheet>
  );
}


================================================
FILE: apps/client/src/features/llm-chat/index.tsx
================================================
export { ChatPanelContainer } from "./ChatPanelContainer";
export { useChatStore } from "./store";
export { PANEL_WIDTH } from "./ChatPanel";
export type { ChatMessage, ChatPanelState, FlowChatContext } from "./types";


================================================
FILE: apps/client/src/features/llm-chat/store.ts
================================================
import { create } from "zustand";
import {
  CapsuleClient,
  CapsuleAuthError,
  CapsuleSubscriptionError,
  CapsuleRateLimitError,
} from "@vessel/capsule-client";
import type { HistoryMessage, ToolCallResult } from "@vessel/capsule-client";
import { supabase } from "@/lib/supabase";
import { storage } from "@/lib/storage";
import type { ChatMessage, ChatPanelState } from "./types";

function generateId(): string {
  return `${Date.now()}-${Math.random().toString(36).slice(2, 9)}`;
}

function buildHistory(messages: ChatMessage[]): HistoryMessage[] {
  return messages
    .filter((m) => !m.isStreaming && !m.content.startsWith("⚠️"))
    .map((m) => {
      const msg: HistoryMessage = { role: m.role, content: m.content };
      if (m.toolCalls) msg.tool_calls = m.toolCalls;
      if (m.toolCallId) msg.tool_call_id = m.toolCallId;
      return msg;
    });
}

const DEFAULT_CAPSULE_URL = import.meta.env.VITE_CAPSULE_URL || "http://localhost:3000";

const capsuleClient = new CapsuleClient({
  baseUrl: storage.getCapsuleUrl() || DEFAULT_CAPSULE_URL,
  timeout: 120000,
  getAccessToken: async () => {
    const {
      data: { session },
    } = await supabase.auth.getSession();
    return session?.access_token ?? null;
  },
});

function handleChatError(
  error: unknown,
  defaultMsg: string,
): { errorMessage: string; showInChat: boolean } {
  let errorMessage = defaultMsg;
  let showInChat = false;

  if (error instanceof CapsuleAuthError) {
    errorMessage = "Please sign in to continue.";
    showInChat = true;
  } else if (error instanceof CapsuleSubscriptionError) {
    errorMessage =
      "Pro subscription required. Upgrade at [vessel.cartesiancs.com/pricing](https://vessel.cartesiancs.com/pricing)";
    showInChat = true;
  } else if (error instanceof CapsuleRateLimitError) {
    errorMessage = "Daily usage limit reached. Please try again tomorrow.";
    showInChat = true;
  } else if (error instanceof Error) {
    errorMessage = error.message;
    if (errorMessage.includes("length limit exceeded")) {
      errorMessage = "Image is too large. Please use an image under 20MB.";
    }
    showInChat = true;
  }

  return { errorMessage, showInChat };
}

export const useChatStore = create<ChatPanelState>((set, get) => ({
  isOpen: false,
  messages: [],
  isLoading: false,
  error: null,
  pendingImage: null,
  flowContext: null,

  openPanel: () => set({ isOpen: true }),
  closePanel: () => set({ isOpen: false }),
  togglePanel: () => set((state) => ({ isOpen: !state.isOpen })),

  setFlowContext: (ctx) => set({ flowContext: ctx }),

  sendMessage: async (content: string) => {
    const userMessage: ChatMessage = {
      id: generateId(),
      role: "user",
      content,
      timestamp: new Date(),
    };

    const assistantMessage: ChatMessage = {
      id: generateId(),
      role: "assistant",
      content: "",
      timestamp: new Date(),
      isStreaming: true,
    };

    set((state) => ({
      messages: [...state.messages, userMessage, assistantMessage],
      isLoading: true,
      error: null,
    }));

    try {
      const history = buildHistory(get().messages.slice(0, -2));
      const flowCtx = get().flowContext;

      let receivedToolCalls: ToolCallResult[] | null = null;

      await capsuleClient.chatStream(content, (chunk, done) => {
        if (done) {
          set((state) => ({
            messages: state.messages.map((m) =>
              m.id === assistantMessage.id ? { ...m, isStreaming: false } : m,
            ),
          }));
        } else {
          set((state) => ({
            messages: state.messages.map((m) =>
              m.id === assistantMessage.id
                ? { ...m, content: m.content + chunk }
                : m,
            ),
          }));
        }
      }, {
        history,
        ...(flowCtx && {
          systemPrompt: flowCtx.buildSystemPrompt(),
          tools: flowCtx.tools,
          toolChoice: "auto" as const,
          onToolCall: (toolCalls) => {
            receivedToolCalls = toolCalls;
            set((state) => ({
              messages: state.messages.map((m) =>
                m.id === assistantMessage.id
                  ? { ...m, isToolCalling: true, isStreaming: false }
                  : m,
              ),
            }));
          },
        }),
      });

      // Tool call feedback loop
      if (receivedToolCalls && flowCtx) {
        const toolResults = flowCtx.executeToolCalls(receivedToolCalls);

        // Store toolCalls on the assistant message for history reconstruction
        // and add tool result messages to the messages array
        const toolResultMessages: ChatMessage[] = toolResults.map((r) => ({
          id: generateId(),
          role: "tool" as const,
          content: JSON.stringify({ success: r.success, message: r.message }),
          toolCallId: r.toolCallId,
          timestamp: new Date(),
        }));

        const finalMessage: ChatMessage = {
          id: generateId(),
          role: "assistant",
          content: "",
          timestamp: new Date(),
          isStreaming: true,
        };

        set((state) => ({
          messages: [
            ...state.messages.map((m) =>
              m.id === assistantMessage.id
                ? { ...m, isToolCalling: false, toolResults, toolCalls: receivedToolCalls ?? undefined }
                : m,
            ),
            ...toolResultMessages,
            finalMessage,
          ],
        }));

        const feedbackHistory = buildHistory(
          get().messages.slice(0, -1),
        );

        await capsuleClient.chatStream(
          "Based on the tool execution results above, briefly summarize what was done.",
          (chunk, done) => {
            if (done) {
              set((state) => ({
                messages: state.messages.map((m) =>
                  m.id === finalMessage.id ? { ...m, isStreaming: false } : m,
                ),
                isLoading: false,
              }));
            } else {
              set((state) => ({
                messages: state.messages.map((m) =>
                  m.id === finalMessage.id
                    ? { ...m, content: m.content + chunk }
                    : m,
                ),
              }));
            }
          },
          {
            history: feedbackHistory,
            systemPrompt: flowCtx.buildSystemPrompt(),
          },
        );
      } else {
        set({ isLoading: false });
      }
    } catch (error) {
      const { errorMessage, showInChat } = handleChatError(error, "Failed to send message");

      set({
        error: showInChat ? null : errorMessage,
        isLoading: false,
        messages: get().messages.map((m) =>
          m.id === assistantMessage.id
            ? {
                ...m,
                content: showInChat ? `⚠️ ${errorMessage}` : m.content,
                isStreaming: false,
                isToolCalling: false,
              }
            : m,
        ),
      });
    }
  },

  sendMessageWithImage: async (content: string, image: File) => {
    const previewUrl = URL.createObjectURL(image);

    const userMessage: ChatMessage = {
      id: generateId(),
      role: "user",
      content,
      timestamp: new Date(),
      image: {
        previewUrl,
        fileName: image.name,
        size: image.size,
      },
    };

    const assistantMessage: ChatMessage = {
      id: generateId(),
      role: "assistant",
      content: "",
      timestamp: new Date(),
      isStreaming: true,
    };

    set((state) => ({
      messages: [...state.messages, userMessage, assistantMessage],
      isLoading: true,
      error: null,
      pendingImage: null,
    }));

    try {
      const history = buildHistory(get().messages.slice(0, -2));
      await capsuleClient.analyzeImageStream(
        { image, message: content },
        (chunk, done) => {
          if (done) {
            set((state) => ({
              messages: state.messages.map((m) =>
                m.id === assistantMessage.id ? { ...m, isStreaming: false } : m,
              ),
              isLoading: false,
            }));
          } else {
            set((state) => ({
              messages: state.messages.map((m) =>
                m.id === assistantMessage.id
                  ? { ...m, content: m.content + chunk }
                  : m,
              ),
            }));
          }
        },
        { history },
      );
    } catch (error) {
      const { errorMessage, showInChat } = handleChatError(error, "Failed to analyze image");

      set((state) => ({
        error: showInChat ? null : errorMessage,
        isLoading: false,
        messages: state.messages.map((m) =>
          m.id === assistantMessage.id
            ? { ...m, content: `⚠️ ${errorMessage}`, isStreaming: false }
            : m,
        ),
      }));
    }
  },

  setPendingImage: (image: File | null) => {
    set({ pendingImage: image });
  },

  clearMessages: () => {
    const messages = get().messages;
    messages.forEach((m) => {
      if (m.image?.previewUrl) {
        URL.revokeObjectURL(m.image.previewUrl);
      }
    });
    set({ messages: [], error: null });
  },

  updateCapsuleUrl: (url: string) => {
    storage.setCapsuleUrl(url);
    capsuleClient.setBaseUrl(url);
  },
}));


================================================
FILE: apps/client/src/features/llm-chat/types.ts
================================================
import type { Tool, ToolCallResult } from "@vessel/capsule-client";
import type { ToolExecutionResult } from "@/features/flow/flow-chat";

export interface ChatMessageImage {
  /** Object URL for local preview (revoke after use) */
  previewUrl?: string;
  /** Image file name */
  fileName?: string;
  /** Image size (bytes) */
  size?: number;
}

export interface ChatMessage {
  id: string;
  role: "user" | "assistant" | "tool";
  content: string;
  timestamp: Date;
  isStreaming?: boolean;
  /** Attached image (only exists in user messages) */
  image?: ChatMessageImage;
  /** Tool call is currently being executed */
  isToolCalling?: boolean;
  /** Raw tool calls from LLM (for history reconstruction) */
  toolCalls?: ToolCallResult[];
  /** Tool call ID (for tool result messages in history) */
  toolCallId?: string;
  /** Tool call execution results (UI display only) */
  toolResults?: ToolExecutionResult[];
}

export interface FlowChatContext {
  buildSystemPrompt: () => string;
  tools: Tool[];
  executeToolCalls: (toolCalls: ToolCallResult[]) => ToolExecutionResult[];
}

export interface ChatPanelState {
  isOpen: boolean;
  messages: ChatMessage[];
  isLoading: boolean;
  error: string | null;
  /** Selected image (before sending) */
  pendingImage: File | null;
  /** Flow context for tool calling (set when on flow page) */
  flowContext: FlowChatContext | null;

  openPanel: () => void;
  closePanel: () => void;
  togglePanel: () => void;
  /** Send text message */
  sendMessage: (content: string) => Promise<void>;
  /** Send message with image */
  sendMessageWithImage: (content: string, image: File) => Promise<void>;
  /** Select image */
  setPendingImage: (image: File | null) => void;
  clearMessages: () => void;
  /** Update the Capsule server URL at runtime */
  updateCapsuleUrl: (url: string) => void;
  /** Set flow context for tool calling */
  setFlowContext: (ctx: FlowChatContext | null) => void;
}


================================================
FILE: apps/client/src/features/llm-chat/useChatKeyboard.ts
================================================
import { useEffect } from "react";
import { useChatStore } from "./store";

const CHAT_KEYBOARD_SHORTCUT = "k";

export function useChatKeyboard() {
  const togglePanel = useChatStore((s) => s.togglePanel);

  useEffect(() => {
    const handleKeyDown = (event: KeyboardEvent) => {
      if (
        event.key === CHAT_KEYBOARD_SHORTCUT &&
        (event.metaKey || event.ctrlKey)
      ) {
        event.preventDefault();
        togglePanel();
      }
    };

    window.addEventListener("keydown", handleKeyDown);
    return () => window.removeEventListener("keydown", handleKeyDown);
  }, [togglePanel]);
}


================================================
FILE: apps/client/src/features/log/index.tsx
================================================
import {
  getLatestLog,
  getLogFileList,
  getLogByFilename,
} from "@/entities/log/api";
import { useEffect, useState } from "react";
import {
  ResizablePanelGroup,
  ResizablePanel,
  ResizableHandle,
} from "@/components/ui/resizable";
import { ScrollArea } from "@/components/ui/scroll-area";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Skeleton } from "@/components/ui/skeleton";
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
import { Terminal } from "lucide-react";

export function Logs() {
  const [logContent, setLogContent] = useState("");
  const [logFiles, setLogFiles] = useState<string[]>([]);
  const [selectedFile, setSelectedFile] = useState("");
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    const fetchInitialData = async () => {
      try {
        setError(null);
        setIsLoading(true);

        const [latestLogData, fileListData] = await Promise.all([
          getLatestLog(),
          getLogFileList(),
        ]);

        setLogContent(latestLogData.logs);
        setSelectedFile(latestLogData.filename);
        setLogFiles(fileListData.files);
      } catch (err) {
        setError("Failed.");
        console.error(err);
      } finally {
        setIsLoading(false);
      }
    };

    fetchInitialData();
  }, []);

  const handleFileSelect = async (filename: string) => {
    if (filename === selectedFile || isLoading) return;

    try {
      setError(null);
      setIsLoading(true);
      const data = await getLogByFilename(filename);
      setLogContent(data.logs);
      setSelectedFile(data.filename);
    } catch (err) {
      setError(`Failed: ${filename}`);
      console.error(err);
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <ResizablePanelGroup
      direction='horizontal'
      className='w-full h-[85vh] border'
    >
      <ResizablePanel defaultSize={20} minSize={15}>
        <div className='flex h-full flex-col p-4'>
          <h2 className='text-lg font-semibold mb-4'>Logs</h2>
          <ScrollArea className='flex-grow'>
            <div className='space-y-1'>
              {logFiles.map((file) => (
                <Button
                  key={file}
                  variant={selectedFile === file ? "secondary" : "ghost"}
                  className='w-full justify-start'
                  onClick={() => handleFileSelect(file)}
                  disabled={isLoading}
                >
                  {file}
                </Button>
              ))}
            </div>
          </ScrollArea>
        </div>
      </ResizablePanel>
      <ResizableHandle withHandle />
      <ResizablePanel defaultSize={80}>
        <Card className='h-full w-full border-0 rounded-none flex flex-col'>
          <CardHeader>
            <CardTitle>{selectedFile || "Select a log."}</CardTitle>
          </CardHeader>
          <CardContent className='flex-grow overflow-hidden p-4'>
            <ScrollArea className='h-full bg-muted/30 dark:bg-muted/50 rounded-md'>
              <div className='p-4 font-mono text-sm'>
                {isLoading && (
                  <div className='space-y-2'>
                    <Skeleton className='h-4 w-full' />
                    <Skeleton className='h-4 w-full' />
                    <Skeleton className='h-4 w-[75%]' />
                    <Skeleton className='h-4 w-full' />
                    <Skeleton className='h-4 w-[80%]' />
                    <Skeleton className='h-4 w-full' />
                  </div>
                )}
                {error && (
                  <Alert variant='destructive'>
                    <Terminal className='h-4 w-4' />
                    <AlertTitle>Error</AlertTitle>
                    <AlertDescription>{error}</AlertDescription>
                  </Alert>
                )}
                {!isLoading && !error && (
                  <pre className='whitespace-pre-wrap'>{logContent}</pre>
                )}
              </div>
            </ScrollArea>
          </CardContent>
        </Card>
      </ResizablePanel>
    </ResizablePanelGroup>
  );
}


================================================
FILE: apps/client/src/features/map/CurrentLocationMarker.tsx
================================================
import { useEffect, useRef, useState } from "react";
import { Circle, CircleMarker } from "react-leaflet";

type Props = {
  onLocationUpdate?: (coords: [number, number]) => void;
};

export function CurrentLocationMarker({ onLocationUpdate }: Props) {
  const [position, setPosition] = useState<[number, number] | null>(null);
  const [accuracy, setAccuracy] = useState<number | null>(null);
  const hasReportedInitialPosition = useRef(false);

  useEffect(() => {
    if (typeof navigator === "undefined" || !navigator.geolocation) return;

    const watchId = navigator.geolocation.watchPosition(
      (pos) => {
        const coords: [number, number] = [
          pos.coords.latitude,
          pos.coords.longitude,
        ];

        setPosition(coords);
        setAccuracy(
          typeof pos.coords.accuracy === "number" ? pos.coords.accuracy : null,
        );

        if (!hasReportedInitialPosition.current && onLocationUpdate) {
          onLocationUpdate(coords);
          hasReportedInitialPosition.current = true;
        }
      },
      (err) => {
        console.log("Error watching location:", err);
      },
      {
        enableHighAccuracy: true,
        maximumAge: 1000,
        timeout: 5000,
      },
    );

    return () => {
      navigator.geolocation.clearWatch(watchId);
    };
  }, [onLocationUpdate]);

  const baseRadius = Math.max(accuracy ?? 0, 10);
  const rippleRadius = baseRadius + 24;

  if (!position) return null;

  return (
    <>
      <Circle
        center={position}
        radius={rippleRadius}
        pathOptions={{
          className: "current-location-ripple",
          color: "#22c55e",
          fillColor: "#22c55e",
          fillOpacity: 0.2,
          weight: 1,
          opacity: 0.2,
        }}
      />
      <Circle
        center={position}
        radius={baseRadius}
        pathOptions={{
          color: "#22c55e",
          fillColor: "#22c55e",
          fillOpacity: 0.12,
          weight: 1,
        }}
      />
      <CircleMarker
        center={position}
        radius={6}
        pathOptions={{
          color: "#15803d",
          fillColor: "#22c55e",
          fillOpacity: 0.92,
          weight: 2,
        }}
      />
    </>
  );
}


================================================
FILE: apps/client/src/features/map/MapViewPersistence.tsx
================================================
import { useEffect } from "react";
import { useMapEvents } from "react-leaflet";

const MAP_VIEW_STORAGE_KEY = "map:last-view";

export type StoredMapView = {
  lat: number;
  lng: number;
  zoom?: number;
};

export function getStoredMapView(): StoredMapView | null {
  try {
    const storedValue = localStorage.getItem(MAP_VIEW_STORAGE_KEY);
    if (!storedValue) return null;

    const parsed = JSON.parse(storedValue);
    if (typeof parsed?.lat !== "number" || typeof parsed?.lng !== "number") {
      return null;
    }

    const zoom = typeof parsed.zoom === "number" ? parsed.zoom : undefined;

    return { lat: parsed.lat, lng: parsed.lng, zoom };
  } catch {
    return null;
  }
}

function persistMapView(center: { lat: number; lng: number }, zoom: number) {
  try {
    localStorage.setItem(
      MAP_VIEW_STORAGE_KEY,
      JSON.stringify({ lat: center.lat, lng: center.lng, zoom }),
    );
  } catch {
    // ignore write errors
  }
}

export function MapLastViewTracker() {
  const map = useMapEvents({
    moveend() {
      persistMapView(map.getCenter(), map.getZoom());
    },
  });

  useEffect(() => {
    persistMapView(map.getCenter(), map.getZoom());
  }, [map]);

  return null;
}


================================================
FILE: apps/client/src/features/map/index.tsx
================================================
import { useState, useEffect, useCallback } from "react";
import { Plus, Minus } from "lucide-react";
import { Button } from "@/components/ui/button";
import { MapContainer, TileLayer, useMap } from "react-leaflet";
import "leaflet/dist/leaflet.css";
import L from "leaflet";

import icon from "leaflet/dist/images/marker-icon.png";
import iconShadow from "leaflet/dist/images/marker-shadow.png";
import "./style.css";
import { useMapDataStore, useMapInteractionStore } from "@/entities/map/store";
import { TILE_MAPS } from "@/entities/map/types";

import { MapEntityRender } from "../map-entity/render";
import { FeatureDetailsPanel } from "../map-draw/FeatureDetailsPanel";
import { DrawingPreview } from "../map-draw/FeatureDrawingPreview";
import { FeatureEditor } from "../map-draw/FeatureEditor";
import { FeatureRenderer } from "../map-draw/FeatureRenderer";
import { MapEvents } from "../map-draw/MapEvents";
import { EntityDetailsPanel } from "../map-entity/EntityDetailsPanel";
import { useMapEntityStore } from "../map-entity/store";
import { cn } from "@/lib/utils";
import { MapLastViewTracker, getStoredMapView } from "./MapViewPersistence";
import { CurrentLocationMarker } from "./CurrentLocationMarker";

const DefaultIcon = L.icon({
  iconUrl: icon,
  shadowUrl: iconShadow,
  iconAnchor: [12, 41],
  popupAnchor: [1, -34],
});

const failedPosition = [39.8283, -98.5795];

L.Marker.prototype.options.icon = DefaultIcon;

function MapResizer({ isSidebarCollapsed }: { isSidebarCollapsed: boolean }) {
  const map = useMap();

  useEffect(() => {
    const timer = setTimeout(() => {
      map.invalidateSize();
    }, 310);

    return () => {
      clearTimeout(timer);
    };
  }, [isSidebarCollapsed, map]);

  return null;
}

function CustomZoomControl() {
  const map = useMap();

  return (
    <div className='absolute bottom-14 right-4 z-[1000] flex flex-col gap-1 bg-background/80 rounded-md shadow-lg backdrop-blur-sm'>
      <Button
        size='icon'
        variant='ghost'
        className='h-8 w-8 border-1'
        onClick={() => map.zoomIn()}
      >
        <Plus className='h-4 w-4' />
      </Button>
      <Button
        size='icon'
        variant='ghost'
        className='h-8 w-8 border-1'
        onClick={() => map.zoomOut()}
      >
        <Minus className='h-4 w-4' />
      </Button>
    </div>
  );
}

function CustomScaleControl() {
  const map = useMap();
  const [scale, setScale] = useState({ value: 0, unit: "m" });

  const updateScale = useCallback(() => {
    const y = map.getSize().y / 2;
    const leftPoint = map.containerPointToLatLng([0, y]);
    const rightPoint = map.containerPointToLatLng([100, y]);
    const distance = leftPoint.distanceTo(rightPoint);

    let value: number;
    let unit: string;

    if (distance >= 1000) {
      value = Math.round((distance / 1000) * 10) / 10;
      unit = "km";
    } else {
      value = Math.round(distance);
      unit = "m";
    }

    setScale({ value, unit });
  }, [map]);

  useEffect(() => {
    updateScale();
    map.on("zoomend", updateScale);
    map.on("moveend", updateScale);

    return () => {
      map.off("zoomend", updateScale);
      map.off("moveend", updateScale);
    };
  }, [map, updateScale]);

  return (
    <div className='absolute bottom-4 right-4 z-[1000] bg-background/80 rounded-md shadow-lg backdrop-blur-sm px-2 py-1'>
      <div className='flex items-center gap-2 text-xs'>
        <div className='w-[100px] h-1 bg-foreground/70 relative'>
          <div className='absolute left-0 top-[-3px] w-[1px] h-[7px] bg-foreground/70' />
          <div className='absolute right-0 top-[-3px] w-[1px] h-[7px] bg-foreground/70' />
        </div>
        <span className='text-foreground/70 font-mono'>
          {scale.value} {scale.unit}
        </span>
      </div>
    </div>
  );
}

export function MapView({
  isSidebarCollapsed,
}: {
  isSidebarCollapsed: boolean;
}) {
  const [position, setPosition] = useState<[number, number] | null>(null);
  const [initialZoom, setInitialZoom] = useState(13);
  const { layer, fetchAllLayers } = useMapDataStore();
  const { selectedFeature, tileMapType } = useMapInteractionStore();
  const currentTileMap = TILE_MAPS[tileMapType];
  const { selectedEntity } = useMapEntityStore();

  const [isFeaturePanelCollapsed, setFeaturePanelCollapsed] = useState(false);
  const [isEntityPanelCollapsed, setEntityPanelCollapsed] = useState(false);

  useEffect(() => {
    fetchAllLayers();
  }, [fetchAllLayers]);

  useEffect(() => {
    const storedView = getStoredMapView();

    if (storedView) {
      setPosition([storedView.lat, storedView.lng]);
      if (typeof storedView.zoom === "number") {
        setInitialZoom(storedView.zoom);
      }
    }

    navigator.geolocation.getCurrentPosition(
      (pos) => {
        const { latitude, longitude } = pos.coords;
        setPosition((prev) => prev ?? [latitude, longitude]);
      },
      (err) => {
        console.log("Error getting location:", err);
        setPosition((prev) => prev ?? (failedPosition as [number, number]));
      },
      {
        enableHighAccuracy: true,
        timeout: 2000,
        maximumAge: 0,
      },
    );
  }, []);

  const showPanelContainer = selectedFeature || selectedEntity;

  return (
    <div className='relative h-full w-full overflow-hidden'>
      {!position ? (
        <div className='flex items-center justify-center h-full'>
          <span>Loading Map...</span>
        </div>
      ) : (
        <MapContainer
          center={position}
          zoom={initialZoom}
          maxZoom={23}
          scrollWheelZoom={true}
          zoomControl={false}
          className='h-full w-full'
        >
          <TileLayer
            key={tileMapType}
            attribution={currentTileMap.attribution}
            url={currentTileMap.url}
            maxNativeZoom={currentTileMap.maxNativeZoom}
            maxZoom={23}
          />
          {layer?.features.map((feature) => (
            <FeatureRenderer key={`feature-${feature.id}`} feature={feature} />
          ))}
          <MapEvents />
          <DrawingPreview />
          <FeatureEditor />
          <MapEntityRender />
          <CurrentLocationMarker />
          <MapLastViewTracker />
          <MapResizer isSidebarCollapsed={isSidebarCollapsed} />
          <CustomZoomControl />
          <CustomScaleControl />
        </MapContainer>
      )}

      <div
        className={cn(
          "absolute top-[48px] right-0 h-[calc(100%-48px)] p-4 w-[400px] z-[1001]",
          "flex flex-col gap-4 overflow-y-auto transition-transform duration-300 ease-in-out",
          "pointer-events-none",
          showPanelContainer ? "translate-x-0" : "translate-x-full",
        )}
      >
        {selectedFeature && (
          <div className='pointer-events-auto'>
            <FeatureDetailsPanel
              isCollapsed={isFeaturePanelCollapsed}
              onToggleCollapse={() => setFeaturePanelCollapsed((prev) => !prev)}
            />
          </div>
        )}
        {selectedEntity && (
          <div className='pointer-events-auto'>
            <EntityDetailsPanel
              isCollapsed={isEntityPanelCollapsed}
              onToggleCollapse={() => setEntityPanelCollapsed((prev) => !prev)}
            />
          </div>
        )}
      </div>
    </div>
  );
}


================================================
FILE: apps/client/src/features/map/style.css
================================================
/* .leaflet-attribution-flag {
  display: none !important;
} */

.leaflet-div-icon.entity-map-marker-icon {
  background: transparent !important;
  border: none !important;
}

.current-location-ripple {
  animation: current-location-ripple 1000ms ease-out infinite;
  transform-origin: center;
  transform-box: fill-box;
  pointer-events: none;
}

@keyframes current-location-ripple {
  0% {
    transform: scale(1);
    opacity: 0.35;
  }
  70% {
    transform: scale(2.3);
    opacity: 0;
  }
  100% {
    transform: scale(2.3);
    opacity: 0;
  }
}


================================================
FILE: apps/client/src/features/map-draw/FeatureDetailsPanel.tsx
================================================
import { useState, useEffect, useMemo } from "react";
import {
  X,
  Pencil,
  Trash2,
  Save,
  MapPin,
  Milestone,
  Squircle,
  Maximize,
  Ruler,
  Palette,
  Minus,
} from "lucide-react";
import { useMapDataStore, useMapInteractionStore } from "@/entities/map/store";
import { Button } from "@/components/ui/button";
import {
  Card,
  CardContent,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from "@/components/ui/alert-dialog";
import { cn } from "@/lib/utils";
import { MapVertex, UpdateFeaturePayload } from "@/entities/map/types";
import { calculateFeatureGeometry } from "@/lib/geometry-precision";

const FeatureIcon = ({ type }: { type: string }) => {
  switch (type) {
    case "POINT":
      return <MapPin className='h-5 w-5 mr-2 text-muted-foreground' />;
    case "LINE":
      return <Milestone className='h-5 w-5 mr-2 text-muted-foreground' />;
    case "POLYGON":
      return <Squircle className='h-5 w-5 mr-2 text-muted-foreground' />;
    default:
      return null;
  }
};

interface FeatureDetailsPanelProps {
  isCollapsed: boolean;
  onToggleCollapse: () => void;
}

export function FeatureDetailsPanel({
  isCollapsed,
  onToggleCollapse,
}: FeatureDetailsPanelProps) {
  const { selectedFeature, setSelectedFeature } = useMapInteractionStore();
  const { removeFeature, updateFeature } = useMapDataStore();

  const [isEditing, setIsEditing] = useState(false);
  const [editableVertices, setEditableVertices] = useState<MapVertex[]>([]);
  const [isDeleteAlertOpen, setDeleteAlertOpen] = useState(false);
  const [editableColor, setEditableColor] = useState("#6ec7f0");

  const geometryInfo = useMemo(() => {
    if (!selectedFeature) return null;
    return calculateFeatureGeometry(selectedFeature);
  }, [selectedFeature]);

  const defaultColor = "#6ec7f0";

  useEffect(() => {
    if (selectedFeature) {
      setIsEditing(false);
      setEditableVertices(
        selectedFeature.vertices.sort((a, b) => a.sequence - b.sequence),
      );
      try {
        if (selectedFeature.style_properties) {
          const styles = JSON.parse(selectedFeature.style_properties);
          setEditableColor(styles.color || defaultColor);
        } else {
          setEditableColor(defaultColor);
        }
      } catch {
        setEditableColor(defaultColor);
      }
    } else {
      setIsEditing(false);
    }
  }, [selectedFeature]);

  const handleClose = () => setSelectedFeature(null);

  const handleDelete = () => {
    if (selectedFeature) {
      removeFeature(selectedFeature.id);
      setDeleteAlertOpen(false);
    }
  };

  const handleSave = () => {
    if (!selectedFeature) return;
    const payload: UpdateFeaturePayload = {
      vertices: editableVertices.map((v) => ({
        latitude: v.latitude,
        longitude: v.longitude,
      })),
      style_properties: JSON.stringify({ color: editableColor }),
    };
    updateFeature(selectedFeature.id, payload);
    setIsEditing(false);
  };

  const handleCancel = () => {
    setIsEditing(false);
    if (selectedFeature) {
      setEditableVertices(
        selectedFeature.vertices.sort((a, b) => a.sequence - b.sequence),
      );
      try {
        if (selectedFeature.style_properties) {
          const styles = JSON.parse(selectedFeature.style_properties);
          setEditableColor(styles.color || defaultColor);
        } else {
          setEditableColor(defaultColor);
        }
      } catch {
        setEditableColor(defaultColor);
      }
    }
  };

  const handleToggleCollapse = (e: React.MouseEvent) => {
    e.stopPropagation();
    onToggleCollapse();
  };

  if (!selectedFeature) {
    return null;
  }

  return (
    <>
      <Card className='w-full flex flex-col max-h-full bg-background'>
        <CardHeader
          onClick={isCollapsed ? onToggleCollapse : undefined}
          className={cn("flex-shrink-0", isCollapsed && "cursor-pointer")}
        >
          <div className='flex justify-between items-start'>
            <CardTitle className='flex items-center'>
              <FeatureIcon type={selectedFeature.feature_type} />
              Feature #{selectedFeature.id}
            </CardTitle>
            <div className='flex items-center'>
              <Button
                variant='ghost'
                size='icon'
                onClick={handleToggleCollapse}
              >
                <Minus className='h-4 w-4' />
              </Button>
              <Button variant='ghost' size='icon' onClick={handleClose}>
                <X className='h-4 w-4' />
              </Button>
            </div>
          </div>
        </CardHeader>
        {!isCollapsed && (
          <>
            <CardContent className='flex-grow overflow-y-auto space-y-4'>
              {geometryInfo && (
                <div>
                  <h4 className='font-semibold text-sm mb-2'>Geometry</h4>
                  <ul className='text-sm space-y-2 p-3 bg-muted rounded-md'>
                    {geometryInfo.location && (
                      <li className='flex items-center'>
                        <MapPin className='h-4 w-4 mr-2 text-muted-foreground' />
                        <strong>Location:</strong>
                        <span className='ml-2 font-mono'>
                          {geometryInfo.location}
                        </span>
                      </li>
                    )}
                    {geometryInfo.length && (
                      <li className='flex items-center'>
                        <Ruler className='h-4 w-4 mr-2 text-muted-foreground' />
                        <strong>Length:</strong>
                        <span className='ml-2 font-mono'>
                          {geometryInfo.length}
                        </span>
                      </li>
                    )}
                    {geometryInfo.area && (
                      <li className='flex items-center'>
                        <Maximize className='h-4 w-4 mr-2 text-muted-foreground' />
                        <strong>Area:</strong>
                        <span className='ml-2 font-mono'>
                          {geometryInfo.area}
                        </span>
                      </li>
                    )}
                  </ul>
                </div>
              )}

              <div>
                <h4 className='font-semibold text-sm mb-2'>Style</h4>
                <div className='p-3 bg-muted rounded-md'>
                  <div className='flex items-center justify-between'>
                    <div className='flex items-center'>
                      <Palette className='h-4 w-4 mr-2 text-muted-foreground' />
                      <span className='text-sm font-medium'>Color</span>
                    </div>
                    {isEditing ? (
                      <input
                        type='color'
                        value={editableColor}
                        onChange={(e) => setEditableColor(e.target.value)}
                        className='w-10 h-8 p-1 bg-transparent border rounded-md cursor-pointer'
                      />
                    ) : (
                      <div
                        className='w-10 h-8 rounded-md border'
                        style={{ backgroundColor: editableColor }}
                      />
                    )}
                  </div>
                </div>
              </div>

              <div>
                <h4 className='font-semibold text-sm mb-2'>Vertices</h4>
                <div className='text-xs p-3 bg-muted rounded-md overflow-auto max-h-60'>
                  <pre>
                    {JSON.stringify(
                      editableVertices.map((v) => ({
                        lat: v.latitude.toFixed(6),
                        lng: v.longitude.toFixed(6),
                      })),
                      null,
                      2,
                    )}
                  </pre>
                </div>
              </div>
            </CardContent>
            <CardFooter className='flex-shrink-0 flex justify-end gap-2'>
              {isEditing ? (
                <>
                  <Button variant='outline' onClick={handleCancel}>
                    Cancel
                  </Button>
                  <Button onClick={handleSave}>
                    <Save className='h-4 w-4 mr-2' />
                    Save
                  </Button>
                </>
              ) : (
                <>
                  <Button
                    variant='destructive'
                    onClick={() => setDeleteAlertOpen(true)}
                  >
                    <Trash2 className='h-4 w-4 mr-2' />
                    Delete
                  </Button>
                  <Button onClick={() => setIsEditing(true)}>
                    <Pencil className='h-4 w-4 mr-2' />
                    Modify
                  </Button>
                </>
              )}
            </CardFooter>
          </>
        )}
      </Card>

      <AlertDialog open={isDeleteAlertOpen} onOpenChange={setDeleteAlertOpen}>
        <AlertDialogContent className='z-[999999]'>
          <AlertDialogHeader>
            <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
            <AlertDialogDescription>
              This action cannot be undone. This will permanently delete this
              feature.
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel>Cancel</AlertDialogCancel>
            <AlertDialogAction onClick={handleDelete}>Delete</AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </>
  );
}


================================================
FILE: apps/client/src/features/map-draw/FeatureDrawingPreview.tsx
================================================
import { useMapInteractionStore } from "@/entities/map/store";
import { Polyline, Polygon } from "react-leaflet";

export function DrawingPreview() {
  const { drawingMode, currentVertices } = useMapInteractionStore();

  if (currentVertices.length === 0) return null;

  if (drawingMode === "LINE") {
    return (
      <Polyline positions={currentVertices} color='yellow' dashArray='5, 10' />
    );
  }

  if (drawingMode === "POLYGON") {
    return (
      <Polygon positions={currentVertices} color='yellow' fillOpacity={0.2} />
    );
  }

  return null;
}


================================================
FILE: apps/client/src/features/map-draw/FeatureEditor.tsx
================================================
import { Marker } from "react-leaflet";
import L from "leaflet";
import { useMapInteractionStore } from "@/entities/map/store";
import { useMapDataStore } from "@/entities/map/store";
import { LatLng } from "leaflet";

const DraggableIcon = L.divIcon({
  html: `<div class="w-4 h-4 bg-background border-2 border-blue-100 rounded-full cursor-move shadow-md"></div>`,
  className: "",
  iconSize: [16, 16],
  iconAnchor: [8, 8],
});

export function FeatureEditor() {
  const { selectedFeature } = useMapInteractionStore();
  const { updateFeature } = useMapDataStore();

  if (!selectedFeature) {
    return null;
  }

  const handleDragEnd = (index: number, newPosition: LatLng) => {
    if (!selectedFeature) return;

    const updatedVertices = selectedFeature.vertices.map((vertex, i) =>
      i === index
        ? { ...vertex, latitude: newPosition.lat, longitude: newPosition.lng }
        : vertex,
    );

    const payload = {
      vertices: updatedVertices.map((v) => ({
        latitude: v.latitude,
        longitude: v.longitude,
      })),
    };

    updateFeature(selectedFeature.id, payload);
  };

  return (
    <>
      {selectedFeature.vertices.map((vertex, index) => (
        <Marker
          key={`edit-vertex-${selectedFeature.id}-${vertex.id || index}`}
          position={[vertex.latitude, vertex.longitude]}
          icon={DraggableIcon}
          draggable={true}
          eventHandlers={{
            dragend: (e) => {
              handleDragEnd(index, e.target.getLatLng());
            },
          }}
        />
      ))}
    </>
  );
}


================================================
FILE: apps/client/src/features/map-draw/FeatureRenderer.tsx
================================================
import { CircleMarker, Polygon, Polyline } from "react-leaflet";
import { LatLngExpression } from "leaflet";
import { FeatureWithVertices } from "@/entities/map/types";
import { useMapInteractionStore } from "@/entities/map/store";
import { useMemo } from "react";

interface FeatureRendererProps {
  feature: FeatureWithVertices;
}

export function FeatureRenderer({ feature }: FeatureRendererProps) {
  const setSelectedFeature = useMapInteractionStore(
    (state) => state.setSelectedFeature,
  );
  const positions = feature.vertices
    .sort((a, b) => a.sequence - b.sequence)
    .map((v) => [v.latitude, v.longitude] as LatLngExpression);

  const featureColor = useMemo(() => {
    try {
      if (feature.style_properties) {
        const styles = JSON.parse(feature.style_properties);
        return styles.color || "#6ec7f0";
      }
    } catch (e) {
      console.error("Failed to parse style_properties", e);
    }
    return "#6ec7f0";
  }, [feature.style_properties]);

  if (positions.length === 0) {
    return null;
  }

  const eventHandlers = {
    click: () => {
      setSelectedFeature(feature);
    },
  };

  const pathOptions = { color: featureColor };

  switch (feature.feature_type) {
    case "POINT":
      return (
        <CircleMarker
          center={positions[0]}
          pathOptions={pathOptions}
          radius={6}
          eventHandlers={eventHandlers}
        />
      );

    case "LINE":
      return (
        <Polyline
          positions={positions}
          pathOptions={pathOptions}
          eventHandlers={eventHandlers}
        />
      );

    case "POLYGON":
      return (
        <Polygon
          positions={positions}
          pathOptions={pathOptions}
          eventHandlers={eventHandlers}
        />
      );

    default:
      return null;
  }
}


================================================
FILE: apps/client/src/features/map-draw/LayerDialog.tsx
================================================
import { Button } from "@/components/ui/button";
import {
  DialogHeader,
  DialogFooter,
  DialogTrigger,
  Dialog,
  DialogContent,
  DialogTitle,
} from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { useMapDataStore } from "@/entities/map/store";
import { MapLayer, LayerPayload } from "@/entities/map/types";
import { useState, useEffect, useCallback } from "react";

interface LayerDialogProps {
  children?: React.ReactNode;
  layer?: MapLayer;
  open?: boolean;
  onOpenChange?: (open: boolean) => void;
}

export function LayerDialog({
  children,
  layer,
  open: openProp,
  onOpenChange: onOpenChangeProp,
}: LayerDialogProps) {
  const [internalOpen, setInternalOpen] = useState(false);
  const isControlled = openProp !== undefined;
  const open = isControlled ? openProp : internalOpen;
  const setOpen = useCallback(
    (next: boolean) => {
      if (!isControlled) setInternalOpen(next);
      onOpenChangeProp?.(next);
    },
    [isControlled, onOpenChangeProp],
  );
  const [name, setName] = useState("");
  const [description, setDescription] = useState("");
  const { addLayer, editLayer } = useMapDataStore();

  useEffect(() => {
    if (layer) {
      setName(layer.name);
      setDescription(layer.description || "");
    } else {
      setName("");
      setDescription("");
    }
  }, [layer, open]);

  const handleSubmit = () => {
    const payload: LayerPayload = { name, description };
    if (layer) {
      editLayer(layer.id, payload);
    } else {
      addLayer(payload);
    }
    setOpen(false);
  };

  return (
    <Dialog open={open} onOpenChange={setOpen}>
      {children ? <DialogTrigger asChild>{children}</DialogTrigger> : null}
      <DialogContent className='sm:max-w-[425px] z-[999999]'>
        <DialogHeader>
          <DialogTitle>{layer ? "Edit Layer" : "Create New Layer"}</DialogTitle>
        </DialogHeader>
        <div className='grid gap-4 py-4'>
          <div className='grid grid-cols-4 items-center gap-4'>
            <Label htmlFor='name' className='text-right'>
              Name
            </Label>
            <Input
              id='name'
              value={name}
              onChange={(e) => setName(e.target.value)}
              className='col-span-3'
            />
          </div>
          <div className='grid grid-cols-4 items-center gap-4'>
            <Label htmlFor='description' className='text-right'>
              Description
            </Label>
            <Input
              id='description'
              value={description}
              onChange={(e) => setDescription(e.target.value)}
              className='col-span-3'
            />
          </div>
        </div>
        <DialogFooter>
          <Button onClick={handleSubmit}>Save changes</Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}


================================================
FILE: apps/client/src/features/map-draw/LayerSidebar.tsx
================================================
import { useState } from "react";
import { Plus, ChevronLeft, MoreHorizontal } from "lucide-react";

import { LayerDialog } from "./LayerDialog";
import { useMapDataStore } from "@/entities/map/store";
import { MapLayer } from "@/entities/map/types";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from "@/components/ui/alert-dialog";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";

type LayerDialogState =
  | { kind: "closed" }
  | { kind: "add" }
  | { kind: "edit"; layer: MapLayer };

export function LayerSidebar() {
  const { layers, activeLayerId, setActiveLayer, removeLayer } =
    useMapDataStore();
  const [isCollapsed, setIsCollapsed] = useState(false);
  const [layerToDelete, setLayerToDelete] = useState<number | null>(null);
  const [layerDialog, setLayerDialog] = useState<LayerDialogState>({
    kind: "closed",
  });

  const toggleSidebar = () => setIsCollapsed(!isCollapsed);

  const handleDeleteConfirm = () => {
    if (layerToDelete) {
      removeLayer(layerToDelete);
      setLayerToDelete(null);
    }
  };

  const selectedLayerName =
    layers.find((l) => l.id === layerToDelete)?.name || "";

  const layerDialogOpen = layerDialog.kind !== "closed";
  const layerDialogLayer =
    layerDialog.kind === "edit" ? layerDialog.layer : undefined;

  return (
    <>
      <div
        className={cn(
          "absolute top-[48px] left-0 border-r h-[calc(100%-48px)] w-64 bg-background/80 z-[999] p-4 flex flex-col shadow-lg backdrop-blur-sm transition-all duration-300 ease-in-out overflow-hidden",
          isCollapsed && "w-0 p-0 border-none",
        )}
      >
        <div className='flex justify-between items-center mb-4'>
          <h2 className='text-md font-semibold'>Layers</h2>
          <div className='flex items-center'>
            <LayerDialog>
              <Button variant='ghost' size='icon'>
                <Plus className='h-4 w-4' />
              </Button>
            </LayerDialog>
            <Button variant='ghost' size='icon' onClick={toggleSidebar}>
              <ChevronLeft className='h-5 w-5' />
            </Button>
          </div>
        </div>
        <div className='flex-grow overflow-y-auto'>
          <ul className='space-y-2'>
            {layers.map((layer) => (
              <li
                key={layer.id}
                onClick={() => setActiveLayer(layer.id)}
                className={cn(
                  "px-2 py-1 cursor-pointer hover:bg-muted flex justify-between items-center gap-2",
                  activeLayerId === layer.id && "bg-muted",
                )}
              >
                <span className='truncate text-sm min-w-0'>{layer.name}</span>
                <DropdownMenu>
                  <DropdownMenuTrigger asChild>
                    <Button
                      variant='ghost'
                      size='icon'
                      className='shrink-0'
                      aria-label={`Options for ${layer.name}`}
                      onClick={(e) => e.stopPropagation()}
                    >
                      <MoreHorizontal className='h-4 w-4' />
                    </Button>
                  </DropdownMenuTrigger>
                  <DropdownMenuContent align='end' className='z-[1002]'>
                    <DropdownMenuItem
                      onSelect={() => setLayerDialog({ kind: "edit", layer })}
                    >
                      Edit layer
                    </DropdownMenuItem>
                    <DropdownMenuSeparator />
                    <DropdownMenuItem
                      variant='destructive'
                      onSelect={() => setLayerToDelete(layer.id)}
                    >
                      Delete layer
                    </DropdownMenuItem>
                  </DropdownMenuContent>
                </DropdownMenu>
              </li>
            ))}
          </ul>
        </div>
      </div>

      <LayerDialog
        layer={layerDialogLayer}
        open={layerDialogOpen}
        onOpenChange={(open) => {
          if (!open) setLayerDialog({ kind: "closed" });
        }}
      />

      {isCollapsed && (
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <Button
              variant='outline'
              size='icon'
              className='absolute top-[56px] left-2 z-[1001] bg-background/80 backdrop-blur-sm'
              aria-label='Collapsed sidebar options'
            >
              <MoreHorizontal className='h-5 w-5' />
            </Button>
          </DropdownMenuTrigger>
          <DropdownMenuContent align='start' className='z-[1002]'>
            <DropdownMenuItem onSelect={() => toggleSidebar()}>
              Expand sidebar
            </DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>
      )}

      <AlertDialog
        open={!!layerToDelete}
        onOpenChange={() => setLayerToDelete(null)}
      >
        <AlertDialogContent className='z-[999999]'>
          <AlertDialogHeader>
            <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
            <AlertDialogDescription>
              This action cannot be undone. This will permanently delete the '
              {selectedLayerName}' layer.
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel>Cancel</AlertDialogCancel>
            <AlertDialogAction onClick={handleDeleteConfirm}>
              Delete
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </>
  );
}


================================================
FILE: apps/client/src/features/map-draw/MapEvents.tsx
================================================
import { useMapInteractionStore, useMapDataStore } from "@/entities/map/store";
import { useMapEvents } from "react-leaflet";

export function MapEvents() {
  const { drawingMode, addVertex, setDrawingMode, clearDrawing } =
    useMapInteractionStore();
  const { addFeature } = useMapDataStore();
  const activeLayerId = useMapDataStore((state) => state.layer?.id);

  useMapEvents({
    click(e) {
      if (!drawingMode || !activeLayerId) return;
      if (drawingMode === "POINT") {
        addFeature({
          layer_id: activeLayerId,
          feature_type: "POINT",
          vertices: [{ latitude: e.latlng.lat, longitude: e.latlng.lng }],
        });
        setDrawingMode(null);
      } else {
        addVertex(e.latlng);
      }
    },
    keydown(e) {
      if (e.originalEvent.key === "Escape") clearDrawing();
    },
  });

  return null;
}


================================================
FILE: apps/client/src/features/map-draw/MapToolbar.tsx
================================================
import { Button } from "@/components/ui/button";
import { useMapDataStore, useMapInteractionStore } from "@/entities/map/store";
import { MapPin, Milestone, Squircle, Check, X, Map, Satellite } from "lucide-react";

export function MapToolbar() {
  const { addFeature } = useMapDataStore();
  const {
    drawingMode,
    setDrawingMode,
    currentVertices,
    clearDrawing,
    tileMapType,
    setTileMapType,
  } = useMapInteractionStore();
  const activeLayerId = useMapDataStore((state) => state.layer?.id);

  const handleFinishDrawing = () => {
    if (!activeLayerId || !drawingMode || currentVertices.length < 1) return;
    if (drawingMode !== "POINT" && currentVertices.length < 2) return;

    addFeature({
      layer_id: activeLayerId,
      feature_type: drawingMode,
      vertices: currentVertices.map((v) => ({
        latitude: v.lat,
        longitude: v.lng,
      })),
    });
    clearDrawing();
  };

  return (
    <div className='absolute top-14 right-4 z-[1000] flex flex-col gap-2 p-2 bg-background/80 rounded-md shadow-lg backdrop-blur-sm'>
      <Button
        onClick={() => setDrawingMode("POINT")}
        size='icon'
        variant={drawingMode === "POINT" ? "secondary" : "outline"}
        disabled={!activeLayerId}
      >
        <MapPin className='h-4 w-4' />
      </Button>
      <Button
        onClick={() => setDrawingMode("LINE")}
        size='icon'
        variant={drawingMode === "LINE" ? "secondary" : "outline"}
        disabled={!activeLayerId}
      >
        <Milestone className='h-4 w-4' />
      </Button>
      <Button
        onClick={() => setDrawingMode("POLYGON")}
        size='icon'
        variant={drawingMode === "POLYGON" ? "secondary" : "outline"}
        disabled={!activeLayerId}
      >
        <Squircle className='h-4 w-4' />
      </Button>

      <div className='border-t pt-2 mt-2 flex flex-col gap-2'>
        <Button
          onClick={() => setTileMapType("dark")}
          size='icon'
          variant={tileMapType === "dark" ? "secondary" : "outline"}
        >
          <Map className='h-4 w-4' />
        </Button>
        <Button
          onClick={() => setTileMapType("satellite")}
          size='icon'
          variant={tileMapType === "satellite" ? "secondary" : "outline"}
        >
          <Satellite className='h-4 w-4' />
        </Button>
      </div>

      {currentVertices.length > 0 &&
        (drawingMode === "LINE" || drawingMode === "POLYGON") && (
          <div className='flex flex-col gap-2 pt-2 mt-2 border-t'>
            <Button onClick={handleFinishDrawing} size='icon' variant='default'>
              <Check className='h-4 w-4' />
            </Button>
            <Button onClick={clearDrawing} size='icon' variant='ghost'>
              <X className='h-4 w-4' />
            </Button>
          </div>
        )}
    </div>
  );
}


================================================
FILE: apps/client/src/features/map-entity/EntityDetailsPanel.tsx
================================================
import { Button } from "@/components/ui/button";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { X, MapPin, TabletSmartphone, Server, Minus } from "lucide-react";
import { useCallback, useEffect, useState } from "react";
import { getDeviceById } from "@/entities/device/api";
import { EntityAll } from "@/entities/entity/types";
import { EntityCard } from "../entity/Card";
import { useWebSocket, useWebSocketMessage } from "../ws/WebSocketProvider";
import { WebSocketMessage } from "../ws/ws";
import { ChangeStatePayload, StreamState } from "../entity/AllEntities";
import * as api from "../../entities/entity/api";
import { useMapEntityStore } from "./store";
import { cn } from "@/lib/utils";

interface EntityDetailsPanelProps {
  isCollapsed: boolean;
  onToggleCollapse: () => void;
}

export function EntityDetailsPanel({
  isCollapsed,
  onToggleCollapse,
}: EntityDetailsPanelProps) {
  const { selectedEntity, setSelectedEntity } = useMapEntityStore();
  const [device, setDevice] = useState({
    name: "",
    model: "",
    manufacturer: "",
  });
  const [entities, setEntities] = useState<EntityAll[]>([]);
  const [streamsState, setStreamsState] = useState<StreamState[]>([]);
  const { wsManager, isConnected } = useWebSocket();

  const getAllEntities = async () => {
    try {
      const response = await api.getAllEntities();
      setEntities(response.data);
    } catch (error) {
      console.error("Failed to fetch all entities:", error);
    }
  };

  const handleMessage = useCallback(
    (msg: WebSocketMessage) => {
      try {
        if (msg.type === "stream_state") {
          const loads = msg.payload as StreamState[];
          setStreamsState(loads);
        }

        if (msg.type == "change_state") {
          const index = entities.findIndex((item) => {
            return (
              item.entity_id == (msg.payload as ChangeStatePayload).entity_id
            );
          });

          if (index == -1) {
            return false;
          }

          if (entities[index].state) {
            entities[index].state = (msg.payload as ChangeStatePayload).state;

            setEntities([...entities]);
          }
        }
      } catch (err) {
        console.error("Error handling signaling message:", err);
      }
    },
    [entities],
  );

  useEffect(() => {
    if (wsManager && isConnected) {
      wsManager.send({
        type: "get_all_stream_state",
        payload: {},
      });

      setInterval(() => {
        wsManager.send({
          type: "get_all_stream_state",
          payload: {},
        });
      }, 5000);
    }
  }, [wsManager, isConnected]);

  useWebSocketMessage(handleMessage);

  useEffect(() => {
    getAllEntities();
  }, []);

  const handleClose = () => {
    setSelectedEntity(null);
  };

  const getDevice = async (device_id: number) => {
    const get = await getDeviceById(device_id);

    setDevice({
      name: get.data.name as string,
      model: get.data.model as string,
      manufacturer: get.data.manufacturer as string,
    });
    setEntities(get.data.entities);
  };

  useEffect(() => {
    if (selectedEntity) {
      getDevice(selectedEntity.device_id);
    }
  }, [selectedEntity]);

  const handleToggleCollapse = (e: React.MouseEvent) => {
    e.stopPropagation();
    onToggleCollapse();
  };

  if (!selectedEntity) {
    return null;
  }

  return (
    <Card className='w-full flex flex-col max-h-full bg-background'>
      <CardHeader
        onClick={isCollapsed ? onToggleCollapse : undefined}
        className={cn("flex-shrink-0", isCollapsed && "cursor-pointer")}
      >
        <div className='flex justify-between items-start'>
          <div>
            <CardTitle>
              {selectedEntity.friendly_name || selectedEntity.entity_id}
            </CardTitle>
            <CardDescription>{selectedEntity.entity_id}</CardDescription>
          </div>
          <div className='flex items-center'>
            <Button variant='ghost' size='icon' onClick={handleToggleCollapse}>
              <Minus className='h-4 w-4' />
            </Button>
            <Button variant='ghost' size='icon' onClick={handleClose}>
              <X className='h-4 w-4' />
            </Button>
          </div>
        </div>
      </CardHeader>
      {!isCollapsed && (
        <CardContent className='flex-grow space-y-4 overflow-y-auto'>
          <div>
            <h4 className='font-semibold text-sm mb-2'>State</h4>
            <div className='text-sm p-3 bg-muted rounded-md overflow-scroll'>
              <p>
                <strong>State:</strong> {selectedEntity.state?.state || "N/A"}
              </p>
              <p className='text-xs text-muted-foreground'>
                <strong>Last Updated:</strong>{" "}
                {selectedEntity.state
                  ? new Date(selectedEntity.state.last_updated).toLocaleString()
                  : "N/A"}
              </p>
            </div>
          </div>

          <div>
            <h4 className='font-semibold text-sm mb-2'>Details</h4>
            <ul className='text-sm space-y-2'>
              <li className='flex items-center'>
                <MapPin className='h-4 w-4 mr-2 text-muted-foreground' />
                <strong>Type:</strong>{" "}
                <span className='ml-2'>
                  {selectedEntity.entity_type || "N/A"}
                </span>
              </li>
              <li className='flex items-center'>
                <Server className='h-4 w-4 mr-2 text-muted-foreground' />
                <strong>Platform:</strong>{" "}
                <span className='ml-2'>{selectedEntity.platform || "N/A"}</span>
              </li>
              <li className='flex items-center'>
                <TabletSmartphone className='h-4 w-4 mr-2 text-muted-foreground' />
                <strong>Device ID:</strong>{" "}
                <span className='ml-2'>
                  {selectedEntity.device_id ?? "N/A"}
                </span>
              </li>
            </ul>
          </div>

          {selectedEntity.configuration && (
            <div>
              <h4 className='font-semibold text-sm mb-2'>Configuration</h4>
              <pre className='text-xs p-3 bg-muted rounded-md overflow-auto'>
                {JSON.stringify(selectedEntity.configuration, null, 2)}
              </pre>
            </div>
          )}

          <div>
            <h4 className='font-semibold text-base mb-2'>Device</h4>
            <ul className='text-sm space-y-2'>
              <li className='flex items-center'>
                <strong>Name:</strong>{" "}
                <span className='ml-2'>{device.name || "N/A"}</span>
              </li>
              <li className='flex items-center'>
                <strong>Model:</strong>{" "}
                <span className='ml-2'>{device.model || "N/A"}</span>
              </li>
              <li className='flex items-center'>
                <strong>Manufacturer:</strong>{" "}
                <span className='ml-2'>{device.manufacturer || "N/A"}</span>
              </li>
            </ul>
          </div>

          {entities.map((item) => (
            <div key={item.entity_id}>
              <h4 className='font-semibold text-sm mb-2'>
                Entity: {item.friendly_name}
              </h4>
              <EntityCard item={item} streamsState={streamsState} />

              <pre className='text-xs p-3 bg-muted rounded-md overflow-auto mt-2'>
                {JSON.stringify(item, null, 2)}
              </pre>
            </div>
          ))}
        </CardContent>
      )}
    </Card>
  );
}


================================================
FILE: apps/client/src/features/map-entity/render.tsx
================================================
import { getAllEntitiesFilter } from "@/entities/entity/api";
import { EntityAll } from "@/entities/entity/types";
import L from "leaflet";
import { MapPin } from "lucide-react";
import { useState, useEffect, createElement } from "react";
import { renderToStaticMarkup } from "react-dom/server";
import { parseGpsState } from "../gps/parseGps";
import { useMapEntityStore } from "./store";
import { Marker } from "react-leaflet";

const MARKER_W = 32;
const MARKER_H = 36;
const MARKER_SEL_W = 40;
const MARKER_SEL_H = 44;

const PIN_SHADOW =
  "filter:drop-shadow(0 1px 2px rgba(0,0,0,0.35)) drop-shadow(0 0 1px rgba(0,0,0,0.25))";

function lucideMapPinMarkup(size: number): string {
  return renderToStaticMarkup(
    createElement(MapPin, {
      size,
      strokeWidth: 1.5,
      absoluteStrokeWidth: true,
      color: "#ffffff",
      fill: "none",
      strokeLinecap: "round",
      strokeLinejoin: "round",
    }),
  );
}

function entityMarkerHtml(selected: boolean): string {
  const w = selected ? MARKER_SEL_W : MARKER_W;
  const h = selected ? MARKER_SEL_H : MARKER_H;
  const pinSize = selected ? 28 : 22;
  return `<div style="width:${w}px;height:${h}px;display:flex;align-items:flex-end;justify-content:center;pointer-events:none;${PIN_SHADOW}">${lucideMapPinMarkup(pinSize)}</div>`;
}

const entityMarkerIconDefault = L.divIcon({
  className: "leaflet-div-icon entity-map-marker-icon",
  html: entityMarkerHtml(false),
  iconSize: [MARKER_W, MARKER_H],
  iconAnchor: [MARKER_W / 2, MARKER_H],
});

const entityMarkerIconSelected = L.divIcon({
  className: "leaflet-div-icon entity-map-marker-icon",
  html: entityMarkerHtml(true),
  iconSize: [MARKER_SEL_W, MARKER_SEL_H],
  iconAnchor: [MARKER_SEL_W / 2, MARKER_SEL_H],
});

export function MapEntityRender() {
  const [entities, setEntities] = useState<EntityAll[]>([]);
  const setSelectedEntity = useMapEntityStore(
    (state) => state.setSelectedEntity,
  );
  const selectedEntityId = useMapEntityStore(
    (state) => state.selectedEntity?.id ?? null,
  );

  const fetchEntities = async () => {
    try {
      const response = await getAllEntitiesFilter("GPS");
      setEntities(response.data);
    } catch (error) {
      console.error("Failed to fetch entities:", error);
    }
  };

  useEffect(() => {
    fetchEntities();
  }, []);

  return (
    <>
      {entities.map((entity) => {
        const markerPosition = parseGpsState(entity.state?.state);
        if (!markerPosition) return null;

        return (
          <Marker
            key={entity.id}
            position={markerPosition}
            icon={
              entity.id === selectedEntityId
                ? entityMarkerIconSelected
                : entityMarkerIconDefault
            }
            eventHandlers={{
              click: () => {
                setSelectedEntity(entity);
              },
            }}
          />
        );
      })}
    </>
  );
}


================================================
FILE: apps/client/src/features/map-entity/store.ts
================================================
import { create } from "zustand";
import type { EntityAll } from "@/entities/entity/types";

interface MapEntityState {
  selectedEntity: EntityAll | null;
  setSelectedEntity: (entity: EntityAll | null) => void;
}

export const useMapEntityStore = create<MapEntityState>((set) => ({
  selectedEntity: null,
  setSelectedEntity: (entity) => set({ selectedEntity: entity }),
}));


================================================
FILE: apps/client/src/features/recording/RecordingButton.tsx
================================================
import { useEffect, useState } from "react";
import { Circle, Square, Loader2 } from "lucide-react";
import { Button } from "@/components/ui/button";
import { useRecordingStore } from "@/entities/recording/store";
import { cn } from "@/lib/utils";
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@/components/ui/tooltip";
import { DropdownMenuItem } from "@/components/ui/dropdown-menu";

interface RecordingButtonProps {
  topic: string;
  className?: string;
}

export function RecordingButton({ topic, className }: RecordingButtonProps) {
  const {
    isRecording,
    getActiveRecordingId,
    startRecording,
    stopRecording,
    fetchActiveRecordings,
  } = useRecordingStore();

  const [isLoading, setIsLoading] = useState(false);
  const recording = isRecording(topic);
  const recordingId = getActiveRecordingId(topic);

  useEffect(() => {
    fetchActiveRecordings();
  }, [fetchActiveRecordings]);

  const handleClick = async () => {
    setIsLoading(true);
    try {
      if (recording && recordingId) {
        await stopRecording(recordingId);
      } else {
        await startRecording(topic);
      }
    } catch (error) {
      console.error("Recording action failed:", error);
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <TooltipProvider>
      <Tooltip>
        <TooltipTrigger asChild>
          <Button
            variant={recording ? "destructive" : "outline"}
            size='icon'
            onClick={handleClick}
            disabled={isLoading}
            className={cn("relative h-8 w-8", className)}
          >
            {isLoading ? (
              <Loader2 className='h-4 w-4 animate-spin' />
            ) : recording ? (
              <>
                <Square className='h-4 w-4' />
                <span className='absolute -top-1 -right-1 h-2.5 w-2.5 rounded-full bg-red-500 animate-pulse' />
              </>
            ) : (
              <Circle className='h-4 w-4 fill-red-500 text-red-500' />
            )}
          </Button>
        </TooltipTrigger>
        <TooltipContent>
          <p>{recording ? "Stop Recording" : "Start Recording"}</p>
        </TooltipContent>
      </Tooltip>
    </TooltipProvider>
  );
}

export function RecordingMenuItem({ topic, className }: RecordingButtonProps) {
  const {
    isRecording,
    getActiveRecordingId,
    startRecording,
    stopRecording,
    fetchActiveRecordings,
  } = useRecordingStore();

  const [isLoading, setIsLoading] = useState(false);
  const recording = isRecording(topic);
  const recordingId = getActiveRecordingId(topic);

  useEffect(() => {
    fetchActiveRecordings();
  }, [fetchActiveRecordings]);

  const handleClick = async () => {
    setIsLoading(true);
    try {
      if (recording && recordingId) {
        await stopRecording(recordingId);
      } else {
        await startRecording(topic);
      }
    } catch (error) {
      console.error("Recording action failed:", error);
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <DropdownMenuItem
      onClick={handleClick}
      disabled={isLoading}
      className={cn("flex items-center gap-2", className)}
    >
      {isLoading ? (
        <Loader2 className='h-4 w-4 animate-spin' />
      ) : recording ? (
        <>
          <Square className='h-4 w-4' />
          <span>Stop Recording</span>
          <span className='ml-auto h-2 w-2 rounded-full bg-red-500 animate-pulse' />
        </>
      ) : (
        <>
          <Circle className='h-4 w-4 fill-red-500 text-red-500' />
          <span>Start Recording</span>
        </>
      )}
    </DropdownMenuItem>
  );
}


================================================
FILE: apps/client/src/features/recording/RecordingsList.tsx
================================================
import { useEffect, useState } from "react";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/ui/alert-dialog";
import { Play, Trash2, Loader2, RefreshCw, Square } from "lucide-react";
import { useRecordingStore } from "@/entities/recording/store";
import { VideoPlaybackDialog } from "./VideoPlaybackDialog";
import { formatSimpleDateTime } from "@/lib/time";
import type { Recording } from "@/entities/recording/types";

export function RecordingsList() {
  const {
    recordings,
    isLoading,
    fetchRecordings,
    deleteRecording,
    stopRecording,
  } = useRecordingStore();

  const [selectedRecording, setSelectedRecording] = useState<number | null>(
    null,
  );
  const [deletingId, setDeletingId] = useState<number | null>(null);

  useEffect(() => {
    fetchRecordings();
  }, [fetchRecordings]);

  const handleDelete = async (id: number) => {
    setDeletingId(id);
    try {
      await deleteRecording(id);
    } finally {
      setDeletingId(null);
    }
  };

  const handleStopRecording = async (id: number) => {
    try {
      await stopRecording(id);
    } catch (error) {
      console.error("Failed to stop recording:", error);
    }
  };

  const getStatusBadge = (status: string) => {
    switch (status) {
      case "completed":
        return <Badge variant='default'>Completed</Badge>;
      case "recording":
        return (
          <Badge variant='destructive' className='animate-pulse'>
            Recording
          </Badge>
        );
      case "failed":
        return <Badge variant='secondary'>Failed</Badge>;
      default:
        return <Badge variant='outline'>{status}</Badge>;
    }
  };

  return (
    <Card>
      <CardHeader className='flex flex-row items-center justify-between'>
        <div>
          <CardTitle>Recording History</CardTitle>
          <CardDescription></CardDescription>
        </div>
        <Button
          variant='outline'
          size='icon'
          onClick={() => fetchRecordings()}
          disabled={isLoading}
        >
          <RefreshCw className={`h-4 w-4 ${isLoading ? "animate-spin" : ""}`} />
        </Button>
      </CardHeader>
      <CardContent>
        {isLoading && recordings.length === 0 ? (
          <div className='flex justify-center py-8'>
            <Loader2 className='h-8 w-8 animate-spin text-muted-foreground' />
          </div>
        ) : recordings.length === 0 ? (
          <div className='text-center py-8 text-muted-foreground'>
            No recordings yet
          </div>
        ) : (
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>Topic</TableHead>
                <TableHead>Type</TableHead>
                <TableHead>Duration</TableHead>
                <TableHead>Size</TableHead>
                <TableHead>Status</TableHead>
                <TableHead>Recorded At</TableHead>
                <TableHead className='text-right'>Actions</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {recordings.map((recording) => (
                <RecordingRow
                  key={recording.id}
                  recording={recording}
                  onPlay={() => setSelectedRecording(recording.id)}
                  onDelete={() => handleDelete(recording.id)}
                  onStop={() => handleStopRecording(recording.id)}
                  isDeleting={deletingId === recording.id}
                  getStatusBadge={getStatusBadge}
                />
              ))}
            </TableBody>
          </Table>
        )}
      </CardContent>

      <VideoPlaybackDialog
        recordingId={selectedRecording}
        open={selectedRecording !== null}
        onClose={() => setSelectedRecording(null)}
      />
    </Card>
  );
}

interface RecordingRowProps {
  recording: Recording;
  onPlay: () => void;
  onDelete: () => void;
  onStop: () => void;
  isDeleting: boolean;
  getStatusBadge: (status: string) => React.ReactNode;
}

function RecordingRow({
  recording,
  onPlay,
  onDelete,
  onStop,
  isDeleting,
  getStatusBadge,
}: RecordingRowProps) {
  return (
    <TableRow>
      <TableCell className='font-medium max-w-[200px] truncate'>
        {recording.topic}
      </TableCell>
      <TableCell>
        <Badge variant='outline'>{recording.media_type}</Badge>
      </TableCell>
      <TableCell>{formatDuration(recording.duration_ms)}</TableCell>
      <TableCell>{formatFileSize(recording.file_size)}</TableCell>
      <TableCell>{getStatusBadge(recording.status)}</TableCell>
      <TableCell>{formatSimpleDateTime(recording.started_at)}</TableCell>
      <TableCell className='text-right'>
        <div className='flex gap-2 justify-end'>
          {recording.status === "recording" ? (
            <Button variant='destructive' size='icon' onClick={onStop}>
              <Square className='h-4 w-4' />
            </Button>
          ) : (
            <Button
              variant='ghost'
              size='icon'
              onClick={onPlay}
              disabled={recording.status !== "completed"}
            >
              <Play className='h-4 w-4' />
            </Button>
          )}
          <AlertDialog>
            <AlertDialogTrigger asChild>
              <Button
                variant='ghost'
                size='icon'
                disabled={isDeleting || recording.status === "recording"}
              >
                {isDeleting ? (
                  <Loader2 className='h-4 w-4 animate-spin' />
                ) : (
                  <Trash2 className='h-4 w-4' />
                )}
              </Button>
            </AlertDialogTrigger>
            <AlertDialogContent>
              <AlertDialogHeader>
                <AlertDialogTitle>Delete Recording</AlertDialogTitle>
                <AlertDialogDescription>
                  Are you sure you want to delete this recording? This action
                  cannot be undone.
                </AlertDialogDescription>
              </AlertDialogHeader>
              <AlertDialogFooter>
                <AlertDialogCancel>Cancel</AlertDialogCancel>
                <AlertDialogAction onClick={onDelete}>Delete</AlertDialogAction>
              </AlertDialogFooter>
            </AlertDialogContent>
          </AlertDialog>
        </div>
      </TableCell>
    </TableRow>
  );
}

function formatDuration(ms: number): string {
  if (ms === 0) return "-";
  const seconds = Math.floor(ms / 1000);
  const minutes = Math.floor(seconds / 60);
  const hours = Math.floor(minutes / 60);

  if (hours > 0) {
    return `${hours}:${(minutes % 60).toString().padStart(2, "0")}:${(seconds % 60).toString().padStart(2, "0")}`;
  }
  return `${minutes}:${(seconds % 60).toString().padStart(2, "0")}`;
}

function formatFileSize(bytes: number): string {
  if (bytes === 0) return "-";
  const k = 1024;
  const sizes = ["B", "KB", "MB", "GB"];
  const i = Math.floor(Math.log(bytes) / Math.log(k));
  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i];
}


================================================
FILE: apps/client/src/features/recording/VideoPlaybackDialog.tsx
================================================
import { useRef, useEffect } from "react";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { useRecordingStore } from "@/entities/recording/store";
import { getRecordingStreamUrl } from "@/entities/recording/api";
import { storage } from "@/lib/storage";
import { AudioWaveformPlayer } from "./components/AudioWaveformPlayer";
import { VideoControlBar } from "./components/VideoControlBar";

interface VideoPlaybackDialogProps {
  recordingId: number | null;
  open: boolean;
  onClose: () => void;
}

export function VideoPlaybackDialog({
  recordingId,
  open,
  onClose,
}: VideoPlaybackDialogProps) {
  const videoRef = useRef<HTMLVideoElement>(null);
  const { recordings } = useRecordingStore();
  const recording = recordings.find((r) => r.id === recordingId);

  const serverUrl = storage.getServerUrl() || "";
  const token = storage.getToken() || "";

  const streamUrl = recordingId
    ? getRecordingStreamUrl(recordingId, serverUrl, token)
    : null;

  const isAudioOnly = recording?.media_type === "audio";

  useEffect(() => {
    if (open && videoRef.current && streamUrl && !isAudioOnly) {
      videoRef.current.load();
    }
  }, [open, streamUrl, isAudioOnly]);

  return (
    <Dialog open={open} onOpenChange={(isOpen) => !isOpen && onClose()}>
      <DialogContent className='max-w-4xl'>
        <DialogHeader>
          <DialogTitle className='truncate max-w-sm'>
            {recording?.topic || "Recording Playback"}
          </DialogTitle>
        </DialogHeader>

        {streamUrl ? (
          isAudioOnly ? (
            <AudioWaveformPlayer
              src={streamUrl}
              durationMs={recording?.duration_ms || 0}
              className='py-2'
            />
          ) : (
            <div className='space-y-2'>
              <div className='aspect-video bg-black rounded-lg overflow-hidden'>
                <video
                  ref={videoRef}
                  src={streamUrl}
                  className='w-full h-full'
                />
              </div>
              <VideoControlBar
                videoRef={videoRef}
                durationMs={recording?.duration_ms || 0}
                src={streamUrl}
              />
            </div>
          )
        ) : (
          <div className='aspect-video bg-black rounded-lg overflow-hidden'>
            <div className='w-full h-full flex items-center justify-center text-muted-foreground'>
              No recording selected
            </div>
          </div>
        )}

        {recording && (
          <div className='text-sm text-muted-foreground space-y-1'>
            <p>Duration: {formatDuration(recording.duration_ms)}</p>
            <p>Size: {formatFileSize(recording.file_size)}</p>
            <p>Type: {recording.media_type}</p>
          </div>
        )}
      </DialogContent>
    </Dialog>
  );
}

function formatDuration(ms: number): string {
  const seconds = Math.floor(ms / 1000);
  const minutes = Math.floor(seconds / 60);
  const hours = Math.floor(minutes / 60);

  if (hours > 0) {
    return `${hours}:${(minutes % 60).toString().padStart(2, "0")}:${(seconds % 60).toString().padStart(2, "0")}`;
  }
  return `${minutes}:${(seconds % 60).toString().padStart(2, "0")}`;
}

function formatFileSize(bytes: number): string {
  if (bytes === 0) return "0 B";
  const k = 1024;
  const sizes = ["B", "KB", "MB", "GB"];
  const i = Math.floor(Math.log(bytes) / Math.log(k));
  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i];
}


================================================
FILE: apps/client/src/features/recording/components/AudioWaveformPlayer.tsx
================================================
import { useRef, useState, useEffect, useCallback } from "react";
import { cn } from "@/lib/utils";
import { Skeleton } from "@/components/ui/skeleton";
import { useMediaPlayback } from "../hooks/useMediaPlayback";
import { useAudioWaveform } from "../hooks/useAudioWaveform";
import { PlaybackControls } from "./PlaybackControls";
import { WaveformCanvas } from "./WaveformCanvas";
import { TimeRuler } from "./TimeRuler";

interface AudioWaveformPlayerProps {
  src: string;
  durationMs: number;
  className?: string;
  autoPlay?: boolean;
}

export function AudioWaveformPlayer({
  src,
  durationMs,
  className,
  autoPlay = false,
}: AudioWaveformPlayerProps) {
  const audioRef = useRef<HTMLAudioElement>(null);
  const containerRef = useRef<HTMLDivElement>(null);
  const [containerWidth, setContainerWidth] = useState(0);

  const { waveformData, isLoading, error } = useAudioWaveform({ src });
  const playback = useMediaPlayback(audioRef);

  // Handle resize
  useEffect(() => {
    const container = containerRef.current;
    if (!container) return;

    const updateWidth = () => {
      setContainerWidth(container.clientWidth);
    };

    updateWidth();

    const resizeObserver = new ResizeObserver(updateWidth);
    resizeObserver.observe(container);

    return () => {
      resizeObserver.disconnect();
    };
  }, []);

  // Auto-play on mount if enabled
  useEffect(() => {
    if (autoPlay && audioRef.current) {
      audioRef.current.play().catch(console.error);
    }
  }, [autoPlay]);

  const handleSeek = useCallback(
    (progress: number) => {
      const effectiveDuration = playback.duration || durationMs;
      playback.seek(progress * effectiveDuration);
    },
    [playback, durationMs]
  );

  const handleTimeSeek = useCallback(
    (timeMs: number) => {
      playback.seek(timeMs);
    },
    [playback]
  );

  const effectiveDuration = playback.duration || durationMs;

  return (
    <div
      ref={containerRef}
      className={cn("w-full space-y-3", className)}
    >
      {/* Hidden audio element */}
      <audio
        ref={audioRef}
        src={src}
        preload='metadata'
      />

      {/* Playback Controls */}
      <PlaybackControls
        isPlaying={playback.isPlaying}
        currentTimeMs={playback.currentTime}
        durationMs={effectiveDuration}
        onPlay={playback.play}
        onPause={playback.pause}
        onStop={playback.stop}
      />

      {/* Waveform */}
      <div className='bg-black rounded-lg p-2'>
        {isLoading ? (
          <Skeleton className='w-full h-24 bg-white/10' />
        ) : error ? (
          <div className='w-full h-24 flex items-center justify-center text-white/50 text-sm'>
            Failed to load waveform
          </div>
        ) : (
          <WaveformCanvas
            waveformData={waveformData}
            width={containerWidth - 16}
            height={96}
            progress={playback.progress}
            onSeek={handleSeek}
          />
        )}
      </div>

      {/* Time Ruler */}
      <TimeRuler
        durationMs={effectiveDuration}
        currentTimeMs={playback.currentTime}
        width={containerWidth}
        onSeek={handleTimeSeek}
        className='rounded'
      />
    </div>
  );
}


================================================
FILE: apps/client/src/features/recording/components/FrameTimeline.tsx
================================================
import { useRef, useState, useCallback } from "react";
import { cn } from "@/lib/utils";
import { Skeleton } from "@/components/ui/skeleton";

interface Frame {
  timeMs: number;
  dataUrl: string;
}

interface FrameTimelineProps {
  frames: Frame[];
  isLoading: boolean;
  progress: number;
  durationMs: number;
  onSeek?: (progress: number) => void;
  className?: string;
}

export function FrameTimeline({
  frames,
  isLoading,
  progress,
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  durationMs,
  onSeek,
  className,
}: FrameTimelineProps) {
  const containerRef = useRef<HTMLDivElement>(null);
  const [isDragging, setIsDragging] = useState(false);

  const calculateProgress = useCallback((clientX: number) => {
    if (!containerRef.current) return 0;
    const rect = containerRef.current.getBoundingClientRect();
    const x = clientX - rect.left;
    return Math.max(0, Math.min(1, x / rect.width));
  }, []);

  const handleMouseDown = useCallback(
    (e: React.MouseEvent) => {
      if (!onSeek) return;
      setIsDragging(true);
      onSeek(calculateProgress(e.clientX));
    },
    [onSeek, calculateProgress],
  );

  const handleMouseMove = useCallback(
    (e: React.MouseEvent) => {
      if (!isDragging || !onSeek) return;
      onSeek(calculateProgress(e.clientX));
    },
    [isDragging, onSeek, calculateProgress],
  );

  const handleMouseUp = useCallback(() => {
    setIsDragging(false);
  }, []);

  const handleMouseLeave = useCallback(() => {
    if (isDragging) {
      setIsDragging(false);
    }
  }, [isDragging]);

  const handleTouchStart = useCallback(
    (e: React.TouchEvent) => {
      if (!onSeek) return;
      setIsDragging(true);
      onSeek(calculateProgress(e.touches[0].clientX));
    },
    [onSeek, calculateProgress],
  );

  const handleTouchMove = useCallback(
    (e: React.TouchEvent) => {
      if (!isDragging || !onSeek) return;
      onSeek(calculateProgress(e.touches[0].clientX));
    },
    [isDragging, onSeek, calculateProgress],
  );

  const handleTouchEnd = useCallback(() => {
    setIsDragging(false);
  }, []);

  if (isLoading) {
    return (
      <div className={cn("flex gap-1 overflow-hidden", className)}>
        {Array.from({ length: 10 }).map((_, i) => (
          <Skeleton key={i} className='h-12 flex-1 min-w-[40px]' />
        ))}
      </div>
    );
  }

  if (frames.length === 0) {
    return (
      <div
        className={cn(
          "h-12 bg-muted/30 rounded flex items-center justify-center text-muted-foreground text-sm",
          className,
        )}
      >
        No frames available
      </div>
    );
  }

  return (
    <div
      ref={containerRef}
      className={cn(
        "relative h-12 bg-black/20 rounded overflow-hidden cursor-pointer select-none",
        className,
      )}
      onMouseDown={handleMouseDown}
      onMouseMove={handleMouseMove}
      onMouseUp={handleMouseUp}
      onMouseLeave={handleMouseLeave}
      onTouchStart={handleTouchStart}
      onTouchMove={handleTouchMove}
      onTouchEnd={handleTouchEnd}
    >
      {/* Frame thumbnails */}
      <div className='flex h-full'>
        {frames.map((frame, i) => (
          <div
            key={i}
            className='flex-1 min-w-0 h-full border-r border-black/20 last:border-r-0'
          >
            <img
              src={frame.dataUrl}
              alt={`Frame at ${formatTime(frame.timeMs)}`}
              className='w-full h-full object-cover'
              draggable={false}
            />
          </div>
        ))}
      </div>

      {/* Progress overlay (darkens unplayed portion) */}
      <div
        className='absolute top-0 right-0 h-full bg-black/50 pointer-events-none transition-[left] duration-75'
        style={{ left: `${progress * 100}%` }}
      />

      {/* Progress handle */}
      <div
        className='absolute top-0 h-full w-1 bg-primary pointer-events-none'
        style={{ left: `calc(${progress * 100}% - 2px)` }}
      >
        <div className='absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-3 h-3 rounded-full bg-primary shadow-md' />
      </div>
    </div>
  );
}

function formatTime(ms: number): string {
  const totalSeconds = Math.floor(ms / 1000);
  const minutes = Math.floor(totalSeconds / 60);
  const seconds = totalSeconds % 60;
  return `${minutes}:${seconds.toString().padStart(2, "0")}`;
}


================================================
FILE: apps/client/src/features/recording/components/PlaybackControls.tsx
================================================
import { Play, Pause, Square } from "lucide-react";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

interface PlaybackControlsProps {
  isPlaying: boolean;
  currentTimeMs: number;
  durationMs: number;
  onPlay: () => void;
  onPause: () => void;
  onStop: () => void;
  className?: string;
}

export function PlaybackControls({
  isPlaying,
  currentTimeMs,
  durationMs,
  onPlay,
  onPause,
  onStop,
  className,
}: PlaybackControlsProps) {
  return (
    <div className={cn("flex items-center gap-2", className)}>
      <Button
        variant='ghost'
        size='icon'
        onClick={isPlaying ? onPause : onPlay}
        className='h-8 w-8'
      >
        {isPlaying ? (
          <Pause className='h-4 w-4' />
        ) : (
          <Play className='h-4 w-4' />
        )}
      </Button>
      <Button
        variant='ghost'
        size='icon'
        onClick={onStop}
        className='h-8 w-8'
      >
        <Square className='h-4 w-4' />
      </Button>
      <span className='text-sm text-muted-foreground ml-2'>
        {formatTime(currentTimeMs)} / {formatTime(durationMs)}
      </span>
    </div>
  );
}

function formatTime(ms: number): string {
  const totalSeconds = Math.floor(ms / 1000);
  const minutes = Math.floor(totalSeconds / 60);
  const seconds = totalSeconds % 60;
  return `${minutes}:${seconds.toString().padStart(2, "0")}`;
}


================================================
FILE: apps/client/src/features/recording/components/TimeRuler.tsx
================================================
import { useRef, useCallback, useMemo } from "react";
import { cn } from "@/lib/utils";

interface TimeRulerProps {
  durationMs: number;
  currentTimeMs: number;
  width: number;
  height?: number;
  onSeek?: (timeMs: number) => void;
  className?: string;
}

export function TimeRuler({
  durationMs,
  currentTimeMs,
  width,
  height = 24,
  onSeek,
  className,
}: TimeRulerProps) {
  const containerRef = useRef<HTMLDivElement>(null);

  const handleClick = useCallback(
    (e: React.MouseEvent<HTMLDivElement>) => {
      if (!onSeek || !containerRef.current || durationMs <= 0) return;

      const rect = containerRef.current.getBoundingClientRect();
      const x = e.clientX - rect.left;
      const progress = Math.max(0, Math.min(1, x / rect.width));
      onSeek(progress * durationMs);
    },
    [onSeek, durationMs]
  );

  const ticks = useMemo(() => {
    if (durationMs <= 0 || width <= 0) return [];

    const result: Array<{
      timeMs: number;
      x: number;
      isMajor: boolean;
      label: string;
    }> = [];

    // Calculate appropriate tick interval based on duration
    let majorInterval: number;
    let minorInterval: number;

    if (durationMs <= 30000) {
      // <= 30 seconds
      majorInterval = 10000;
      minorInterval = 2000;
    } else if (durationMs <= 120000) {
      // <= 2 minutes
      majorInterval = 30000;
      minorInterval = 10000;
    } else if (durationMs <= 600000) {
      // <= 10 minutes
      majorInterval = 60000;
      minorInterval = 15000;
    } else {
      // > 10 minutes
      majorInterval = 300000;
      minorInterval = 60000;
    }

    for (let t = 0; t <= durationMs; t += minorInterval) {
      const isMajor = t % majorInterval === 0;
      const x = (t / durationMs) * width;

      result.push({
        timeMs: t,
        x,
        isMajor,
        label: isMajor ? formatRulerTime(t) : "",
      });
    }

    return result;
  }, [durationMs, width]);

  const progressX = durationMs > 0 ? (currentTimeMs / durationMs) * width : 0;

  return (
    <div
      ref={containerRef}
      className={cn(
        "relative bg-muted/30 select-none cursor-pointer",
        className
      )}
      style={{ height, width: width || "100%" }}
      onClick={handleClick}
    >
      {/* Tick marks */}
      <svg
        width={width}
        height={height}
        className='absolute top-0 left-0'
      >
        {ticks.map((tick, i) => (
          <g key={i}>
            <line
              x1={tick.x}
              y1={0}
              x2={tick.x}
              y2={tick.isMajor ? 8 : 4}
              stroke='currentColor'
              strokeOpacity={tick.isMajor ? 0.5 : 0.3}
              strokeWidth={1}
            />
            {tick.label && (
              <text
                x={tick.x + 2}
                y={height - 4}
                fontSize={10}
                fill='currentColor'
                fillOpacity={0.6}
              >
                {tick.label}
              </text>
            )}
          </g>
        ))}
      </svg>

      {/* Current time indicator */}
      <div
        className='absolute top-0 w-0.5 h-full bg-primary'
        style={{ left: progressX }}
      />
    </div>
  );
}

function formatRulerTime(ms: number): string {
  const totalSeconds = Math.floor(ms / 1000);
  const minutes = Math.floor(totalSeconds / 60);
  const seconds = totalSeconds % 60;
  return `${minutes}:${seconds.toString().padStart(2, "0")}`;
}


================================================
FILE: apps/client/src/features/recording/components/VideoControlBar.tsx
================================================
import { useRef, useState, useEffect, useCallback, RefObject } from "react";
import { cn } from "@/lib/utils";
import { useMediaPlayback } from "../hooks/useMediaPlayback";
import { useVideoFrames } from "../hooks/useVideoFrames";
import { PlaybackControls } from "./PlaybackControls";
import { FrameTimeline } from "./FrameTimeline";
import { TimeRuler } from "./TimeRuler";

interface VideoControlBarProps {
  videoRef: RefObject<HTMLVideoElement | null>;
  durationMs: number;
  src: string;
  className?: string;
  frameCount?: number;
}

export function VideoControlBar({
  videoRef,
  durationMs,
  src,
  className,
  frameCount = 10,
}: VideoControlBarProps) {
  const containerRef = useRef<HTMLDivElement>(null);
  const [containerWidth, setContainerWidth] = useState(0);

  const playback = useMediaPlayback(videoRef);
  const { frames, isLoading } = useVideoFrames({
    src,
    durationMs,
    frameCount,
  });

  // Handle resize
  useEffect(() => {
    const container = containerRef.current;
    if (!container) return;

    const updateWidth = () => {
      setContainerWidth(container.clientWidth);
    };

    updateWidth();

    const resizeObserver = new ResizeObserver(updateWidth);
    resizeObserver.observe(container);

    return () => {
      resizeObserver.disconnect();
    };
  }, []);

  const handleSeek = useCallback(
    (progress: number) => {
      const effectiveDuration = playback.duration || durationMs;
      playback.seek(progress * effectiveDuration);
    },
    [playback, durationMs],
  );

  const handleTimeSeek = useCallback(
    (timeMs: number) => {
      playback.seek(timeMs);
    },
    [playback],
  );

  const effectiveDuration = playback.duration || durationMs;

  return (
    <div
      ref={containerRef}
      className={cn("w-full space-y-2 p-2 bg-black/80 rounded-lg", className)}
    >
      {/* Playback Controls */}
      <PlaybackControls
        isPlaying={playback.isPlaying}
        currentTimeMs={playback.currentTime}
        durationMs={effectiveDuration}
        onPlay={playback.play}
        onPause={playback.pause}
        onStop={playback.stop}
        className='text-white'
      />

      {/* Frame Timeline */}
      <FrameTimeline
        frames={frames}
        isLoading={isLoading}
        progress={playback.progress}
        durationMs={effectiveDuration}
        onSeek={handleSeek}
      />

      {/* Time Ruler */}
      <TimeRuler
        durationMs={effectiveDuration}
        currentTimeMs={playback.currentTime}
        width={containerWidth - 16}
        onSeek={handleTimeSeek}
        className='text-white/80'
      />
    </div>
  );
}


================================================
FILE: apps/client/src/features/recording/components/WaveformCanvas.tsx
================================================
import { useRef, useEffect, useCallback } from "react";
import * as d3 from "d3";
import { cn } from "@/lib/utils";

interface WaveformCanvasProps {
  waveformData: number[];
  width: number;
  height: number;
  progress: number;
  playedColor?: string;
  unplayedColor?: string;
  rulerColor?: string;
  onSeek?: (progress: number) => void;
  className?: string;
}

export function WaveformCanvas({
  waveformData,
  width,
  height,
  progress,
  playedColor = "rgba(255, 255, 255, 1)",
  unplayedColor = "rgba(255, 255, 255, 0.3)",
  rulerColor = "#ef4444",
  onSeek,
  className,
}: WaveformCanvasProps) {
  const svgRef = useRef<SVGSVGElement>(null);
  const containerRef = useRef<HTMLDivElement>(null);

  const handleClick = useCallback(
    (e: React.MouseEvent<HTMLDivElement>) => {
      if (!onSeek || !containerRef.current) return;

      const rect = containerRef.current.getBoundingClientRect();
      const x = e.clientX - rect.left;
      const newProgress = Math.max(0, Math.min(1, x / rect.width));
      onSeek(newProgress);
    },
    [onSeek],
  );

  useEffect(() => {
    if (!svgRef.current || !waveformData.length || width <= 0 || height <= 0) {
      return;
    }

    const svg = d3.select(svgRef.current);
    svg.selectAll("*").remove();

    const midY = height / 2;
    const barWidth = Math.max(1, width / waveformData.length - 1);

    // Create scales
    const xScale = d3
      .scaleLinear()
      .domain([0, waveformData.length - 1])
      .range([0, width]);

    const yScale = d3
      .scaleLinear()
      .domain([0, 1])
      .range([0, midY - 2]);

    // Define clip path for played portion
    const clipId = `waveform-clip-${Math.random().toString(36).slice(2)}`;
    svg
      .append("defs")
      .append("clipPath")
      .attr("id", clipId)
      .append("rect")
      .attr("x", 0)
      .attr("y", 0)
      .attr("width", progress * width)
      .attr("height", height);

    // Draw unplayed waveform (background)
    const unplayedGroup = svg.append("g").attr("fill", unplayedColor);

    waveformData.forEach((value, i) => {
      const x = xScale(i);
      const barHeight = yScale(value);

      // Top bar (mirrored)
      unplayedGroup
        .append("rect")
        .attr("x", x)
        .attr("y", midY - barHeight)
        .attr("width", barWidth)
        .attr("height", barHeight)
        .attr("rx", barWidth / 2);

      // Bottom bar
      unplayedGroup
        .append("rect")
        .attr("x", x)
        .attr("y", midY)
        .attr("width", barWidth)
        .attr("height", barHeight)
        .attr("rx", barWidth / 2);
    });

    // Draw played waveform (foreground with clip)
    const playedGroup = svg
      .append("g")
      .attr("fill", playedColor)
      .attr("clip-path", `url(#${clipId})`);

    waveformData.forEach((value, i) => {
      const x = xScale(i);
      const barHeight = yScale(value);

      // Top bar (mirrored)
      playedGroup
        .append("rect")
        .attr("x", x)
        .attr("y", midY - barHeight)
        .attr("width", barWidth)
        .attr("height", barHeight)
        .attr("rx", barWidth / 2);

      // Bottom bar
      playedGroup
        .append("rect")
        .attr("x", x)
        .attr("y", midY)
        .attr("width", barWidth)
        .attr("height", barHeight)
        .attr("rx", barWidth / 2);
    });

    // Draw center line
    svg
      .append("line")
      .attr("x1", 0)
      .attr("y1", midY)
      .attr("x2", width)
      .attr("y2", midY)
      .attr("stroke", "currentColor")
      .attr("stroke-opacity", 0.1)
      .attr("stroke-width", 1);

    // Draw red ruler (playhead)
    const rulerX = progress * width;
    svg
      .append("line")
      .attr("x1", rulerX)
      .attr("y1", 0)
      .attr("x2", rulerX)
      .attr("y2", height)
      .attr("stroke", rulerColor)
      .attr("stroke-width", 2);

    // Draw ruler handle (triangle at top)
    svg
      .append("polygon")
      .attr("points", `${rulerX - 6},0 ${rulerX + 6},0 ${rulerX},8`)
      .attr("fill", rulerColor);
  }, [
    waveformData,
    width,
    height,
    progress,
    playedColor,
    unplayedColor,
    rulerColor,
  ]);

  return (
    <div
      ref={containerRef}
      className={cn("relative cursor-pointer", className)}
      onClick={handleClick}
      style={{ width, height }}
    >
      <svg
        ref={svgRef}
        width={width}
        height={height}
        className='absolute top-0 left-0'
      />
    </div>
  );
}


================================================
FILE: apps/client/src/features/recording/hooks/useAudioWaveform.ts
================================================
import { useState, useEffect, useRef } from "react";

interface UseAudioWaveformOptions {
  src: string;
  samples?: number;
}

interface UseAudioWaveformReturn {
  waveformData: number[];
  isLoading: boolean;
  error: Error | null;
}

export function useAudioWaveform({
  src,
  samples = 200,
}: UseAudioWaveformOptions): UseAudioWaveformReturn {
  const [waveformData, setWaveformData] = useState<number[]>([]);
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState<Error | null>(null);
  const audioContextRef = useRef<AudioContext | null>(null);

  useEffect(() => {
    if (!src) {
      setWaveformData([]);
      return;
    }

    let cancelled = false;

    const generateWaveform = async () => {
      setIsLoading(true);
      setError(null);

      try {
        // Fetch audio data
        const response = await fetch(src);
        if (!response.ok) {
          throw new Error(`Failed to fetch audio: ${response.status}`);
        }
        const arrayBuffer = await response.arrayBuffer();

        if (cancelled) return;

        // Create or reuse AudioContext
        const audioContext =
          audioContextRef.current ?? new AudioContext();
        audioContextRef.current = audioContext;

        // Decode audio data
        const audioBuffer = await audioContext.decodeAudioData(arrayBuffer);

        if (cancelled) return;

        // Get channel data (use first channel or mix stereo)
        const channelData = audioBuffer.getChannelData(0);
        const secondChannel =
          audioBuffer.numberOfChannels > 1
            ? audioBuffer.getChannelData(1)
            : null;

        // Downsample by taking peak values in each segment
        const blockSize = Math.floor(channelData.length / samples);
        const waveform: number[] = [];

        for (let i = 0; i < samples; i++) {
          const start = i * blockSize;
          let max = 0;

          for (let j = start; j < start + blockSize && j < channelData.length; j++) {
            let sample = Math.abs(channelData[j]);
            if (secondChannel) {
              sample = Math.max(sample, Math.abs(secondChannel[j]));
            }
            max = Math.max(max, sample);
          }

          waveform.push(max);
        }

        // Normalize to 0-1 range
        const maxVal = Math.max(...waveform, 0.001);
        const normalized = waveform.map((v) => v / maxVal);

        if (!cancelled) {
          setWaveformData(normalized);
        }
      } catch (err) {
        if (!cancelled) {
          setError(err instanceof Error ? err : new Error(String(err)));
        }
      } finally {
        if (!cancelled) {
          setIsLoading(false);
        }
      }
    };

    generateWaveform();

    return () => {
      cancelled = true;
    };
  }, [src, samples]);

  // Cleanup AudioContext on unmount
  useEffect(() => {
    return () => {
      if (audioContextRef.current) {
        audioContextRef.current.close().catch(console.error);
        audioContextRef.current = null;
      }
    };
  }, []);

  return {
    waveformData,
    isLoading,
    error,
  };
}


================================================
FILE: apps/client/src/features/recording/hooks/useMediaPlayback.ts
================================================
import { useState, useEffect, useCallback, RefObject } from "react";

interface UseMediaPlaybackReturn {
  isPlaying: boolean;
  currentTime: number; // ms
  duration: number; // ms
  progress: number; // 0-1
  play: () => void;
  pause: () => void;
  stop: () => void;
  seek: (timeMs: number) => void;
}

export function useMediaPlayback(
  mediaRef: RefObject<HTMLMediaElement | null>
): UseMediaPlaybackReturn {
  const [isPlaying, setIsPlaying] = useState(false);
  const [currentTime, setCurrentTime] = useState(0);
  const [duration, setDuration] = useState(0);

  useEffect(() => {
    const media = mediaRef.current;
    if (!media) return;

    const handleTimeUpdate = () => {
      setCurrentTime(media.currentTime * 1000);
    };

    const handleDurationChange = () => {
      setDuration(media.duration * 1000);
    };

    const handlePlay = () => setIsPlaying(true);
    const handlePause = () => setIsPlaying(false);
    const handleEnded = () => {
      setIsPlaying(false);
      setCurrentTime(0);
    };

    const handleLoadedMetadata = () => {
      setDuration(media.duration * 1000);
    };

    media.addEventListener("timeupdate", handleTimeUpdate);
    media.addEventListener("durationchange", handleDurationChange);
    media.addEventListener("loadedmetadata", handleLoadedMetadata);
    media.addEventListener("play", handlePlay);
    media.addEventListener("pause", handlePause);
    media.addEventListener("ended", handleEnded);

    // Initialize duration if already loaded
    if (media.duration && !isNaN(media.duration)) {
      setDuration(media.duration * 1000);
    }

    return () => {
      media.removeEventListener("timeupdate", handleTimeUpdate);
      media.removeEventListener("durationchange", handleDurationChange);
      media.removeEventListener("loadedmetadata", handleLoadedMetadata);
      media.removeEventListener("play", handlePlay);
      media.removeEventListener("pause", handlePause);
      media.removeEventListener("ended", handleEnded);
    };
  }, [mediaRef]);

  const play = useCallback(() => {
    const media = mediaRef.current;
    if (media) {
      media.play().catch((err) => {
        console.error("Error playing media:", err);
      });
    }
  }, [mediaRef]);

  const pause = useCallback(() => {
    const media = mediaRef.current;
    if (media) {
      media.pause();
    }
  }, [mediaRef]);

  const stop = useCallback(() => {
    const media = mediaRef.current;
    if (media) {
      media.pause();
      media.currentTime = 0;
      setCurrentTime(0);
      setIsPlaying(false);
    }
  }, [mediaRef]);

  const seek = useCallback(
    (timeMs: number) => {
      const media = mediaRef.current;
      if (media) {
        const clampedTime = Math.max(0, Math.min(timeMs, duration));
        media.currentTime = clampedTime / 1000;
        setCurrentTime(clampedTime);
      }
    },
    [mediaRef, duration]
  );

  const progress = duration > 0 ? currentTime / duration : 0;

  return {
    isPlaying,
    currentTime,
    duration,
    progress,
    play,
    pause,
    stop,
    seek,
  };
}


================================================
FILE: apps/client/src/features/recording/hooks/useVideoFrames.ts
================================================
import { useState, useEffect, useRef } from "react";

interface Frame {
  timeMs: number;
  dataUrl: string;
}

interface UseVideoFramesOptions {
  src: string;
  durationMs: number;
  frameCount: number;
  frameHeight?: number;
}

interface UseVideoFramesReturn {
  frames: Frame[];
  isLoading: boolean;
  error: Error | null;
}

export function useVideoFrames({
  src,
  durationMs,
  frameCount,
  frameHeight = 48,
}: UseVideoFramesOptions): UseVideoFramesReturn {
  const [frames, setFrames] = useState<Frame[]>([]);
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState<Error | null>(null);
  const videoRef = useRef<HTMLVideoElement | null>(null);

  useEffect(() => {
    if (!src || durationMs <= 0 || frameCount <= 0) {
      setFrames([]);
      return;
    }

    let cancelled = false;

    const extractFrames = async () => {
      setIsLoading(true);
      setError(null);

      try {
        // Create offscreen video element
        const video = document.createElement("video");
        video.src = src;
        video.crossOrigin = "anonymous";
        video.preload = "metadata";
        videoRef.current = video;

        // Wait for video metadata to load
        await new Promise<void>((resolve, reject) => {
          video.onloadedmetadata = () => resolve();
          video.onerror = () =>
            reject(new Error("Failed to load video metadata"));
          video.load();
        });

        if (cancelled) return;

        // Create canvas for frame capture
        const aspectRatio = video.videoWidth / video.videoHeight;
        const canvas = document.createElement("canvas");
        canvas.height = frameHeight;
        canvas.width = Math.round(frameHeight * aspectRatio);
        const ctx = canvas.getContext("2d");

        if (!ctx) {
          throw new Error("Failed to get canvas context");
        }

        const extractedFrames: Frame[] = [];
        const interval = durationMs / (frameCount + 1);

        for (let i = 1; i <= frameCount; i++) {
          if (cancelled) break;

          const timeMs = interval * i;
          video.currentTime = timeMs / 1000;

          // Wait for seek to complete
          await new Promise<void>((resolve) => {
            const onSeeked = () => {
              video.removeEventListener("seeked", onSeeked);
              resolve();
            };
            video.addEventListener("seeked", onSeeked);
          });

          if (cancelled) break;

          // Capture frame
          ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
          const dataUrl = canvas.toDataURL("image/jpeg", 0.6);

          extractedFrames.push({
            timeMs,
            dataUrl,
          });
        }

        if (!cancelled) {
          setFrames(extractedFrames);
        }
      } catch (err) {
        if (!cancelled) {
          setError(err instanceof Error ? err : new Error(String(err)));
        }
      } finally {
        if (!cancelled) {
          setIsLoading(false);
        }
      }
    };

    extractFrames();

    return () => {
      cancelled = true;
      if (videoRef.current) {
        videoRef.current.src = "";
        videoRef.current = null;
      }
    };
  }, [src, durationMs, frameCount, frameHeight]);

  return {
    frames,
    isLoading,
    error,
  };
}


================================================
FILE: apps/client/src/features/recording/index.ts
================================================
export { RecordingButton } from "./RecordingButton";
export { RecordingsList } from "./RecordingsList";
export { VideoPlaybackDialog } from "./VideoPlaybackDialog";


================================================
FILE: apps/client/src/features/role/RoleDialogs.tsx
================================================
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import {
  CreateRolePayload,
  Role,
  UpdateRolePayload,
} from "@/entities/role/types";
import { FC, useState } from "react";
import { RoleForm } from "./RoleForm";
import { Button } from "@/components/ui/button";
import { DialogFooter } from "@/components/ui/dialog";
import { useRoleStore } from "@/entities/role/store";

// Add Role Dialog
export const AddRoleDialog: FC<{
  isOpen: boolean;
  onOpenChange: (open: boolean) => void;
}> = ({ isOpen, onOpenChange }) => {
  const [isSubmitting, setIsSubmitting] = useState(false);
  const addRole = useRoleStore((state) => state.addRole);

  const handleSubmit = async (data: CreateRolePayload | UpdateRolePayload) => {
    setIsSubmitting(true);
    try {
      await addRole(data as CreateRolePayload);
      onOpenChange(false);
    } catch (e) {
      console.error("Failed to add role from component", e);
    } finally {
      setIsSubmitting(false);
    }
  };

  return (
    <Dialog open={isOpen} onOpenChange={onOpenChange}>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Add New Role</DialogTitle>
        </DialogHeader>
        <RoleForm
          onSubmit={handleSubmit}
          onCancel={() => onOpenChange(false)}
          isSubmitting={isSubmitting}
        />
      </DialogContent>
    </Dialog>
  );
};

// Edit Role Dialog
export const EditRoleDialog: FC<{
  role: Role | null;
  isOpen: boolean;
  onOpenChange: (open: boolean) => void;
}> = ({ role, isOpen, onOpenChange }) => {
  const [isSubmitting, setIsSubmitting] = useState(false);
  const editRole = useRoleStore((state) => state.editRole);

  if (!role) return null;

  const handleSubmit = async (data: CreateRolePayload | UpdateRolePayload) => {
    setIsSubmitting(true);
    try {
      await editRole(role.id, data as UpdateRolePayload);
      onOpenChange(false);
    } catch (e) {
      console.error("Failed to edit role from component", e);
    } finally {
      setIsSubmitting(false);
    }
  };

  return (
    <Dialog open={isOpen} onOpenChange={onOpenChange}>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Edit Role</DialogTitle>
        </DialogHeader>
        <RoleForm
          role={role}
          onSubmit={handleSubmit}
          onCancel={() => onOpenChange(false)}
          isSubmitting={isSubmitting}
        />
      </DialogContent>
    </Dialog>
  );
};

// Delete Role Dialog
export const DeleteRoleDialog: FC<{
  roleId: number | null;
  isOpen: boolean;
  onOpenChange: (open: boolean) => void;
}> = ({ roleId, isOpen, onOpenChange }) => {
  const removeRole = useRoleStore((state) => state.removeRole);

  const handleDelete = async () => {
    if (roleId) {
      await removeRole(roleId);
      onOpenChange(false);
    }
  };

  return (
    <Dialog open={isOpen} onOpenChange={onOpenChange}>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Are you sure?</DialogTitle>
          <DialogDescription>
            This action cannot be undone. This will permanently delete the role.
          </DialogDescription>
        </DialogHeader>
        <DialogFooter>
          <Button variant='outline' onClick={() => onOpenChange(false)}>
            Cancel
          </Button>
          <Button variant='destructive' onClick={handleDelete}>
            Delete
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
};


================================================
FILE: apps/client/src/features/role/RoleForm.tsx
================================================
import { Button } from "@/components/ui/button";
import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
} from "@/components/ui/command";
import { DialogFooter } from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover";
import { usePermissionStore } from "@/entities/permission/store";
import { Permission } from "@/entities/permission/types";
import {
  CreateRolePayload,
  Role,
  UpdateRolePayload,
} from "@/entities/role/types";
import { cn } from "@/lib/utils";
import { Check, ChevronsUpDown } from "lucide-react";
import { FC, useEffect, useState } from "react";

interface RoleFormProps {
  role?: Role;
  onSubmit: (data: CreateRolePayload | UpdateRolePayload) => void;
  onCancel: () => void;
  isSubmitting: boolean;
}

export const RoleForm: FC<RoleFormProps> = ({
  role,
  onSubmit,
  onCancel,
  isSubmitting,
}) => {
  const [name, setName] = useState(role?.name || "");
  const [description, setDescription] = useState(role?.description || "");
  const [selectedPermissions, setSelectedPermissions] = useState<Permission[]>(
    role?.permissions || [],
  );
  const [error, setError] = useState("");
  const [isPermissionsPopoverOpen, setPermissionsPopoverOpen] = useState(false);
  const [popoverContainer, setPopoverContainer] = useState<HTMLDivElement | null>(null);

  const { permissions, fetchPermissions } = usePermissionStore();

  useEffect(() => {
    fetchPermissions();
  }, [fetchPermissions]);

  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    if (!name) {
      setError("Please enter a role name.");
      return;
    }
    setError("");
    const payload: CreateRolePayload | UpdateRolePayload = {
      name,
      description: description || undefined,
      permission_ids: selectedPermissions.map((p) => p.id),
    };
    onSubmit(payload);
  };

  return (
    <form onSubmit={handleSubmit}>
      <div className='grid gap-4 py-4'>
        <div className='grid grid-cols-4 items-center gap-4'>
          <Label htmlFor='name' className='text-right'>
            Role Name
          </Label>
          <Input
            id='name'
            value={name}
            onChange={(e) => setName(e.target.value)}
            className='col-span-3'
          />
        </div>
        <div className='grid grid-cols-4 items-center gap-4'>
          <Label htmlFor='description' className='text-right'>
            Description
          </Label>
          <Input
            id='description'
            value={description}
            onChange={(e) => setDescription(e.target.value)}
            className='col-span-3'
          />
        </div>
        <div className='grid grid-cols-4 items-center gap-4'>
          <Label className='text-right'>Permissions</Label>
          <div className='col-span-3' ref={(node) => setPopoverContainer(node)}>
            <Popover
              open={isPermissionsPopoverOpen}
              onOpenChange={setPermissionsPopoverOpen}
            >
              <PopoverTrigger asChild>
                <Button variant='outline' role='combobox' className='w-full justify-between'>
                  {selectedPermissions.length > 0
                    ? `${selectedPermissions.length} selected`
                    : "Select permissions..."}
                  <ChevronsUpDown className='ml-2 h-4 w-4 shrink-0 opacity-50' />
                </Button>
              </PopoverTrigger>
              <PopoverContent
                container={popoverContainer}
                className='w-[--radix-popover-trigger-width] p-0'
              >
                <Command>
                  <CommandInput placeholder='Search permissions...' />
                  <CommandList>
                    <CommandEmpty>No permissions found.</CommandEmpty>
                    <CommandGroup>
                      {permissions.map((permission) => (
                        <CommandItem
                          key={permission.id}
                          value={permission.name}
                          onSelect={() => {
                            setSelectedPermissions((current) =>
                              current.some((p) => p.id === permission.id)
                                ? current.filter((p) => p.id !== permission.id)
                                : [...current, permission],
                            );
                          }}
                        >
                          <Check
                            className={cn(
                              "mr-2 h-4 w-4",
                              selectedPermissions.some(
                                (p) => p.id === permission.id,
                              )
                                ? "opacity-100"
                                : "opacity-0",
                            )}
                          />
                          {permission.name}
                        </CommandItem>
                      ))}
                    </CommandGroup>
                  </CommandList>
                </Command>
              </PopoverContent>
            </Popover>
          </div>
        </div>
        {error && (
          <p className='text-sm text-destructive col-span-4 text-center'>
            {error}
          </p>
        )}
      </div>
      <DialogFooter>
        <Button type='button' variant='outline' onClick={onCancel}>
          Cancel
        </Button>
        <Button type='submit' disabled={isSubmitting}>
          {isSubmitting ? "Saving..." : "Save"}
        </Button>
      </DialogFooter>
    </form>
  );
};


================================================
FILE: apps/client/src/features/ros2/Ros2Dashboard.tsx
================================================
import { Link } from "react-router";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";

export function Ros2Dashboard() {
  return (
    <div className='flex flex-1 flex-col gap-4'>
      <Card>
        <CardHeader>
          <CardTitle>ROS2</CardTitle>
          <CardDescription>
            rosbridge WebSocket is connected. Use the flow editor to wire ROS2 events and
            commands, or adjust the bridge URL in integrations.
          </CardDescription>
        </CardHeader>
        <CardContent className='flex flex-wrap gap-2'>
          <Button asChild variant='default'>
            <Link to='/flow'>Open flow</Link>
          </Button>
          <Button asChild variant='outline'>
            <Link to='/settings/integration'>Integrations</Link>
          </Button>
        </CardContent>
      </Card>
    </div>
  );
}


================================================
FILE: apps/client/src/features/rtc/AudioLevelBar.tsx
================================================
import { useEffect, useRef, useState } from "react";
import { cn } from "@/lib/utils";

type AudioLevelBarProps = {
  stream: MediaStream | null;
  className?: string;
};

export function AudioLevelBar({ stream, className }: AudioLevelBarProps) {
  const [level, setLevel] = useState(0);
  const rafRef = useRef<number | null>(null);
  const audioContextRef = useRef<AudioContext | null>(null);
  const analyserRef = useRef<AnalyserNode | null>(null);
  const sourceRef = useRef<MediaStreamAudioSourceNode | null>(null);

  const stopAnalyser = () => {
    if (rafRef.current !== null) {
      cancelAnimationFrame(rafRef.current);
      rafRef.current = null;
    }
    if (sourceRef.current) {
      try {
        sourceRef.current.disconnect();
      } catch (err) {
        console.error("Error disconnecting audio source", err);
      }
      sourceRef.current = null;
    }
    if (analyserRef.current) {
      try {
        analyserRef.current.disconnect();
      } catch (err) {
        console.error("Error disconnecting analyser", err);
      }
      analyserRef.current = null;
    }
  };

  useEffect(() => {
    stopAnalyser();

    if (!stream || stream.getAudioTracks().length === 0) {
      setLevel(0);
      return;
    }

    let cancelled = false;

    const setupAnalyser = async () => {
      const audioContext =
        audioContextRef.current ??
        new AudioContext({ latencyHint: "interactive" });
      audioContextRef.current = audioContext;

      if (audioContext.state === "suspended") {
        try {
          await audioContext.resume();
        } catch (err) {
          console.error("Unable to resume AudioContext", err);
        }
      }

      const sourceNode = audioContext.createMediaStreamSource(stream);
      const analyserNode = audioContext.createAnalyser();
      analyserNode.fftSize = 2048;
      analyserNode.smoothingTimeConstant = 0.7;

      sourceNode.connect(analyserNode);
      analyserRef.current = analyserNode;
      sourceRef.current = sourceNode;

      const buffer = new Float32Array(analyserNode.fftSize);

      const updateLevel = () => {
        if (cancelled || !analyserRef.current) {
          return;
        }

        analyserRef.current.getFloatTimeDomainData(buffer);

        let sumSquares = 0;
        for (let i = 0; i < buffer.length; i++) {
          const sample = buffer[i];
          sumSquares += sample * sample;
        }

        const rms = Math.sqrt(sumSquares / buffer.length) || 0;
        const db = 20 * Math.log10(rms || 1e-8);
        const minDb = -70;
        const normalized = Math.min(Math.max((db - minDb) / -minDb, 0), 1);

        setLevel(normalized);
        rafRef.current = requestAnimationFrame(updateLevel);
      };

      updateLevel();
    };

    setupAnalyser();

    return () => {
      cancelled = true;
      stopAnalyser();
    };
  }, [stream]);

  useEffect(() => {
    return () => {
      stopAnalyser();
      if (audioContextRef.current) {
        audioContextRef.current.close().catch((err) => {
          console.error("Error closing AudioContext", err);
        });
        audioContextRef.current = null;
      }
    };
  }, []);

  return (
    <div className={cn("h-10 w-full overflow-hidden bg-black/50", className)}>
      <div
        className='h-full bg-white transition-[width] duration-75 ease-linear'
        style={{ width: `${Math.round(level * 100)}%` }}
      />
    </div>
  );
}


================================================
FILE: apps/client/src/features/rtc/StreamReceiver.tsx
================================================
import { useEffect, useRef, useMemo } from "react";
import { Button } from "@/components/ui/button";
import { useWebRTC } from "./WebRTCProvider";
import { WebRTCManager } from "./rtc";
import { AudioLevelBar } from "./AudioLevelBar";

type StreamReceiverProps = {
  topic: string;
  streamType: "audio" | "video";
};

export function StreamReceiver({ topic, streamType }: StreamReceiverProps) {
  const mediaRef = useRef<HTMLMediaElement>(null);
  const { rtcManager, streams, audioStreamCount, videoStreamCount } =
    useWebRTC();

  const streamInfo = useMemo(() => {
    return streams.get(topic) || null;
  }, [streams, topic]);

  const stream = streamInfo?.stream || null;

  useEffect(() => {
    if (stream && mediaRef.current) {
      mediaRef.current.srcObject = stream;
      mediaRef.current
        .play()
        .catch((e) => console.error("Media play failed:", e));
    }
  }, [stream]);

  const handleSubscribe = () => {
    if (rtcManager) {
      rtcManager.subscribe(topic, streamType);
    } else {
      console.error("RTCManager is not ready.");
    }
  };

  const isLimitReached =
    (streamType === "audio" &&
      audioStreamCount >= WebRTCManager.MAX_AUDIO_STREAMS) ||
    (streamType === "video" &&
      videoStreamCount >= WebRTCManager.MAX_VIDEO_STREAMS);

  if (!stream) {
    return (
      <Button
        className='w-full'
        variant={"outline"}
        onClick={handleSubscribe}
        disabled={isLimitReached}
      >
        {streamType === "audio" ? "Play Audio" : "Play Video"}
        {isLimitReached && " (Limited)"}
      </Button>
    );
  }

  if (streamType === "video") {
    return (
      <video
        ref={mediaRef as React.RefObject<HTMLVideoElement>}
        className='w-full bg-black'
        autoPlay
        playsInline
        controls
        muted
      />
    );
  }

  if (streamType === "audio") {
    return (
      <div className='flex w-full flex-col gap-3 rounded-md bg-black/60 p-1'>
        <audio
          ref={mediaRef as React.RefObject<HTMLAudioElement>}
          className='w-full hidden'
          autoPlay
          playsInline
          controls
        />
        <AudioLevelBar stream={stream} />
      </div>
    );
  }

  return null;
}


================================================
FILE: apps/client/src/features/rtc/WebRTCProvider.tsx
================================================
import {
  createContext,
  useContext,
  useEffect,
  useRef,
  useState,
  ReactNode,
  useMemo,
} from "react";
import { toast } from "sonner";
import { useWebSocket } from "../ws/WebSocketProvider";
import { WebRTCManager } from "./rtc";
import { isDemoMode } from "@/shared/demo";
import { WebSocketChannel } from "../ws/ws";
import {
  ensureIceServers,
  onCredentialChange,
  onTurnCredentialError,
  stopAutoRenewal,
  DEFAULT_ICE_SERVERS,
} from "./turnService";

type StreamInfo = {
  stream: MediaStream;
  type: "audio" | "video";
};

type WebRTCContextType = {
  rtcManager: WebRTCManager | null;
  streams: Map<string, StreamInfo>;
  audioStreamCount: number;
  videoStreamCount: number;
};

const WebRTCContext = createContext<WebRTCContextType | undefined>(undefined);

export function useWebRTC() {
  const context = useContext(WebRTCContext);
  if (!context) {
    throw new Error("useWebRTC must be used within a WebRTCProvider");
  }
  return context;
}

type WebRTCProviderProps = {
  children: ReactNode;
};

export function WebRTCProvider({ children }: WebRTCProviderProps) {
  const { wsManager, isConnected } = useWebSocket();
  const [rtcManager, setRtcManager] = useState<WebRTCManager | null>(null);
  const [streams, setStreams] = useState<Map<string, StreamInfo>>(new Map());
  const [demoMode] = useState(isDemoMode);
  const [iceServers, setIceServers] = useState<RTCIceServer[] | null>(null);
  const lastTurnErrorRef = useRef<string | null>(null);

  // Load ICE servers: try localStorage → server DB → Supabase → STUN fallback
  useEffect(() => {
    if (demoMode) {
      setIceServers(DEFAULT_ICE_SERVERS);
      return;
    }

    let cancelled = false;

    ensureIceServers().then((servers) => {
      if (!cancelled) setIceServers(servers);
    });

    const unsubscribe = onCredentialChange((servers) => {
      if (!cancelled) setIceServers(servers);
    });

    return () => {
      cancelled = true;
      unsubscribe();
      stopAutoRenewal();
    };
  }, [demoMode, isConnected]);

  useEffect(() => {
    if (demoMode) return;

    return onTurnCredentialError((error) => {
      const fingerprint = `${error.code}:${error.message}:${error.usage?.periodEnd ?? ""}`;
      if (lastTurnErrorRef.current === fingerprint) return;

      lastTurnErrorRef.current = fingerprint;

      if (error.code === "TURN_QUOTA_EXCEEDED") {
        toast.error("TURN relay quota exceeded", {
          description:
            error.usage?.periodEnd
              ? `1 GB monthly limit reached. Quota resets ${new Date(
                  error.usage.periodEnd,
                ).toLocaleString()}.`
              : "1 GB monthly limit reached for TURN relay traffic.",
        });
        return;
      }

      if (error.code === "TURN_USAGE_UNAVAILABLE") {
        toast.error("TURN usage check unavailable", {
          description: "TURN relay usage could not be verified, so the app is using STUN only.",
        });
      }
    });
  }, [demoMode]);

  // Create WebRTCManager when connected and ICE servers are ready
  useEffect(() => {
    if (demoMode) {
      setRtcManager(null);
      setStreams(new Map());
      return;
    }

    if (isConnected && wsManager && iceServers) {
      if (!(wsManager instanceof WebSocketChannel)) {
        setRtcManager(null);
        setStreams(new Map());
        return;
      }

      console.log(
        "WebSocket connected, initializing WebRTCManager with",
        iceServers.length,
        "ICE servers:",
        iceServers.map((s) => ({
          urls: s.urls,
          hasCredentials: !!s.username,
        })),
      );

      const onStreamsChanged = (newStreams: Map<string, StreamInfo>) => {
        setStreams(newStreams);
      };

      const manager = new WebRTCManager(wsManager, onStreamsChanged, {
        iceServers,
      });
      manager.connect();
      setRtcManager(manager);

      return () => {
        manager.close();
        setRtcManager(null);
      };
    }
  }, [demoMode, isConnected, wsManager, iceServers]);

  const { audioStreamCount, videoStreamCount } = useMemo(() => {
    const counts = { audioStreamCount: 0, videoStreamCount: 0 };
    for (const streamInfo of streams.values()) {
      if (streamInfo.type === "audio") {
        counts.audioStreamCount++;
      } else {
        counts.videoStreamCount++;
      }
    }
    return counts;
  }, [streams]);

  const value = demoMode
    ? {
        rtcManager: null,
        streams: new Map(),
        audioStreamCount: 0,
        videoStreamCount: 0,
      }
    : {
        rtcManager,
        streams,
        audioStreamCount,
        videoStreamCount,
      };

  return (
    <WebRTCContext.Provider value={value}>{children}</WebRTCContext.Provider>
  );
}


================================================
FILE: apps/client/src/features/rtc/captureFrame.ts
================================================
/**
 * Captures the current frame from a live MediaStream as a JPEG File.
 *
 * Creates a temporary offscreen <video> element, draws the current frame
 * to a <canvas>, and exports it as a JPEG blob. The original stream is
 * not affected (MediaStream reference is shared, not cloned).
 */
export async function captureFrameFromStream(
  stream: MediaStream,
): Promise<File> {
  return new Promise((resolve, reject) => {
    const video = document.createElement("video");
    video.srcObject = stream;
    video.muted = true;
    video.playsInline = true;

    const cleanup = () => {
      video.pause();
      video.srcObject = null;
    };

    const timeout = setTimeout(() => {
      cleanup();
      reject(new Error("Frame capture timed out"));
    }, 5000);

    video.onloadeddata = () => {
      clearTimeout(timeout);
      try {
        const canvas = document.createElement("canvas");
        canvas.width = video.videoWidth;
        canvas.height = video.videoHeight;

        const ctx = canvas.getContext("2d");
        if (!ctx) {
          cleanup();
          reject(new Error("Failed to get canvas context"));
          return;
        }

        ctx.drawImage(video, 0, 0, canvas.width, canvas.height);

        canvas.toBlob(
          (blob) => {
            cleanup();
            if (!blob) {
              reject(new Error("Failed to capture frame"));
              return;
            }
            const file = new File([blob], `frame-${Date.now()}.jpg`, {
              type: "image/jpeg",
            });
            resolve(file);
          },
          "image/jpeg",
          0.85,
        );
      } catch (err) {
        cleanup();
        reject(err);
      }
    };

    video.onerror = () => {
      clearTimeout(timeout);
      cleanup();
      reject(new Error("Failed to load video stream for capture"));
    };

    video.play().catch((err) => {
      clearTimeout(timeout);
      cleanup();
      reject(new Error(`Failed to play video for capture: ${err.message}`));
    });
  });
}


================================================
FILE: apps/client/src/features/rtc/rtc.ts
================================================
import { WebSocketChannel, WebSocketMessage } from "../ws/ws";

export interface WebRTCConfig {
  iceServers: RTCIceServer[];
}

export class WebRTCManager {
  private pc: RTCPeerConnection;
  private signaling: WebSocketChannel;
  public streams: Map<string, { stream: MediaStream; type: "audio" | "video" }>;
  private onStreamsChanged: (
    streams: Map<string, { stream: MediaStream; type: "audio" | "video" }>,
  ) => void;
  private pendingTopics: Array<{ topic: string; type: "audio" | "video" }>;
  private candidateQueue: RTCIceCandidateInit[] = [];

  public static readonly MAX_AUDIO_STREAMS = 2;
  public static readonly MAX_VIDEO_STREAMS = 4;

  constructor(
    signaling: WebSocketChannel,
    onStreamsChanged: (
      streams: Map<string, { stream: MediaStream; type: "audio" | "video" }>,
    ) => void,
    config?: WebRTCConfig,
  ) {
    this.signaling = signaling;
    this.streams = new Map();
    this.pendingTopics = [];
    this.onStreamsChanged = onStreamsChanged;
    const iceServers = config?.iceServers ?? [
      { urls: "stun:stun.l.google.com:19302" },
    ];
    this.pc = new RTCPeerConnection({ iceServers });
    this.setupEvents();
  }

  private setupEvents(): void {
    this.signaling.addMessageListener(this.handleSignalingMessage);

    this.pc.oniceconnectionstatechange = () => {
      console.log("[WebRTC] ICE connection state:", this.pc.iceConnectionState);
    };

    this.pc.onconnectionstatechange = () => {
      console.log("[WebRTC] Connection state:", this.pc.connectionState);
    };

    this.pc.onicegatheringstatechange = () => {
      console.log("[WebRTC] ICE gathering state:", this.pc.iceGatheringState);
    };

    this.pc.onicecandidate = (event) => {
      if (event.candidate) {
        const type = event.candidate.type ?? "unknown";
        console.log(`[WebRTC] Local candidate [${type}]:`, event.candidate.candidate);
        this.signaling.send({
          type: "candidate",
          payload: event.candidate.toJSON(),
        });
      } else {
        console.log("[WebRTC] ICE gathering complete");
      }
    };

    this.pc.ontrack = (event) => {
      const pending = this.pendingTopics.shift();
      if (!pending) {
        return;
      }
      const { topic, type } = pending;

      const track = event.track;
      const stream = new MediaStream([track]);

      console.log(` "${topic}": ${track.kind} : ${stream.id}`);

      if (!this.streams.has(topic)) {
        this.streams.set(topic, { stream, type });
        this.onStreamsChanged(new Map(this.streams));
      }
    };
  }

  private handleSignalingMessage = async (msg: WebSocketMessage) => {
    try {
      switch (msg.type) {
        case "answer":
          await this.pc.setRemoteDescription(
            new RTCSessionDescription(msg.payload as RTCSessionDescriptionInit),
          );
          this.processCandidateQueue();
          break;

        case "offer": {
          await this.pc.setRemoteDescription(
            new RTCSessionDescription(msg.payload as RTCSessionDescriptionInit),
          );
          const answer = await this.pc.createAnswer();
          await this.pc.setLocalDescription(answer);
          this.signaling.send({
            type: "answer",
            payload: this.pc.localDescription as RTCSessionDescriptionInit,
          });
          this.processCandidateQueue();
          break;
        }

        case "candidate":
          if (msg.payload) {
            const candidateInit = msg.payload as RTCIceCandidateInit;
            if (this.pc.remoteDescription) {
              await this.pc.addIceCandidate(new RTCIceCandidate(candidateInit));
            } else {
              this.candidateQueue.push(candidateInit);
            }
          }
          break;
      }
    } catch (err) {
      console.error("Error handling signaling message:", err);
    }
  };

  private processCandidateQueue = async () => {
    while (this.candidateQueue.length > 0) {
      const candidate = this.candidateQueue.shift();
      if (candidate) {
        try {
          await this.pc.addIceCandidate(candidate);
        } catch (error) {
          console.error("Error processing queued candidate:", error);
        }
      }
    }
  };

  public async connect(): Promise<void> {
    try {
      for (let i = 0; i < WebRTCManager.MAX_AUDIO_STREAMS; i++) {
        this.pc.addTransceiver("audio", { direction: "recvonly" });
      }
      for (let i = 0; i < WebRTCManager.MAX_VIDEO_STREAMS; i++) {
        this.pc.addTransceiver("video", { direction: "recvonly" });
      }

      const offer = await this.pc.createOffer();
      await this.pc.setLocalDescription(offer);

      this.signaling.send({
        type: "offer",
        payload: this.pc.localDescription as RTCSessionDescriptionInit,
      });
    } catch (err) {
      console.error("Error creating initial offer:", err);
    }
  }

  public subscribe(topic: string, streamType: "audio" | "video"): void {
    const currentStreams = Array.from(this.streams.values());
    const audioCount = currentStreams.filter((s) => s.type === "audio").length;
    const videoCount = currentStreams.filter((s) => s.type === "video").length;

    if (
      streamType === "audio" &&
      audioCount >= WebRTCManager.MAX_AUDIO_STREAMS
    ) {
      console.warn("Max audio streams reached. Cannot subscribe.");
      return;
    }

    if (
      streamType === "video" &&
      videoCount >= WebRTCManager.MAX_VIDEO_STREAMS
    ) {
      console.warn("Max video streams reached. Cannot subscribe.");
      return;
    }

    console.log(`Subscribing to topic: ${topic} (${streamType})`);
    this.pendingTopics.push({ topic, type: streamType });

    this.signaling.send({
      type: "subscribe_stream",
      payload: { topic },
    });
  }

  public close(): void {
    this.signaling.send({ type: "hangup", payload: "" });

    this.signaling.removeMessageListener(this.handleSignalingMessage);
    if (this.pc) {
      this.pc.close();
    }
    this.streams.clear();
    this.onStreamsChanged(new Map(this.streams));
  }
}


================================================
FILE: apps/client/src/features/rtc/turnService.ts
================================================
import { supabase } from "@/lib/supabase";
import { getConfigs, updateConfig } from "@/entities/configurations/api";

export interface TurnUsage {
  egressBytes: number;
  ingressBytes: number;
  totalBytes: number;
  quotaBytes: number;
  remainingBytes: number;
  isQuotaExceeded: boolean;
  periodStart: string;
  periodEnd: string;
}

export interface TurnCredentialsResponse {
  iceServers: RTCIceServer[];
  expiresAt: string;
  usage: TurnUsage;
}

export const DEFAULT_ICE_SERVERS: RTCIceServer[] = [
  { urls: "stun:stun.l.google.com:19302" },
];

const TURN_CACHE_KEY = "vessel_turn_credentials";
const RENEWAL_BUFFER_MS = 5 * 60 * 1000; // 5 minutes before expiry

interface CachedCredentials {
  iceServers: RTCIceServer[];
  expiresAt: string;
}

/* ── Credential change pub/sub ── */

type CredentialChangeCallback = (iceServers: RTCIceServer[]) => void;
const listeners = new Set<CredentialChangeCallback>();

export type TurnCredentialErrorCode =
  | "TURN_QUOTA_EXCEEDED"
  | "TURN_USAGE_UNAVAILABLE"
  | "TURN_ISSUE_FAILED";

export class TurnCredentialError extends Error {
  code: TurnCredentialErrorCode;
  status?: number;
  usage?: TurnUsage;

  constructor(
    code: TurnCredentialErrorCode,
    message: string,
    options: { status?: number; usage?: TurnUsage } = {},
  ) {
    super(message);
    this.name = "TurnCredentialError";
    this.code = code;
    this.status = options.status;
    this.usage = options.usage;
  }
}

export function isTurnCredentialError(error: unknown): error is TurnCredentialError {
  return error instanceof TurnCredentialError;
}

type TurnErrorCallback = (error: TurnCredentialError) => void;
const errorListeners = new Set<TurnErrorCallback>();

export function onTurnCredentialError(cb: TurnErrorCallback): () => void {
  errorListeners.add(cb);
  return () => {
    errorListeners.delete(cb);
  };
}

function notifyTurnCredentialError(error: TurnCredentialError): void {
  errorListeners.forEach((cb) => cb(error));
}

function getDefaultUsage(raw: Partial<TurnUsage> = {}): TurnUsage {
  const egressBytes = Number(raw.egressBytes ?? 0);
  const ingressBytes = Number(raw.ingressBytes ?? 0);
  const totalBytes = Number(raw.totalBytes ?? egressBytes + ingressBytes);
  const quotaBytes = Number(raw.quotaBytes ?? 0);
  const remainingBytes = Number(
    raw.remainingBytes ?? Math.max(0, quotaBytes - totalBytes),
  );

  return {
    egressBytes,
    ingressBytes,
    totalBytes,
    quotaBytes,
    remainingBytes,
    isQuotaExceeded: Boolean(
      raw.isQuotaExceeded ?? (quotaBytes > 0 && totalBytes >= quotaBytes),
    ),
    periodStart: raw.periodStart ?? "",
    periodEnd: raw.periodEnd ?? "",
  };
}

function getTurnErrorCode(errorCode?: string): TurnCredentialErrorCode {
  switch (errorCode) {
    case "turn_quota_exceeded":
      return "TURN_QUOTA_EXCEEDED";
    case "turn_usage_unavailable":
      return "TURN_USAGE_UNAVAILABLE";
    default:
      return "TURN_ISSUE_FAILED";
  }
}

async function parseInvokeError(error: unknown): Promise<TurnCredentialError> {
  const context =
    typeof error === "object" && error !== null && "context" in error
      ? Reflect.get(error, "context")
      : null;
  const status =
    typeof context === "object" && context !== null && "status" in context
      ? Number(Reflect.get(context, "status"))
      : undefined;

  let payload: Record<string, unknown> | null = null;
  if (
    typeof context === "object" &&
    context !== null &&
    "json" in context &&
    typeof Reflect.get(context, "json") === "function"
  ) {
    try {
      payload = await (context as Response).clone().json();
    } catch {
      payload = null;
    }
  }

  const rawCode =
    typeof payload?.error === "string"
      ? payload.error
      : typeof payload?.code === "string"
        ? payload.code
        : undefined;
  const message =
    typeof payload?.message === "string"
      ? payload.message
      : typeof payload?.error === "string"
        ? payload.error
        : error instanceof Error
          ? error.message
          : "Failed to fetch TURN credentials";

  return new TurnCredentialError(getTurnErrorCode(rawCode), message, {
    status,
    usage:
      payload && typeof payload.usage === "object" && payload.usage !== null
        ? getDefaultUsage(payload.usage as Partial<TurnUsage>)
        : undefined,
  });
}

function toTurnCredentialError(error: unknown): TurnCredentialError {
  if (isTurnCredentialError(error)) return error;

  if (error instanceof Error) {
    return new TurnCredentialError("TURN_ISSUE_FAILED", error.message);
  }

  return new TurnCredentialError(
    "TURN_ISSUE_FAILED",
    "Failed to fetch TURN credentials",
  );
}

function getTurnErrorSummary(error: TurnCredentialError): string | null {
  if (!error.usage?.quotaBytes) return null;

  const totalGb = (error.usage.totalBytes / 1024 ** 3).toFixed(2);
  const quotaGb = (error.usage.quotaBytes / 1024 ** 3).toFixed(2);
  const resetAt = error.usage.periodEnd
    ? new Date(error.usage.periodEnd).toLocaleString()
    : null;

  return resetAt
    ? `${totalGb} GB / ${quotaGb} GB used. Quota resets ${resetAt}.`
    : `${totalGb} GB / ${quotaGb} GB used this period.`;
}

export function onCredentialChange(cb: CredentialChangeCallback): () => void {
  listeners.add(cb);
  return () => {
    listeners.delete(cb);
  };
}

export function notifyListeners(iceServers: RTCIceServer[]): void {
  listeners.forEach((cb) => cb(iceServers));
}

/* ── Auto-renewal scheduler ── */

let renewalTimer: ReturnType<typeof setTimeout> | null = null;

function scheduleRenewal(expiresAt: string): void {
  stopAutoRenewal();
  const delay = Math.max(
    new Date(expiresAt).getTime() - Date.now() - RENEWAL_BUFFER_MS,
    0,
  );

  renewalTimer = setTimeout(async () => {
    try {
      // Try Supabase edge function first (requires Supabase session)
      const result = await fetchTurnCredentials();
      await saveTurnConfigToServer({
        iceServers: result.iceServers,
        expiresAt: result.expiresAt,
      });
      scheduleRenewal(result.expiresAt);
      notifyListeners(result.iceServers);
    } catch (err) {
      const turnError = toTurnCredentialError(err);
      notifyTurnCredentialError(turnError);

      // Fallback: load from server DB (another session may have renewed)
      try {
        const serverConfig = await loadTurnConfigFromServer();
        if (serverConfig) {
          cacheCredentials({
            iceServers: serverConfig.iceServers,
            expiresAt: serverConfig.expiresAt,
            usage: getDefaultUsage(),
          });
          scheduleRenewal(serverConfig.expiresAt);
          notifyListeners(serverConfig.iceServers);
        } else {
          console.warn(
            "TURN credential auto-renewal failed: no valid credentials available",
            turnError,
          );
        }
      } catch (err) {
        console.warn("TURN credential auto-renewal failed:", err);
      }
    }
  }, delay);
}

export function stopAutoRenewal(): void {
  if (renewalTimer) {
    clearTimeout(renewalTimer);
    renewalTimer = null;
  }
}

/* ── Cache helpers ── */

function getCachedCredentials(): CachedCredentials | null {
  try {
    const stored = localStorage.getItem(TURN_CACHE_KEY);
    if (!stored) return null;

    const cached: CachedCredentials = JSON.parse(stored);
    const expiresAt = new Date(cached.expiresAt).getTime();
    const now = Date.now();

    if (expiresAt - RENEWAL_BUFFER_MS > now) {
      return cached;
    }

    localStorage.removeItem(TURN_CACHE_KEY);
    return null;
  } catch {
    return null;
  }
}

function cacheCredentials(data: TurnCredentialsResponse): void {
  try {
    const cached: CachedCredentials = {
      iceServers: data.iceServers,
      expiresAt: data.expiresAt,
    };
    localStorage.setItem(TURN_CACHE_KEY, JSON.stringify(cached));
  } catch {
    // localStorage unavailable
  }
}

/* ── Server DB helpers ── */

const TURN_CONFIG_KEY = "turn_server_config";

async function loadTurnConfigFromServer(): Promise<CachedCredentials | null> {
  try {
    const response = await getConfigs();
    const entry = response.data.find((c) => c.key === TURN_CONFIG_KEY);
    if (!entry) return null;

    const parsed = JSON.parse(entry.value);
    if (!parsed.iceServers?.length || !parsed.expiresAt) return null;

    const expiresAt = new Date(parsed.expiresAt).getTime();
    if (expiresAt - RENEWAL_BUFFER_MS <= Date.now()) return null;

    return { iceServers: parsed.iceServers, expiresAt: parsed.expiresAt };
  } catch {
    return null;
  }
}

export async function saveTurnConfigToServer(
  data: CachedCredentials,
): Promise<void> {
  try {
    const response = await getConfigs();
    const entry = response.data.find((c) => c.key === TURN_CONFIG_KEY);
    if (!entry) return;

    await updateConfig(entry.id, {
      key: TURN_CONFIG_KEY,
      value: JSON.stringify({
        iceServers: data.iceServers,
        expiresAt: data.expiresAt,
      }),
      enabled: 1,
      description: entry.description,
    });
  } catch (err) {
    console.warn("Failed to save TURN config to server:", err);
  }
}

/* ── Public API ── */

/** Synchronously read cached TURN iceServers, fallback to STUN */
export function getIceServers(): RTCIceServer[] {
  const cached = getCachedCredentials();
  return cached ? cached.iceServers : DEFAULT_ICE_SERVERS;
}

/** Get current credential info (including expired) for UI display */
export function getCredentialInfo(): {
  iceServers: RTCIceServer[];
  expiresAt: string;
  isExpired: boolean;
} | null {
  try {
    const stored = localStorage.getItem(TURN_CACHE_KEY);
    if (!stored) return null;

    const cached: CachedCredentials = JSON.parse(stored);
    if (!cached.iceServers?.length || !cached.expiresAt) return null;

    const isExpired =
      new Date(cached.expiresAt).getTime() - RENEWAL_BUFFER_MS <= Date.now();
    return {
      iceServers: cached.iceServers,
      expiresAt: cached.expiresAt,
      isExpired,
    };
  } catch {
    return null;
  }
}

/** Ensure valid TURN credentials are available (async fetch if needed) */
export async function ensureIceServers(): Promise<RTCIceServer[]> {
  // 1. Check localStorage cache
  const cached = getCachedCredentials();
  if (cached) {
    scheduleRenewal(cached.expiresAt);
    return cached.iceServers;
  }

  // 2. Load from server DB
  const serverConfig = await loadTurnConfigFromServer();
  if (serverConfig) {
    cacheCredentials({
      iceServers: serverConfig.iceServers,
      expiresAt: serverConfig.expiresAt,
      usage: getDefaultUsage(),
    });
    scheduleRenewal(serverConfig.expiresAt);
    return serverConfig.iceServers;
  }

  // 3. Fetch from Supabase edge function + save to server DB
  try {
    const result = await fetchTurnCredentials();
    await saveTurnConfigToServer({
      iceServers: result.iceServers,
      expiresAt: result.expiresAt,
    });
    scheduleRenewal(result.expiresAt);
    return result.iceServers;
  } catch (err) {
    const turnError = toTurnCredentialError(err);
    notifyTurnCredentialError(turnError);
    console.warn("Failed to fetch TURN credentials, falling back to STUN:", turnError);
    return DEFAULT_ICE_SERVERS;
  }
}

/** Fetch fresh TURN credentials from edge function */
export async function fetchTurnCredentials(): Promise<TurnCredentialsResponse> {
  const { data, error } = await supabase.functions.invoke("turn-ice", {
    body: { strip_port_53: true },
  });

  if (error) {
    throw await parseInvokeError(error);
  }

  if (!data?.iceServers) {
    throw new TurnCredentialError(
      getTurnErrorCode(data?.error),
      data?.message ?? data?.error ?? "No iceServers in response",
      {
        usage:
          data?.usage && typeof data.usage === "object"
            ? getDefaultUsage(data.usage as Partial<TurnUsage>)
            : undefined,
      },
    );
  }

  const response: TurnCredentialsResponse = {
    iceServers: data.iceServers,
    expiresAt: data.expiresAt ?? "",
    usage:
      data.usage && typeof data.usage === "object"
        ? getDefaultUsage(data.usage as Partial<TurnUsage>)
        : getDefaultUsage(),
  };
  cacheCredentials(response);
  return response;
}

export function clearTurnCache(): void {
  localStorage.removeItem(TURN_CACHE_KEY);
}

export function getTurnCredentialErrorSummary(error: TurnCredentialError): string | null {
  return getTurnErrorSummary(error);
}


================================================
FILE: apps/client/src/features/sdr/SdrAudioPlayer.tsx
================================================
import { useEffect, useRef, useCallback, useState } from "react";
import { storage } from "@/lib/storage";

const AUDIO_SAMPLE_RATE = 48000;
const BUFFER_SIZE = 4096;
const WATERFALL_HEIGHT = 200;
const FFT_SIZE = 2048;

// SDR-style waterfall color map: black → blue → cyan → green → yellow → red → white
function amplitudeToColor(value: number): [number, number, number] {
  // value: 0-255
  const v = value / 255;
  let r: number, g: number, b: number;

  if (v < 0.2) {
    // black → dark blue
    const t = v / 0.2;
    r = 0;
    g = 0;
    b = Math.floor(t * 180);
  } else if (v < 0.4) {
    // dark blue → cyan
    const t = (v - 0.2) / 0.2;
    r = 0;
    g = Math.floor(t * 255);
    b = 180 + Math.floor(t * 75);
  } else if (v < 0.6) {
    // cyan → green
    const t = (v - 0.4) / 0.2;
    r = 0;
    g = 255;
    b = Math.floor(255 * (1 - t));
  } else if (v < 0.8) {
    // green → yellow
    const t = (v - 0.6) / 0.2;
    r = Math.floor(t * 255);
    g = 255;
    b = 0;
  } else {
    // yellow → red → white
    const t = (v - 0.8) / 0.2;
    r = 255;
    g = Math.floor(255 * (1 - t * 0.6));
    b = Math.floor(t * 200);
  }

  return [r, g, b];
}

interface SdrAudioPlayerProps {
  isPlaying: boolean;
  onInfo?: (info: { samplerate: number; audio_rate: number }) => void;
  onError?: (error: string) => void;
  onDisconnect?: () => void;
}

export function SdrAudioPlayer({
  isPlaying,
  onInfo,
  onError,
  onDisconnect,
}: SdrAudioPlayerProps) {
  const wsRef = useRef<WebSocket | null>(null);
  const audioCtxRef = useRef<AudioContext | null>(null);
  const analyserRef = useRef<AnalyserNode | null>(null);
  const bufferQueueRef = useRef<Int16Array[]>([]);
  const waterfallRef = useRef<HTMLCanvasElement>(null);
  const animFrameRef = useRef<number>(0);
  const [level, setLevel] = useState(0);

  const cleanup = useCallback(() => {
    if (animFrameRef.current) {
      cancelAnimationFrame(animFrameRef.current);
      animFrameRef.current = 0;
    }
    if (wsRef.current) {
      wsRef.current.close();
      wsRef.current = null;
    }
    if (audioCtxRef.current) {
      audioCtxRef.current.close();
      audioCtxRef.current = null;
    }
    analyserRef.current = null;
    bufferQueueRef.current = [];
    setLevel(0);
  }, []);

  useEffect(() => {
    if (!isPlaying) {
      cleanup();
      return;
    }

    const serverUrl = storage.getServerUrl();
    if (!serverUrl) {
      onError?.("Server URL not configured");
      return;
    }

    const wsUrl = serverUrl.replace(/^http/, "ws") + "/api/sdr/audio";
    const token = storage.getToken();
    const ws = new WebSocket(
      token ? `${wsUrl}?token=${encodeURIComponent(token)}` : wsUrl,
    );
    ws.binaryType = "arraybuffer";
    wsRef.current = ws;

    const audioCtx = new AudioContext({ sampleRate: AUDIO_SAMPLE_RATE });
    audioCtxRef.current = audioCtx;

    const analyser = audioCtx.createAnalyser();
    analyser.fftSize = FFT_SIZE;
    analyser.smoothingTimeConstant = 0.3;
    analyserRef.current = analyser;

    const scriptNode = audioCtx.createScriptProcessor(BUFFER_SIZE, 1, 1);
    scriptNode.onaudioprocess = (e) => {
      const output = e.outputBuffer.getChannelData(0);
      const queue = bufferQueueRef.current;

      let written = 0;
      while (written < output.length && queue.length > 0) {
        const chunk = queue[0];
        const remaining = output.length - written;
        const toWrite = Math.min(remaining, chunk.length);

        for (let i = 0; i < toWrite; i++) {
          output[written + i] = chunk[i] / 32768.0;
        }
        written += toWrite;

        if (toWrite >= chunk.length) {
          queue.shift();
        } else {
          queue[0] = chunk.slice(toWrite);
        }
      }

      for (let i = written; i < output.length; i++) {
        output[i] = 0;
      }
    };

    scriptNode.connect(analyser);
    analyser.connect(audioCtx.destination);

    // Frequency data for waterfall
    const freqBins = analyser.frequencyBinCount;
    const dataArray = new Uint8Array(freqBins);

    const drawWaterfall = () => {
      if (!analyserRef.current) return;
      analyserRef.current.getByteFrequencyData(dataArray);

      // Calculate level
      let sum = 0;
      for (let i = 0; i < dataArray.length; i++) {
        sum += dataArray[i];
      }
      setLevel(sum / dataArray.length / 255);

      // Draw waterfall
      const canvas = waterfallRef.current;
      if (canvas) {
        const ctx = canvas.getContext("2d", { willReadFrequently: true });
        if (ctx) {
          const w = canvas.width;
          const h = canvas.height;

          // Scroll existing content down by 1 pixel
          const existing = ctx.getImageData(0, 0, w, h - 1);
          ctx.putImageData(existing, 0, 1);

          // Draw new FFT line at top row
          const lineData = ctx.createImageData(w, 1);
          const pixels = lineData.data;

          for (let x = 0; x < w; x++) {
            // Map canvas x position to frequency bin
            const binIndex = Math.floor((x / w) * freqBins);
            const value = dataArray[Math.min(binIndex, freqBins - 1)];
            const [r, g, b] = amplitudeToColor(value);
            const idx = x * 4;
            pixels[idx] = r;
            pixels[idx + 1] = g;
            pixels[idx + 2] = b;
            pixels[idx + 3] = 255;
          }

          ctx.putImageData(lineData, 0, 0);
        }
      }

      animFrameRef.current = requestAnimationFrame(drawWaterfall);
    };
    animFrameRef.current = requestAnimationFrame(drawWaterfall);

    ws.onmessage = (event) => {
      if (typeof event.data === "string") {
        const msg = JSON.parse(event.data);
        if (msg.type === "info") {
          onInfo?.({
            samplerate: msg.samplerate,
            audio_rate: msg.audio_rate,
          });
        } else if (msg.error) {
          onError?.(msg.error);
        }
        return;
      }

      // Binary: int16 PCM samples
      const pcmData = new Int16Array(event.data);
      bufferQueueRef.current.push(pcmData);

      // Prevent buffer from growing too large (drop oldest)
      while (bufferQueueRef.current.length > 20) {
        bufferQueueRef.current.shift();
      }
    };

    ws.onerror = () => {
      onError?.("WebSocket connection error");
    };

    ws.onclose = () => {
      onDisconnect?.();
    };

    return () => {
      scriptNode.disconnect();
      cleanup();
    };
  }, [isPlaying, cleanup, onInfo, onError, onDisconnect]);

  return (
    <div className="flex flex-col gap-2">
      {/* Waterfall display */}
      <div className="relative rounded overflow-hidden border border-border">
        <canvas
          ref={waterfallRef}
          width={800}
          height={WATERFALL_HEIGHT}
          className="w-full bg-black"
          style={{ height: `${WATERFALL_HEIGHT}px`, imageRendering: "pixelated" }}
        />
        {/* Frequency axis labels */}
        <div className="absolute bottom-0 left-0 right-0 flex justify-between px-1 py-0.5 text-[10px] text-white/60 bg-black/40">
          <span>0 Hz</span>
          <span>{AUDIO_SAMPLE_RATE / 4 / 1000} kHz</span>
          <span>{AUDIO_SAMPLE_RATE / 2 / 1000} kHz</span>
        </div>
      </div>
      <div className="text-xs text-muted-foreground">
        Level: {(level * 100).toFixed(0)}%
      </div>
    </div>
  );
}


================================================
FILE: apps/client/src/features/sdr/SdrDashboard.tsx
================================================
import { useCallback, useEffect, useState } from "react";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Badge } from "@/components/ui/badge";
import { Radio, Play, Square, Loader2 } from "lucide-react";
import { SdrAudioPlayer } from "./SdrAudioPlayer";
import * as sdrApi from "./api";

export function SdrDashboard() {
  const [frequencyMhz, setFrequencyMhz] = useState("100.0");
  const [samplerate, setSamplerate] = useState<number | null>(null);
  const [isPlaying, setIsPlaying] = useState(false);
  const [isSettingFreq, setIsSettingFreq] = useState(false);
  const [streamInfo, setStreamInfo] = useState<{
    samplerate: number;
    audio_rate: number;
  } | null>(null);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    sdrApi
      .getSamplerate()
      .then((res) => {
        if (res.data.samplerate) {
          setSamplerate(res.data.samplerate);
        }
      })
      .catch(() => {});
  }, []);

  const handleSetFrequency = async () => {
    const freqHz = parseFloat(frequencyMhz) * 1_000_000;
    if (isNaN(freqHz) || freqHz <= 0) {
      setError("Invalid frequency");
      return;
    }
    setIsSettingFreq(true);
    setError(null);
    try {
      await sdrApi.setFrequency(freqHz);
    } catch (err) {
      setError(
        err instanceof Error ? err.message : "Failed to set frequency",
      );
    } finally {
      setIsSettingFreq(false);
    }
  };

  const handleToggleAudio = () => {
    setError(null);
    setIsPlaying((prev) => !prev);
  };

  const handleInfo = useCallback(
    (info: { samplerate: number; audio_rate: number }) => {
      setStreamInfo(info);
      setSamplerate(info.samplerate);
    },
    [],
  );

  const handleError = useCallback((err: string) => {
    setError(err);
    setIsPlaying(false);
  }, []);

  const handleDisconnect = useCallback(() => {
    setIsPlaying(false);
  }, []);

  return (
    <div className="flex flex-1 flex-col gap-4 p-4">
      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
        {/* Frequency Control */}
        <Card>
          <CardHeader>
            <CardDescription>Tuner</CardDescription>
            <CardTitle className="flex items-center gap-2">
              <Radio className="h-5 w-5 text-purple-500" />
              Frequency Control
            </CardTitle>
          </CardHeader>
          <CardContent className="flex flex-col gap-4">
            <div className="flex flex-col gap-2">
              <Label htmlFor="frequency">Frequency (MHz)</Label>
              <div className="flex gap-2">
                <Input
                  id="frequency"
                  type="number"
                  step="0.001"
                  value={frequencyMhz}
                  onChange={(e) => setFrequencyMhz(e.target.value)}
                  placeholder="100.0"
                  onKeyDown={(e) => {
                    if (e.key === "Enter") handleSetFrequency();
                  }}
                />
                <Button
                  onClick={handleSetFrequency}
                  disabled={isSettingFreq}
                  className="shrink-0"
                >
                  {isSettingFreq ? (
                    <Loader2 className="h-4 w-4 animate-spin" />
                  ) : (
                    "Set"
                  )}
                </Button>
              </div>
            </div>
          </CardContent>
        </Card>

        {/* Status */}
        <Card>
          <CardHeader>
            <CardDescription>RTL-SDR</CardDescription>
            <CardTitle>Status</CardTitle>
          </CardHeader>
          <CardContent className="flex flex-col gap-3">
            <div className="flex items-center justify-between">
              <span className="text-sm text-muted-foreground">
                Sample Rate
              </span>
              <Badge variant="secondary">
                {samplerate
                  ? `${(samplerate / 1_000_000).toFixed(2)} MSps`
                  : "N/A"}
              </Badge>
            </div>
            {streamInfo && (
              <div className="flex items-center justify-between">
                <span className="text-sm text-muted-foreground">
                  Audio Rate
                </span>
                <Badge variant="secondary">
                  {streamInfo.audio_rate / 1000} kHz
                </Badge>
              </div>
            )}
            <div className="flex items-center justify-between">
              <span className="text-sm text-muted-foreground">Stream</span>
              <Badge variant={isPlaying ? "default" : "outline"}>
                {isPlaying ? "Active" : "Stopped"}
              </Badge>
            </div>
          </CardContent>
        </Card>
      </div>

      {/* Audio Stream */}
      <Card>
        <CardHeader>
          <CardDescription>FM Audio</CardDescription>
          <CardTitle className="flex items-center justify-between">
            <span>Audio Stream</span>
            <Button
              size="sm"
              variant={isPlaying ? "destructive" : "default"}
              onClick={handleToggleAudio}
            >
              {isPlaying ? (
                <>
                  <Square className="h-4 w-4 mr-1" /> Stop
                </>
              ) : (
                <>
                  <Play className="h-4 w-4 mr-1" /> Start Audio
                </>
              )}
            </Button>
          </CardTitle>
        </CardHeader>
        <CardContent>
          <SdrAudioPlayer
            isPlaying={isPlaying}
            onInfo={handleInfo}
            onError={handleError}
            onDisconnect={handleDisconnect}
          />
          {error && (
            <p className="text-sm text-destructive mt-2">{error}</p>
          )}
        </CardContent>
      </Card>
    </div>
  );
}


================================================
FILE: apps/client/src/features/sdr/api.ts
================================================
import { apiClient } from "@/shared/api";

export const setFrequency = (frequency: number) =>
  apiClient.post("/sdr/frequency", { frequency });

export const getSamplerate = () =>
  apiClient.get<{ samplerate: number | null }>("/sdr/samplerate");

export const startStream = () => apiClient.post("/sdr/start");

export const stopStream = () => apiClient.post("/sdr/stop");


================================================
FILE: apps/client/src/features/search/search-form.tsx
================================================
import { Search } from "lucide-react";

import { Label } from "@/components/ui/label";
import {
  SidebarGroup,
  SidebarGroupContent,
  SidebarInput,
} from "@/components/ui/sidebar";

export function SearchForm({ ...props }: React.ComponentProps<"form">) {
  return (
    <form {...props}>
      <SidebarGroup className="py-0">
        <SidebarGroupContent className="relative">
          <Label htmlFor="search" className="sr-only">
            Search
          </Label>
          <SidebarInput id="search" placeholder="Search..." className="pl-8" />
          <Search className="pointer-events-none absolute top-1/2 left-2 size-4 -translate-y-1/2 opacity-50 select-none" />
        </SidebarGroupContent>
      </SidebarGroup>
    </form>
  );
}


================================================
FILE: apps/client/src/features/server-resource/resourceUsage.tsx
================================================
import {
  Card,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { useCallback, useEffect, useState } from "react";
import { useWebSocket, useWebSocketMessage } from "../ws/WebSocketProvider";
import { WebSocketMessage } from "../ws/ws";

export default function ResourceUsage() {
  const { wsManager } = useWebSocket();
  const [info, setInfo] = useState({
    cpu_usage: 0,
    memory_usage: 0,
  });

  useEffect(() => {
    if (!wsManager) return;

    const requestServerInfo = () => {
      wsManager.send({
        type: "get_server",
        payload: {},
      });
    };

    requestServerInfo();
    const intervalId = setInterval(requestServerInfo, 2000);

    return () => {
      clearInterval(intervalId);
    };
  }, [wsManager]);

  const handleMessage = useCallback((msg: WebSocketMessage) => {
    try {
      if (msg.type === "get_server") {
        setInfo({
          ...(msg.payload as { cpu_usage: number; memory_usage: number }),
        });
      }
    } catch (err) {
      console.error("Error handling signaling message:", err);
    }
  }, []);

  useWebSocketMessage(handleMessage);

  return (
    <>
      <Card className='@container/card'>
        <CardHeader>
          <CardDescription>CPU</CardDescription>
          <CardTitle className='text-2xl font-semibold tabular-nums @[250px]/card:text-3xl'>
            {info.cpu_usage.toFixed(2)}%
          </CardTitle>
        </CardHeader>
        <CardFooter className='flex-col items-start gap-1.5 text-sm'>
          <div className='line-clamp-1 flex gap-2 font-medium'>Active</div>
          <div className='text-muted-foreground'>Server CPU Usage %</div>
        </CardFooter>
      </Card>
      <Card className='@container/card'>
        <CardHeader>
          <CardDescription>Memory</CardDescription>
          <CardTitle className='text-2xl font-semibold tabular-nums @[250px]/card:text-3xl'>
            {info.memory_usage.toFixed(2)}%
          </CardTitle>
        </CardHeader>
        <CardFooter className='flex-col items-start gap-1.5 text-sm'>
          <div className='line-clamp-1 flex gap-2 font-medium'>Active</div>
          <div className='text-muted-foreground'>Server Memory Usage %</div>
        </CardFooter>
      </Card>
    </>
  );
}


================================================
FILE: apps/client/src/features/setup/index.tsx
================================================
import { getDevices } from "@/entities/device/api";
import { getAllEntities } from "@/entities/entity/api";
import { getFlows } from "@/entities/flow/api";
import { getIntegrationStatus } from "@/entities/integrations/api";

export type SetupStep = {
  id: string;
  title: string;
  description: string;
  isCompleted: boolean;
  url: string;
  verifyStatus: () => Promise<boolean>;
};

export const initialSetupSteps: SetupStep[] = [
  {
    id: "enable-config",
    title: "Enable MQTT & UDP",
    description: "Enable basic protocols",
    isCompleted: false,
    url: "/settings/config",
    verifyStatus: async () => {
      try {
        const status = await getIntegrationStatus();
        return status.data.home_assistant.connected;
      } catch {
        return false;
      }
    },
  },
  {
    id: "add-device",
    title: "Add Device",
    description: "Add a new device.",
    isCompleted: false,
    url: "/devices",
    verifyStatus: async () => {
      try {
        const devices = await getDevices();
        return devices.data.length > 0;
      } catch {
        return false;
      }
    },
  },
  {
    id: "add-sensor",
    title: "Add Sensor",
    description: "Add a sensor (entity) for the device.",
    isCompleted: false,
    url: "/devices",
    verifyStatus: async () => {
      try {
        const entity = await getAllEntities();
        return entity.data.length > 0;
      } catch {
        return false;
      }
    },
  },
  {
    id: "first-flow",
    title: "Setup a Flow",
    description: "Creates the first flow.",
    isCompleted: false,
    url: "/flow",
    verifyStatus: async () => {
      try {
        const flows = await getFlows();
        return flows.length > 0;
      } catch {
        return false;
      }
    },
  },
];


================================================
FILE: apps/client/src/features/sidebar/footer.tsx
================================================
import {
  ChevronsUpDown,
  Computer,
  LogOut,
  MessageSquareWarning,
  User,
} from "lucide-react";

import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import {
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  useSidebar,
} from "@/components/ui/sidebar";
import { useLogout } from "../auth/hook";
import { useEffect, useState } from "react";
import { parseJwt } from "@/lib/jwt";
import { isDemoMode } from "@/shared/demo";
import { storage } from "@/lib/storage";

const openExternal = (url: string) => {
  import("@tauri-apps/plugin-shell")
    .then(({ open }) => open(url))
    .catch(() => window.open(url, "_blank", "noopener,noreferrer"));
};

export function NavFooter({
  user,
}: {
  user: {
    name: string;
    email: string;
    avatar: string;
  };
}) {
  const { isMobile } = useSidebar();
  const { logout } = useLogout();
  const [userId, setUserId] = useState<string>(isDemoMode ? "demo" : "");

  useEffect(() => {
    if (isDemoMode) return;
    const token = storage.getToken();
    if (token) {
      const parse = parseJwt(token);
      if (parse?.sub && typeof parse.sub === "string") {
        setUserId(parse.sub);
      }
    }
  }, []);

  return (
    <SidebarMenu>
      <SidebarMenuItem>
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <SidebarMenuButton
              size='lg'
              className='data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground'
            >
              <Avatar className='h-8 w-8 '>
                <AvatarFallback className=''>
                  <User />
                </AvatarFallback>
              </Avatar>
              <div className='grid flex-1 text-left text-sm leading-tight'>
                <span className='truncate font-medium'>{userId}</span>
                <span className='truncate text-xs'>{user.email}</span>
              </div>
              <ChevronsUpDown className='ml-auto size-4' />
            </SidebarMenuButton>
          </DropdownMenuTrigger>
          <DropdownMenuContent
            className='w-(--radix-dropdown-menu-trigger-width) min-w-56  z-[999999]'
            side={isMobile ? "bottom" : "right"}
            align='end'
            sideOffset={4}
          >
            <DropdownMenuLabel className='p-0 font-normal'>
              <div className='flex items-center gap-2 px-1 py-1.5 text-left text-sm'>
                <Avatar className='h-8 w-8 '>
                  <AvatarImage src={user.avatar} alt={userId} />
                  <AvatarFallback className=''>
                    <User />
                  </AvatarFallback>
                </Avatar>
                <div className='grid flex-1 text-left text-sm leading-tight'>
                  <span className='truncate font-medium'>{userId}</span>
                  <span className='truncate text-xs'>{user.email}</span>
                </div>
              </div>
            </DropdownMenuLabel>
            <DropdownMenuSeparator />
            <DropdownMenuGroup>
              <DropdownMenuItem
                onClick={() =>
                  openExternal("https://github.com/cartesiancs/vessel")
                }
              >
                <Computer />
                GitHub
              </DropdownMenuItem>
              <DropdownMenuItem
                onClick={() =>
                  openExternal("https://github.com/cartesiancs/vessel/issues")
                }
              >
                <MessageSquareWarning />
                Report
              </DropdownMenuItem>
            </DropdownMenuGroup>
            <DropdownMenuSeparator />
            <DropdownMenuItem onClick={logout}>
              <LogOut />
              Log out
            </DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>
      </SidebarMenuItem>
    </SidebarMenu>
  );
}


================================================
FILE: apps/client/src/features/sidebar/index.tsx
================================================
import {
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarGroup,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarHeader,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarMenuSub,
  SidebarMenuSubButton,
  SidebarMenuSubItem,
  SidebarRail,
} from "@/components/ui/sidebar";
import { AccountSwitcher } from "../account-switcher";
import { useLocation, useNavigate } from "react-router";
import {
  LayoutDashboard,
  MonitorSmartphone,
  Workflow,
  Map,
  CircleDashed,
  Code,
  RadioTower,
  ChevronDown,
  ChevronRight,
  Video,
} from "lucide-react";
import { NavFooter } from "./footer";
import { isElectron } from "@/lib/electron";
import { useDynamicDashboardStore } from "@/entities/dynamic-dashboard/store";
import { useIntegrationStore } from "@/entities/integrations/store";
import { useConfigStore } from "@/entities/configurations/store";
import { getCodeServiceEnabled } from "@/entities/configurations/codeService";
import {
  ComponentProps,
  useCallback,
  useEffect,
  useMemo,
  useRef,
  useState,
} from "react";

const CONTROLS_OPEN_KEY = "controls-menu-open";
const SIDEBAR_SCROLL_KEY = "sidebar-scroll-top";

const data = {
  versions: ["main"],
  navMain: [
    {
      title: "Dashboard",
      url: "#",
      items: [
        {
          title: "Controls",
          url: "/dashboard",
          icon: <LayoutDashboard />,
        },
        {
          title: "Flow",
          url: "/flow",
          icon: <Workflow />,
        },
        {
          title: "Map",
          url: "/map",
          icon: <Map />,
        },
      ],
    },
    {
      title: "Devices",
      url: "#",
      items: [
        {
          title: "Devices",
          url: "/devices",
          icon: <MonitorSmartphone />,
        },
        {
          title: "Recordings",
          url: "/recordings",
          icon: <Video />,
        },
      ],
    },
    {
      title: "Services",
      url: "#",
      items: [
        {
          title: "Code",
          url: "/code",
          icon: <Code />,
        },
      ],
    },
    {
      title: "Setting",
      url: "#",
      items: [
        {
          title: "Setup",
          url: "/setup",
          icon: <CircleDashed />,
        },
        {
          title: "Settings",
          url: "/settings",
          icon: <RadioTower />,
        },
      ],
    },
  ],
};

export function AppSidebar({ ...props }: ComponentProps<typeof Sidebar>) {
  const location = useLocation();
  const currentPath = location.pathname;
  const navigate = useNavigate();
  const {
    dashboards,
    loadDashboards,
    hasLoaded,
    isLoading,
    setActiveDashboard,
    activeDashboardId,
  } = useDynamicDashboardStore();
  const { isHaConnected, isRos2Connected, isSdrConnected, fetchStatus } =
    useIntegrationStore();
  const { configurations, fetchConfigs } = useConfigStore();

  const scrollRef = useRef<HTMLDivElement>(null);

  const navMain = useMemo(() => {
    const codeOn = getCodeServiceEnabled(configurations);
    return data.navMain
      .map((group) => {
        if (group.title !== "Services") {
          return group;
        }
        const items = group.items.filter(
          (item) => item.title !== "Code" || codeOn,
        );
        if (items.length === 0) {
          return null;
        }
        return { ...group, items };
      })
      .filter((g): g is (typeof data.navMain)[number] => g !== null);
  }, [configurations]);

  const [controlsOpen, setControlsOpen] = useState<boolean>(() => {
    if (typeof window === "undefined") return true;
    try {
      const saved = localStorage.getItem(CONTROLS_OPEN_KEY);
      return saved === null ? true : saved === "true";
    } catch {
      return true;
    }
  });

  const dashboardView = useMemo(() => {
    const params = new URLSearchParams(location.search);
    return params.get("view") || "main";
  }, [location.search]);

  const controlViews = useMemo(() => {
    return [
      { id: "main", name: "Dashboard" },
      isHaConnected && { id: "ha", name: "Home Assistant" },
      isRos2Connected && { id: "ros2", name: "ROS2" },
      isSdrConnected && { id: "sdr", name: "RTL-SDR" },
    ].filter(Boolean) as { id: string; name: string }[];
  }, [isHaConnected, isRos2Connected, isSdrConnected]);

  const handleScroll = useCallback(() => {
    const el = scrollRef.current;
    if (el) {
      sessionStorage.setItem(SIDEBAR_SCROLL_KEY, String(el.scrollTop));
    }
  }, []);

  useEffect(() => {
    const el = scrollRef.current;
    if (!el) return;
    const saved = sessionStorage.getItem(SIDEBAR_SCROLL_KEY);
    if (saved !== null) {
      requestAnimationFrame(() => {
        el.scrollTop = Number(saved);
      });
    }
  }, [currentPath]);

  useEffect(() => {
    try {
      localStorage.setItem(CONTROLS_OPEN_KEY, controlsOpen ? "true" : "false");
    } catch {
      // ignore storage write errors
    }
  }, [controlsOpen]);

  useEffect(() => {
    if (!hasLoaded && !isLoading) {
      loadDashboards();
    }
  }, [hasLoaded, isLoading, loadDashboards]);

  useEffect(() => {
    fetchStatus();
  }, [fetchStatus]);

  useEffect(() => {
    void fetchConfigs();
  }, [fetchConfigs]);

  return (
    <Sidebar
      {...props}
      style={{
        top: isElectron() ? "34px" : "0",
        height: isElectron() ? "calc(100% - 34px)" : "100%",
      }}
    >
      <SidebarHeader>
        <AccountSwitcher
          versions={data.versions}
          defaultVersion={data.versions[0]}
        />
      </SidebarHeader>
      <SidebarContent ref={scrollRef} onScroll={handleScroll}>
        {navMain.map((group) => (
          <SidebarGroup key={group.title}>
            <SidebarGroupLabel>{group.title}</SidebarGroupLabel>
            <SidebarGroupContent>
              <SidebarMenu>
                {group.items.map((item) => {
                  const isControls = item.url === "/dashboard";
                  const isActive =
                    currentPath === item.url ||
                    (isControls &&
                      currentPath.startsWith("/dynamic-dashboard"));
                  return (
                    <SidebarMenuItem key={item.title}>
                      <SidebarMenuButton
                        asChild
                        isActive={isActive}
                        onClick={() => {
                          if (isControls) {
                            setControlsOpen((prev) => !prev);
                            navigate(item.url);
                          } else {
                            navigate(item.url);
                          }
                        }}
                      >
                        <span>
                          {item.icon} {item.title}
                          {isControls && (
                            <span className='ml-auto flex items-center'>
                              {controlsOpen ? (
                                <ChevronDown className='h-4 w-4 text-muted-foreground' />
                              ) : (
                                <ChevronRight className='h-4 w-4 text-muted-foreground' />
                              )}
                            </span>
                          )}
                        </span>
                      </SidebarMenuButton>

                      {isControls && controlsOpen && (
                        <SidebarMenuSub>
                          {controlViews.map((view) => {
                            const subActive =
                              currentPath === "/dashboard" &&
                              dashboardView === view.id;
                            return (
                              <SidebarMenuSubItem key={view.id}>
                                <SidebarMenuSubButton
                                  isActive={subActive}
                                  onClick={() => {
                                    navigate(`/dashboard?view=${view.id}`);
                                  }}
                                >
                                  <span className='truncate'>{view.name}</span>
                                </SidebarMenuSubButton>
                              </SidebarMenuSubItem>
                            );
                          })}
                          {dashboards.map((db) => {
                            const subActive =
                              currentPath === `/dynamic-dashboard/${db.id}` ||
                              (currentPath.startsWith("/dynamic-dashboard") &&
                                activeDashboardId === db.id);
                            return (
                              <SidebarMenuSubItem key={db.id}>
                                <SidebarMenuSubButton
                                  isActive={subActive}
                                  onClick={() => {
                                    setActiveDashboard(db.id);
                                    navigate(`/dynamic-dashboard/${db.id}`);
                                  }}
                                >
                                  <span className='truncate'>{db.name}</span>
                                </SidebarMenuSubButton>
                              </SidebarMenuSubItem>
                            );
                          })}
                        </SidebarMenuSub>
                      )}
                    </SidebarMenuItem>
                  );
                })}
              </SidebarMenu>
            </SidebarGroupContent>
          </SidebarGroup>
        ))}
      </SidebarContent>
      <SidebarRail />
      <SidebarFooter>
        <NavFooter
          user={{
            name: "Manager",
            email: "none",
            avatar: "",
          }}
        />
      </SidebarFooter>
    </Sidebar>
  );
}


================================================
FILE: apps/client/src/features/stat/index.tsx
================================================
import {
  Card,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { useStatStore } from "@/entities/stat/store";
import { useEffect } from "react";

export default function StatBlock() {
  const { stat, fetchStat } = useStatStore();

  useEffect(() => {
    fetchStat();
  }, [fetchStat]);

  return (
    <>
      <Card className='@container/card'>
        <CardHeader>
          <CardDescription>Devices</CardDescription>
          <CardTitle className='text-2xl font-semibold tabular-nums @[250px]/card:text-3xl'>
            {stat.count.devices}
          </CardTitle>
        </CardHeader>
        <CardFooter className='flex-col items-start gap-1.5 text-sm'>
          <div className='line-clamp-1 flex gap-2 font-medium'>Active</div>
          <div className='text-muted-foreground'>
            Total devices in the system
          </div>
        </CardFooter>
      </Card>
      <Card className='@container/card'>
        <CardHeader>
          <CardDescription>Entities</CardDescription>
          <CardTitle className='text-2xl font-semibold tabular-nums @[250px]/card:text-3xl'>
            {stat.count.entities}
          </CardTitle>
        </CardHeader>
        <CardFooter className='flex-col items-start gap-1.5 text-sm'>
          <div className='line-clamp-1 flex gap-2 font-medium'>Active</div>
          <div className='text-muted-foreground'>
            Total entities across all devices
          </div>
        </CardFooter>
      </Card>
    </>
  );
}


================================================
FILE: apps/client/src/features/topbar/index.tsx
================================================
import { useEffect, useState } from "react";
import { ArrowLeft, ArrowRight, RotateCcw } from "lucide-react";
import { useLocation, useNavigate } from "react-router";

export function TopBar({ hide = false }: { hide?: boolean }) {
  const navigate = useNavigate();
  const location = useLocation();
  const [canBack, setCanBack] = useState(false);
  const [canForward, setCanForward] = useState(false);

  useEffect(() => {
    const idx = window.history.state?.idx ?? 0;
    const length = window.history.length;
    setCanBack(idx > 0);
    setCanForward(idx < length - 2);
  }, [location]);

  return (
    <div
      className="
        fixed top-0 left-0 w-full h-[34px]
        bg-[oklch(0.145_0_0)] border-b-[0.75px] border-[#3a3f44]
        flex items-center justify-center z-[999]
        [-webkit-app-region:drag]
      "
    >
      {!hide && (
        <>
          <button
            onClick={() => navigate(-1)}
            disabled={!canBack}
            className="
          flex items-center justify-center h-full p-1
          [-webkit-app-region:no-drag]
          disabled:opacity-50 disabled:cursor-not-allowed
        "
          >
            <ArrowLeft size={14} />
          </button>
          <button
            onClick={() => {
              navigate(1);
            }}
            disabled={!canForward}
            className="
          flex items-center justify-center h-full p-1 ml-2
          [-webkit-app-region:no-drag]
          disabled:opacity-50 disabled:cursor-not-allowed
        "
          >
            <ArrowRight size={14} />
          </button>
          <span className="text-xs text-gray-400 mx-2 mx-[16px]">Vessel</span>
          <button
            onClick={() => {
              window.location.reload();
            }}
            className="
          flex items-center justify-center h-full p-1 ml-2
          [-webkit-app-region:no-drag]
          disabled:opacity-50 disabled:cursor-not-allowed
        "
          >
            <RotateCcw size={14} />
          </button>
        </>
      )}
    </div>
  );
}


================================================
FILE: apps/client/src/features/topbar/style.css
================================================
.top-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 34px;
  background-color: oklch(0.145 0 0);
  border-bottom: 0.05rem #3a3f44 solid;
  -webkit-app-region: drag;
  display: flex;
  color: #6c757d;
  font-size: 12px;
  font-weight: 700;
  justify-content: center;
  align-items: center;
  z-index: 999;
}


================================================
FILE: apps/client/src/features/user/UserRoleAssigner.tsx
================================================
import { Button } from "@/components/ui/button";
import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
} from "@/components/ui/command";
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover";
import { useRoleStore } from "@/entities/role/store";
import { Role } from "@/entities/role/types";
import { assignRoleToUser, revokeRoleFromUser } from "@/entities/user/api";
import { cn } from "@/lib/utils";
import { Check, ChevronsUpDown } from "lucide-react";
import { FC, useEffect, useState } from "react";
import { toast } from "sonner";

interface UserRoleAssignerProps {
  userId?: number | null;
  initialRoles: Role[];
}

export const UserRoleAssigner: FC<UserRoleAssignerProps> = ({
  userId,
  initialRoles,
}) => {
  const { roles, fetchRoles } = useRoleStore();
  const [isOpen, setIsOpen] = useState(false);
  const [selectedRoles, setSelectedRoles] = useState<Role[]>(initialRoles);
  const [isSubmitting, setIsSubmitting] = useState(false);

  useEffect(() => {
    fetchRoles();
  }, [fetchRoles]);

  useEffect(() => {
    setSelectedRoles(initialRoles);
  }, [initialRoles]);

  if (userId == null) {
    return null;
  }

  const handleSelect = async (role: Role) => {
    if (isSubmitting) return;

    const isSelected = selectedRoles.some((r) => r.id === role.id);
    const optimisticState = isSelected
      ? selectedRoles.filter((r) => r.id !== role.id)
      : [...selectedRoles, role];

    setSelectedRoles(optimisticState);
    setIsSubmitting(true);

    try {
      if (isSelected) {
        await revokeRoleFromUser(userId, role.id);
        toast.success(`Role "${role.name}" has been revoked.`);
      } else {
        await assignRoleToUser(userId, role.id);
        toast.success(`Role "${role.name}" has been assigned.`);
      }
    } catch (error) {
      console.error("Failed to update user role:", error);
      toast.error("Failed to update role. Please try again.");
      setSelectedRoles(selectedRoles);
    } finally {
      setIsSubmitting(false);
    }
  };

  return (
    <Popover open={isOpen} onOpenChange={setIsOpen}>
      <PopoverTrigger asChild>
        <Button
          variant='outline'
          role='combobox'
          aria-expanded={isOpen}
          className='w-full justify-between col-span-3'
          disabled={isSubmitting}
        >
          {selectedRoles.length > 0
            ? `${selectedRoles.length} selected`
            : "Select roles..."}
          <ChevronsUpDown className='ml-2 h-4 w-4 shrink-0 opacity-50' />
        </Button>
      </PopoverTrigger>
      <PopoverContent className='w-[--radix-popover-trigger-width] p-0'>
        <Command>
          <CommandInput placeholder='Search roles...' />
          <CommandList>
            <CommandEmpty>No roles found.</CommandEmpty>
            <CommandGroup>
              {roles.map((role) => (
                <CommandItem
                  key={role.id}
                  value={role.name}
                  onSelect={() => handleSelect(role)}
                  disabled={isSubmitting}
                >
                  <Check
                    className={cn(
                      "mr-2 h-4 w-4",
                      selectedRoles.some((r) => r.id === role.id)
                        ? "opacity-100"
                        : "opacity-0",
                    )}
                  />
                  {role.name}
                </CommandItem>
              ))}
            </CommandGroup>
          </CommandList>
        </Command>
      </PopoverContent>
    </Popover>
  );
};


================================================
FILE: apps/client/src/features/user/userAdd.tsx
================================================
import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { CreateUserPayload, UpdateUserPayload } from "@/entities/user/types";
import { PlusCircle } from "lucide-react";
import { FC, useState } from "react";
import { UserForm } from "./userForm";
import { useUserStore } from "@/entities/user/store";

export const AddUser: FC = () => {
  const [isOpen, setIsOpen] = useState(false);
  const [isSubmitting, setIsSubmitting] = useState(false);
  const addUser = useUserStore((state) => state.addUser);

  const handleSubmit = async (data: CreateUserPayload | UpdateUserPayload) => {
    setIsSubmitting(true);
    try {
      await addUser(data as CreateUserPayload);
      setIsOpen(false);
    } catch (e) {
      console.error("Failed to add user from component", e);
    } finally {
      setIsSubmitting(false);
    }
  };

  return (
    <>
      <Button onClick={() => setIsOpen(true)}>
        <PlusCircle className='mr-2 h-4 w-4' /> Add User
      </Button>
      <Dialog open={isOpen} onOpenChange={setIsOpen}>
        <DialogHeader className='p-6 pb-0'>
          <DialogTitle>Add New User</DialogTitle>
          <DialogDescription>
            Fill in the details below to create a new user.
          </DialogDescription>
        </DialogHeader>
        <DialogContent>
          <UserForm
            onSubmit={handleSubmit}
            onCancel={() => setIsOpen(false)}
            isSubmitting={isSubmitting}
          />
        </DialogContent>
      </Dialog>
    </>
  );
};

export const AddUserDialog: FC<{
  isOpen: boolean;
  onOpenChange: (open: boolean) => void;
}> = ({ isOpen, onOpenChange }) => {
  const [isSubmitting, setIsSubmitting] = useState(false);
  const addUser = useUserStore((state) => state.addUser);

  const handleSubmit = async (data: CreateUserPayload | UpdateUserPayload) => {
    setIsSubmitting(true);
    try {
      await addUser(data as CreateUserPayload);
      onOpenChange(false);
    } catch (e) {
      console.error("Failed to add user from component", e);
    } finally {
      setIsSubmitting(false);
    }
  };

  return (
    <Dialog open={isOpen} onOpenChange={onOpenChange}>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Add New User</DialogTitle>
        </DialogHeader>
        <UserForm
          onSubmit={handleSubmit}
          onCancel={() => onOpenChange(false)}
          isSubmitting={isSubmitting}
        />
      </DialogContent>
    </Dialog>
  );
};


================================================
FILE: apps/client/src/features/user/userDelete.tsx
================================================
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from "@/components/ui/alert-dialog";
import { DropdownMenuItem } from "@/components/ui/dropdown-menu";
import { useUserStore } from "@/entities/user/store";
import { Trash2 } from "lucide-react";
import { FC, useState } from "react";

interface DeleteUserProps {
  userId: number;
}

export const DeleteUser: FC<DeleteUserProps> = ({ userId }) => {
  const [isOpen, setIsOpen] = useState(false);
  const removeUser = useUserStore((state) => state.removeUser);

  const handleConfirm = async () => {
    try {
      await removeUser(userId);
    } catch (e) {
      console.error("Failed to delete user from component", e);
    }
  };

  return (
    <>
      <DropdownMenuItem
        onSelect={() => setIsOpen(true)}
        className='text-destructive focus:text-destructive'
      >
        <Trash2 className='mr-2 h-4 w-4' />
        <span>Delete</span>
      </DropdownMenuItem>
      <AlertDialog open={isOpen} onOpenChange={setIsOpen}>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
            <AlertDialogDescription>
              This action cannot be undone. This will permanently delete the
              user.
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel onClick={() => setIsOpen(false)} />
            <AlertDialogAction
              className='bg-destructive text-destructive-foreground hover:bg-destructive/90'
              onClick={() => {
                handleConfirm();
                setIsOpen(false);
              }}
            />
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </>
  );
};

export const DeleteUserDialog: FC<{
  userId: number | null;
  isOpen: boolean;
  onOpenChange: (open: boolean) => void;
}> = ({ userId, isOpen, onOpenChange }) => {
  const removeUser = useUserStore((state) => state.removeUser);

  if (!userId) return null;

  const handleConfirm = async () => {
    try {
      await removeUser(userId);
      onOpenChange(false);
    } catch (e) {
      console.error("Failed to delete user from component", e);
    }
  };

  return (
    <AlertDialog open={isOpen} onOpenChange={onOpenChange}>
      <AlertDialogContent>
        <AlertDialogHeader>
          <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
          <AlertDialogDescription>
            This action cannot be undone. This will permanently delete the user.
          </AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter>
          <AlertDialogCancel onClick={() => onOpenChange(false)}>
            Close
          </AlertDialogCancel>
          <AlertDialogAction onClick={handleConfirm}>Delete</AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  );
};


================================================
FILE: apps/client/src/features/user/userEdit.tsx
================================================
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { useUserStore } from "@/entities/user/store";
import {
  User,
  UpdateUserPayload,
  CreateUserPayload,
} from "@/entities/user/types";
import { Edit } from "lucide-react";
import { FC, useState } from "react";
import { UserForm } from "./userForm";
import { DropdownMenuItem } from "@/components/ui/dropdown-menu";

interface EditUserProps {
  user: User;
}

export const EditUser: FC<EditUserProps> = ({ user }) => {
  const [isOpen, setIsOpen] = useState(false);
  const [isSubmitting, setIsSubmitting] = useState(false);
  const editUser = useUserStore((state) => state.editUser);

  const handleSubmit = async (data: UpdateUserPayload) => {
    setIsSubmitting(true);
    try {
      await editUser(user.id, data);
      setIsOpen(false);
    } catch (e) {
      console.error("Failed to edit user from component", e);
    } finally {
      setIsSubmitting(false);
    }
  };

  return (
    <>
      <DropdownMenuItem onSelect={() => setIsOpen(true)}>
        <Edit className='mr-2 h-4 w-4' />
        <span>Edit</span>
      </DropdownMenuItem>
      <Dialog open={isOpen} onOpenChange={setIsOpen}>
        <DialogContent>
          <DialogHeader className='p-6 pb-0'>
            <DialogTitle>Edit User</DialogTitle>
            <DialogDescription>Update the user's details.</DialogDescription>
          </DialogHeader>
          <UserForm
            user={user}
            onSubmit={handleSubmit}
            onCancel={() => setIsOpen(false)}
            isSubmitting={isSubmitting}
          />
        </DialogContent>
      </Dialog>
    </>
  );
};

export const EditUserDialog: FC<{
  user: User | null;
  isOpen: boolean;
  onOpenChange: (open: boolean) => void;
}> = ({ user, isOpen, onOpenChange }) => {
  const [isSubmitting, setIsSubmitting] = useState(false);
  const editUser = useUserStore((state) => state.editUser);

  if (!user) return null;

  const handleSubmit = async (data: CreateUserPayload | UpdateUserPayload) => {
    setIsSubmitting(true);
    try {
      await editUser(user.id, data as UpdateUserPayload);
      onOpenChange(false);
    } catch (e) {
      console.error("Failed to edit user from component", e);
    } finally {
      setIsSubmitting(false);
    }
  };

  return (
    <Dialog open={isOpen} onOpenChange={onOpenChange}>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Edit User</DialogTitle>
        </DialogHeader>
        <UserForm
          user={user}
          onSubmit={handleSubmit}
          onCancel={() => onOpenChange(false)}
          isSubmitting={isSubmitting}
        />
      </DialogContent>
    </Dialog>
  );
};


================================================
FILE: apps/client/src/features/user/userForm.tsx
================================================
import { Button } from "@/components/ui/button";
import { DialogFooter } from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import {
  User,
  CreateUserPayload,
  UpdateUserPayload,
} from "@/entities/user/types";
import { Label } from "@radix-ui/react-label";
import { FC, useState } from "react";
import { UserRoleAssigner } from "./UserRoleAssigner";

interface UserFormProps {
  user?: User;
  onSubmit: (data: CreateUserPayload | UpdateUserPayload) => void;
  onCancel: () => void;
  isSubmitting: boolean;
}

export const UserForm: FC<UserFormProps> = ({
  user,
  onSubmit,
  onCancel,
  isSubmitting,
}) => {
  const [username, setUsername] = useState(user?.username || "");
  const [email, setEmail] = useState(user?.email || "");
  const [password, setPassword] = useState("");
  const [error, setError] = useState("");

  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    if (!username || !email || (!user && !password)) {
      setError("Please fill in all required fields.");
      return;
    }
    setError("");
    const payload: CreateUserPayload | UpdateUserPayload = {
      username,
      email,
      ...(password && { password }),
    };
    onSubmit(payload);
  };

  return (
    <form onSubmit={handleSubmit}>
      <div className='grid gap-4 py-4'>
        <div className='grid grid-cols-4 items-center gap-4'>
          <Label htmlFor='username' className='text-right'>
            Username
          </Label>
          <Input
            id='username'
            value={username}
            onChange={(e) => setUsername(e.target.value)}
            className='col-span-3'
          />
        </div>
        <div className='grid grid-cols-4 items-center gap-4'>
          <Label htmlFor='email' className='text-right'>
            Email
          </Label>
          <Input
            id='email'
            type='email'
            value={email}
            onChange={(e) => setEmail(e.target.value)}
            className='col-span-3'
          />
        </div>
        <div className='grid grid-cols-4 items-center gap-4'>
          <Label htmlFor='password' className='text-right'>
            Password
          </Label>
          <Input
            id='password'
            type='password'
            placeholder={user ? "Leave blank to keep current password" : ""}
            value={password}
            onChange={(e) => setPassword(e.target.value)}
            className='col-span-3'
          />
        </div>
        {user && (
          <div className='grid grid-cols-4 items-center gap-4'>
            <Label htmlFor='password' className='text-right'>
              Roles
            </Label>
            <UserRoleAssigner
              userId={user?.id || null}
              initialRoles={user?.roles || []}
            />
          </div>
        )}

        {error && (
          <p className='text-sm text-destructive col-span-4 text-center'>
            {error}
          </p>
        )}
      </div>
      <DialogFooter>
        <Button type='button' variant='outline' onClick={onCancel}>
          Cancel
        </Button>
        <Button type='submit' disabled={isSubmitting}>
          {isSubmitting ? "Saving..." : "Save"}
        </Button>
      </DialogFooter>
    </form>
  );
};


================================================
FILE: apps/client/src/features/ws/FlowUiEventBridge.tsx
================================================
import { useCallback, useMemo } from "react";
import { useWebSocketMessage } from "./WebSocketProvider";
import {
  getFlowRunSessionId,
  type FlowUiEventPayload,
  type WebSocketMessage,
} from "./ws";
import { createFlowUiEventRouter, mergeFlowUiAdapters } from "./flowUiEventRouter";
import { toastFlowUiAdapter } from "./flowUiAdapters/toastFlowUiAdapter";

/** Subscribes once app-wide: routes `flow_ui_event` → adapters for this tab's session only. */
export function FlowUiEventBridge() {
  const sessionId = useMemo(() => getFlowRunSessionId(), []);

  const router = useMemo(
    () =>
      createFlowUiEventRouter(
        mergeFlowUiAdapters(["toast", toastFlowUiAdapter]),
      ),
    [],
  );

  const handleMessage = useCallback(
    (msg: WebSocketMessage) => {
      if (msg.type !== "flow_ui_event") return;
      const payload = msg.payload as FlowUiEventPayload;
      if (
        !payload?.target?.session_id ||
        payload.target.session_id !== sessionId
      )
        return;
      router.dispatch(payload);
    },
    [router, sessionId],
  );

  useWebSocketMessage(handleMessage);
  return null;
}


================================================
FILE: apps/client/src/features/ws/IsConnected.tsx
================================================
import React from "react";
import { useWebSocket } from "./WebSocketProvider";

function Offline() {
  return (
    <span className='flex flex-row text-gray-600 justify-center text-xs items-center gap-1 font-light h-[16px]'>
      <span className='w-2 h-2 bg-gray-600 rounded'></span> Offline
    </span>
  );
}

function Online() {
  return (
    <span className='flex flex-row text-emerald-500 justify-center text-xs items-center gap-1 font-light h-[16px]'>
      <span className='w-2 h-2 bg-emerald-600 rounded'></span> Connented
    </span>
  );
}

export function WebSocketStatusIndicator() {
  const { isConnected } = useWebSocket();

  if (isConnected) {
    return <Online />;
  } else {
    return <Offline />;
  }
}


================================================
FILE: apps/client/src/features/ws/WebSocketProvider.tsx
================================================
import React, {
  createContext,
  useContext,
  useEffect,
  useState,
  useCallback,
  ReactNode,
  useRef,
} from "react";
import { WebSocketChannel, WebSocketMessage } from "../ws/ws";
import { isDemoMode } from "@/shared/demo";
import { MockWebSocketChannel } from "./wsMock";

type WebSocketManager = WebSocketChannel | MockWebSocketChannel;

interface WebSocketContextState {
  wsManager: WebSocketManager;
  isConnected: boolean;
  sendMessage: (message: WebSocketMessage) => void;
}

const WebSocketContext = createContext<WebSocketContextState | undefined>(
  undefined,
);

export const WebSocketProvider: React.FC<{
  url: string;
  children: ReactNode;
}> = ({ url, children }) => {
  const managerRef = useRef<WebSocketManager>(
    isDemoMode ? new MockWebSocketChannel() : new WebSocketChannel(),
  );
  const [isConnected, setIsConnected] = useState(
    managerRef.current.isConnected(),
  );

  useEffect(() => {
    const wsManager = managerRef.current;

    wsManager.onopen = () => {
      console.log("Connected to WebSocket server");
      setIsConnected(true);
    };

    wsManager.onclose = () => {
      console.log("Disconnected from WebSocket server");
      setIsConnected(false);
    };

    if (url && !wsManager.isConnected()) {
      wsManager.connect(url);
    }

    return () => {
      wsManager.onopen = null;
      wsManager.onclose = null;
      wsManager.close();
    };
  }, [url]);

  const sendMessage = useCallback((message: WebSocketMessage) => {
    managerRef.current.send(message);
  }, []);

  const value = {
    wsManager: managerRef.current,
    isConnected,
    sendMessage,
  };

  return (
    <WebSocketContext.Provider value={value}>
      {children}
    </WebSocketContext.Provider>
  );
};

export const useWebSocketMessage = (
  callback: (msg: WebSocketMessage) => void,
) => {
  const { wsManager } = useWebSocket();

  useEffect(() => {
    if (wsManager && callback) {
      wsManager.addMessageListener(callback);

      return () => {
        wsManager.removeMessageListener(callback);
      };
    }
  }, [wsManager, callback]);
};

export const useWebSocket = (): WebSocketContextState => {
  const context = useContext(WebSocketContext);
  if (context === undefined) {
    throw new Error("useWebSocket must be used within a WebSocketProvider");
  }
  return context;
};


================================================
FILE: apps/client/src/features/ws/flowUiAdapters/toastFlowUiAdapter.ts
================================================
import { toast } from "sonner";
import type { FlowUiEventPayload, FlowUiEventToastData } from "@/features/ws/ws";

function isRecord(value: unknown): value is Record<string, unknown> {
  return typeof value === "object" && value !== null;
}

function asToastData(raw: unknown): FlowUiEventToastData | null {
  if (!isRecord(raw)) return null;
  const message = raw.message;
  if (typeof message !== "string") return null;
  const level =
    typeof raw.level === "string" ? raw.level.toLowerCase() : "info";
  return {
    level,
    title:
      typeof raw.title === "string"
        ? raw.title
        : raw.title === null
          ? null
          : undefined,
    message,
    duration_ms:
      typeof raw.duration_ms === "number" ? raw.duration_ms : undefined,
  };
}

/** Maps `flow_ui_event` with kind `toast` to Sonner. */
export function toastFlowUiAdapter(payload: FlowUiEventPayload): void {
  const data = asToastData(payload.event.data);
  if (!data) return;

  const duration = data.duration_ms ?? 4000;
  const title = data.title?.trim();
  const message = data.message;

  const opts = title
    ? ({ duration, description: message } as const)
    : ({ duration } as const);

  switch (data.level) {
    case "success":
      // eslint-disable-next-line @typescript-eslint/no-unused-expressions
      title
        ? toast.success(title, opts)
        : toast.success(message, { duration });
      break;
    case "warning":
      // eslint-disable-next-line @typescript-eslint/no-unused-expressions
      title
        ? toast.warning(title, opts)
        : toast.warning(message, { duration });
      break;
    case "error":
      // eslint-disable-next-line @typescript-eslint/no-unused-expressions
      title ? toast.error(title, opts) : toast.error(message, { duration });
      break;
    default:
      // eslint-disable-next-line @typescript-eslint/no-unused-expressions
      title ? toast(title, opts) : toast(message, { duration });
  }
}


================================================
FILE: apps/client/src/features/ws/flowUiEventRouter.test.ts
================================================
import { describe, it, expect, vi } from "vitest";
import { createFlowUiEventRouter, mergeFlowUiAdapters } from "./flowUiEventRouter";
import type { FlowUiEventPayload } from "./ws";

describe("createFlowUiEventRouter", () => {
  it("dispatches to the adapter for event.kind", () => {
    const custom = vi.fn();
    const router = createFlowUiEventRouter(
      mergeFlowUiAdapters(["custom", custom]),
    );
    const payload = {
      target: { session_id: "x" },
      event: { kind: "custom", data: { n: 1 } },
    } satisfies FlowUiEventPayload;
    router.dispatch(payload);
    expect(custom).toHaveBeenCalledWith(payload);
  });

  it("ignores unknown kinds", () => {
    const custom = vi.fn();
    const router = createFlowUiEventRouter(
      mergeFlowUiAdapters(["custom", custom]),
    );
    router.dispatch({
      target: { session_id: "x" },
      event: { kind: "other", data: {} },
    });
    expect(custom).not.toHaveBeenCalled();
  });
});


================================================
FILE: apps/client/src/features/ws/flowUiEventRouter.ts
================================================
import type { FlowUiEventPayload } from "@/features/ws/ws";

export type FlowUiEventAdapter = (payload: FlowUiEventPayload) => void;

const defaultRegistry = (): Map<string, FlowUiEventAdapter> => new Map();

/**
 * Routes flow-driven UI events by `event.kind`. Register adapters once; unknown kinds are ignored.
 */
export function createFlowUiEventRouter(
  adapters: Map<string, FlowUiEventAdapter>,
) {
  return {
    dispatch(payload: FlowUiEventPayload): void {
      const kind = payload.event?.kind;
      if (!kind || typeof kind !== "string") return;
      const adapter = adapters.get(kind);
      adapter?.(payload);
    },
  };
}

/** @internal */
export function mergeFlowUiAdapters(
  ...entries: Array<[string, FlowUiEventAdapter]>
): Map<string, FlowUiEventAdapter> {
  const m = defaultRegistry();
  for (const [k, v] of entries) {
    m.set(k, v);
  }
  return m;
}


================================================
FILE: apps/client/src/features/ws/ws.ts
================================================
import type { DashboardComponentEventPayload } from "@/entities/dynamic-dashboard/interaction";

/** Flow-driven UI events (toast, etc.); client should filter by `target.session_id`. */
export type FlowUiEventPayload = {
  target: { session_id: string };
  event: { kind: string; data: unknown };
  meta?: {
    flow_id?: number;
    node_id?: string;
    node_type?: string;
    /** Optional routing hint for dashboard widgets (set by flow nodes). */
    dashboard_item_id?: string;
  };
};

export type FlowUiEventToastData = {
  level: string;
  title?: string | null;
  message: string;
  duration_ms?: number;
};

export type WebSocketMessage = {
  type?:
    | "offer"
    | "answer"
    | "candidate"
    | "health_check"
    | "subscribe_stream"
    | "health_check_response"
    | "compute_flow"
    | "log_message"
    | "flow_ui_event"
    | "ping"
    | "pong"
    | "get_all_flows"
    | "get_all_flows_response"
    | "stop_flow"
    | "dashboard_component_event"
    | "get_all_stream_state"
    | "stream_state"
    | "change_state"
    | "hangup"
    | "get_server";
  payload:
    | RTCSessionDescriptionInit
    | RTCIceCandidate
    | RTCIceCandidateInit
    | string
    | number
    | object
    | { topic: string }
    | { flow_id: number }
    | { timestamp: number }
    | { id: number; name: string; is_running: boolean }[]
    | { cpu_usage: number; memory_usage: number }
    | FlowUiEventPayload
    | DashboardComponentEventPayload;
};

const FLOW_RUN_SESSION_STORAGE_KEY = "vessel_flow_run_session_id";

/** Per browser tab; include in `compute_flow` so server UI events target the initiating session. */
export function getFlowRunSessionId(): string {
  try {
    let id = sessionStorage.getItem(FLOW_RUN_SESSION_STORAGE_KEY);
    if (!id) {
      id =
        typeof crypto !== "undefined" && "randomUUID" in crypto
          ? crypto.randomUUID()
          : `sess_${Date.now()}_${Math.random().toString(36).slice(2)}`;
      sessionStorage.setItem(FLOW_RUN_SESSION_STORAGE_KEY, id);
    }
    return id;
  } catch {
    return `sess_${Date.now()}_${Math.random().toString(36).slice(2)}`;
  }
}

export class WebSocketChannel {
  private ws: WebSocket | null = null;
  private messageListeners: Set<(msg: WebSocketMessage) => void> = new Set();
  public onopen: (() => void) | null = null;
  public onclose: (() => void) | null = null;
  public isConnected(): boolean {
    return this.ws?.readyState === WebSocket.OPEN;
  }

  connect(url: string): void {
    if (this.isConnected()) {
      return;
    }
    this.ws = new WebSocket(url);
    this.ws.onopen = () => this.onopen?.();

    this.ws.onmessage = (event) => {
      const message = JSON.parse(event.data);
      this.messageListeners.forEach((listener) => listener(message));
    };

    this.ws.onerror = (err) => console.error("WebSocket Error:", err);
    this.ws.onclose = () => this.onclose?.();
  }

  send(message: WebSocketMessage): void {
    if (!this.isConnected()) {
      return;
    }

    try {
      if (this.ws) {
        this.ws.send(JSON.stringify(message));
      }
    } catch (error) {
      console.log(error);
    }
  }

  close(): void {
    if (this.ws) {
      this.ws.close();
    }
  }

  addMessageListener(listener: (msg: WebSocketMessage) => void): void {
    this.messageListeners.add(listener);
  }

  removeMessageListener(listener: (msg: WebSocketMessage) => void): void {
    this.messageListeners.delete(listener);
  }
}


================================================
FILE: apps/client/src/features/ws/wsMock.ts
================================================
import { WebSocketMessage } from "./ws";

export class MockWebSocketChannel {
  private connected = false;
  private messageListeners: Set<(msg: WebSocketMessage) => void> = new Set();
  private intervals: number[] = [];
  public onopen: (() => void) | null = null;
  public onclose: (() => void) | null = null;

  isConnected(): boolean {
    return this.connected;
  }

  private emit(message: WebSocketMessage) {
    this.messageListeners.forEach((listener) => listener(message));
  }

  connect(): void {
    if (this.connected) return;
    this.connected = true;
    this.onopen?.();

    this.intervals.push(
      window.setInterval(() => {
        this.emit({
          type: "get_server",
          payload: {
            cpu_usage: 12 + Math.random() * 10,
            memory_usage: 25 + Math.random() * 5,
          },
        });
      }, 2000),
    );

    this.intervals.push(
      window.setInterval(() => {
        this.emit({
          type: "log_message",
          payload: { level: "info", message: "Demo log entry" },
        });
      }, 5000),
    );

    this.emit({
      type: "stream_state",
      payload: [
        { topic: "sensors/temperature", is_online: true },
        { topic: "drone/front-camera", is_online: true },
      ],
    });
  }

  send(message: WebSocketMessage): void {
    if (!this.connected) return;

    if (message.type === "get_all_stream_state") {
      this.emit({
        type: "stream_state",
        payload: [
          { topic: "sensors/temperature", is_online: true },
          { topic: "drone/front-camera", is_online: true },
        ],
      });
    }

    if (message.type === "ping") {
      this.emit({
        type: "pong",
        payload: {
          timestamp: (message.payload as { timestamp: number }).timestamp,
        },
      });
    }

    if (message.type === "get_server") {
      this.emit({
        type: "get_server",
        payload: {
          cpu_usage: 15 + Math.random() * 5,
          memory_usage: 30 + Math.random() * 5,
        },
      });
    }
  }

  close(): void {
    if (!this.connected) return;
    this.connected = false;
    this.intervals.forEach((id) => clearInterval(id));
    this.intervals = [];
    this.onclose?.();
  }

  addMessageListener(listener: (msg: WebSocketMessage) => void): void {
    this.messageListeners.add(listener);
  }

  removeMessageListener(listener: (msg: WebSocketMessage) => void): void {
    this.messageListeners.delete(listener);
  }
}


================================================
FILE: apps/client/src/font.css
================================================
@font-face {
  font-family: "Inter";
  src: url("/font/Inter.ttf") format("truetype");
}

@font-face {
  font-family: "RobotoMono";
  src: url("/font/RobotoMono.ttf") format("truetype");
}

html,
body {
  font-family: "Inter", sans-serif;
}

.font-mono {
  font-family: "RobotoMono", monospace;
}


================================================
FILE: apps/client/src/hooks/use-mobile.ts
================================================
import * as React from "react"

const MOBILE_BREAKPOINT = 768

export function useIsMobile() {
  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)

  React.useEffect(() => {
    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
    const onChange = () => {
      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
    }
    mql.addEventListener("change", onChange)
    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
    return () => mql.removeEventListener("change", onChange)
  }, [])

  return !!isMobile
}


================================================
FILE: apps/client/src/hooks/useDesktopSidecar.ts
================================================
import { useEffect } from "react";

import { isDemoMode } from "@/shared/demo";
import { ensureSidecarRunning, getDesktopServerUrl, isTauri } from "@/shared/desktop";
import { storage } from "@/lib/storage";

export const useDesktopSidecar = () => {
  useEffect(() => {
    if (!isTauri() || isDemoMode) {
      return;
    }

    const bootstrap = async () => {
      await ensureSidecarRunning();

      // On the Tauri client, always default to the local sidecar URL so the
      // login screen connects to the bundled server instead of any stale
      // address left over in localStorage from a previous session.
      const baseUrl = await getDesktopServerUrl();
      if (baseUrl) {
        storage.setServerUrl(baseUrl);
      }
    };

    void bootstrap();
  }, []);
};


================================================
FILE: apps/client/src/hooks/usePreventBackNavigation.ts
================================================
import { useEffect } from "react";

import { isTauri } from "@/shared/desktop";

const isBackspaceAllowed = (event: KeyboardEvent) => {
  const path = event.composedPath();

  for (const el of path) {
    if (!(el instanceof HTMLElement)) continue;

    const tag = el.tagName;
    if (tag === "INPUT" || tag === "TEXTAREA" || el.isContentEditable) {
      return true;
    }

    if (el.dataset?.allowBackspace === "true") {
      return true;
    }
  }

  return false;
};

export const usePreventBackNavigation = () => {
  useEffect(() => {
    if (!isTauri()) return;

    const handler = (event: KeyboardEvent) => {
      if (event.key !== "Backspace") return;
      if (isBackspaceAllowed(event)) return;
      // Block browser navigation only when not focused on editable/allowed elements.
      event.preventDefault();
    };

    window.addEventListener("keydown", handler, { capture: true });
    return () => window.removeEventListener("keydown", handler, { capture: true });
  }, []);
};


================================================
FILE: apps/client/src/index.css
================================================
@import "tailwindcss";
@import "tw-animate-css";

@tailwind utilities;

@import "tailwindcss";
@import "tw-animate-css";

@custom-variant dark (&:is(.dark *));

:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.145 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.145 0 0);
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.97 0 0);
  --secondary-foreground: oklch(0.205 0 0);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --accent: oklch(0.97 0 0);
  --accent-foreground: oklch(0.205 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --destructive-foreground: oklch(0.577 0.245 27.325);
  --border: oklch(0.922 0 0);
  --input: oklch(0.922 0 0);
  --ring: oklch(0.708 0 0);
  --chart-1: oklch(0.646 0.222 41.116);
  --chart-2: oklch(0.6 0.118 184.704);
  --chart-3: oklch(0.398 0.07 227.392);
  --chart-4: oklch(0.828 0.189 84.429);
  --chart-5: oklch(0.769 0.188 70.08);
  --radius: 0.625rem;
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.145 0 0);
  --sidebar-primary: oklch(0.205 0 0);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.97 0 0);
  --sidebar-accent-foreground: oklch(0.205 0 0);
  --sidebar-border: oklch(0.922 0 0);
  --sidebar-ring: oklch(0.708 0 0);
}

.dark {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.145 0 0);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.145 0 0);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.985 0 0);
  --primary-foreground: oklch(0.205 0 0);
  --secondary: oklch(0.269 0 0);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.269 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --accent: oklch(0.269 0 0);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.396 0.141 25.723);
  --destructive-foreground: oklch(0.637 0.237 25.331);
  --border: oklch(0.269 0 0);
  --input: oklch(0.269 0 0);
  --ring: oklch(0.439 0 0);
  --chart-1: oklch(0.488 0.243 264.376);
  --chart-2: oklch(0.696 0.17 162.48);
  --chart-3: oklch(0.769 0.188 70.08);
  --chart-4: oklch(0.627 0.265 303.9);
  --chart-5: oklch(0.645 0.246 16.439);
  --sidebar: oklch(0.205 0 0);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.488 0.243 264.376);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.269 0 0);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(0.269 0 0);
  --sidebar-ring: oklch(0.439 0 0);
}

@theme inline {
  --font-sans: "Inter", sans-serif;
  --font-mono: "RobotoMono", monospace;
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
}
html,
body,
#root {
  width: 100%;
  height: 100%;
}

* {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

body {
  -ms-overflow-style: none;
}

::-webkit-scrollbar {
  display: none;
}


================================================
FILE: apps/client/src/lib/electron.ts
================================================
export const isElectron = (): boolean => {
  const userAgent = navigator.userAgent.toLowerCase();
  return userAgent.indexOf("electron/") > -1;
};


================================================
FILE: apps/client/src/lib/geometry-precision.ts
================================================
import { FeatureWithVertices } from "@/entities/map/types";

interface GeometryProperties {
  location?: string;
  length?: string;
  area?: string;
}

const WGS84 = {
  a: 6378137,
  b: 6356752.314245,
  f: 1 / 298.257223563,
};

const formatNumber = (num: number, digits: number = 2): string => {
  return num.toLocaleString(undefined, {
    minimumFractionDigits: digits,
    maximumFractionDigits: digits,
  });
};

const degToRad = (degrees: number): number => {
  return degrees * (Math.PI / 180);
};

function vincentyDistance(
  p1: { lat: number; lon: number },
  p2: { lat: number; lon: number },
): number {
  const { a, b, f } = WGS84;
  const L = degToRad(p2.lon - p1.lon);
  const U1 = Math.atan((1 - f) * Math.tan(degToRad(p1.lat)));
  const U2 = Math.atan((1 - f) * Math.tan(degToRad(p2.lat)));
  const sinU1 = Math.sin(U1),
    cosU1 = Math.cos(U1);
  const sinU2 = Math.sin(U2),
    cosU2 = Math.cos(U2);

  let lambda = L,
    lambdaP,
    iterLimit = 100;
  let cosSqAlpha, sinSigma, cosSigma, cos2SigmaM, sigma;

  do {
    const sinLambda = Math.sin(lambda),
      cosLambda = Math.cos(lambda);
    sinSigma = Math.sqrt(
      cosU2 * sinLambda * (cosU2 * sinLambda) +
        (cosU1 * sinU2 - sinU1 * cosU2 * cosLambda) *
          (cosU1 * sinU2 - sinU1 * cosU2 * cosLambda),
    );
    if (sinSigma === 0) return 0;

    cosSigma = sinU1 * sinU2 + cosU1 * cosU2 * cosLambda;
    sigma = Math.atan2(sinSigma, cosSigma);
    const sinAlpha = (cosU1 * cosU2 * sinLambda) / sinSigma;
    cosSqAlpha = 1 - sinAlpha * sinAlpha;
    cos2SigmaM =
      cosSqAlpha === 0 ? 0 : cosSigma - (2 * sinU1 * sinU2) / cosSqAlpha;

    const C = (f / 16) * cosSqAlpha * (4 + f * (4 - 3 * cosSqAlpha));
    lambdaP = lambda;
    lambda =
      L +
      (1 - C) *
        f *
        sinAlpha *
        (sigma +
          C *
            sinSigma *
            (cos2SigmaM + C * cosSigma * (-1 + 2 * cos2SigmaM * cos2SigmaM)));
  } while (Math.abs(lambda - lambdaP) > 1e-12 && --iterLimit > 0);

  if (iterLimit === 0) return NaN;

  const uSq = (cosSqAlpha * (a * a - b * b)) / (b * b);
  const A = 1 + (uSq / 16384) * (4096 + uSq * (-768 + uSq * (320 - 175 * uSq)));
  const B = (uSq / 1024) * (256 + uSq * (-128 + uSq * (74 - 47 * uSq)));
  const deltaSigma =
    B *
    sinSigma *
    (cos2SigmaM +
      (B / 4) *
        (cosSigma * (-1 + 2 * cos2SigmaM * cos2SigmaM) -
          (B / 6) *
            cos2SigmaM *
            (-3 + 4 * sinSigma * sinSigma) *
            (-3 + 4 * cos2SigmaM * cos2SigmaM)));

  return b * A * (sigma - deltaSigma);
}

function sphericalTriangleArea(
  a: number,
  b: number,
  c: number,
  r: number,
): number {
  if (a <= 0 || b <= 0 || c <= 0) return 0;
  const s = (a + b + c) / 2;

  if (s <= a || s <= b || s <= c) return 0;

  const E =
    4 *
    Math.atan(
      Math.sqrt(
        Math.tan(s / (2 * r)) *
          Math.tan((s - a) / (2 * r)) *
          Math.tan((s - b) / (2 * r)) *
          Math.tan((s - c) / (2 * r)),
      ),
    );

  return E * r * r;
}

export function calculateFeatureGeometry(
  feature: FeatureWithVertices,
): GeometryProperties {
  const vertices = feature.vertices
    .sort((a, b) => a.sequence - b.sequence)
    .map((v) => ({ lat: v.latitude, lon: v.longitude }));

  switch (feature.feature_type) {
    case "POINT": {
      if (vertices.length === 0) return {};
      const { lat, lon } = vertices[0];
      return { location: `${lat.toFixed(6)}, ${lon.toFixed(6)}` };
    }

    case "LINE": {
      if (vertices.length < 2) return {};
      let totalLengthMeters = 0;
      for (let i = 0; i < vertices.length - 1; i++) {
        totalLengthMeters += vincentyDistance(vertices[i], vertices[i + 1]);
      }

      if (totalLengthMeters < 1000) {
        return { length: `${formatNumber(totalLengthMeters, 1)} m` };
      }
      return { length: `${formatNumber(totalLengthMeters / 1000, 3)} km` };
    }

    case "POLYGON": {
      if (vertices.length < 3) return {};

      let totalAreaSqMeters = 0;
      const origin = vertices[0];
      const meanRadius = (WGS84.a + WGS84.b) / 2;

      for (let i = 1; i < vertices.length - 1; i++) {
        const p1 = vertices[i];
        const p2 = vertices[i + 1];

        const sideA = vincentyDistance(origin, p1);
        const sideB = vincentyDistance(p1, p2);
        const sideC = vincentyDistance(p2, origin);

        totalAreaSqMeters += sphericalTriangleArea(
          sideA,
          sideB,
          sideC,
          meanRadius,
        );
      }

      if (totalAreaSqMeters < 10000) {
        return { area: `${formatNumber(totalAreaSqMeters, 1)} m²` };
      }
      return { area: `${formatNumber(totalAreaSqMeters / 1_000_000, 3)} km²` };
    }

    default:
      return {};
  }
}


================================================
FILE: apps/client/src/lib/geometry.ts
================================================
import { FeatureWithVertices } from "@/entities/map/types";

interface GeometryProperties {
  location?: string;
  length?: string;
  area?: string;
}

const EARTH_RADIUS_KM = 6371;

const degToRad = (degrees: number): number => {
  return degrees * (Math.PI / 180);
};

const haversineDistance = (
  p1: { lat: number; lon: number },
  p2: { lat: number; lon: number },
): number => {
  const dLat = degToRad(p2.lat - p1.lat);
  const dLon = degToRad(p2.lon - p1.lon);

  const lat1 = degToRad(p1.lat);
  const lat2 = degToRad(p2.lat);

  const a =
    Math.sin(dLat / 2) * Math.sin(dLat / 2) +
    Math.sin(dLon / 2) * Math.sin(dLon / 2) * Math.cos(lat1) * Math.cos(lat2);
  const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));

  return EARTH_RADIUS_KM * c;
};

const formatNumber = (num: number, digits: number = 2): string => {
  return num.toLocaleString(undefined, {
    minimumFractionDigits: digits,
    maximumFractionDigits: digits,
  });
};

export function calculateFeatureGeometry(
  feature: FeatureWithVertices,
): GeometryProperties {
  const vertices = feature.vertices
    .sort((a, b) => a.sequence - b.sequence)
    .map((v) => ({ lat: v.latitude, lon: v.longitude }));

  switch (feature.feature_type) {
    case "POINT": {
      if (vertices.length === 0) return {};
      const { lat, lon } = vertices[0];
      return {
        location: `${lat.toFixed(6)}, ${lon.toFixed(6)}`,
      };
    }

    case "LINE": {
      if (vertices.length < 2) return {};
      let totalLengthKm = 0;
      for (let i = 0; i < vertices.length - 1; i++) {
        totalLengthKm += haversineDistance(vertices[i], vertices[i + 1]);
      }

      if (totalLengthKm < 1) {
        return { length: `${formatNumber(totalLengthKm * 1000, 1)} m` };
      }
      return { length: `${formatNumber(totalLengthKm, 2)} km` };
    }

    case "POLYGON": {
      if (vertices.length < 3) return {};

      const earthRadiusM = EARTH_RADIUS_KM * 1000;
      let area = 0;
      const closedVertices = [...vertices, vertices[0]];

      for (let i = 0; i < vertices.length; i++) {
        const p1 = closedVertices[i];
        const p2 = closedVertices[i + 1];

        const x1 = degToRad(p1.lon) * earthRadiusM * Math.cos(degToRad(p1.lat));
        const y1 = degToRad(p1.lat) * earthRadiusM;
        const x2 = degToRad(p2.lon) * earthRadiusM * Math.cos(degToRad(p2.lat));
        const y2 = degToRad(p2.lat) * earthRadiusM;

        area += x1 * y2 - x2 * y1;
      }

      const areaInSqMeters = Math.abs(area / 2);

      if (areaInSqMeters < 10000) {
        return { area: `${formatNumber(areaInSqMeters, 1)} m²` };
      }
      return { area: `${formatNumber(areaInSqMeters / 1_000_000, 3)} km²` };
    }

    default:
      return {};
  }
}


================================================
FILE: apps/client/src/lib/jwt.ts
================================================
export type JwtPayload = {
  exp?: number;
  sub?: string;
  [key: string]: unknown;
};

export function parseJwt(token?: string): JwtPayload | null {
  if (!token || token.split(".").length < 2) {
    return null;
  }

  try {
    const base64Url = token.split(".")[1];
    const base64 = base64Url?.replace(/-/g, "+").replace(/_/g, "/");
    const jsonPayload = decodeURIComponent(
      atob(base64 || "")
        .split("")
        .map(function (c) {
          return "%" + ("00" + c.charCodeAt(0).toString(16)).slice(-2);
        })
        .join(""),
    );

    return JSON.parse(jsonPayload);
  } catch (error) {
    console.error("Invalid token:", error);
    return null;
  }
}


================================================
FILE: apps/client/src/lib/storage.ts
================================================
const TOKEN_KEY = "vessel_token";
const SERVER_URL_KEY = "vessel_server_url";
const RECENT_URLS_KEY = "vessel_recent_server_urls";
const CAPSULE_URL_KEY = "vessel_capsule_url";

export const storage = {
  getToken: (): string | null => {
    return localStorage.getItem(TOKEN_KEY);
  },

  setToken: (token: string): void => {
    localStorage.setItem(TOKEN_KEY, token);
  },

  removeToken: (): void => {
    localStorage.removeItem(TOKEN_KEY);
  },

  getServerUrl: (): string | null => {
    return localStorage.getItem(SERVER_URL_KEY);
  },

  setServerUrl: (url: string): void => {
    localStorage.setItem(SERVER_URL_KEY, url);
  },

  removeServerUrl: (): void => {
    localStorage.removeItem(SERVER_URL_KEY);
  },

  getRecentUrls: (): string[] => {
    const stored = localStorage.getItem(RECENT_URLS_KEY);
    if (!stored) return [];
    try {
      const parsed = JSON.parse(stored);
      return Array.isArray(parsed) ? parsed : [];
    } catch {
      return [];
    }
  },

  setRecentUrls: (urls: string[]): void => {
    localStorage.setItem(RECENT_URLS_KEY, JSON.stringify(urls));
  },

  removeRecentUrls: (): void => {
    localStorage.removeItem(RECENT_URLS_KEY);
  },

  getCapsuleUrl: (): string | null => {
    return localStorage.getItem(CAPSULE_URL_KEY);
  },

  setCapsuleUrl: (url: string): void => {
    localStorage.setItem(CAPSULE_URL_KEY, url);
  },

  removeCapsuleUrl: (): void => {
    localStorage.removeItem(CAPSULE_URL_KEY);
  },

  clearAll: (): void => {
    localStorage.removeItem(TOKEN_KEY);
    localStorage.removeItem(SERVER_URL_KEY);
    localStorage.removeItem(CAPSULE_URL_KEY);
  },
};


================================================
FILE: apps/client/src/lib/string.ts
================================================
export function formatConstantCase(str: string) {
  return str
    .split("_")
    .map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
    .join(" ");
}


================================================
FILE: apps/client/src/lib/supabase.ts
================================================
import { createClient } from "@supabase/supabase-js";

const supabaseUrl = import.meta.env.VITE_SUPABASE_URL;
const supabaseAnonKey = import.meta.env.VITE_SUPABASE_ANON_KEY;

export const isSupabaseConfigured = Boolean(supabaseUrl && supabaseAnonKey);

if (!isSupabaseConfigured) {
  console.warn(
    "[supabase] VITE_SUPABASE_URL or VITE_SUPABASE_ANON_KEY is not set. " +
      "Supabase-dependent features (Google login, TURN credentials, edge functions) will be disabled.",
  );
}

export const supabase = createClient(
  supabaseUrl || "https://placeholder.supabase.co",
  supabaseAnonKey || "placeholder-anon-key",
);


================================================
FILE: apps/client/src/lib/time.ts
================================================
export const formatSimpleDateTime = (isoString: string): string => {
  if (isoString == "") {
    return "";
  }

  const date = new Date(isoString);

  const year = date.getFullYear();
  const month = (date.getMonth() + 1).toString().padStart(2, "0");
  const day = date.getDate().toString().padStart(2, "0");

  const hours = date.getHours().toString().padStart(2, "0");
  const minutes = date.getMinutes().toString().padStart(2, "0");
  const seconds = date.getSeconds().toString().padStart(2, "0");

  return `${year}.${month}.${day} ${hours}:${minutes}:${seconds}`;
};


================================================
FILE: apps/client/src/lib/utils.ts
================================================
import { clsx, type ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}


================================================
FILE: apps/client/src/main.tsx
================================================
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import "./index.css";
import "./font.css";

import App from "./App.tsx";
import { ThemeProvider } from "./app/providers/theme-provider.tsx";
import { Toaster } from "./components/ui/sonner.tsx";
import { SupabaseAuthProvider } from "./contexts/SupabaseAuthContext.tsx";

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <ThemeProvider defaultTheme='dark' storageKey='vite-ui-theme'>
      <SupabaseAuthProvider>
        <App />
        <Toaster />
      </SupabaseAuthProvider>
    </ThemeProvider>
  </StrictMode>,
);


================================================
FILE: apps/client/src/pages/auth/index.tsx
================================================
import { LoginForm } from "@/features/auth";

export function AuthPage() {
  return (
    <div className="bg-background flex h-[calc(100%_-_34px)] flex-col items-center justify-center gap-6 p-6 md:p-10">
      <div className="w-full max-w-sm">
        <LoginForm />
      </div>
    </div>
  );
}


================================================
FILE: apps/client/src/pages/code/index.tsx
================================================
import { useEffect } from "react";
import { Navigate } from "react-router";
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb";
import {
  ResizablePanelGroup,
  ResizablePanel,
  ResizableHandle,
} from "@/components/ui/resizable";
import { Separator } from "@/components/ui/separator";
import {
  SidebarInset,
  SidebarProvider,
  SidebarTrigger,
} from "@/components/ui/sidebar";
import { FileEditor } from "@/features/code/FileEditor";
import { FileTree } from "@/features/code/FileTree";
import { AppSidebar } from "@/features/sidebar";
import { useConfigStore } from "@/entities/configurations/store";
import { getCodeServiceEnabled } from "@/entities/configurations/codeService";

export function CodePage() {
  const { configurations, fetchConfigs, isLoading } = useConfigStore();

  useEffect(() => {
    void fetchConfigs();
  }, [fetchConfigs]);

  if (isLoading) {
    return (
      <SidebarProvider>
        <AppSidebar />
        <SidebarInset>
          <div className='flex h-full items-center justify-center text-sm text-muted-foreground'>
            Loading…
          </div>
        </SidebarInset>
      </SidebarProvider>
    );
  }

  if (!getCodeServiceEnabled(configurations)) {
    return <Navigate to='/dashboard' replace />;
  }

  return (
    <SidebarProvider>
      <AppSidebar />
      <SidebarInset>
        <header className='flex h-12 shrink-0 items-center gap-2 border-b px-4'>
          <SidebarTrigger className='-ml-1' />
          <Separator
            orientation='vertical'
            className='mr-2 data-[orientation=vertical]:h-4'
          />
          <Breadcrumb>
            <BreadcrumbList>
              <BreadcrumbItem className='hidden md:block'>
                <BreadcrumbLink href='#'>/</BreadcrumbLink>
              </BreadcrumbItem>
              <BreadcrumbSeparator className='hidden md:block' />
              <BreadcrumbItem>
                <BreadcrumbPage>Code</BreadcrumbPage>
              </BreadcrumbItem>
            </BreadcrumbList>
          </Breadcrumb>
        </header>
        <main className='flex-1 overflow-y-auto'>
          <ResizablePanelGroup direction='horizontal' className='w-full h-full'>
            <ResizablePanel defaultSize={20} minSize={15}>
              <div className='h-full overflow-y-auto'>
                <FileTree />
              </div>
            </ResizablePanel>
            <ResizableHandle withHandle />
            <ResizablePanel defaultSize={70}>
              <FileEditor />
            </ResizablePanel>
          </ResizablePanelGroup>
        </main>
      </SidebarInset>
    </SidebarProvider>
  );
}


================================================
FILE: apps/client/src/pages/dashboard/DashboardMainPanel.tsx
================================================
import { AllEntities } from "@/features/entity/AllEntities";
import StatBlock from "@/features/stat";
import ResourceUsage from "@/features/server-resource/resourceUsage";
import { HaDashboard } from "@/features/ha";
import { SdrDashboard } from "@/features/sdr/SdrDashboard";
import { Ros2Dashboard } from "@/features/ros2/Ros2Dashboard";

export type DashboardMainPanelContentView = "main" | "ha" | "ros2" | "sdr";

type DashboardMainPanelProps = {
  contentView?: DashboardMainPanelContentView;
};

export function DashboardMainPanel({
  contentView = "main",
}: DashboardMainPanelProps) {
  return (
    <div className='flex min-h-0 min-w-0 flex-1 flex-col overflow-y-auto overflow-x-hidden'>
      <div className='overflow-scroll gap-4 p-4'>
        <div className='flex flex-1 flex-col'>
          {contentView === "main" && (
            <div className='@container/main flex flex-1 flex-col gap-2'>
              <div className='flex flex-col gap-4 py-4 md:gap-6 md:py-6'>
                <div className='*:data-[slot=card]:from-primary/5 *:data-[slot=card]:to-card dark:*:data-[slot=card]:bg-card grid grid-cols-1 gap-4 px-4 *:data-[slot=card]:bg-gradient-to-t *:data-[slot=card]:shadow-xs lg:px-6 @xl/main:grid-cols-2 @5xl/main:grid-cols-4'>
                  <StatBlock />
                  <ResourceUsage />
                </div>
              </div>

              <div className='flex flex-col gap-4 py-6 md:gap-6 md:py-6'>
                <AllEntities />
              </div>
            </div>
          )}

          <div className='@container/main flex flex-1 flex-col gap-2'>
            {contentView === "ha" && <HaDashboard />}
            {contentView === "ros2" && <Ros2Dashboard />}
            {contentView === "sdr" && <SdrDashboard />}
          </div>
        </div>
      </div>
    </div>
  );
}


================================================
FILE: apps/client/src/pages/dashboard/index.tsx
================================================
export {
  DashboardMainPanel,
  type DashboardMainPanelContentView,
} from "./DashboardMainPanel";


================================================
FILE: apps/client/src/pages/desktop-settings/index.tsx
================================================
import React, { useEffect, useMemo, useState } from "react";

import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { storage } from "@/lib/storage";
import {
  getServerAddress,
  type ServerAddress,
  updateServerAddress,
} from "@/shared/desktop";

const HOST_PRESETS = [
  { value: "0.0.0.0", label: "0.0.0.0  (LAN / external access)" },
  { value: "127.0.0.1", label: "127.0.0.1  (this machine only)" },
  { value: "__custom__", label: "Custom host\u2026" },
];

const isValidHost = (value: string): boolean => {
  if (!value) return false;
  if (value === "0.0.0.0" || value === "127.0.0.1" || value === "localhost") {
    return true;
  }
  const ipv4 =
    /^(25[0-5]|2[0-4]\d|[01]?\d?\d)(\.(25[0-5]|2[0-4]\d|[01]?\d?\d)){3}$/;
  if (ipv4.test(value)) return true;
  const hostname =
    /^[a-zA-Z0-9]([a-zA-Z0-9-]*[a-zA-Z0-9])?(\.[a-zA-Z0-9]([a-zA-Z0-9-]*[a-zA-Z0-9])?)*$/;
  return hostname.test(value);
};

const closeSelf = async () => {
  try {
    const mod = await import("@tauri-apps/api/window");
    const win = mod.getCurrentWindow();
    await win.close();
  } catch (err) {
    console.warn("Unable to close settings window via @tauri-apps/api", err);
    try {
      window.close();
    } catch {
      // ignore
    }
  }
};

export function DesktopSettingsPage(): React.ReactElement {
  const [hostMode, setHostMode] = useState<string>("0.0.0.0");
  const [host, setHost] = useState<string>("0.0.0.0");
  const [port, setPort] = useState<string>("6174");
  const [loading, setLoading] = useState<boolean>(true);
  const [saving, setSaving] = useState<boolean>(false);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    let cancelled = false;
    (async () => {
      const current = await getServerAddress();
      if (cancelled) return;
      if (current) {
        applyAddress(current);
      }
      setLoading(false);
    })();
    return () => {
      cancelled = true;
    };
  }, []);

  const applyAddress = (addr: ServerAddress) => {
    const preset = HOST_PRESETS.find(
      (p) => p.value !== "__custom__" && p.value === addr.host,
    );
    setHost(addr.host);
    setPort(String(addr.port));
    setHostMode(preset ? preset.value : "__custom__");
  };

  const portNumber = useMemo(() => Number.parseInt(port, 10), [port]);
  const hostValid = isValidHost(host.trim());
  const portValid =
    Number.isFinite(portNumber) && portNumber >= 1 && portNumber <= 65535;
  const canSave = hostValid && portValid && !saving && !loading;
  const lowPortWarning = portValid && portNumber < 1024;
  const externalWarning =
    hostValid && host.trim() !== "127.0.0.1" && host.trim() !== "localhost";

  const handleHostModeChange = (value: string) => {
    setHostMode(value);
    if (value !== "__custom__") {
      setHost(value);
    }
  };

  const handleSave = async () => {
    setError(null);
    if (!hostValid) {
      setError("Invalid host. Use an IPv4 address or hostname.");
      return;
    }
    if (!portValid) {
      setError("Port must be an integer between 1 and 65535.");
      return;
    }

    setSaving(true);
    try {
      const status = await updateServerAddress(host.trim(), portNumber);
      if (status?.base_url) {
        storage.setServerUrl(status.base_url);
      }
      await closeSelf();
    } catch (err) {
      const message = err instanceof Error ? err.message : String(err);
      setError(message);
    } finally {
      setSaving(false);
    }
  };

  return (
    <div className='min-h-screen bg-background text-foreground'>
      <div className='flex flex-col gap-5 p-6'>
        <div>
          <h1 className='text-lg font-semibold'>Server Address</h1>
        </div>

        <div className='grid gap-4'>
          <div className='grid gap-2'>
            <Label htmlFor='host-preset'>Host</Label>
            <Select value={hostMode} onValueChange={handleHostModeChange}>
              <SelectTrigger id='host-preset' className='w-full'>
                <SelectValue placeholder='Select host' />
              </SelectTrigger>
              <SelectContent>
                {HOST_PRESETS.map((preset) => (
                  <SelectItem key={preset.value} value={preset.value}>
                    {preset.label}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
            {hostMode === "__custom__" && (
              <Input
                value={host}
                onChange={(e) => setHost(e.target.value)}
                placeholder='e.g. 192.168.1.10'
                aria-invalid={!hostValid}
                spellCheck={false}
              />
            )}
          </div>

          <div className='grid gap-2'>
            <Label htmlFor='port'>Port</Label>
            <Input
              id='port'
              type='number'
              min={1}
              max={65535}
              value={port}
              onChange={(e) => setPort(e.target.value)}
              aria-invalid={!portValid}
            />
          </div>
        </div>

        {(externalWarning || lowPortWarning) && (
          <div className='space-y-1 rounded-md border border-yellow-700/50 bg-yellow-900/20 p-3 text-xs text-yellow-200'>
            {externalWarning && (
              <p>
                Binding to <code>{host}</code> exposes the server beyond this
                machine. Make sure your firewall is configured.
              </p>
            )}
            {lowPortWarning && (
              <p>
                Ports below 1024 are privileged and may require additional
                permissions.
              </p>
            )}
          </div>
        )}

        {error && (
          <div className='rounded-md border border-red-700/60 bg-red-900/20 p-3 text-xs text-red-200'>
            {error}
          </div>
        )}

        <div className='flex justify-end gap-2'>
          <Button
            variant='ghost'
            onClick={() => void closeSelf()}
            disabled={saving}
          >
            Cancel
          </Button>
          <Button onClick={() => void handleSave()} disabled={!canSave}>
            {saving ? "Restarting\u2026" : "Save & Restart"}
          </Button>
        </div>
      </div>
    </div>
  );
}

export default DesktopSettingsPage;


================================================
FILE: apps/client/src/pages/devices/index.tsx
================================================
import { useEffect, useRef } from "react";
import { useSearchParams } from "react-router";
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb";
import { Separator } from "@/components/ui/separator";
import {
  SidebarInset,
  SidebarProvider,
  SidebarTrigger,
} from "@/components/ui/sidebar";
import { AppSidebar } from "@/features/sidebar";
import {
  INTEGRATION_DEVICE_ID,
  INTEGRATION_ENTITY_ID,
} from "@/features/integration/constants";
import { useDeviceStore } from "@/entities/device/store";
import { useEntityStore } from "@/entities/entity/store";
import { DeviceList } from "@/widgets/device-list/DeviceList";
import { EntityList } from "@/widgets/entity-list/EntityList";

export function DevicePage() {
  const [searchParams, setSearchParams] = useSearchParams();
  const configureParam = searchParams.get("configure");

  const { devices, isLoading: devicesLoading, selectDevice } = useDeviceStore();
  const { entities, isLoading: entitiesLoading, setAutoOpenEntityId } =
    useEntityStore();
  const hasAutoConfigured = useRef(false);

  useEffect(() => {
    if (!configureParam || hasAutoConfigured.current) return;
    if (devicesLoading || entitiesLoading) return;
    if (devices.length === 0 || entities.length === 0) return;

    const targetDeviceId = INTEGRATION_DEVICE_ID[configureParam];
    const targetEntityId = INTEGRATION_ENTITY_ID[configureParam];
    if (!targetDeviceId) {
      setSearchParams({}, { replace: true });
      return;
    }

    const targetDevice = devices.find((d) => d.device_id === targetDeviceId);
    if (!targetDevice) {
      setSearchParams({}, { replace: true });
      return;
    }

    selectDevice(targetDevice);

    const targetEntity = targetEntityId
      ? entities.find((e) => e.entity_id === targetEntityId && e.device_id === targetDevice.id)
      : entities.find((e) => e.device_id === targetDevice.id);
    const firstEntity = targetEntity;
    if (firstEntity) {
      setAutoOpenEntityId(firstEntity.id);
    }

    hasAutoConfigured.current = true;
    setSearchParams({}, { replace: true });
  }, [
    configureParam,
    devices,
    entities,
    devicesLoading,
    entitiesLoading,
    selectDevice,
    setAutoOpenEntityId,
    setSearchParams,
  ]);

  return (
    <SidebarProvider>
      <AppSidebar />
      <SidebarInset>
        <header className='flex h-12 shrink-0 items-center gap-2 border-b px-4'>
          <SidebarTrigger className='-ml-1' />
          <Separator
            orientation='vertical'
            className='mr-2 data-[orientation=vertical]:h-4'
          />
          <Breadcrumb>
            <BreadcrumbList>
              <BreadcrumbItem className='hidden md:block'>
                <BreadcrumbLink href='#'>/</BreadcrumbLink>
              </BreadcrumbItem>
              <BreadcrumbSeparator className='hidden md:block' />
              <BreadcrumbItem>
                <BreadcrumbPage>Devices</BreadcrumbPage>
              </BreadcrumbItem>
            </BreadcrumbList>
          </Breadcrumb>
        </header>
        <main className='flex flex-1 flex-col gap-4 p-4 md:gap-8 md:p-6'>
          <div className='grid auto-rows-max items-start gap-4 md:gap-8 lg:grid-cols-2'>
            <DeviceList />
            <EntityList />
          </div>
        </main>
      </SidebarInset>
    </SidebarProvider>
  );
}


================================================
FILE: apps/client/src/pages/dynamic-dashboard/DynamicDashboardMainPanel.tsx
================================================
import { useMemo } from "react";
import { useDynamicDashboardStore } from "@/entities/dynamic-dashboard/store";
import { GroupCanvas } from "@/features/dynamic-dashboard/GroupCanvas";
import { useEntitiesData } from "@/features/entity/useEntitiesData";

type DynamicDashboardMainPanelProps = {
  /** Which dashboard this column renders (store order / swipe order). */
  dashboardId: string;
};

export function DynamicDashboardMainPanel({
  dashboardId,
}: DynamicDashboardMainPanelProps) {
  const { dashboards } = useDynamicDashboardStore();
  const { entities, streamsState } = useEntitiesData();

  const currentDashboard = useMemo(
    () => dashboards.find((d) => d.id === dashboardId),
    [dashboards, dashboardId],
  );

  return (
    <div className='flex min-h-0 min-w-0 flex-1 flex-col overflow-y-auto overflow-x-hidden'>
      {currentDashboard?.groups[0] ? (
        <div className='flex min-h-0 flex-1 flex-col'>
          <div className='flex flex-col md:min-h-0 md:flex-1'>
            <GroupCanvas
              dashboardId={currentDashboard.id}
              group={currentDashboard.groups[0]}
              entities={entities}
              streamsState={streamsState}
            />
          </div>
        </div>
      ) : (
        <div className='text-sm text-muted-foreground'>
          No dynamic dashboard found. Create one with the + button or swipe
          sideways for a new canvas.
        </div>
      )}
    </div>
  );
}


================================================
FILE: apps/client/src/pages/dynamic-dashboard/NewDynamicDashboardPanel.tsx
================================================
import { Button } from "@/components/ui/button";
import { useDynamicDashboardStore } from "@/entities/dynamic-dashboard/store";
import { Plus } from "lucide-react";
import { useNavigate } from "react-router";

export function NewDynamicDashboardPanel() {
  const navigate = useNavigate();
  const createDashboard = useDynamicDashboardStore((s) => s.createDashboard);

  const handleCreate = async () => {
    const id = await createDashboard();
    if (id) {
      navigate(`/dynamic-dashboard/${id}`, { replace: true });
    }
  };

  return (
    <div className='flex min-h-0 flex-1 flex-col items-center justify-center gap-4 overflow-hidden px-6'>
      <Button size='lg' onClick={handleCreate} className='shrink-0 gap-2'>
        <Plus className='h-5 w-5' />
        Create dynamic dashboard
      </Button>
    </div>
  );
}


================================================
FILE: apps/client/src/pages/dynamic-dashboard/index.tsx
================================================
export { DynamicDashboardMainPanel } from "./DynamicDashboardMainPanel";
export { NewDynamicDashboardPanel } from "./NewDynamicDashboardPanel";


================================================
FILE: apps/client/src/pages/flow/index.tsx
================================================
import { useCallback, useEffect, useState } from "react";
import {
  Breadcrumb,
  BreadcrumbList,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbSeparator,
  BreadcrumbPage,
} from "@/components/ui/breadcrumb";
import { Separator } from "@/components/ui/separator";
import {
  SidebarInset,
  SidebarProvider,
  SidebarTrigger,
} from "@/components/ui/sidebar";
import Flow, { FlowHeader, FlowSidebar } from "@/features/flow/Flow";
import { AppSidebar } from "@/features/sidebar";
import { useBeforeUnload, useBlocker } from "react-router";
import { useFlowStore } from "@/entities/flow/store";
import { useChatStore } from "@/features/llm-chat";
import {
  buildFlowSystemPrompt,
  FLOW_TOOLS,
  executeFlowToolCalls,
} from "@/features/flow/flow-chat";
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from "@/components/ui/alert-dialog";

const UNSAVED_FLOW_MESSAGE =
  "You have unsaved changes in this flow. Leave without saving?";

export function FlowPage() {
  const { hasUnsavedChanges } = useFlowStore();
  const blocker = useBlocker(hasUnsavedChanges);
  const [showLeavePrompt, setShowLeavePrompt] = useState(false);

  useEffect(() => {
    useChatStore.getState().setFlowContext({
      buildSystemPrompt: () => {
        const { nodes, edges, flows, currentFlowId } = useFlowStore.getState();
        const currentFlow = flows.find((f) => f.id === currentFlowId);
        return buildFlowSystemPrompt(
          nodes,
          edges,
          flows,
          currentFlow?.name ?? null,
        );
      },
      tools: FLOW_TOOLS,
      executeToolCalls: (toolCalls) =>
        executeFlowToolCalls(toolCalls, useFlowStore.getState()),
    });
    return () => {
      useChatStore.getState().setFlowContext(null);
    };
  }, []);

  const handleBeforeUnload = useCallback(
    (event: BeforeUnloadEvent) => {
      if (!hasUnsavedChanges) return;
      event.preventDefault();
      event.returnValue = UNSAVED_FLOW_MESSAGE;
      return UNSAVED_FLOW_MESSAGE;
    },
    [hasUnsavedChanges],
  );

  useBeforeUnload(handleBeforeUnload);

  useEffect(() => {
    if (blocker.state === "blocked") {
      setShowLeavePrompt(true);
    } else {
      setShowLeavePrompt(false);
    }
  }, [blocker.state]);

  const handleStay = () => {
    blocker.reset?.();
    setShowLeavePrompt(false);
  };

  const handleLeave = () => {
    blocker.proceed?.();
    setShowLeavePrompt(false);
  };

  return (
    <SidebarProvider className='!h-svh !min-h-0 overflow-hidden'>
      <AppSidebar />
      <SidebarInset className='h-full'>
        <header className='flex h-12 shrink-0 items-center gap-2 border-b px-4 justify-between'>
          <SidebarTrigger className='-ml-1' />
          <Separator
            orientation='vertical'
            className='mr-2 data-[orientation=vertical]:h-4'
          />
          <Breadcrumb>
            <BreadcrumbList>
              <BreadcrumbItem className='hidden md:block'>
                <BreadcrumbLink href='#'>/</BreadcrumbLink>
              </BreadcrumbItem>
              <BreadcrumbSeparator className='hidden md:block' />
              <BreadcrumbItem>
                <BreadcrumbPage>Flow</BreadcrumbPage>
              </BreadcrumbItem>
            </BreadcrumbList>
          </Breadcrumb>

          <div className='ml-auto'>
            <FlowHeader />
          </div>
        </header>
        <div className='flex flex-1 flex-row h-[calc(100vh-48px)] overflow-hidden'>
          <FlowSidebar />
          <Flow />
        </div>
      </SidebarInset>

      <AlertDialog
        open={showLeavePrompt}
        onOpenChange={(open) => {
          if (!open && blocker.state === "blocked") {
            blocker.reset?.();
          }
          setShowLeavePrompt(open);
        }}
      >
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>Unsaved changes</AlertDialogTitle>
            <AlertDialogDescription>
              {UNSAVED_FLOW_MESSAGE} Unsaved changes will be lost if you leave.
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel onClick={handleStay}>
              Stay on this page
            </AlertDialogCancel>
            <AlertDialogAction onClick={handleLeave}>
              Leave without saving
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </SidebarProvider>
  );
}


================================================
FILE: apps/client/src/pages/landing/index.tsx
================================================
import {
  NavigationMenu,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  navigationMenuTriggerStyle,
} from "@/components/ui/navigation-menu";
import { Link, useNavigate } from "react-router";
import { useEffect } from "react";

function LandingPage() {
  const navigate = useNavigate();

  useEffect(() => {
    navigate("/auth");
  }, []);

  return (
    <>
      <main className='flex h-screen w-screen flex-col items-center justify-center bg-background text-foreground'>
        {/* <div className='flex flex-col items-center gap-y-6'>
          <h1 className='text-3xl md:text-5xl lg:text-5xl leading-17 font-bold tracking-tight text-center'>
            Vessel
          </h1>
          <div className='flex items-center gap-x-3 pt-2'>
            <Button
              variant={"default"}
              onClick={() => (location.href = "/auth")}
            >
              <LogIn /> Auth
            </Button>
            <Button
              variant='outline'
              onClick={() =>
                window.open("https://vessel.cartesiancs.com/docs/introduction")
              }
            >
              <BookText /> Docs
            </Button>
            <Button
              onClick={() =>
                window.open("https://github.com/cartesiancs/vessel")
              }
              variant='outline'
            >
              <FaGithub />
              GitHub
            </Button>
          </div>
        </div> */}
      </main>
    </>
  );
}

export function Navbar() {
  const openInNewTab = (url: string) => {
    window.open(url, "_blank", "noopener,noreferrer");
  };

  return (
    <header className='absolute flex items-center justify-center top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60'>
      <div className='container h-14 flex items-center justify-between w-full'>
        <div className='flex items-center'>
          <Link
            to='/'
            className='mr-6 flex items-center space-x-2 pl-4 sm:pl-8 gap-1'
          >
            <img src='/icon.png' alt='Logo' className='w-8' />
            <span className='hidden font-medium sm:inline-block'>Vessel</span>
          </Link>
        </div>

        <NavigationMenu>
          <NavigationMenuList>
            <NavigationMenuItem>
              <NavigationMenuLink
                className={navigationMenuTriggerStyle()}
                onClick={() => openInNewTab("/docs")}
                style={{ cursor: "pointer" }}
              >
                Docs
              </NavigationMenuLink>
            </NavigationMenuItem>
            <NavigationMenuItem>
              <NavigationMenuLink
                className={navigationMenuTriggerStyle()}
                onClick={() =>
                  openInNewTab("https://github.com/cartesiancs/vessel")
                }
                style={{ cursor: "pointer" }}
              >
                GitHub
              </NavigationMenuLink>
            </NavigationMenuItem>
            <NavigationMenuItem>
              <NavigationMenuLink
                className={navigationMenuTriggerStyle()}
                onClick={() => openInNewTab("/docs")}
                style={{ cursor: "pointer" }}
              >
                Blog
              </NavigationMenuLink>
            </NavigationMenuItem>
          </NavigationMenuList>
        </NavigationMenu>
      </div>
    </header>
  );
}

export default LandingPage;


================================================
FILE: apps/client/src/pages/map/index.tsx
================================================
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb";
import { Separator } from "@/components/ui/separator";
import {
  SidebarInset,
  SidebarProvider,
  SidebarTrigger,
  useSidebar,
} from "@/components/ui/sidebar";
import { MapView } from "@/features/map";
import { LayerSidebar } from "@/features/map-draw/LayerSidebar";
import { MapToolbar } from "@/features/map-draw/MapToolbar";
import { WebRTCProvider } from "@/features/rtc/WebRTCProvider";
import { AppSidebar } from "@/features/sidebar";

export function MapLayout() {
  const { open } = useSidebar();

  return (
    <SidebarInset>
      <header className='flex h-12 shrink-0 items-center gap-2 border-b px-4 fixed w-full bg-background/60 backdrop-blur-md z-[999]'>
        <SidebarTrigger className='-ml-1' />
        <Separator
          orientation='vertical'
          className='mr-2 data-[orientation=vertical]:h-4'
        />
        <Breadcrumb>
          <BreadcrumbList>
            <BreadcrumbItem className='hidden md:block'>
              <BreadcrumbLink href='#'>/</BreadcrumbLink>
            </BreadcrumbItem>
            <BreadcrumbSeparator className='hidden md:block' />
            <BreadcrumbItem>
              <BreadcrumbPage>Map</BreadcrumbPage>
            </BreadcrumbItem>
          </BreadcrumbList>
        </Breadcrumb>
      </header>
      <main className='flex-1 p-0 overflow-hidden'>
        <LayerSidebar />
        <MapToolbar />
        <MapView isSidebarCollapsed={open} />
      </main>
    </SidebarInset>
  );
}

export function MapPage() {
  return (
    <SidebarProvider>
      <WebRTCProvider>
        <AppSidebar />
        <MapLayout />
      </WebRTCProvider>
    </SidebarProvider>
  );
}


================================================
FILE: apps/client/src/pages/notfound/index.tsx
================================================
import { Link } from "react-router";

export function NotFound() {
  return (
    <div className='bg-background flex h-[calc(100%_-_34px)] items-center justify-center p-6 md:p-10'>
      <div className='flex w-full max-w-lg flex-col items-center text-center md:flex-row md:items-center md:gap-8 md:text-left'>
        <h1 className='text-9xl font-extrabold tracking-tighter text-primary'>
          404
        </h1>
        <div className='mt-4 md:mt-0'>
          <h2 className='text-2xl font-semibold text-foreground'>
            Page Not Found
          </h2>
          <p className='mt-2 text-base text-muted-foreground'>
            Sorry, the page you are looking for might not exist or has been
            moved.
          </p>
          <Link
            to='/dashboard'
            className='mt-6 inline-flex h-10 items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground shadow transition-colors hover:bg-primary/90 focus-visible:outline-none'
          >
            Go to Dashboard
          </Link>
        </div>
      </div>
    </div>
  );
}


================================================
FILE: apps/client/src/pages/recordings/index.tsx
================================================
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb";
import { Separator } from "@/components/ui/separator";
import {
  SidebarInset,
  SidebarProvider,
  SidebarTrigger,
} from "@/components/ui/sidebar";
import { RecordingsList } from "@/features/recording";
import { AppSidebar } from "@/features/sidebar";

export function RecordingsPage() {
  return (
    <SidebarProvider>
      <AppSidebar />
      <SidebarInset>
        <header className='flex h-12 shrink-0 items-center gap-2 border-b px-4'>
          <SidebarTrigger className='-ml-1' />
          <Separator
            orientation='vertical'
            className='mr-2 data-[orientation=vertical]:h-4'
          />
          <Breadcrumb>
            <BreadcrumbList>
              <BreadcrumbItem>
                <BreadcrumbLink href='#'>/</BreadcrumbLink>
              </BreadcrumbItem>
              <BreadcrumbSeparator />
              <BreadcrumbItem>
                <BreadcrumbPage>Recordings</BreadcrumbPage>
              </BreadcrumbItem>
            </BreadcrumbList>
          </Breadcrumb>
        </header>
        <main className='flex flex-1 flex-col gap-4 p-4 md:gap-8 md:p-6'>
          <RecordingsList />
        </main>
      </SidebarInset>
    </SidebarProvider>
  );
}


================================================
FILE: apps/client/src/pages/settings/account.tsx
================================================
import { useState } from "react";
import { Link } from "react-router";
import { toast } from "sonner";
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb";
import {
  SidebarInset,
  SidebarProvider,
  SidebarTrigger,
} from "@/components/ui/sidebar";
import { AppSidebar } from "@/features/sidebar";
import { Separator } from "@/components/ui/separator";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { useSupabaseAuth } from "@/contexts/SupabaseAuthContext";
import {
  fetchTurnCredentials,
  clearTurnCache,
  saveTurnConfigToServer,
  getCredentialInfo,
  isTurnCredentialError,
  notifyListeners,
  type TurnCredentialsResponse,
  type TurnUsage,
} from "@/features/rtc/turnService";
import { useChatStore } from "@/features/llm-chat/store";
import { storage } from "@/lib/storage";

function formatTurnQuotaUsage(usage: TurnUsage | null): string | null {
  if (!usage?.quotaBytes) return null;

  const usedGb = (usage.totalBytes / 1024 ** 3).toFixed(2);
  const quotaGb = (usage.quotaBytes / 1024 ** 3).toFixed(2);
  const resetsAt = usage.periodEnd
    ? new Date(usage.periodEnd).toLocaleString()
    : null;

  return resetsAt
    ? `${usedGb} GB / ${quotaGb} GB used. Quota resets ${resetsAt}.`
    : `${usedGb} GB / ${quotaGb} GB used this period.`;
}

export function AccountSettingsPage() {
  const {
    session,
    isLoading: authLoading,
    signInWithGoogle,
    signOut,
  } = useSupabaseAuth();

  const { updateCapsuleUrl } = useChatStore();
  const [capsuleUrl, setCapsuleUrl] = useState(
    storage.getCapsuleUrl() ||
      import.meta.env.VITE_CAPSULE_URL ||
      "http://localhost:3000",
  );
  const [capsuleSaved, setCapsuleSaved] = useState(false);

  const handleSaveCapsuleUrl = () => {
    updateCapsuleUrl(capsuleUrl);
    setCapsuleSaved(true);
    toast.success("Capsule URL updated");
    setTimeout(() => setCapsuleSaved(false), 2000);
  };

  const [turnLoading, setTurnLoading] = useState(false);
  const [turnResult, setTurnResult] = useState<TurnCredentialsResponse | null>(
    null,
  );
  const [turnError, setTurnError] = useState<string | null>(null);
  const [turnErrorUsage, setTurnErrorUsage] = useState<TurnUsage | null>(null);

  const existingCred = getCredentialInfo();
  const isIssued = turnResult
    ? !new Date(turnResult.expiresAt).getTime() ||
      new Date(turnResult.expiresAt).getTime() > Date.now()
    : existingCred !== null && !existingCred.isExpired;
  const isExpired = turnResult
    ? false
    : existingCred !== null && existingCred.isExpired;

  const handleIssueTurn = async () => {
    setTurnLoading(true);
    setTurnError(null);
    setTurnErrorUsage(null);
    setTurnResult(null);
    try {
      clearTurnCache();
      const result = await fetchTurnCredentials();
      await saveTurnConfigToServer({
        iceServers: result.iceServers,
        expiresAt: result.expiresAt,
      });
      setTurnResult(result);
      notifyListeners(result.iceServers);
    } catch (err) {
      if (isTurnCredentialError(err)) {
        setTurnError(err.message);
        setTurnErrorUsage(err.usage ?? null);
      } else {
        setTurnError(
          err instanceof Error
            ? err.message
            : "Failed to issue TURN credentials",
        );
      }
    } finally {
      setTurnLoading(false);
    }
  };

  return (
    <SidebarProvider>
      <AppSidebar />
      <SidebarInset>
        <header className='flex h-12 shrink-0 items-center gap-2 border-b px-4'>
          <SidebarTrigger className='-ml-1' />
          <Separator
            orientation='vertical'
            className='mr-2 data-[orientation=vertical]:h-4'
          />
          <Breadcrumb>
            <BreadcrumbList>
              <BreadcrumbItem>
                <BreadcrumbLink asChild>
                  <Link to='/dashboard'>/</Link>
                </BreadcrumbLink>
              </BreadcrumbItem>
              <BreadcrumbSeparator />
              <BreadcrumbItem>
                <BreadcrumbLink asChild>
                  <Link to='/settings'>Settings</Link>
                </BreadcrumbLink>
              </BreadcrumbItem>
              <BreadcrumbSeparator />
              <BreadcrumbItem>
                <BreadcrumbPage>Account</BreadcrumbPage>
              </BreadcrumbItem>
            </BreadcrumbList>
          </Breadcrumb>
        </header>

        <main className='flex-1 overflow-y-auto p-4 md:p-6 space-y-4'>
          <div className='flex flex-col'>
            <h1 className='font-semibold text-lg md:text-2xl'>Account</h1>
          </div>

          <Card>
            <CardHeader>
              <CardTitle>Vessel Cloud</CardTitle>
              <CardDescription>
                Sign in to connect with Vessel Cloud tunnel servers
              </CardDescription>
            </CardHeader>
            <CardContent>
              {session ? (
                <div className='flex items-center justify-between'>
                  <div className='flex items-center gap-2'>
                    <span className='text-sm text-muted-foreground'>
                      Signed in as
                    </span>
                    <span className='font-medium'>{session.user?.email}</span>
                  </div>
                  <Button
                    variant='outline'
                    onClick={signOut}
                    disabled={authLoading}
                  >
                    Sign Out
                  </Button>
                </div>
              ) : (
                <Button onClick={signInWithGoogle} disabled={authLoading}>
                  Sign in with Google
                </Button>
              )}
            </CardContent>
          </Card>

          <Card>
            <CardHeader>
              <CardTitle>Capsule Server</CardTitle>
              <CardDescription>
                Configure the Capsule AI server URL for chat and image analysis
              </CardDescription>
            </CardHeader>
            <CardContent className='space-y-3'>
              <div className='space-y-1'>
                <Label htmlFor='capsule-url'>Capsule Server URL</Label>
                <div className='flex gap-2'>
                  <Input
                    id='capsule-url'
                    placeholder='http://localhost:3000'
                    value={capsuleUrl}
                    onChange={(e) => setCapsuleUrl(e.target.value)}
                  />
                  <Button onClick={handleSaveCapsuleUrl}>
                    {capsuleSaved ? "Saved" : "Save"}
                  </Button>
                </div>
              </div>
              <p className='text-xs text-muted-foreground'>
                Default:{" "}
                {import.meta.env.VITE_CAPSULE_URL || "http://localhost:3000"}
              </p>
            </CardContent>
          </Card>

          {session && (
            <Card>
              <CardHeader>
                <CardTitle>TURN Server</CardTitle>
                <CardDescription>
                  Issue Cloudflare TURN credentials for WebRTC relay
                </CardDescription>
              </CardHeader>
              <CardContent className='space-y-3'>
                <div className='flex items-center gap-3'>
                  {isExpired ? (
                    <Button
                      variant='destructive'
                      onClick={handleIssueTurn}
                      disabled={turnLoading}
                    >
                      {turnLoading
                        ? "Re-issuing..."
                        : "Re-issue TURN Credentials"}
                    </Button>
                  ) : (
                    <Button
                      onClick={handleIssueTurn}
                      disabled={turnLoading || isIssued}
                    >
                      {turnLoading ? "Issuing..." : "Issue TURN Credentials"}
                    </Button>
                  )}
                  {isIssued && (
                    <Badge variant='outline' className='text-green-600'>
                      Issued — expires{" "}
                      {new Date(
                        turnResult?.expiresAt ?? existingCred!.expiresAt,
                      ).toLocaleTimeString()}
                    </Badge>
                  )}
                  {isExpired && (
                    <Badge variant='outline' className='text-red-500'>
                      Expired
                    </Badge>
                  )}
                  {turnError && (
                    <div className='space-y-1'>
                      <span className='text-sm text-red-500'>{turnError}</span>
                      {turnErrorUsage && (
                        <p className='text-xs text-muted-foreground'>
                          {formatTurnQuotaUsage(turnErrorUsage)}
                        </p>
                      )}
                    </div>
                  )}
                </div>
                {isIssued && (
                  <p className='text-xs text-muted-foreground'>
                    {(turnResult?.iceServers ?? existingCred?.iceServers)
                      ?.length ?? 0}{" "}
                    ICE server(s) cached. Credentials will be applied
                    automatically.
                  </p>
                )}
              </CardContent>
            </Card>
          )}
        </main>
      </SidebarInset>
    </SidebarProvider>
  );
}


================================================
FILE: apps/client/src/pages/settings/config.tsx
================================================
import { useEffect } from "react";
import { Link } from "react-router";
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb";
import {
  SidebarInset,
  SidebarProvider,
  SidebarTrigger,
} from "@/components/ui/sidebar";
import { AppSidebar } from "@/features/sidebar";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import { Badge } from "@/components/ui/badge";
import { ConfigurationCreateButton } from "@/features/configurations/ConfigurationCreateButton";
import { ConfigurationActionButton } from "@/features/configurations/ConfigurationActionButton";
import { Separator } from "@/components/ui/separator";
import { useConfigStore } from "@/entities/configurations/store";

export function ConfigSettingsPage() {
  const { configurations, fetchConfigs, isLoading, error } = useConfigStore();

  useEffect(() => {
    fetchConfigs();
  }, [fetchConfigs]);

  return (
    <SidebarProvider>
      <AppSidebar />
      <SidebarInset className='flex-1 min-w-0 h-full flex flex-col'>
        <header className='flex h-12 shrink-0 items-center gap-2 border-b bg-background px-4'>
          <SidebarTrigger className='-ml-1' />
          <Separator
            orientation='vertical'
            className='mr-2 data-[orientation=vertical]:h-4'
          />
          <Breadcrumb className='hidden md:flex'>
            <BreadcrumbList>
              <BreadcrumbItem>
                <BreadcrumbLink asChild>
                  <Link to='/dashboard'>/</Link>
                </BreadcrumbLink>
              </BreadcrumbItem>
              <BreadcrumbSeparator />
              <BreadcrumbItem>
                <BreadcrumbLink asChild>
                  <Link to='/settings'>Settings</Link>
                </BreadcrumbLink>
              </BreadcrumbItem>
              <BreadcrumbSeparator />
              <BreadcrumbItem>
                <BreadcrumbPage>Config</BreadcrumbPage>
              </BreadcrumbItem>
            </BreadcrumbList>
          </Breadcrumb>
          <div className='ml-auto'>
            <ConfigurationCreateButton />
          </div>
        </header>

        <main className='flex-1 overflow-y-auto p-4 md:p-6'>
          <div className='flex flex-col mb-4'>
            <div className='flex items-center mb-1'>
              <h1 className='font-semibold text-lg md:text-2xl'>
                Configurations
              </h1>
            </div>
            <b className='text-neutral-500 font-light text-sm'>
              If you change the configurations, you must restart the server.
              **If a problem occurs due to an incorrect value, you will need to
              activate debug mode to forcibly change the setting.**
            </b>
          </div>

          {isLoading && <div>Loading configurations...</div>}
          {error && <div className='text-red-500'>{error}</div>}

          {!isLoading && !error && (
            <div className='border shadow-sm  overflow-x-auto'>
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead className='w-[200px] min-w-[200px]'>
                      Key
                    </TableHead>
                    <TableHead className='min-w-[250px]'>Value</TableHead>
                    <TableHead className='w-[100px] min-w-[100px]'>
                      Status
                    </TableHead>
                    <TableHead className='sticky right-0 bg-background w-[100px] min-w-[100px] text-right'>
                      Actions
                    </TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {configurations.map((config) => (
                    <TableRow key={config.id}>
                      <TableCell className='font-mono'>{config.key}</TableCell>
                      <TableCell className='font-mono max-w-xs truncate'>
                        {config.value}
                      </TableCell>
                      <TableCell>
                        <Badge variant={config.enabled ? "default" : "outline"}>
                          {config.enabled ? "Enabled" : "Disabled"}
                        </Badge>
                      </TableCell>
                      <TableCell className='sticky right-0 bg-background text-right'>
                        <ConfigurationActionButton config={config} />
                      </TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            </div>
          )}
        </main>
      </SidebarInset>
    </SidebarProvider>
  );
}


================================================
FILE: apps/client/src/pages/settings/index.tsx
================================================
import { Link, useNavigate } from "react-router";
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb";
import {
  SidebarInset,
  SidebarProvider,
  SidebarTrigger,
} from "@/components/ui/sidebar";
import { AppSidebar } from "@/features/sidebar";
import { Separator } from "@/components/ui/separator";
import {
  Blocks,
  ChevronRight,
  Cloud,
  Code,
  Network,
  ScrollText,
  Server,
  UserCog,
} from "lucide-react";

type Category = {
  id: string;
  title: string;
  description: string;
  icon: React.ReactNode;
  to: string;
};

const categories: Category[] = [
  {
    id: "account",
    title: "Account",
    description: "Vessel Cloud, Capsule Server, TURN credentials",
    icon: <Cloud className='h-5 w-5' />,
    to: "/settings/account",
  },
  {
    id: "services",
    title: "Services",
    description: "Code workspace, Tunnel",
    icon: <Code className='h-5 w-5' />,
    to: "/settings/services",
  },
  {
    id: "users",
    title: "Users",
    description: "Manage users and roles",
    icon: <UserCog className='h-5 w-5' />,
    to: "/settings/users",
  },
  {
    id: "networks",
    title: "Networks",
    description: "Network interface status",
    icon: <Network className='h-5 w-5' />,
    to: "/settings/networks",
  },
  {
    id: "integration",
    title: "Integration",
    description: "Home Assistant, ROS2, RTL-SDR",
    icon: <Blocks className='h-5 w-5' />,
    to: "/settings/integration",
  },
  {
    id: "log",
    title: "Log",
    description: "Server logs",
    icon: <ScrollText className='h-5 w-5' />,
    to: "/settings/log",
  },
  {
    id: "config",
    title: "Config",
    description: "System configurations",
    icon: <Server className='h-5 w-5' />,
    to: "/settings/config",
  },
];

export function SettingsPage() {
  const navigate = useNavigate();

  return (
    <SidebarProvider>
      <AppSidebar />
      <SidebarInset>
        <header className='flex h-12 shrink-0 items-center gap-2 border-b px-4'>
          <SidebarTrigger className='-ml-1' />
          <Separator
            orientation='vertical'
            className='mr-2 data-[orientation=vertical]:h-4'
          />
          <Breadcrumb>
            <BreadcrumbList>
              <BreadcrumbItem>
                <BreadcrumbLink asChild>
                  <Link to='/dashboard'>/</Link>
                </BreadcrumbLink>
              </BreadcrumbItem>
              <BreadcrumbSeparator />
              <BreadcrumbItem>
                <BreadcrumbPage>Settings</BreadcrumbPage>
              </BreadcrumbItem>
            </BreadcrumbList>
          </Breadcrumb>
        </header>

        <main className='flex-1 overflow-y-auto p-4 md:p-6'>
          <div className='flex flex-col mb-4'>
            <h1 className='font-semibold text-lg md:text-2xl'>Settings</h1>
          </div>

          <div className='flex flex-col border divide-y'>
            {categories.map((c) => (
              <button
                key={c.id}
                type='button'
                onClick={() => navigate(c.to)}
                className='flex items-center gap-3 px-4 py-3 text-left hover:bg-muted/50 transition-colors'
              >
                <div className='text-muted-foreground'>{c.icon}</div>
                <div className='flex flex-col flex-1 min-w-0'>
                  <span className='font-medium text-sm'>{c.title}</span>
                  <span className='text-xs text-muted-foreground truncate'>
                    {c.description}
                  </span>
                </div>
                <ChevronRight className='h-4 w-4 text-muted-foreground shrink-0' />
              </button>
            ))}
          </div>
        </main>
      </SidebarInset>
    </SidebarProvider>
  );
}


================================================
FILE: apps/client/src/pages/settings/integration.tsx
================================================
import React from "react";
import { Link } from "react-router";
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb";
import { Separator } from "@/components/ui/separator";
import {
  SidebarInset,
  SidebarProvider,
  SidebarTrigger,
} from "@/components/ui/sidebar";

import { AppSidebar } from "@/features/sidebar";
import { Intergration } from "@/features/integration/Integration";

export function IntegrationSettingsPage(): React.ReactElement {
  return (
    <SidebarProvider>
      <AppSidebar />
      <SidebarInset>
        <header className='flex h-12 shrink-0 items-center gap-2 border-b px-4'>
          <SidebarTrigger className='-ml-1' />
          <Separator
            orientation='vertical'
            className='mr-2 data-[orientation=vertical]:h-4'
          />
          <Breadcrumb>
            <BreadcrumbList>
              <BreadcrumbItem className='hidden md:block'>
                <BreadcrumbLink asChild>
                  <Link to='/dashboard'>/</Link>
                </BreadcrumbLink>
              </BreadcrumbItem>
              <BreadcrumbSeparator className='hidden md:block' />
              <BreadcrumbItem className='hidden md:block'>
                <BreadcrumbLink asChild>
                  <Link to='/settings'>Settings</Link>
                </BreadcrumbLink>
              </BreadcrumbItem>
              <BreadcrumbSeparator className='hidden md:block' />
              <BreadcrumbItem>
                <BreadcrumbPage>Integration</BreadcrumbPage>
              </BreadcrumbItem>
            </BreadcrumbList>
          </Breadcrumb>
        </header>
        <main className='flex flex-1 flex-col gap-4 p-4 md:gap-8 md:p-6'>
          <div className='flex items-center'>
            <h1 className='text-lg font-semibold md:text-2xl'>Integrations</h1>
          </div>

          <div className='flex flex-col gap-4'>
            <Intergration />
          </div>
        </main>
      </SidebarInset>
    </SidebarProvider>
  );
}


================================================
FILE: apps/client/src/pages/settings/log.tsx
================================================
import { Link } from "react-router";
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb";
import { Separator } from "@/components/ui/separator";
import {
  SidebarInset,
  SidebarProvider,
  SidebarTrigger,
} from "@/components/ui/sidebar";
import { Logs } from "@/features/log";
import { AppSidebar } from "@/features/sidebar";

export function LogSettingsPage() {
  return (
    <SidebarProvider>
      <AppSidebar />
      <SidebarInset>
        <header className='flex h-12 shrink-0 items-center gap-2 border-b px-4 fixed w-full bg-background/60 backdrop-blur-md z-[999999]'>
          <SidebarTrigger className='-ml-1' />
          <Separator
            orientation='vertical'
            className='mr-2 data-[orientation=vertical]:h-4'
          />
          <Breadcrumb>
            <BreadcrumbList>
              <BreadcrumbItem className='hidden md:block'>
                <BreadcrumbLink asChild>
                  <Link to='/dashboard'>/</Link>
                </BreadcrumbLink>
              </BreadcrumbItem>
              <BreadcrumbSeparator className='hidden md:block' />
              <BreadcrumbItem className='hidden md:block'>
                <BreadcrumbLink asChild>
                  <Link to='/settings'>Settings</Link>
                </BreadcrumbLink>
              </BreadcrumbItem>
              <BreadcrumbSeparator className='hidden md:block' />
              <BreadcrumbItem>
                <BreadcrumbPage>Log</BreadcrumbPage>
              </BreadcrumbItem>
            </BreadcrumbList>
          </Breadcrumb>
        </header>
        <main className='flex flex-1 flex-col gap-4 mt-10 p-4 md:gap-8 md:p-6'>
          <Logs />
        </main>
      </SidebarInset>
    </SidebarProvider>
  );
}


================================================
FILE: apps/client/src/pages/settings/networks.tsx
================================================
import { useEffect, useState } from "react";
import { Link } from "react-router";
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb";
import {
  SidebarInset,
  SidebarProvider,
  SidebarTrigger,
} from "@/components/ui/sidebar";
import { AppSidebar } from "@/features/sidebar";
import { Separator } from "@/components/ui/separator";
import { Badge } from "@/components/ui/badge";
import { Globe, Radio, Bluetooth, Zap } from "lucide-react";

function useOnlineStatus() {
  const [isOnline, setIsOnline] = useState(navigator.onLine);

  useEffect(() => {
    const handleOnline = () => setIsOnline(true);
    const handleOffline = () => setIsOnline(false);

    window.addEventListener("online", handleOnline);
    window.addEventListener("offline", handleOffline);

    return () => {
      window.removeEventListener("online", handleOnline);
      window.removeEventListener("offline", handleOffline);
    };
  }, []);

  return isOnline;
}

interface NetworkCardProps {
  icon: React.ReactNode;
  name: string;
  status: "online" | "offline" | "coming-soon";
}

function NetworkCard({ icon, name, status }: NetworkCardProps) {
  return (
    <div className='flex items-center justify-between border p-4'>
      <div className='flex items-center gap-3'>
        <div className='text-muted-foreground'>{icon}</div>
        <span className='font-medium text-sm'>{name}</span>
      </div>
      {status === "online" && (
        <Badge variant='default' className='!bg-green-600 !text-white'>
          Online
        </Badge>
      )}
      {status === "offline" && <Badge variant='destructive'>Offline</Badge>}
      {status === "coming-soon" && <Badge variant='outline'>Coming Soon</Badge>}
    </div>
  );
}

export function NetworksSettingsPage() {
  const isOnline = useOnlineStatus();

  return (
    <SidebarProvider>
      <AppSidebar />
      <SidebarInset>
        <header className='flex h-12 shrink-0 items-center gap-2 border-b px-4'>
          <SidebarTrigger className='-ml-1' />
          <Separator
            orientation='vertical'
            className='mr-2 data-[orientation=vertical]:h-4'
          />
          <Breadcrumb>
            <BreadcrumbList>
              <BreadcrumbItem>
                <BreadcrumbLink asChild>
                  <Link to='/dashboard'>/</Link>
                </BreadcrumbLink>
              </BreadcrumbItem>
              <BreadcrumbSeparator />
              <BreadcrumbItem>
                <BreadcrumbLink asChild>
                  <Link to='/settings'>Settings</Link>
                </BreadcrumbLink>
              </BreadcrumbItem>
              <BreadcrumbSeparator />
              <BreadcrumbItem>
                <BreadcrumbPage>Networks</BreadcrumbPage>
              </BreadcrumbItem>
            </BreadcrumbList>
          </Breadcrumb>
        </header>

        <main className='flex-1 overflow-y-auto p-4 md:p-6'>
          <div className='flex flex-col mb-4'>
            <h1 className='font-semibold text-lg md:text-2xl'>Networks</h1>
            <p className='text-muted-foreground text-sm'>
              Monitor network interface status.
            </p>
          </div>

          <div className='flex flex-col gap-2'>
            <NetworkCard
              icon={<Globe className='h-4 w-4' />}
              name='Internet'
              status={isOnline ? "online" : "offline"}
            />
            <NetworkCard
              icon={<Radio className='h-4 w-4' />}
              name='LoRa Network'
              status='coming-soon'
            />
            <NetworkCard
              icon={<Bluetooth className='h-4 w-4' />}
              name='BLE'
              status='coming-soon'
            />
            <NetworkCard
              icon={<Zap className='h-4 w-4' />}
              name='Zigbee'
              status='coming-soon'
            />
          </div>
        </main>
      </SidebarInset>
    </SidebarProvider>
  );
}


================================================
FILE: apps/client/src/pages/settings/services.tsx
================================================
import { useEffect, useState } from "react";
import { Link } from "react-router";
import { toast } from "sonner";
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb";
import {
  SidebarInset,
  SidebarProvider,
  SidebarTrigger,
} from "@/components/ui/sidebar";
import { AppSidebar } from "@/features/sidebar";
import { Separator } from "@/components/ui/separator";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Switch } from "@/components/ui/switch";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { useTunnelStore } from "@/entities/tunnel/store";
import { useSupabaseAuth } from "@/contexts/SupabaseAuthContext";
import { useConfigStore } from "@/entities/configurations/store";
import {
  CODE_SERVICE_CONFIG_KEY,
  getCodeServiceEnabled,
} from "@/entities/configurations/codeService";

export function ServicesSettingsPage() {
  const { status, isLoading, error, refresh, start, stop } = useTunnelStore();
  const { session } = useSupabaseAuth();
  const [server, setServer] = useState(
    "wss://agent.tunnel.cartesiancs.com/agent",
  );
  const [target, setTarget] = useState("http://127.0.0.1:6174");
  const [localError, setLocalError] = useState<string | null>(null);

  const {
    configurations,
    fetchConfigs,
    createConfig,
    updateConfig,
    isLoading: configsLoading,
  } = useConfigStore();
  const codeConfigRow = configurations.find(
    (c) => c.key === CODE_SERVICE_CONFIG_KEY,
  );
  const codeServiceEnabled = getCodeServiceEnabled(configurations);

  useEffect(() => {
    void fetchConfigs();
  }, [fetchConfigs]);

  useEffect(() => {
    refresh();
  }, [refresh]);

  useEffect(() => {
    if (status.server) setServer(status.server);
    if (status.target) setTarget(status.target);
  }, [status.server, status.target]);

  const handleCodeServiceToggle = async (on: boolean) => {
    try {
      if (codeConfigRow) {
        await updateConfig(codeConfigRow.id, {
          key: codeConfigRow.key,
          value: codeConfigRow.value,
          enabled: on ? 1 : 0,
          description: codeConfigRow.description,
        });
      } else if (on) {
        await createConfig({
          key: CODE_SERVICE_CONFIG_KEY,
          value: "1",
          enabled: 1,
          description: "Enable the Code workspace (file browser and editor).",
        });
      }
      toast.success(on ? "Code workspace enabled" : "Code workspace disabled");
    } catch {
      toast.error("Failed to update Code workspace setting");
    }
  };

  const handleToggle = async (checked: boolean) => {
    setLocalError(null);
    if (checked) {
      if (!server || !target) {
        setLocalError("Enter tunnel server URL and target.");
        return;
      }
      try {
        await start(server, target, session?.access_token);
      } catch (err) {
        setLocalError(
          err instanceof Error ? err.message : "Failed to start tunnel.",
        );
      }
    } else {
      try {
        await stop();
      } catch (err) {
        setLocalError(
          err instanceof Error ? err.message : "Failed to stop tunnel.",
        );
      }
    }
  };

  const copySession = async () => {
    if (status.session_id) {
      const url = `https://${status.session_id}.tunnel.cartesiancs.com/auth`;
      await navigator.clipboard.writeText(url);
      toast.success("Tunnel URL copied", {
        description: url,
      });
    }
  };

  return (
    <SidebarProvider>
      <AppSidebar />
      <SidebarInset>
        <header className='flex h-12 shrink-0 items-center gap-2 border-b px-4'>
          <SidebarTrigger className='-ml-1' />
          <Separator
            orientation='vertical'
            className='mr-2 data-[orientation=vertical]:h-4'
          />
          <Breadcrumb>
            <BreadcrumbList>
              <BreadcrumbItem>
                <BreadcrumbLink asChild>
                  <Link to='/dashboard'>/</Link>
                </BreadcrumbLink>
              </BreadcrumbItem>
              <BreadcrumbSeparator />
              <BreadcrumbItem>
                <BreadcrumbLink asChild>
                  <Link to='/settings'>Settings</Link>
                </BreadcrumbLink>
              </BreadcrumbItem>
              <BreadcrumbSeparator />
              <BreadcrumbItem>
                <BreadcrumbPage>Services</BreadcrumbPage>
              </BreadcrumbItem>
            </BreadcrumbList>
          </Breadcrumb>
        </header>

        <main className='flex-1 overflow-y-auto p-4 md:p-6 space-y-4'>
          <div className='flex flex-col'>
            <h1 className='font-semibold text-lg md:text-2xl'>Services</h1>
          </div>

          <Card>
            <CardHeader>
              <CardTitle>Code workspace</CardTitle>
              <CardDescription></CardDescription>
            </CardHeader>
            <CardContent>
              <div className='flex items-center justify-between border px-3 py-2'>
                <div className='flex flex-col gap-0.5'>
                  <span className='font-medium'>Code service</span>
                </div>
                <Switch
                  checked={codeServiceEnabled}
                  disabled={configsLoading}
                  onCheckedChange={(v) => void handleCodeServiceToggle(v)}
                />
              </div>
            </CardContent>
          </Card>

          <Card>
            <CardHeader>
              <CardTitle>Tunnel</CardTitle>
              <CardDescription></CardDescription>
            </CardHeader>
            <CardContent className='space-y-4'>
              <div className='flex items-center justify-between border px-3 py-2'>
                <div className='flex flex-col'>
                  <span className='font-medium'>Tunnel Connection</span>
                </div>
                <Switch
                  checked={status.active}
                  disabled={isLoading}
                  onCheckedChange={handleToggle}
                />
              </div>

              <div className='grid gap-3 md:grid-cols-2'>
                <div className='space-y-1'>
                  <Label htmlFor='server'>
                    Tunnel server URL (wss://…/agent)
                  </Label>
                  <Input
                    id='server'
                    placeholder='wss://tunnel.example.com/agent'
                    value={server}
                    onChange={(e) => setServer(e.target.value)}
                    disabled={isLoading || status.active}
                  />
                </div>
                <div className='space-y-1'>
                  <Label htmlFor='target'>Local target URL</Label>
                  <Input
                    id='target'
                    placeholder='http://127.0.0.1:6174'
                    value={target}
                    onChange={(e) => setTarget(e.target.value)}
                    disabled={isLoading || status.active}
                  />
                </div>
              </div>

              <div className='flex items-center gap-3 flex-wrap'>
                <div className='flex items-center gap-2'>
                  <span className='text-sm text-muted-foreground'>Session</span>
                  {status.session_id ? (
                    <Badge variant='outline' className='font-mono'>
                      {status.session_id}
                    </Badge>
                  ) : (
                    <Badge variant='secondary'>None</Badge>
                  )}
                </div>
                {status.session_id && (
                  <div className='flex items-center gap-2'>
                    <Button size='sm' variant='outline' onClick={copySession}>
                      Copy tunnel URL
                    </Button>
                  </div>
                )}
              </div>

              <div className='flex items-center gap-2'>
                <Button
                  variant='outline'
                  size='sm'
                  onClick={refresh}
                  disabled={isLoading}
                >
                  Refresh status
                </Button>
                {(error || localError) && (
                  <span className='text-sm text-red-500'>
                    {localError ?? error}
                  </span>
                )}
              </div>
            </CardContent>
          </Card>
        </main>
      </SidebarInset>
    </SidebarProvider>
  );
}


================================================
FILE: apps/client/src/pages/settings/users.tsx
================================================
import { Link } from "react-router";
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb";
import { Separator } from "@/components/ui/separator";
import {
  SidebarInset,
  SidebarProvider,
  SidebarTrigger,
} from "@/components/ui/sidebar";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { AppSidebar } from "@/features/sidebar";
import { RoleTable } from "@/widgets/role-table/RoleList";
import { UserTable } from "@/widgets/user-table/UserList";

export function UsersSettingsPage() {
  return (
    <SidebarProvider>
      <AppSidebar />
      <SidebarInset>
        <header className='flex h-12 shrink-0 items-center gap-2 border-b px-4'>
          <SidebarTrigger className='-ml-1' />
          <Separator
            orientation='vertical'
            className='mr-2 data-[orientation=vertical]:h-4'
          />
          <Breadcrumb>
            <BreadcrumbList>
              <BreadcrumbItem className='hidden md:block'>
                <BreadcrumbLink asChild>
                  <Link to='/dashboard'>/</Link>
                </BreadcrumbLink>
              </BreadcrumbItem>
              <BreadcrumbSeparator className='hidden md:block' />
              <BreadcrumbItem className='hidden md:block'>
                <BreadcrumbLink asChild>
                  <Link to='/settings'>Settings</Link>
                </BreadcrumbLink>
              </BreadcrumbItem>
              <BreadcrumbSeparator className='hidden md:block' />
              <BreadcrumbItem>
                <BreadcrumbPage>Users</BreadcrumbPage>
              </BreadcrumbItem>
            </BreadcrumbList>
          </Breadcrumb>
        </header>
        <main className='flex-1 overflow-y-auto p-4 md:p-6'>
          <Tabs defaultValue='user-list' className='w-full'>
            <TabsList className='grid w-full grid-cols-2'>
              <TabsTrigger value='user-list'>Users</TabsTrigger>
              <TabsTrigger value='role'>Roles</TabsTrigger>
            </TabsList>
            <TabsContent value='user-list' className='mt-4'>
              <UserTable />
            </TabsContent>
            <TabsContent value='role' className='mt-4'>
              <RoleTable />
            </TabsContent>
          </Tabs>
        </main>
      </SidebarInset>
    </SidebarProvider>
  );
}


================================================
FILE: apps/client/src/pages/setup/index.tsx
================================================
import React, { useEffect, useState } from "react";
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb";
import { Button } from "@/components/ui/button";
import { Separator } from "@/components/ui/separator";
import {
  SidebarInset,
  SidebarProvider,
  SidebarTrigger,
} from "@/components/ui/sidebar";
import { AppSidebar } from "@/features/sidebar";
import { ArrowRight, Check, Circle, Loader2 } from "lucide-react";
import { initialSetupSteps, SetupStep } from "@/features/setup";

export function SetupPage(): React.ReactElement {
  const [steps, setSteps] = useState<SetupStep[]>(initialSetupSteps);
  const [isVerifying, setIsVerifying] = useState(true);

  useEffect(() => {
    const runInitialChecks = async () => {
      setIsVerifying(true);
      const updatedSteps = await Promise.all(
        initialSetupSteps.map(async (step) => ({
          ...step,
          isCompleted: await step.verifyStatus(),
        })),
      );
      setSteps(updatedSteps);
      setIsVerifying(false);
    };

    runInitialChecks();
  }, []);

  const handleNavigate = (url: string) => {
    console.log(`Navigating to ${url}`);
    window.location.href = url;
  };

  return (
    <SidebarProvider>
      <AppSidebar />
      <SidebarInset>
        <header className='flex h-12 shrink-0 items-center gap-2 border-b border-gray-800 px-4'>
          <SidebarTrigger className='-ml-1' />
          <Separator
            orientation='vertical'
            className='mr-2 border-gray-700 data-[orientation=vertical]:h-4'
          />
          <Breadcrumb>
            <BreadcrumbList>
              <BreadcrumbItem className='hidden md:block'>
                <BreadcrumbLink href='#' className='text-gray-400'>
                  /
                </BreadcrumbLink>
              </BreadcrumbItem>
              <BreadcrumbSeparator className='hidden md:block' />
              <BreadcrumbItem>
                <BreadcrumbPage className='text-gray-50'>Setup</BreadcrumbPage>
              </BreadcrumbItem>
            </BreadcrumbList>
          </Breadcrumb>
        </header>
        <main className='flex flex-1 flex-col gap-4 p-4 md:gap-8 md:p-6'>
          <div className='flex items-center'>
            <h1 className='text-lg font-semibold text-gray-50 md:text-2xl'>
              Setup Guide
            </h1>
          </div>

          {isVerifying && (
            <div className='flex items-center justify-center p-8'>
              <Loader2 className='h-6 w-6 animate-spin text-gray-400' />
              <p className='ml-3 text-gray-400'>Verifying setup status...</p>
            </div>
          )}
          {!isVerifying && (
            <div className='flex flex-col'>
              {steps.map((step, index) => (
                <div key={step.id} className='flex gap-4'>
                  <div className='flex flex-col items-center'>
                    <div
                      className={`flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full ${
                        step.isCompleted
                          ? "bg-blue-600 text-white"
                          : "border-2 border-gray-700 bg-gray-900 text-gray-500"
                      }`}
                    >
                      {step.isCompleted ? (
                        <Check className='h-5 w-5' />
                      ) : (
                        <Circle className='h-3 w-3 fill-current' />
                      )}
                    </div>
                    {index < steps.length - 1 && (
                      <div className='h-full w-0.5 bg-gray-800' />
                    )}
                  </div>
                  <div className='flex-1 pb-10'>
                    <div className='flex items-center justify-between'>
                      <div className='flex flex-col'>
                        <h3
                          className={`font-semibold ${
                            step.isCompleted ? "text-gray-600" : "text-gray-100"
                          }`}
                        >
                          {step.title}
                        </h3>
                        <p
                          className={`text-sm ${
                            step.isCompleted
                              ? "text-gray-500 line-through"
                              : "text-gray-400"
                          }`}
                        >
                          {step.description}
                        </p>
                      </div>
                      {step.isCompleted ? (
                        <div className=''></div>
                      ) : (
                        <Button
                          onClick={() => handleNavigate(step.url)}
                          size='sm'
                          variant='secondary'
                        >
                          Go to setup
                          <ArrowRight className='ml-2 h-4 w-4' />
                        </Button>
                      )}
                    </div>
                  </div>
                </div>
              ))}
            </div>
          )}
        </main>
      </SidebarInset>
    </SidebarProvider>
  );
}


================================================
FILE: apps/client/src/shared/api/index.ts
================================================
import axios from "axios";
import { isDemoMode } from "../demo";
import { createMockAdapter } from "../mock/mockAdapter";
import { storage } from "@/lib/storage";

export const apiClient = axios.create({
  headers: {
    "Content-Type": "application/json",
  },
});

if (isDemoMode) {
  apiClient.defaults.adapter = createMockAdapter();
}

apiClient.interceptors.request.use(
  (config) => {
    if (!isDemoMode) {
      const token = storage.getToken();
      const serverUrl = storage.getServerUrl();

      if (serverUrl) {
        config.baseURL = `${serverUrl}/api`;
      }

      if (token) {
        config.headers.Authorization = `Bearer ${token}`;
      }
    }
    return config;
  },
  (error) => {
    return Promise.reject(error);
  },
);

apiClient.interceptors.response.use(
  (response) => {
    return response;
  },
  (error) => {
    if (!isDemoMode && error.response && error.response.status === 401) {
      window.location.href = "/auth";
    }
    return Promise.reject(error);
  },
);


================================================
FILE: apps/client/src/shared/demo.ts
================================================
const DEMO_HOSTNAME = "demo.vsl.cartesiancs.com";

const isDemoHostname =
  typeof window !== "undefined" &&
  window.location?.hostname === DEMO_HOSTNAME;

const isDemoEnv =
  typeof import.meta !== "undefined" &&
  import.meta.env &&
  import.meta.env.VITE_DEMO_MODE === "true";

export const isDemoMode = isDemoEnv || isDemoHostname;

export const DEMO_SERVER_URL = "https://demo.vessel.local";
export const DEMO_TOKEN = "demo-token";


================================================
FILE: apps/client/src/shared/desktop.ts
================================================
type InvokeFn = (cmd: string, args?: Record<string, unknown>) => Promise<unknown>;
type TauriCore = { invoke?: InvokeFn };
type TauriNamespace = { invoke?: InvokeFn };
type TauriGlobal = {
  invoke?: InvokeFn;
  core?: TauriCore;
  tauri?: TauriNamespace;
};

const resolveInvoker = (): InvokeFn | null => {
  if (typeof window === "undefined") {
    return null;
  }

  const tauri = (window as unknown as { __TAURI__?: TauriGlobal }).__TAURI__;

  // Tauri v2 (withGlobalTauri: true)
  if (tauri?.core?.invoke && typeof tauri.core.invoke === "function") {
    return tauri.core.invoke.bind(tauri.core) as InvokeFn;
  }

  // Tauri v1 fallbacks
  if (tauri?.invoke && typeof tauri.invoke === "function") {
    return tauri.invoke as InvokeFn;
  }

  if (tauri?.tauri?.invoke && typeof tauri.tauri.invoke === "function") {
    return tauri.tauri.invoke as InvokeFn;
  }

  return null;
};

// Loads the official invoke function via dynamic import. Works regardless of
// whether `withGlobalTauri` is enabled, because Vite bundles @tauri-apps/api.
let cachedAsyncInvoke: Promise<InvokeFn | null> | null = null;
const loadAsyncInvoke = async (): Promise<InvokeFn | null> => {
  if (typeof window === "undefined") return null;
  if (!cachedAsyncInvoke) {
    cachedAsyncInvoke = (async () => {
      try {
        const mod = (await import("@tauri-apps/api/core")) as {
          invoke?: InvokeFn;
        };
        return typeof mod.invoke === "function" ? mod.invoke : null;
      } catch {
        return null;
      }
    })();
  }
  return cachedAsyncInvoke;
};

const getInvoke = async (): Promise<InvokeFn | null> => {
  const sync = resolveInvoker();
  if (sync) return sync;
  return await loadAsyncInvoke();
};

const hasTauriUA = () => {
  if (typeof navigator === "undefined" || !navigator.userAgent) return false;
  return navigator.userAgent.toLowerCase().includes("tauri");
};

const hasTauriEnv = () => {
  try {
    // Vite sets import.meta.env.TAURI in Tauri builds
    const env = (import.meta as ImportMeta & { env?: Record<string, unknown> }).env;
    return Boolean(env?.TAURI);
  } catch {
    return false;
  }
};

export const isTauri = (): boolean =>
  Boolean(resolveInvoker()) || hasTauriUA() || hasTauriEnv();

export const ensureSidecarRunning = async (): Promise<void> => {
  const invoke = await getInvoke();
  if (!invoke) {
    return;
  }

  try {
    await invoke("start_sidecar");
  } catch (error) {
    console.warn("Failed to start server sidecar via Tauri", error);
  }
};

export type SidecarStatus = {
  running: boolean;
  base_url?: string | null;
  listen_address: string;
  working_dir: string;
};

export type ServerAddress = {
  host: string;
  port: number;
};

export const getDesktopServerUrl = async (): Promise<string | null> => {
  const invoke = await getInvoke();
  if (!invoke) {
    return null;
  }

  try {
    const result = (await invoke("get_sidecar_status")) as SidecarStatus | null;
    if (result && typeof result.base_url === "string") {
      return result.base_url;
    }
  } catch (error) {
    console.warn("Failed to read sidecar status from Tauri", error);
  }

  return null;
};

export const getSidecarStatus = async (): Promise<SidecarStatus | null> => {
  const invoke = await getInvoke();
  if (!invoke) return null;
  try {
    return (await invoke("get_sidecar_status")) as SidecarStatus;
  } catch (error) {
    console.warn("Failed to read sidecar status", error);
    return null;
  }
};

export const getServerAddress = async (): Promise<ServerAddress | null> => {
  const invoke = await getInvoke();
  if (!invoke) return null;
  try {
    return (await invoke("get_server_address")) as ServerAddress;
  } catch (error) {
    console.warn("Failed to read server address", error);
    return null;
  }
};

export const updateServerAddress = async (
  host: string,
  port: number,
): Promise<SidecarStatus> => {
  const invoke = await getInvoke();
  if (!invoke) {
    throw new Error("Tauri runtime not available");
  }
  return (await invoke("update_server_address", { host, port })) as SidecarStatus;
};

export const openDesktopSettings = async (): Promise<void> => {
  const invoke = await getInvoke();
  if (!invoke) return;
  try {
    await invoke("open_settings_window");
  } catch (error) {
    console.warn("Failed to open settings window", error);
  }
};


================================================
FILE: apps/client/src/shared/mock/mockAdapter.ts
================================================
import type {
  AxiosAdapter,
  AxiosResponse,
  InternalAxiosRequestConfig,
} from "axios";
import {
  FeatureWithVertices,
  MapFeature,
  MapLayer,
} from "@/entities/map/types";
import {
  SystemConfiguration,
  SystemConfigurationPayload,
} from "@/entities/configurations/types";
import { CODE_SERVICE_CONFIG_KEY } from "@/entities/configurations/codeService";
import { Device, DevicePayload } from "@/entities/device/types";
import { EntityAll, EntityPayload } from "@/entities/entity/types";
import { Role, CreateRolePayload } from "@/entities/role/types";
import { User, CreateUserPayload, UpdateUserPayload } from "@/entities/user/types";
import { Flow, FlowPayload } from "@/entities/flow/types";
import { CustomNodeFromApi } from "@/entities/custom-nodes/types";
import { createMockDb, MockDatabase } from "./mockData";

const clone = <T>(data: T): T => JSON.parse(JSON.stringify(data));

const match = (path: string, pattern: RegExp) => {
  const matchResult = path.match(pattern);
  return matchResult ? matchResult.slice(1) : null;
};

const buildResponse = <T>(
  config: InternalAxiosRequestConfig,
  status: number,
  data: T,
): AxiosResponse<T> => ({
  data: clone(data),
  status,
  statusText: "OK",
  headers: {},
  config,
});

const normalizePath = (url?: string) => {
  if (!url) return "/";
  const withoutOrigin = url.replace(/^https?:\/\/[^/]+/i, "");
  const strippedApi = withoutOrigin.replace(/^\/api/i, "");
  return strippedApi.replace(/\/+$/, "") || "/";
};

export const createMockAdapter = (): AxiosAdapter => {
  const db: MockDatabase = createMockDb();

  const isMockCodeServiceEnabled = () =>
    db.configs.some(
      (c) => c.key === CODE_SERVICE_CONFIG_KEY && c.enabled === 1,
    );

  const counters = {
    device: db.devices.length + 1,
    entity: db.entities.length + 1,
    flow: db.flows.length + 1,
    flowVersion: Object.values(db.flowVersions).flat().length + 1,
    config: db.configs.length + 1,
    layer: db.mapLayers.length + 1,
    feature: Object.values(db.mapFeatures).flat().length + 1,
    vertex: Object.values(db.mapFeatures)
      .flat()
      .reduce((acc, f) => acc + f.vertices.length, 1),
    customNode: db.customNodes.length + 1,
    role: db.roles.length + 1,
    user: db.users.length + 1,
    permission: db.permissions.length + 1,
    deviceToken: Object.keys(db.deviceTokens).length + 1,
  };

  const getDirectoryEntries = (path: string) => {
    const entries = Object.entries(db.storage).filter(([key]) => {
      const parent =
        key.lastIndexOf("/") === -1 ? "" : key.slice(0, key.lastIndexOf("/"));
      return parent === path && key !== "";
    });

    return entries.map(([name, value]) => ({
      name: name.replace(path ? `${path}/` : "", ""),
      isDir: value.type === "dir",
    }));
  };

  const ensureDir = (path: string) => {
    const segments = path.split("/").filter(Boolean);
    let current = "";
    segments.forEach((segment) => {
      current = current ? `${current}/${segment}` : segment;
      if (!db.storage[current]) {
        db.storage[current] = { type: "dir" };
      }
    });
  };

  const renamePath = (oldPath: string, newPath: string) => {
    const updates: [string, { type: "file" | "dir"; content?: string }][] = [];
    Object.entries(db.storage).forEach(([key, value]) => {
      if (key === oldPath || key.startsWith(`${oldPath}/`)) {
        const suffix = key.slice(oldPath.length);
        updates.push([`${newPath}${suffix}`, value]);
        delete db.storage[key];
      }
    });
    updates.forEach(([key, value]) => {
      db.storage[key] = value;
    });
  };

  const getDeviceWithEntities = (deviceId: number) => {
    const device = db.devices.find((d) => d.id === deviceId);
    if (!device) return null;
    const entities = db.entities.filter((e) => e.device_id === deviceId);
    return { ...device, entities } as unknown as DeviceWithEntities;
  };

  type DeviceWithEntities = MockDatabase["devices"][number] & {
    entities: MockDatabase["entities"];
  };

  type RequestBody = Record<string, unknown>;
  type VertexInput = {
    latitude: number;
    longitude: number;
    altitude?: number;
  };

  return async (config: InternalAxiosRequestConfig) => {
    const method = (config.method ?? "get").toLowerCase();
    const path = normalizePath(config.url);
    const params = (config.params as Record<string, string>) || {};
    const body = (config.data as RequestBody) || {};

    // Stat
    if (method === "get" && path === "/stat") {
      return buildResponse(config, 200, db.stat);
    }

    // Configurations
    if (path === "/configurations") {
      if (method === "get") {
        return buildResponse(config, 200, db.configs);
      }
      if (method === "post") {
        const payload = body as SystemConfigurationPayload;
        const now = new Date().toISOString();
        const newConfig: SystemConfiguration = {
          id: counters.config++,
          key: payload.key ?? "config_key",
          value: payload.value ?? "",
          enabled: payload.enabled ?? 1,
          description: payload.description ?? null,
          created_at: now,
          updated_at: now,
        };
        db.configs.push(newConfig);
        return buildResponse(config, 200, newConfig);
      }
    }

    const configMatch = match(path, /^\/configurations\/(\d+)$/);
    if (configMatch) {
      const id = Number(configMatch[0]);
      const idx = db.configs.findIndex((c) => c.id === id);
      if (idx !== -1) {
        if (method === "put") {
          db.configs[idx] = {
            ...db.configs[idx],
            ...body,
            updated_at: new Date().toISOString(),
          };
          return buildResponse(config, 200, db.configs[idx]);
        }
        if (method === "delete") {
          const deleted = db.configs[idx];
          db.configs.splice(idx, 1);
          return buildResponse(config, 200, deleted);
        }
      }
    }

    // Devices
    if (path === "/devices" && method === "get") {
      return buildResponse(config, 200, db.devices);
    }
    if (path === "/devices" && method === "post") {
      const payload = body as DevicePayload;
      const newDevice: Device = {
        id: counters.device++,
        device_id: payload.device_id ?? `device-${Date.now()}`,
        name: payload.name ?? null,
        manufacturer: payload.manufacturer ?? null,
        model: payload.model ?? null,
      };
      db.devices.push(newDevice);
      return buildResponse(config, 200, newDevice);
    }

    const deviceByIdMatch = match(path, /^\/devices\/id\/(\d+)$/);
    if (deviceByIdMatch && method === "get") {
      const id = Number(deviceByIdMatch[0]);
      const device = getDeviceWithEntities(id);
      if (device) return buildResponse(config, 200, device);
    }

    const deviceMatch = match(path, /^\/devices\/(\d+)$/);
    if (deviceMatch) {
      const id = Number(deviceMatch[0]);
      const idx = db.devices.findIndex((d) => d.id === id);
      if (idx !== -1) {
        if (method === "put") {
          db.devices[idx] = { ...db.devices[idx], ...body };
          return buildResponse(config, 200, db.devices[idx]);
        }
        if (method === "delete") {
          const deleted = db.devices[idx];
          db.devices.splice(idx, 1);
          return buildResponse(config, 200, deleted);
        }
      }
    }

    // Device tokens
    const tokenMatch = match(path, /^\/devices\/(\d+)\/token$/);
    if (tokenMatch) {
      const deviceId = Number(tokenMatch[0]);
      if (method === "post") {
        const token = `token-${deviceId}-${Date.now()}`;
        const tokenObj = {
          id: counters.deviceToken++,
          device_id: deviceId,
          token,
          expires_at: null,
          last_used_at: null,
          created_at: new Date().toISOString(),
        };
        db.deviceTokens[deviceId] = tokenObj;
        return buildResponse(config, 200, {
          message: "issued",
          token,
        });
      }
      if (method === "get") {
        const tokenInfo = db.deviceTokens[deviceId];
        return buildResponse(config, 200, tokenInfo ?? { message: "none" });
      }
      if (method === "delete") {
        delete db.deviceTokens[deviceId];
        return buildResponse(config, 200, { message: "revoked" });
      }
    }

    // Entities
    if (path === "/entities" && method === "get") {
      const filtered = params.entity_type
        ? db.entities.filter((e) => e.entity_type === params.entity_type)
        : db.entities;
      return buildResponse(config, 200, filtered);
    }
    if (path === "/entities" && method === "post") {
      const payload = body as EntityPayload;
      const newEntity: EntityAll = {
        id: counters.entity++,
        entity_id: payload.entity_id ?? `entity-${Date.now()}`,
        device_id: payload.device_id ?? 0,
        friendly_name: payload.friendly_name ?? "",
        platform: payload.platform ?? "",
        configuration: (payload.configuration as Record<string, unknown> | null) ?? null,
        state: null,
        entity_type: payload.entity_type ?? "",
      };
      db.entities.push(newEntity);
      db.stat.count.entities = db.entities.length;
      return buildResponse(config, 200, newEntity);
    }
    const entityMatch = match(path, /^\/entities\/(\d+)$/);
    if (entityMatch) {
      const id = Number(entityMatch[0]);
      const idx = db.entities.findIndex((e) => e.id === id);
      if (idx !== -1) {
        if (method === "put") {
          db.entities[idx] = { ...db.entities[idx], ...body };
          return buildResponse(config, 200, db.entities[idx]);
        }
        if (method === "delete") {
          const deleted = db.entities[idx];
          db.entities.splice(idx, 1);
          db.stat.count.entities = db.entities.length;
          return buildResponse(config, 200, deleted);
        }
      }
    }
    if (path === "/entities/all" && method === "get") {
      const filtered = params.entity_type
        ? db.entities.filter((e) => e.entity_type === params.entity_type)
        : db.entities;
      return buildResponse(config, 200, filtered);
    }

    // Permissions
    if (path === "/permissions" && method === "get") {
      return buildResponse(config, 200, db.permissions);
    }

    // Roles
    if (path === "/roles") {
      if (method === "get") {
        return buildResponse(config, 200, db.roles);
      }
      if (method === "post") {
        const payload = body as CreateRolePayload;
        const newRole: Role = {
          id: counters.role++,
          name: payload.name ?? `Role ${counters.role}`,
          description: payload.description ?? null,
          permissions: db.permissions.filter((p) =>
            (payload.permission_ids ?? []).includes(p.id),
          ),
        };
        db.roles.push(newRole);
        return buildResponse(config, 200, newRole);
      }
    }
    const roleMatch = match(path, /^\/roles\/(\d+)$/);
    if (roleMatch) {
      const id = Number(roleMatch[0]);
      const idx = db.roles.findIndex((r) => r.id === id);
      if (idx !== -1) {
        if (method === "put") {
          const payload = body as Partial<CreateRolePayload>;
          db.roles[idx] = {
            ...db.roles[idx],
            ...payload,
            name: payload.name ?? db.roles[idx].name,
            description: payload.description ?? db.roles[idx].description,
            permissions: db.permissions.filter((p) =>
              ((payload.permission_ids as number[] | undefined) ?? []).includes(
                p.id,
              ),
            ),
          };
          return buildResponse(config, 200, db.roles[idx]);
        }
        if (method === "delete") {
          const deleted = db.roles[idx];
          db.roles.splice(idx, 1);
          return buildResponse(config, 200, deleted);
        }
      }
    }

    // Users
    if (path === "/users") {
      if (method === "get") {
        return buildResponse(config, 200, db.users);
      }
      if (method === "post") {
        const payload = body as CreateUserPayload;
        const newUser: User = {
          id: counters.user++,
          username: payload.username ?? `user-${counters.user}`,
          email: payload.email ?? "",
          roles: [],
          created_at: new Date().toISOString(),
          updated_at: new Date().toISOString(),
        };
        db.users.push(newUser);
        return buildResponse(config, 200, newUser);
      }
    }

    const userMatch = match(path, /^\/users\/(\d+)$/);
    if (userMatch) {
      const id = Number(userMatch[0]);
      const idx = db.users.findIndex((u) => u.id === id);
      if (idx !== -1) {
        if (method === "put") {
          const payload = body as UpdateUserPayload;
          db.users[idx] = {
            ...db.users[idx],
            ...payload,
            username: payload.username ?? db.users[idx].username,
            email: payload.email ?? db.users[idx].email,
            updated_at: new Date().toISOString(),
          };
          return buildResponse(config, 200, db.users[idx]);
        }
        if (method === "delete") {
          const deleted = db.users[idx];
          db.users.splice(idx, 1);
          return buildResponse(config, 200, deleted);
        }
      }
    }

    const userRoleAssign = match(path, /^\/users\/(\d+)\/roles$/);
    if (userRoleAssign && method === "post") {
      const id = Number(userRoleAssign[0]);
      const user = db.users.find((u) => u.id === id);
      if (user) {
        const role = db.roles.find(
          (r) => r.id === (body.role_id as number | undefined),
        );
        if (role && !user.roles.find((r) => r.id === role.id)) {
          user.roles.push(role);
        }
        return buildResponse(config, 200, user);
      }
    }
    const userRoleRevoke = match(path, /^\/users\/(\d+)\/roles\/(\d+)$/);
    if (userRoleRevoke && method === "delete") {
      const userId = Number(userRoleRevoke[0]);
      const roleId = Number(userRoleRevoke[1]);
      const user = db.users.find((u) => u.id === userId);
      if (user) {
        user.roles = user.roles.filter((r) => r.id !== roleId);
        return buildResponse(config, 200, user);
      }
    }

    // Flows
    if (path === "/flows" && method === "get") {
      return buildResponse(config, 200, db.flows);
    }
    if (path === "/flows" && method === "post") {
      const payload = body as Partial<FlowPayload>;
      const newFlow: Flow = {
        id: counters.flow++,
        created_at: new Date().toISOString(),
        updated_at: new Date().toISOString(),
        enabled: payload.enabled ?? 1,
        name: payload.name ?? `Flow ${counters.flow}`,
        description: payload.description ?? null,
      };
      db.flows.push(newFlow);
      db.flowVersions[newFlow.id] = [];
      return buildResponse(config, 200, newFlow);
    }
    const flowMatch = match(path, /^\/flows\/(\d+)$/);
    if (flowMatch && method === "delete") {
      const id = Number(flowMatch[0]);
      const idx = db.flows.findIndex((f) => f.id === id);
      if (idx !== -1) {
        const removed = db.flows[idx];
        db.flows.splice(idx, 1);
        delete db.flowVersions[id];
        return buildResponse(config, 200, removed);
      }
    }

    const flowVersionMatch = match(path, /^\/flows\/(\d+)\/versions$/);
    if (flowVersionMatch) {
      const flowId = Number(flowVersionMatch[0]);
      if (method === "get") {
        return buildResponse(config, 200, db.flowVersions[flowId] ?? []);
      }
      if (method === "post") {
        const versions = db.flowVersions[flowId] ?? [];
        const versionNumber =
          versions.length > 0
            ? Math.max(...versions.map((v) => v.version)) + 1
            : 1;
        const newVersion = {
          id: counters.flowVersion++,
          flow_id: flowId,
          version: versionNumber,
          comment: (body.comment as string | undefined) ?? null,
          graph_json: (body.graph_json as string | undefined) ?? "{}",
          created_at: new Date().toISOString(),
        };
        if (!db.flowVersions[flowId]) {
          db.flowVersions[flowId] = [];
        }
        db.flowVersions[flowId].push(newVersion);
        return buildResponse(config, 200, newVersion);
      }
    }

    // Custom nodes
    if (path === "/custom-nodes") {
      if (method === "get") {
        return buildResponse(config, 200, db.customNodes);
      }
      if (method === "post") {
        const payload = body as Partial<CustomNodeFromApi>;
        const newNode: CustomNodeFromApi = {
          node_type: payload.node_type ?? "demo_node",
          data: payload.data ?? {},
        };
        db.customNodes.push(newNode);
        return buildResponse(config, 200, newNode);
      }
    }
    const customNodeMatch = match(path, /^\/custom-nodes\/([^/]+)$/);
    if (customNodeMatch) {
      const nodeType = customNodeMatch[0];
      const idx = db.customNodes.findIndex((n) => n.node_type === nodeType);
      if (idx !== -1) {
        if (method === "put") {
          db.customNodes[idx] = {
            ...db.customNodes[idx],
            data: body.data as Record<string, unknown>,
          };
          return buildResponse(config, 200, db.customNodes[idx]);
        }
        if (method === "delete") {
          const deleted = db.customNodes[idx];
          db.customNodes.splice(idx, 1);
          return buildResponse(config, 200, deleted);
        }
      }
    }

    // Map layers
    if (path === "/map/layers") {
      if (method === "get") {
        return buildResponse(config, 200, db.mapLayers);
      }
      if (method === "post") {
        const isVisible = Boolean(body.is_visible ?? true);
        const payload = body as Partial<MapLayer>;
        const newLayer: MapLayer = {
          id: counters.layer++,
          owner_user_id: 1,
          is_visible: isVisible ? 1 : 0,
          created_at: new Date().toISOString(),
          updated_at: new Date().toISOString(),
          name: payload.name ?? `Layer ${counters.layer}`,
          description: payload.description,
        };
        db.mapLayers.push(newLayer);
        db.mapFeatures[newLayer.id] = [];
        return buildResponse(config, 200, newLayer);
      }
    }

    const mapLayerMatch = match(path, /^\/map\/layers\/(\d+)$/);
    if (mapLayerMatch) {
      const layerId = Number(mapLayerMatch[0]);
      if (method === "get") {
        const layer = db.mapLayers.find((l) => l.id === layerId);
        if (layer) {
          return buildResponse(config, 200, {
            ...layer,
            features: db.mapFeatures[layerId] ?? [],
          });
        }
      }
      if (method === "put") {
        const idx = db.mapLayers.findIndex((l) => l.id === layerId);
        if (idx !== -1) {
          const isVisible = Boolean(
            body.is_visible ?? Boolean(db.mapLayers[idx].is_visible),
          );
          const payload = body as Partial<MapLayer>;
          db.mapLayers[idx] = {
            ...db.mapLayers[idx],
            ...payload,
            name: payload.name ?? db.mapLayers[idx].name,
            description: payload.description ?? db.mapLayers[idx].description,
            is_visible: isVisible ? 1 : 0,
            updated_at: new Date().toISOString(),
          };
          return buildResponse(config, 200, db.mapLayers[idx]);
        }
      }
      if (method === "delete") {
        const idx = db.mapLayers.findIndex((l) => l.id === layerId);
        if (idx !== -1) {
          const deleted = db.mapLayers[idx];
          db.mapLayers.splice(idx, 1);
          delete db.mapFeatures[layerId];
          return buildResponse(config, 200, { message: "deleted", ...deleted });
        }
      }
    }

    // Map features
    if (path === "/map/features" && method === "post") {
      const featureId = counters.feature++;
      const vertices = (body.vertices as VertexInput[] | undefined ?? []).map(
        (v, idx: number) => ({
          id: counters.vertex++,
          feature_id: featureId,
          sequence: idx,
          latitude: v.latitude,
          longitude: v.longitude,
          altitude: v.altitude ?? 0,
        }),
      );
      const newFeature: MapFeature = {
        id: featureId,
        layer_id: body.layer_id as number,
        feature_type: body.feature_type as MapFeature["feature_type"],
        name: (body.name as string | undefined) ?? "",
        style_properties: (body.style_properties as string | undefined) ?? "",
        created_by_user_id: 1,
        created_at: new Date().toISOString(),
        updated_at: new Date().toISOString(),
      };
      const featureWithVertices: FeatureWithVertices = {
        ...newFeature,
        vertices,
      };
      if (!db.mapFeatures[newFeature.layer_id]) {
        db.mapFeatures[newFeature.layer_id] = [];
      }
      db.mapFeatures[newFeature.layer_id].push(featureWithVertices);
      return buildResponse(config, 200, newFeature);
    }

    const mapFeatureMatch = match(path, /^\/map\/features\/(\d+)$/);
    if (mapFeatureMatch) {
      const featureId = Number(mapFeatureMatch[0]);
      const layerId = Number(
        Object.entries(db.mapFeatures).find(([, features]) =>
          features.some((f) => f.id === featureId),
        )?.[0] ?? 0,
      );
      const features = db.mapFeatures[layerId] ?? [];
      const idx = features.findIndex((f) => f.id === featureId);
      if (idx !== -1) {
        if (method === "get") {
          return buildResponse(config, 200, features[idx]);
        }
        if (method === "put") {
          const updated = {
            ...features[idx],
            ...body,
            vertices: body.vertices
              ? (body.vertices as VertexInput[]).map((v, i: number) => ({
                  id: counters.vertex++,
                  feature_id: featureId,
                  sequence: i,
                  latitude: v.latitude,
                  longitude: v.longitude,
                  altitude: v.altitude ?? 0,
                }))
              : features[idx].vertices,
            updated_at: new Date().toISOString(),
          };
          features[idx] = updated;
          db.mapFeatures[layerId] = features;
          return buildResponse(config, 200, updated);
        }
        if (method === "delete") {
          const deleted = features[idx];
          features.splice(idx, 1);
          db.mapFeatures[layerId] = features;
          return buildResponse(config, 200, { message: "deleted", ...deleted });
        }
      }
    }

    // HA
    if (path === "/ha/states" && method === "get") {
      return buildResponse(config, 200, db.haStates);
    }

    // Logs
    if (path === "/logs/latest" && method === "get") {
      const filename = db.logs.files[0];
      return buildResponse(config, 200, {
        filename,
        logs: db.logs.contents[filename],
      });
    }
    if (path === "/logs" && method === "get") {
      return buildResponse(config, 200, { files: db.logs.files });
    }
    const logMatch = match(path, /^\/logs\/(.+)$/);
    if (logMatch && method === "get") {
      const filename = logMatch[0];
      return buildResponse(config, 200, {
        filename,
        logs: db.logs.contents[filename] ?? "",
      });
    }

    // Storage
    if (path.startsWith("/storage")) {
      if (!isMockCodeServiceEnabled()) {
        return buildResponse(config, 403, {
          error: "Code workspace is disabled",
        });
      }
      const relPath = path.replace(/^\/storage\/?/, "");
      if (method === "get") {
        if (relPath === "" || db.storage[relPath]?.type === "dir") {
          const entries = getDirectoryEntries(relPath);
          return buildResponse(config, 200, { path: relPath, entries });
        }
        const file = db.storage[relPath];
        if (file?.type === "file") {
          return buildResponse(config, 200, file.content ?? "");
        }
      }
      if (method === "put") {
        ensureDir(
          relPath.includes("/")
            ? relPath.split("/").slice(0, -1).join("/")
            : "",
        );
        const content = (body.content as string | undefined) ?? "";
        db.storage[relPath] = { type: "file", content };
        return buildResponse(config, 200, { message: "saved" });
      }
      if (method === "post" && relPath.startsWith("mkdir/")) {
        const dir = relPath.replace(/^mkdir\//, "");
        ensureDir(dir);
        db.storage[dir] = { type: "dir" };
        return buildResponse(config, 200, { message: "created" });
      }
      if (method === "post" && relPath.startsWith("rename/")) {
        const oldPath = relPath.replace(/^rename\//, "");
        const newPath = (body.to as string | undefined) ?? oldPath;
        renamePath(oldPath, newPath);
        return buildResponse(config, 200, { message: "renamed" });
      }
      if (method === "delete") {
        delete db.storage[relPath];
        Object.keys(db.storage).forEach((key) => {
          if (key.startsWith(`${relPath}/`)) {
            delete db.storage[key];
          }
        });
        return buildResponse(config, 200, { message: "deleted" });
      }
    }

    // Fallback
    return buildResponse(config, 200, {});
  };
};


================================================
FILE: apps/client/src/shared/mock/mockData.ts
================================================
import { Device } from "@/entities/device/types";
import { EntityAll } from "@/entities/entity/types";
import { Flow, FlowVersion } from "@/entities/flow/types";
import { HaState } from "@/entities/ha/types";
import { MapLayer, FeatureWithVertices } from "@/entities/map/types";
import { Permission } from "@/entities/permission/types";
import { Role } from "@/entities/role/types";
import { DeviceToken } from "@/entities/device-token/types";
import { Stat } from "@/entities/stat/types";
import { SystemConfiguration } from "@/entities/configurations/types";
import { User } from "@/entities/user/types";
import { CustomNode } from "@/entities/custom-nodes/types";

export type MockDatabase = {
  stat: Stat;
  devices: Device[];
  entities: EntityAll[];
  flows: Flow[];
  flowVersions: Record<number, FlowVersion[]>;
  configs: SystemConfiguration[];
  logs: {
    files: string[];
    contents: Record<string, string>;
  };
  storage: Record<string, { type: "file" | "dir"; content?: string }>;
  mapLayers: MapLayer[];
  mapFeatures: Record<number, FeatureWithVertices[]>;
  haStates: HaState[];
  customNodes: CustomNode[];
  permissions: Permission[];
  roles: Role[];
  users: User[];
  deviceTokens: Record<number, DeviceToken>;
};

export const createMockDb = (): MockDatabase => ({
  stat: {
    count: { devices: 2, entities: 3 },
  },
  devices: [
    {
      id: 1,
      device_id: "sensor-hub-1",
      name: "Sensor Hub A",
      manufacturer: "Vessel Labs",
      model: "VH-100",
    },
    {
      id: 2,
      device_id: "drone-1",
      name: "Delivery Drone",
      manufacturer: "Vessel Labs",
      model: "VD-42",
    },
  ],
  entities: [
    {
      id: 1,
      entity_id: "sensor-hub-1-temp",
      device_id: 1,
      friendly_name: "Room Temperature",
      platform: "mqtt",
      configuration: { topic: "sensors/temperature" },
      state: {
        state_id: 1,
        metadata_id: 1,
        state: "24.2",
        attributes: JSON.stringify({ unit: "°C" }),
        last_changed: new Date().toISOString(),
        last_updated: new Date().toISOString(),
        created: new Date().toISOString(),
      },
      entity_type: "sensor",
    },
    {
      id: 2,
      entity_id: "sensor-hub-1-humidity",
      device_id: 1,
      friendly_name: "Humidity",
      platform: "mqtt",
      configuration: { topic: "sensors/humidity" },
      state: {
        state_id: 2,
        metadata_id: 1,
        state: "48",
        attributes: JSON.stringify({ unit: "%" }),
        last_changed: new Date().toISOString(),
        last_updated: new Date().toISOString(),
        created: new Date().toISOString(),
      },
      entity_type: "sensor",
    },
    {
      id: 3,
      entity_id: "drone-1-camera",
      device_id: 2,
      friendly_name: "Front Camera",
      platform: "rtp",
      configuration: { topic: "drone/front-camera" },
      state: null,
      entity_type: "camera",
    },
  ],
  flows: [
    {
      id: 1,
      name: "Demo Flow",
      description: "Example flow that demonstrates mock data.",
      enabled: 1,
      created_at: new Date().toISOString(),
      updated_at: new Date().toISOString(),
    },
  ],
  flowVersions: {
    1: [
      {
        id: 1,
        flow_id: 1,
        version: 1,
        graph_json: JSON.stringify({
          nodes: [
            {
              id: "start",
              title: "Start",
              x: 100,
              y: 100,
              width: 120,
              height: 60,
              connectors: [{ id: "start-out", name: "out", type: "out" }],
              nodeType: "START",
            },
            {
              id: "log",
              title: "Log Message",
              x: 320,
              y: 100,
              width: 140,
              height: 80,
              connectors: [{ id: "log-in", name: "message", type: "in" }],
              nodeType: "LOG_MESSAGE",
            },
          ],
          edges: [{ id: "start-log", source: "start", target: "log" }],
        }),
        comment: "Initial demo graph",
        created_at: new Date().toISOString(),
      },
    ],
  },
  configs: [
    {
      id: 1,
      key: "home_assistant_url",
      value: "https://demo-home-assistant.local",
      enabled: 1,
      description: "Demo HA endpoint",
      created_at: new Date().toISOString(),
      updated_at: new Date().toISOString(),
    },
    {
      id: 2,
      key: "home_assistant_token",
      value: "demo-ha-token",
      enabled: 1,
      description: "Demo HA token",
      created_at: new Date().toISOString(),
      updated_at: new Date().toISOString(),
    },
    {
      id: 3,
      key: "ros2_websocket_url",
      value: "ws://demo-ros2.local",
      enabled: 1,
      description: "Demo ROS2 bridge",
      created_at: new Date().toISOString(),
      updated_at: new Date().toISOString(),
    },
    {
      id: 4,
      key: "code_service_enabled",
      value: "1",
      enabled: 0,
      description: "Code workspace (demo: off by default)",
      created_at: new Date().toISOString(),
      updated_at: new Date().toISOString(),
    },
  ],
  logs: {
    files: ["server.log", "app.log"],
    contents: {
      "server.log":
        "[INFO] Server started in demo mode\n[INFO] All systems nominal\n",
      "app.log":
        "[INFO] User logged in (demo)\n[WARN] Using mock dataset only\n",
    },
  },
  storage: {
    "": { type: "dir" },
    src: { type: "dir" },
    "src/index.ts": {
      type: "file",
      content:
        "console.log('Demo file from mock storage');\nexport const demo = true;\n",
    },
    "README.md": {
      type: "file",
      content: "# Demo Project\nThis is a mock file system.\n",
    },
  },
  mapLayers: [
    {
      id: 1,
      name: "Demo Layer",
      description: "Sample map data",
      owner_user_id: 1,
      is_visible: 1,
      created_at: new Date().toISOString(),
      updated_at: new Date().toISOString(),
    },
  ],
  mapFeatures: {
    1: [
      {
        id: 1,
        layer_id: 1,
        feature_type: "POINT",
        name: "HQ",
        style_properties: JSON.stringify({ color: "blue" }),
        created_by_user_id: 1,
        created_at: new Date().toISOString(),
        updated_at: new Date().toISOString(),
        vertices: [
          {
            id: 1,
            feature_id: 1,
            latitude: 37.7749,
            longitude: -122.4194,
            altitude: 0,
            sequence: 0,
          },
        ],
      },
    ],
  },
  haStates: [
    {
      entity_id: "light.living_room",
      state: "on",
      attributes: { friendly_name: "Living Room Light", brightness: 200 },
      last_changed: new Date().toISOString(),
      last_updated: new Date().toISOString(),
      context: {},
    },
    {
      entity_id: "sensor.outdoor_temp",
      state: "18.4",
      attributes: { unit_of_measurement: "°C" },
      last_changed: new Date().toISOString(),
      last_updated: new Date().toISOString(),
      context: {},
    },
  ],
  customNodes: [
    {
      node_type: "demo_node",
      data: {
        name: "Demo Node",
        description: "Mock custom node",
        category: "demo",
        script_path: "/path/to/script",
        connectors: [],
      },
    },
  ],
  permissions: [
    { id: 1, name: "read", description: "Read access" },
    { id: 2, name: "write", description: "Write access" },
  ],
  roles: [
    {
      id: 1,
      name: "Admin",
      description: "Administrator",
      permissions: [
        { id: 1, name: "read", description: "Read access" },
        { id: 2, name: "write", description: "Write access" },
      ],
    },
  ],
  users: [
    {
      id: 1,
      username: "demo",
      email: "demo@example.com",
      created_at: new Date().toISOString(),
      updated_at: new Date().toISOString(),
      roles: [
        {
          id: 1,
          name: "Admin",
          description: "Administrator",
          permissions: [
            { id: 1, name: "read", description: "Read access" },
            { id: 2, name: "write", description: "Write access" },
          ],
        },
      ],
    },
  ],
  deviceTokens: {},
});


================================================
FILE: apps/client/src/vite-env.d.ts
================================================
/// <reference types="vite/client" />


================================================
FILE: apps/client/src/widgets/auth/AuthenticatedLayout.tsx
================================================
import React, { useEffect, useState } from "react";
import { Outlet, useNavigate } from "react-router";
import { WebSocketProvider } from "@/features/ws/WebSocketProvider";
import { FlowUiEventBridge } from "@/features/ws/FlowUiEventBridge";
import { TopBarWrapper } from "./TopBarWrapper";
import { isDemoMode } from "@/shared/demo";
import { storage } from "@/lib/storage";
import { ChatPanelContainer, useChatStore, PANEL_WIDTH } from "@/features/llm-chat";
import { useIsMobile } from "@/hooks/use-mobile";
import { useConfigStore } from "@/entities/configurations/store";
import { isTauri, type SidecarStatus } from "@/shared/desktop";

export function AuthenticatedLayout() {
  const [wsUrl, setWsUrl] = useState<string | null>(null);
  const [reloadKey, setReloadKey] = useState(0);
  const navigate = useNavigate();

  useEffect(() => {
    if (isDemoMode) {
      setWsUrl("ws://demo.vessel.local/mock");
      return;
    }

    const token = storage.getToken();
    const serverUrlString = storage.getServerUrl();

    if (!token || !serverUrlString) {
      navigate("/auth", { replace: true });
      return;
    }

    try {
      const url = new URL(serverUrlString);
      const host = url.host;
      const wsProto = url.protocol === "https:" ? "wss" : "ws";

      setWsUrl(`${wsProto}://${host}/signal?token=${token}`);
    } catch {
      console.error("Invalid server_url in storage:", serverUrlString);
      navigate("/auth", { replace: true });
    }
  }, [navigate, reloadKey]);

  useEffect(() => {
    if (!isTauri()) return;
    let unlisten: (() => void) | null = null;
    let cancelled = false;

    (async () => {
      try {
        const { listen } = await import("@tauri-apps/api/event");
        const dispose = await listen<SidecarStatus>("sidecar-restarted", (event) => {
          const next = event.payload?.base_url;
          if (next) {
            storage.setServerUrl(next);
          }
          setWsUrl(null);
          setReloadKey((k) => k + 1);
        });
        if (cancelled) {
          dispose();
        } else {
          unlisten = dispose;
        }
      } catch (err) {
        console.warn("Failed to subscribe to sidecar-restarted", err);
      }
    })();

    return () => {
      cancelled = true;
      if (unlisten) unlisten();
    };
  }, []);

  useEffect(() => {
    if (!wsUrl) return;
    void useConfigStore.getState().fetchConfigs();
  }, [wsUrl]);

  const isOpen = useChatStore((s) => s.isOpen);
  const isMobile = useIsMobile();

  if (!wsUrl) {
    return <div>Loading...</div>;
  }

  // Disable content push on mobile
  const chatPanelWidth = isOpen && !isMobile ? PANEL_WIDTH : 0;

  return (
    <WebSocketProvider url={wsUrl}>
      <FlowUiEventBridge />
      <div
        style={
          {
            "--chat-panel-width": `${chatPanelWidth}px`,
          } as React.CSSProperties
        }
        className="transition-[padding] duration-300 pr-[var(--chat-panel-width)]"
      >
        <TopBarWrapper>
          <Outlet />
        </TopBarWrapper>
      </div>
      <ChatPanelContainer />
    </WebSocketProvider>
  );
}


================================================
FILE: apps/client/src/widgets/auth/TopBarWrapper.tsx
================================================
import { PageWrapper } from "@/app/pageWrapper/page-wrapper";
import { ErrorRender } from "@/features/error";
import { TopBar } from "@/features/topbar";
import { isElectron } from "@/lib/electron";
import { PropsWithChildren } from "react";
import { ErrorBoundary } from "react-error-boundary";

interface TopBarWrapType extends PropsWithChildren {
  hide?: boolean;
}

export function TopBarWrapper(props: TopBarWrapType) {
  if (isElectron()) {
    return (
      <>
        <PageWrapper>
          <TopBar hide={props.hide} />
          {props.children}
        </PageWrapper>
      </>
    );
  } else {
    return (
      <ErrorBoundary fallbackRender={ErrorRender} onReset={() => {}}>
        <PageWrapper>{props.children}</PageWrapper>
      </ErrorBoundary>
    );
  }
}


================================================
FILE: apps/client/src/widgets/device-list/DeviceList.tsx
================================================
import { useEffect } from "react";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import { Circle, CircleCheck, Loader2, MoreHorizontal } from "lucide-react";
import { useDeviceStore } from "@/entities/device/store";
import { DeviceDeleteButton } from "@/features/device/DeviceDeleteButton";
import { DeviceUpdateButton } from "@/features/device/DeviceUpdateButton";
import { DeviceCreateButton } from "@/features/device/DeviceCreateButton";
import { DeviceKeyButton } from "@/features/device/DeviceKeyButton";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { Button } from "@/components/ui/button";

export function DeviceList() {
  const { devices, isLoading, fetchDevices, selectDevice, selectedDevice } =
    useDeviceStore();

  useEffect(() => {
    fetchDevices();
  }, [fetchDevices]);

  if (isLoading) {
    return (
      <Card className='flex justify-center items-center min-h-[200px]'>
        <Loader2 className='h-8 w-8 animate-spin' />
      </Card>
    );
  }

  return (
    <Card>
      <CardHeader className='flex flex-row items-start justify-between'>
        <div>
          <CardTitle>Devices</CardTitle>
          <CardDescription>
            Select a device to view its entities.
          </CardDescription>
        </div>
        <DeviceCreateButton />
      </CardHeader>
      <CardContent>
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead></TableHead>

              <TableHead>ID</TableHead>
              <TableHead>Name</TableHead>
              <TableHead className='hidden sm:table-cell'>
                Manufacturer
              </TableHead>
              <TableHead className='sticky right-0 bg-background w-[40px] min-w-[40px] text-right'>
                Actions
              </TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {devices.map((device) => (
              <TableRow
                key={device.id}
                onClick={() => selectDevice(device)}
                className={`cursor-pointer ${
                  selectedDevice?.id === device.id ? "bg-muted/50" : ""
                }`}
              >
                <TableCell className='font-medium'>
                  {selectedDevice?.id === device.id ? (
                    <CircleCheck className='text-blue-500' />
                  ) : (
                    <Circle className='text-muted/70' />
                  )}
                </TableCell>
                <TableCell className='font-medium'>
                  {device.device_id}
                </TableCell>
                <TableCell>{device.name ?? "N/A"}</TableCell>
                <TableCell className='hidden sm:table-cell'>
                  {device.manufacturer ?? "N/A"}
                </TableCell>
                <TableCell
                  className='sticky right-0 bg-background text-right space-x-1'
                  onClick={(e) => e.stopPropagation()}
                >
                  <DropdownMenu>
                    <DropdownMenuTrigger asChild>
                      <Button variant='ghost' className='h-8 w-8 p-0'>
                        <span className='sr-only'>Open menu</span>
                        <MoreHorizontal className='h-4 w-4' />
                      </Button>
                    </DropdownMenuTrigger>
                    <DropdownMenuContent align='end'>
                      <DeviceUpdateButton device={device} />
                      <DeviceKeyButton deviceId={device.id} />
                      <DeviceDeleteButton deviceId={device.id} />
                    </DropdownMenuContent>
                  </DropdownMenu>
                </TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </CardContent>
    </Card>
  );
}


================================================
FILE: apps/client/src/widgets/entity-list/EntityList.tsx
================================================
import { useEffect } from "react";

import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import { Loader2, MoreHorizontal } from "lucide-react";
import { useDeviceStore } from "@/entities/device/store";
import { useEntityStore } from "@/entities/entity/store";
import { EntityCreateButton } from "@/features/entity/EntityCreateButton";
import { EntityDeleteButton } from "@/features/entity/EntityDeleteButton";
import { EntityUpdateButton } from "@/features/entity/EntityUpdateButton";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { Button } from "@/components/ui/button";

export function EntityList() {
  const { selectedDevice } = useDeviceStore();
  const { entities, isLoading, fetchEntities, autoOpenEntityId } = useEntityStore();

  useEffect(() => {
    fetchEntities();
  }, [fetchEntities]);

  const filteredEntities = selectedDevice
    ? entities.filter((e) => e.device_id === selectedDevice.id)
    : [];

  const autoOpenEntity = autoOpenEntityId
    ? filteredEntities.find((e) => e.id === autoOpenEntityId)
    : null;

  return (
    <Card>
      <CardHeader className='flex flex-row items-start justify-between'>
        <div>
          <CardTitle>Entities</CardTitle>
          <CardDescription>
            {selectedDevice
              ? `Entities for ${
                  selectedDevice.name || selectedDevice.device_id
                }`
              : "Select a device to see its entities"}
          </CardDescription>
        </div>
        <EntityCreateButton />
      </CardHeader>
      <CardContent className='min-h-[200px]'>
        {isLoading && (
          <div className='flex justify-center items-center h-full'>
            <Loader2 className='h-8 w-8 animate-spin' />
          </div>
        )}

        {!isLoading && !selectedDevice && (
          <div className='flex items-center justify-center h-full text-center text-muted-foreground'>
            <p>No device selected.</p>
          </div>
        )}

        {!isLoading && selectedDevice && filteredEntities.length === 0 && (
          <div className='flex items-center justify-center h-full text-center text-muted-foreground'>
            <p>No entities found for this device.</p>
          </div>
        )}

        {!isLoading && selectedDevice && filteredEntities.length > 0 && (
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>Entity ID</TableHead>
                <TableHead>Name</TableHead>
                <TableHead className='sticky right-0 bg-background w-[40px] min-w-[40px] text-right'>
                  Actions
                </TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {filteredEntities.map((entity) => (
                <TableRow key={entity.id}>
                  <TableCell className='font-medium'>
                    {entity.entity_id}
                  </TableCell>
                  <TableCell>{entity.friendly_name ?? "N/A"}</TableCell>
                  <TableCell className='sticky right-0 bg-background text-right'>
                    <DropdownMenu>
                      <DropdownMenuTrigger asChild>
                        <Button variant='ghost' className='h-8 w-8 p-0'>
                          <span className='sr-only'>Open menu</span>
                          <MoreHorizontal className='h-4 w-4' />
                        </Button>
                      </DropdownMenuTrigger>
                      <DropdownMenuContent align='end'>
                        <EntityUpdateButton entity={entity} />
                        <EntityDeleteButton entityId={entity.id} />
                      </DropdownMenuContent>
                    </DropdownMenu>
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        )}
      </CardContent>
      {autoOpenEntity && (
        <EntityUpdateButton entity={autoOpenEntity} defaultOpen={true} />
      )}
    </Card>
  );
}


================================================
FILE: apps/client/src/widgets/role-table/RoleList.tsx
================================================
import { Button } from "@/components/ui/button";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import {
  Table,
  TableHeader,
  TableRow,
  TableHead,
  TableBody,
  TableCell,
} from "@/components/ui/table";
import { useRoleStore } from "@/entities/role/store";
import { Role } from "@/entities/role/types";
import {
  AddRoleDialog,
  DeleteRoleDialog,
  EditRoleDialog,
} from "@/features/role/RoleDialogs";
import { Edit, MoreHorizontal, PlusCircle, Trash2 } from "lucide-react";
import { FC, useEffect, useState } from "react";
import { Badge } from "@/components/ui/badge";

export const RoleTable: FC = () => {
  const { roles, isLoading, error, fetchRoles } = useRoleStore();
  const [isAddDialogOpen, setAddDialogOpen] = useState(false);
  const [editingRole, setEditingRole] = useState<Role | null>(null);
  const [deletingRoleId, setDeletingRoleId] = useState<number | null>(null);

  useEffect(() => {
    fetchRoles();
  }, [fetchRoles]);

  return (
    <>
      <div className='flex items-center justify-between mb-6'>
        <div>
          <h1 className='text-2xl font-bold tracking-tight'>Role Management</h1>
          <p className='text-muted-foreground'>
            Manage user roles and their permissions.
          </p>
        </div>
        <Button onClick={() => setAddDialogOpen(true)}>
          <PlusCircle className='mr-2 h-4 w-4' /> Add Role
        </Button>
      </div>
      {isLoading && <div className='text-center p-8'>Loading roles...</div>}
      {!isLoading && error && (
        <div className='text-center p-8 text-destructive'>{error}</div>
      )}
      {!isLoading && !error && (
        <div className=' border'>
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>Name</TableHead>
                <TableHead>Description</TableHead>
                <TableHead>Permissions</TableHead>
                <TableHead className='text-right'></TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {roles.length > 0 ? (
                roles.map((role) => (
                  <TableRow key={role.id}>
                    <TableCell className='font-medium'>{role.name}</TableCell>
                    <TableCell>{role.description}</TableCell>
                    <TableCell>
                      <div className='flex flex-wrap gap-1'>
                        {(role.permissions ?? []).map((p) => (
                          <Badge key={p.id} variant='secondary'>
                            {p.name}
                          </Badge>
                        ))}
                      </div>
                    </TableCell>
                    <TableCell className='text-right'>
                      <DropdownMenu>
                        <DropdownMenuTrigger asChild>
                          <Button variant='ghost' className='h-8 w-8 p-0'>
                            <MoreHorizontal className='h-4 w-4' />
                          </Button>
                        </DropdownMenuTrigger>
                        <DropdownMenuContent>
                          <DropdownMenuItem
                            onSelect={() => setEditingRole(role)}
                          >
                            <Edit className='mr-2 h-4 w-4' />
                            <span>Edit</span>
                          </DropdownMenuItem>
                          <DropdownMenuItem
                            onSelect={() => setDeletingRoleId(role.id)}
                            className='text-red-500 focus:text-red-500'
                          >
                            <Trash2 className='mr-2 h-4 w-4 text-red-500 focus:text-red-500' />
                            <span>Delete</span>
                          </DropdownMenuItem>
                        </DropdownMenuContent>
                      </DropdownMenu>
                    </TableCell>
                  </TableRow>
                ))
              ) : (
                <TableRow>
                  <TableCell colSpan={4} className='h-24 text-center'>
                    No roles found.
                  </TableCell>
                </TableRow>
              )}
            </TableBody>
          </Table>
        </div>
      )}

      <AddRoleDialog isOpen={isAddDialogOpen} onOpenChange={setAddDialogOpen} />
      <EditRoleDialog
        role={editingRole}
        isOpen={!!editingRole}
        onOpenChange={() => setEditingRole(null)}
      />
      <DeleteRoleDialog
        roleId={deletingRoleId}
        isOpen={!!deletingRoleId}
        onOpenChange={() => setDeletingRoleId(null)}
      />
    </>
  );
};


================================================
FILE: apps/client/src/widgets/user-table/UserList.tsx
================================================
import { Button } from "@/components/ui/button";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import {
  Table,
  TableHeader,
  TableRow,
  TableHead,
  TableBody,
  TableCell,
} from "@/components/ui/table";
import { useUserStore } from "@/entities/user/store";
import { User } from "@/entities/user/types";
import { AddUserDialog } from "@/features/user/userAdd";
import { DeleteUserDialog } from "@/features/user/userDelete";
import { EditUserDialog } from "@/features/user/userEdit";
import { Edit, MoreHorizontal, PlusCircle, Trash2 } from "lucide-react";
import { FC, useEffect, useState } from "react";

const formatDate = (dateString: string | null | undefined): string => {
  if (!dateString) return "N/A";
  try {
    const formattedString = dateString.includes(" ")
      ? dateString.replace(" ", "T")
      : dateString;
    const date = new Date(formattedString);
    if (isNaN(date.getTime())) {
      return dateString;
    }
    return date.toLocaleString();
  } catch (error) {
    console.error("Invalid date format:", error);
    return dateString;
  }
};

export const UserTable: FC = () => {
  const { users, isLoading, error, fetchUsers } = useUserStore(
    (state) => state,
  );
  const [isAddDialogOpen, setAddDialogOpen] = useState(false);
  const [editingUser, setEditingUser] = useState<User | null>(null);
  const [deletingUserId, setDeletingUserId] = useState<number | null>(null);

  useEffect(() => {
    fetchUsers();
  }, [fetchUsers]);

  return (
    <>
      <div className='flex items-center justify-between mb-6'>
        <div>
          <h1 className='text-2xl font-bold tracking-tight'>User Management</h1>
          <p className='text-muted-foreground'>
            A list of all users in the system.
          </p>
        </div>
        <Button onClick={() => setAddDialogOpen(true)}>
          <PlusCircle className='mr-2 h-4 w-4' /> Add User
        </Button>
      </div>
      {isLoading && <div className='text-center p-8'>Loading users...</div>}
      {!isLoading && error && (
        <div className='text-center p-8 text-destructive'>{error}</div>
      )}
      {!isLoading && !error && (
        <div className=' border'>
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>Username</TableHead>
                <TableHead>Email</TableHead>
                <TableHead>Created At</TableHead>
                <TableHead>Updated At</TableHead>
                <TableHead className='text-right'></TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {users.length > 0 ? (
                users.map((user) => (
                  <TableRow key={user.id}>
                    <TableCell className='font-medium'>
                      {user.username}
                    </TableCell>
                    <TableCell>{user.email}</TableCell>
                    <TableCell>{formatDate(user.created_at)}</TableCell>
                    <TableCell>{formatDate(user.updated_at)}</TableCell>
                    <TableCell className='text-right'>
                      <DropdownMenu>
                        <DropdownMenuTrigger asChild>
                          <Button variant='ghost' className='h-8 w-8 p-0'>
                            <span className='sr-only'>Open menu</span>
                            <MoreHorizontal className='h-4 w-4' />
                          </Button>
                        </DropdownMenuTrigger>
                        <DropdownMenuContent>
                          <DropdownMenuItem
                            onSelect={() => setEditingUser(user)}
                          >
                            <Edit className='mr-2 h-4 w-4' />
                            <span>Edit</span>
                          </DropdownMenuItem>
                          <DropdownMenuItem
                            onSelect={() => setDeletingUserId(user.id)}
                            className='text-red-500 focus:text-red-500'
                          >
                            <Trash2 className='mr-2 h-4 w-4 text-red-500' />
                            <span>Delete</span>
                          </DropdownMenuItem>
                        </DropdownMenuContent>
                      </DropdownMenu>
                    </TableCell>
                  </TableRow>
                ))
              ) : (
                <TableRow>
                  <TableCell colSpan={5} className='h-24 text-center'>
                    No users found.
                  </TableCell>
                </TableRow>
              )}
            </TableBody>
          </Table>
        </div>
      )}

      <AddUserDialog isOpen={isAddDialogOpen} onOpenChange={setAddDialogOpen} />
      <EditUserDialog
        user={editingUser}
        isOpen={!!editingUser}
        onOpenChange={() => setEditingUser(null)}
      />
      <DeleteUserDialog
        userId={deletingUserId}
        isOpen={!!deletingUserId}
        onOpenChange={() => setDeletingUserId(null)}
      />
    </>
  );
};


================================================
FILE: apps/client/tailwind.config.js
================================================
/** @type {import('tailwindcss').Config} */

import { createThemes } from "@shadcn/tailwind-config";

module.exports = {
  presets: [createThemes()],
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  darkMode: "class",
  theme: {
    extend: {},
  },
  plugins: [],
};


================================================
FILE: apps/client/tsconfig.app.json
================================================
{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,
    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "isolatedModules": false,
    "moduleDetection": "force",
    "noEmit": true,
    "jsx": "react-jsx",
    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,
    "noImplicitAny": true,
    "types": ["@emotion/react/types/css-prop", "d3"],
    "jsxImportSource": "@emotion/react",
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "include": ["src"]
}


================================================
FILE: apps/client/tsconfig.app.tsbuildinfo
================================================
{"root":["./src/app.tsx","./src/main.tsx","./src/vite-env.d.ts","./src/app/pagewrapper/page-wrapper.tsx","./src/app/providers/theme-provider.tsx","./src/components/icon/logo.tsx","./src/components/ui/alert-dialog.tsx","./src/components/ui/alert.tsx","./src/components/ui/avatar.tsx","./src/components/ui/badge.tsx","./src/components/ui/breadcrumb.tsx","./src/components/ui/button.tsx","./src/components/ui/card.tsx","./src/components/ui/command.tsx","./src/components/ui/context-menu.tsx","./src/components/ui/dialog.tsx","./src/components/ui/dropdown-menu.tsx","./src/components/ui/input.tsx","./src/components/ui/label.tsx","./src/components/ui/navigation-menu.tsx","./src/components/ui/popover.tsx","./src/components/ui/resizable.tsx","./src/components/ui/scroll-area.tsx","./src/components/ui/select.tsx","./src/components/ui/separator.tsx","./src/components/ui/sheet.tsx","./src/components/ui/sidebar.tsx","./src/components/ui/skeleton.tsx","./src/components/ui/sonner.tsx","./src/components/ui/switch.tsx","./src/components/ui/table.tsx","./src/components/ui/tabs.tsx","./src/components/ui/textarea.tsx","./src/components/ui/tooltip.tsx","./src/contexts/supabaseauthcontext.tsx","./src/entities/configurations/api.ts","./src/entities/configurations/codeservice.ts","./src/entities/configurations/store.ts","./src/entities/configurations/types.ts","./src/entities/custom-nodes/api.ts","./src/entities/custom-nodes/presets.ts","./src/entities/custom-nodes/store.ts","./src/entities/custom-nodes/types.ts","./src/entities/device/api.ts","./src/entities/device/store.ts","./src/entities/device/types.ts","./src/entities/device-token/api.ts","./src/entities/device-token/store.ts","./src/entities/device-token/types.ts","./src/entities/dynamic-dashboard/api.ts","./src/entities/dynamic-dashboard/interaction.ts","./src/entities/dynamic-dashboard/layoutresolve.ts","./src/entities/dynamic-dashboard/store.ts","./src/entities/entity/api.ts","./src/entities/entity/store.ts","./src/entities/entity/types.ts","./src/entities/file/api.ts","./src/entities/file/store.ts","./src/entities/file/types.ts","./src/entities/flow/api.ts","./src/entities/flow/store.ts","./src/entities/flow/types.ts","./src/entities/ha/api.ts","./src/entities/ha/store.ts","./src/entities/ha/types.ts","./src/entities/integrations/api.ts","./src/entities/integrations/store.ts","./src/entities/integrations/types.ts","./src/entities/log/api.ts","./src/entities/log/types.ts","./src/entities/map/api.ts","./src/entities/map/store.ts","./src/entities/map/types.ts","./src/entities/permission/api.ts","./src/entities/permission/store.ts","./src/entities/permission/types.ts","./src/entities/recording/api.ts","./src/entities/recording/index.ts","./src/entities/recording/store.ts","./src/entities/recording/types.ts","./src/entities/role/api.ts","./src/entities/role/store.ts","./src/entities/role/types.ts","./src/entities/stat/api.ts","./src/entities/stat/store.ts","./src/entities/stat/types.ts","./src/entities/tunnel/api.ts","./src/entities/tunnel/store.ts","./src/entities/tunnel/types.ts","./src/entities/user/api.ts","./src/entities/user/store.ts","./src/entities/user/types.ts","./src/features/account-switcher/index.tsx","./src/features/auth/authinterceptor.tsx","./src/features/auth/defaultadminpassworddialog.tsx","./src/features/auth/api.ts","./src/features/auth/hook.ts","./src/features/auth/index.tsx","./src/features/code/createitemdialog.tsx","./src/features/code/fileeditor.tsx","./src/features/code/filetree.tsx","./src/features/configurations/configurationactionbutton.tsx","./src/features/configurations/configurationcreate.tsx","./src/features/configurations/configurationcreatebutton.tsx","./src/features/darkmode/mode-toggle.tsx","./src/features/dashboard-swipe/dashboardswipeheader.tsx","./src/features/dashboard-swipe/dashboardswipelayout.tsx","./src/features/device/devicecreatebutton.tsx","./src/features/device/devicedeletebutton.tsx","./src/features/device/devicekeybutton.tsx","./src/features/device/deviceupdatebutton.tsx","./src/features/device-token/devicetokenmanager.tsx","./src/features/dynamic-dashboard/groupcanvas.tsx","./src/features/dynamic-dashboard/events/dispatcher.test.ts","./src/features/dynamic-dashboard/events/dispatcher.ts","./src/features/dynamic-dashboard/panels/buttonpanel.tsx","./src/features/dynamic-dashboard/panels/flowpanel.tsx","./src/features/dynamic-dashboard/panels/mappanel.tsx","./src/features/entity/allentities.tsx","./src/features/entity/analyzemenuitem.tsx","./src/features/entity/card.tsx","./src/features/entity/entitycreatebutton.tsx","./src/features/entity/entitydeletebutton.tsx","./src/features/entity/entityupdatebutton.tsx","./src/features/entity/selectplatforms.tsx","./src/features/entity/selecttypes.tsx","./src/features/entity/statehistorysheet.tsx","./src/features/entity/useentitiesdata.ts","./src/features/error/index.tsx","./src/features/flow/addcustomnode.tsx","./src/features/flow/flow.tsx","./src/features/flow/graph.tsx","./src/features/flow/options.tsx","./src/features/flow/optionsvariation.tsx","./src/features/flow/runflow.tsx","./src/features/flow/selecteditemactions.tsx","./src/features/flow/flownode.ts","./src/features/flow/flowtypes.ts","./src/features/flow/flowutils.ts","./src/features/flow/flow-chat/buildsystemprompt.ts","./src/features/flow/flow-chat/executetoolcalls.ts","./src/features/flow/flow-chat/flowtools.ts","./src/features/flow/flow-chat/index.ts","./src/features/flow/nodes/buttonnode.tsx","./src/features/flow/nodes/calcnode.tsx","./src/features/flow/nodes/httpnode.tsx","./src/features/flow/nodes/intervalnode.tsx","./src/features/flow/nodes/logicnode.tsx","./src/features/flow/nodes/loopnode.tsx","./src/features/flow/nodes/mqttnode.tsx","./src/features/flow/nodes/numbernode.tsx","./src/features/flow/nodes/processingnode.tsx","./src/features/flow/nodes/titlenode.tsx","./src/features/flow/nodes/varnode.tsx","./src/features/flow-log/flowlog.tsx","./src/features/footer/index.tsx","./src/features/gps/parsegps.ts","./src/features/ha/haentitiestable.tsx","./src/features/ha/hastatblock.tsx","./src/features/ha/index.tsx","./src/features/integration/ha.tsx","./src/features/integration/integration.tsx","./src/features/integration/ros.tsx","./src/features/integration/sdr.tsx","./src/features/integration/constants.ts","./src/features/integration/types.ts","./src/features/json/jsoneditor.tsx","./src/features/llm-chat/chatinput.tsx","./src/features/llm-chat/chatmessage.tsx","./src/features/llm-chat/chatmessages.tsx","./src/features/llm-chat/chatpanel.tsx","./src/features/llm-chat/chatpanelcontainer.tsx","./src/features/llm-chat/chatpanelmobile.tsx","./src/features/llm-chat/index.tsx","./src/features/llm-chat/store.ts","./src/features/llm-chat/types.ts","./src/features/llm-chat/usechatkeyboard.ts","./src/features/log/index.tsx","./src/features/map/currentlocationmarker.tsx","./src/features/map/mapviewpersistence.tsx","./src/features/map/index.tsx","./src/features/map-draw/featuredetailspanel.tsx","./src/features/map-draw/featuredrawingpreview.tsx","./src/features/map-draw/featureeditor.tsx","./src/features/map-draw/featurerenderer.tsx","./src/features/map-draw/layerdialog.tsx","./src/features/map-draw/layersidebar.tsx","./src/features/map-draw/mapevents.tsx","./src/features/map-draw/maptoolbar.tsx","./src/features/map-entity/entitydetailspanel.tsx","./src/features/map-entity/render.tsx","./src/features/map-entity/store.ts","./src/features/recording/recordingbutton.tsx","./src/features/recording/recordingslist.tsx","./src/features/recording/videoplaybackdialog.tsx","./src/features/recording/index.ts","./src/features/recording/components/audiowaveformplayer.tsx","./src/features/recording/components/frametimeline.tsx","./src/features/recording/components/playbackcontrols.tsx","./src/features/recording/components/timeruler.tsx","./src/features/recording/components/videocontrolbar.tsx","./src/features/recording/components/waveformcanvas.tsx","./src/features/recording/hooks/useaudiowaveform.ts","./src/features/recording/hooks/usemediaplayback.ts","./src/features/recording/hooks/usevideoframes.ts","./src/features/role/roledialogs.tsx","./src/features/role/roleform.tsx","./src/features/ros2/ros2dashboard.tsx","./src/features/rtc/audiolevelbar.tsx","./src/features/rtc/streamreceiver.tsx","./src/features/rtc/webrtcprovider.tsx","./src/features/rtc/captureframe.ts","./src/features/rtc/rtc.ts","./src/features/rtc/turnservice.ts","./src/features/sdr/sdraudioplayer.tsx","./src/features/sdr/sdrdashboard.tsx","./src/features/sdr/api.ts","./src/features/search/search-form.tsx","./src/features/server-resource/resourceusage.tsx","./src/features/setup/index.tsx","./src/features/sidebar/footer.tsx","./src/features/sidebar/index.tsx","./src/features/stat/index.tsx","./src/features/topbar/index.tsx","./src/features/user/userroleassigner.tsx","./src/features/user/useradd.tsx","./src/features/user/userdelete.tsx","./src/features/user/useredit.tsx","./src/features/user/userform.tsx","./src/features/ws/flowuieventbridge.tsx","./src/features/ws/isconnected.tsx","./src/features/ws/websocketprovider.tsx","./src/features/ws/flowuieventrouter.test.ts","./src/features/ws/flowuieventrouter.ts","./src/features/ws/ws.ts","./src/features/ws/wsmock.ts","./src/features/ws/flowuiadapters/toastflowuiadapter.ts","./src/hooks/use-mobile.ts","./src/hooks/usedesktopsidecar.ts","./src/hooks/usepreventbacknavigation.ts","./src/lib/electron.ts","./src/lib/geometry-precision.ts","./src/lib/geometry.ts","./src/lib/jwt.ts","./src/lib/storage.ts","./src/lib/string.ts","./src/lib/supabase.ts","./src/lib/time.ts","./src/lib/utils.ts","./src/pages/auth/index.tsx","./src/pages/code/index.tsx","./src/pages/dashboard/dashboardmainpanel.tsx","./src/pages/dashboard/index.tsx","./src/pages/desktop-settings/index.tsx","./src/pages/devices/index.tsx","./src/pages/dynamic-dashboard/dynamicdashboardmainpanel.tsx","./src/pages/dynamic-dashboard/newdynamicdashboardpanel.tsx","./src/pages/dynamic-dashboard/index.tsx","./src/pages/flow/index.tsx","./src/pages/landing/index.tsx","./src/pages/map/index.tsx","./src/pages/notfound/index.tsx","./src/pages/recordings/index.tsx","./src/pages/settings/account.tsx","./src/pages/settings/config.tsx","./src/pages/settings/index.tsx","./src/pages/settings/integration.tsx","./src/pages/settings/log.tsx","./src/pages/settings/networks.tsx","./src/pages/settings/services.tsx","./src/pages/settings/users.tsx","./src/pages/setup/index.tsx","./src/shared/demo.ts","./src/shared/desktop.ts","./src/shared/api/index.ts","./src/shared/mock/mockadapter.ts","./src/shared/mock/mockdata.ts","./src/widgets/auth/authenticatedlayout.tsx","./src/widgets/auth/topbarwrapper.tsx","./src/widgets/device-list/devicelist.tsx","./src/widgets/entity-list/entitylist.tsx","./src/widgets/role-table/rolelist.tsx","./src/widgets/user-table/userlist.tsx"],"errors":true,"version":"5.8.3"}

================================================
FILE: apps/client/tsconfig.json
================================================
{
  "files": [],
  "references": [
    { "path": "./tsconfig.app.json" },
    { "path": "./tsconfig.node.json" }
  ],
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}


================================================
FILE: apps/client/tsconfig.node.json
================================================
{
  "compilerOptions": {
    "target": "ES2022",
    "lib": ["ES2023"],
    "module": "ESNext",
    "skipLibCheck": true,
    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "isolatedModules": true,
    "moduleDetection": "force",
    "noEmit": true,
    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,
    "noImplicitAny": true,

    "jsxImportSource": "@emotion/react"
  },
  "include": ["vite.config.ts"]
}


================================================
FILE: apps/client/tsconfig.node.tsbuildinfo
================================================
{"root":["./vite.config.ts"],"version":"5.8.3"}

================================================
FILE: apps/client/vite.config.ts
================================================
/// <reference types="vitest/config" />
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import dts from "vite-plugin-dts";
import tailwindcss from "@tailwindcss/vite";
import path from "path";

// https://vitejs.dev/config/
export default defineConfig({
  server: {
    port: 5175,
  },
  plugins: [
    dts({
      insertTypesEntry: true,
    }),
    react(),
    tailwindcss(),
  ],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
  test: {
    environment: "node",
    include: ["src/**/*.test.ts"],
  },
});


================================================
FILE: apps/desktop/.gitignore
================================================
/node_modules
/src-tauri/target
/src-tauri/gen
/dist


================================================
FILE: apps/desktop/README.md
================================================
# Vessel Desktop (Tauri)

This package wraps the existing client and Rust server into a Tauri desktop build with the server running as a sidecar.

## Development

```bash
npm run desktop
```

This builds the server in release mode, starts the Vite dev server for the client, and launches Tauri.

## Build

```bash
npm run desktop:build
```

This compiles the client bundle, builds the server sidecar (`apps/server/target/release/server`), and packages the desktop app.

## Notes

- The sidecar server runs inside the app's writable data directory and will create `config.toml`, `database.db`, and `log/` there if they do not exist.
- The client is pre-wired to point at the local sidecar (sets `server_url` cookie) when running inside Tauri.


================================================
FILE: apps/desktop/package.json
================================================
{
  "name": "desktop",
  "private": true,
  "version": "0.1.0",
  "type": "module",
  "scripts": {
    "dev": "tauri dev",
    "build": "tauri build",
    "tauri": "tauri"
  },
  "devDependencies": {
    "@tauri-apps/cli": "^2.0.0",
    "typescript": "~5.8.3"
  }
}


================================================
FILE: apps/desktop/src-tauri/Cargo.toml
================================================
[package]
name = "desktop"
version = "0.1.0"
description = "Vessel desktop shell with Tauri"
authors = ["Vessel Contributors"]
edition = "2021"

[dependencies]
serde = { version = "1.0", features = ["derive"] }
serde_json = "1.0"
tauri = { version = "2", features = ["tray-icon", "image-png"] }
tauri-plugin-deep-link = "2"
tauri-plugin-prevent-default = "4"
tauri-plugin-shell = "2"
toml = "0.8"

[build-dependencies]
tauri-build = { version = "2", features = [] }


================================================
FILE: apps/desktop/src-tauri/build.rs
================================================
use std::env;
use std::fs;
use std::path::PathBuf;

fn main() {
    let manifest_dir = PathBuf::from(env::var("CARGO_MANIFEST_DIR").expect("manifest dir"));
    let target_triple = env::var("TARGET").unwrap_or_default();
    let target_dir = manifest_dir.join("../../../target/release");
    let base_bin = target_dir.join("server");
    let suffixed_bin = target_dir.join(format!("server-{}", target_triple));

    if base_bin.exists() && !suffixed_bin.exists() {
        if let Err(err) = fs::copy(&base_bin, &suffixed_bin) {
            eprintln!("Warning: failed to copy sidecar binary: {}", err);
        }
    }

    tauri_build::build()
}


================================================
FILE: apps/desktop/src-tauri/capabilities/main.json
================================================
{
  "$schema": "../gen/schemas/desktop-schema.json",
  "identifier": "main",
  "description": "Main window permissions",
  "windows": ["main", "settings"],
  "permissions": [
    "core:default",
    "core:event:default",
    "core:window:allow-close",
    "core:window:allow-hide",
    "core:window:allow-show",
    "core:window:allow-set-focus",
    "shell:allow-open",
    "shell:default",
    "deep-link:default"
  ]
}


================================================
FILE: apps/desktop/src-tauri/entitlements.plist
================================================
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
	<key>com.apple.security.cs.disable-library-validation</key>
	<true/>
	<key>com.apple.security.cs.allow-dyld-environment-variables</key>
	<true/>
	<key>com.apple.security.cs.allow-jit</key>
	<true/>
	<key>com.apple.security.cs.allow-unsigned-executable-memory</key>
	<true/>
	<key>com.apple.security.network.server</key>
	<true/>
	<key>com.apple.security.network.client</key>
	<true/>
</dict>
</plist>


================================================
FILE: apps/desktop/src-tauri/src/main.rs
================================================
#![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]

use std::{
    fs,
    fs::OpenOptions,
    io::Write,
    path::{Path, PathBuf},
    sync::{Arc, Mutex},
    time::{Duration, SystemTime},
};

use serde::{Deserialize, Serialize};
use tauri::{
    image::Image,
    menu::{Menu, MenuItem, PredefinedMenuItem},
    tray::{MouseButton, MouseButtonState, TrayIconBuilder, TrayIconEvent},
    AppHandle, Emitter, Manager, State, WebviewUrl, WebviewWindowBuilder, Wry,
};
use tauri_plugin_prevent_default::{Builder as PreventBuilder, KeyboardShortcut};
use tauri_plugin_shell::process::CommandChild;
use tauri_plugin_shell::{process::CommandEvent, ShellExt};

const DEFAULT_LISTEN: &str = "0.0.0.0:6174";
const CONFIG_FILE: &str = "config.toml";
const SETTINGS_QUERY: &str = "index.html?view=desktop_settings";

#[derive(Default)]
struct SidecarManager {
    child: Mutex<Option<CommandChild>>,
    workdir: Mutex<Option<PathBuf>>,
    restart_lock: Mutex<()>,
    terminated_flag: Arc<Mutex<bool>>,
    last_stderr: Arc<Mutex<String>>,
    status_item: Mutex<Option<MenuItem<Wry>>>,
    toggle_item: Mutex<Option<MenuItem<Wry>>>,
}

#[derive(Serialize, Clone)]
struct SidecarStatus {
    running: bool,
    base_url: Option<String>,
    listen_address: String,
    working_dir: String,
}

#[derive(Serialize, Deserialize, Clone)]
struct ServerAddress {
    host: String,
    port: u16,
}

fn ensure_workdir(
    app: &AppHandle,
    state: &SidecarManager,
) -> Result<PathBuf, Box<dyn std::error::Error>> {
    let mut guard = state.workdir.lock().unwrap();
    if let Some(existing) = guard.clone() {
        return Ok(existing);
    }

    let resolver = app.path();
    let base = resolver.app_data_dir().unwrap_or(std::env::current_dir()?);

    fs::create_dir_all(&base)?;
    fs::create_dir_all(base.join("log"))?;

    *guard = Some(base.clone());
    Ok(base)
}

fn read_listen_address(workdir: &Path) -> Option<String> {
    let config_path = workdir.join(CONFIG_FILE);
    if !config_path.exists() {
        return None;
    }

    let content = fs::read_to_string(config_path).ok()?;
    let parsed: toml::Value = toml::from_str(&content).ok()?;
    parsed
        .get("listen_address")
        .and_then(|v| v.as_str())
        .map(|s| s.to_string())
}

fn write_listen_address(workdir: &Path, listen: &str) -> Result<(), String> {
    let config_path = workdir.join(CONFIG_FILE);
    let mut doc: toml::Value = if config_path.exists() {
        let content = fs::read_to_string(&config_path).map_err(|e| e.to_string())?;
        toml::from_str(&content).map_err(|e| e.to_string())?
    } else {
        toml::Value::Table(toml::value::Table::new())
    };

    if let toml::Value::Table(ref mut table) = doc {
        table.insert(
            "listen_address".to_string(),
            toml::Value::String(listen.to_string()),
        );
    } else {
        return Err("Unexpected config.toml shape".into());
    }

    let serialized = toml::to_string(&doc).map_err(|e| e.to_string())?;
    let tmp = config_path.with_extension("toml.tmp");
    fs::write(&tmp, serialized).map_err(|e| e.to_string())?;
    fs::rename(&tmp, &config_path).map_err(|e| e.to_string())?;
    Ok(())
}

fn base_url_from_listen(listen: &str) -> String {
    let mut value = listen
        .trim()
        .trim_start_matches("http://")
        .trim_start_matches("https://")
        .to_string();

    if let Some(port) = value.strip_prefix("0.0.0.0:") {
        value = format!("127.0.0.1:{}", port);
    }

    if value.starts_with("127.0.0.1:") || value.starts_with("localhost:") {
        format!("http://{}", value)
    } else if value.contains("://") {
        value
    } else {
        format!("http://{}", value)
    }
}

fn parse_listen(listen: &str) -> ServerAddress {
    let cleaned = listen
        .trim()
        .trim_start_matches("http://")
        .trim_start_matches("https://")
        .to_string();

    let (host, port) = match cleaned.rsplit_once(':') {
        Some((h, p)) => (h.to_string(), p.parse::<u16>().unwrap_or(6174)),
        None => (cleaned, 6174),
    };

    ServerAddress { host, port }
}

fn build_status(state: &SidecarManager, workdir: &Path) -> SidecarStatus {
    let listen = read_listen_address(workdir).unwrap_or_else(|| DEFAULT_LISTEN.to_string());
    let base_url = Some(base_url_from_listen(&listen));

    let child_guard = state.child.lock().unwrap();
    let running = child_guard.is_some();

    SidecarStatus {
        running,
        base_url,
        listen_address: listen,
        working_dir: workdir.display().to_string(),
    }
}

fn write_log(path: &Path, msg: &str) {
    if let Some(parent) = path.parent() {
        let _ = fs::create_dir_all(parent);
    }
    if let Ok(mut file) = OpenOptions::new().create(true).append(true).open(path) {
        let _ = writeln!(file, "[{:?}] {}", SystemTime::now(), msg);
    }
}

fn bytes_to_line(bytes: Vec<u8>) -> String {
    String::from_utf8_lossy(&bytes).trim_end().to_string()
}

fn start_server_sidecar(
    app: &AppHandle,
    state: &SidecarManager,
    workdir: &Path,
) -> Result<(), Box<dyn std::error::Error>> {
    {
        let guard = state.child.lock().unwrap();
        if guard.is_some() {
            return Ok(());
        }
    }

    *state.terminated_flag.lock().unwrap() = false;
    state.last_stderr.lock().unwrap().clear();

    // Resolve bundled library paths relative to the app bundle
    let resource_dir = app
        .path()
        .resource_dir()
        .unwrap_or_else(|_| std::env::current_dir().unwrap());
    let libs_dir = resource_dir.join("libs");
    let gst_plugins_dir = resource_dir.join("gstreamer-1.0");
    let gst_helpers_dir = gst_plugins_dir.join("helpers");

    // Build DYLD_FALLBACK_LIBRARY_PATH: bundled libs first, then system fallbacks
    let mut dyld_paths: Vec<String> = vec![libs_dir.display().to_string()];

    // In development mode, also add Homebrew paths as fallbacks
    #[cfg(debug_assertions)]
    {
        dyld_paths.extend([
            "/opt/homebrew/opt/sqlite/lib".to_string(),
            "/opt/homebrew/opt/libiconv/lib".to_string(),
            "/opt/homebrew/lib".to_string(),
            "/usr/local/lib".to_string(),
        ]);
    }

    dyld_paths.extend(["/usr/local/lib".to_string(), "/usr/lib".to_string()]);

    let mut envs = std::collections::HashMap::new();
    envs.insert(
        "DYLD_FALLBACK_LIBRARY_PATH".to_string(),
        dyld_paths.join(":"),
    );

    // GStreamer environment: tell GStreamer where to find plugins and helpers
    envs.insert(
        "GST_PLUGIN_PATH".to_string(),
        gst_plugins_dir.display().to_string(),
    );
    envs.insert(
        "GST_PLUGIN_SYSTEM_PATH".to_string(),
        gst_plugins_dir.display().to_string(),
    );
    envs.insert(
        "GST_PLUGIN_SCANNER".to_string(),
        gst_helpers_dir
            .join("gst-plugin-scanner")
            .display()
            .to_string(),
    );
    // Write GStreamer registry cache to a writable location
    envs.insert(
        "GST_REGISTRY".to_string(),
        workdir.join("gst-registry.bin").display().to_string(),
    );

    let sidecar_log = workdir.join("log/sidecar.log");
    write_log(
        &sidecar_log,
        &format!("Spawning server sidecar in {}", workdir.display()),
    );

    let command = app
        .shell()
        .sidecar("server")?
        .current_dir(workdir.to_path_buf())
        .envs(envs);

    let (mut rx, child) = command.spawn()?;
    write_log(
        &sidecar_log,
        &format!("Server sidecar started with pid {:?}", child.pid()),
    );

    let sidecar_log2 = sidecar_log.clone();
    let terminated_flag = state.terminated_flag.clone();
    let stderr_buf = state.last_stderr.clone();
    tauri::async_runtime::spawn(async move {
        while let Some(event) = rx.recv().await {
            match event {
                CommandEvent::Terminated(payload) => {
                    write_log(&sidecar_log2, &format!("terminated: {:?}", payload));
                    *terminated_flag.lock().unwrap() = true;
                }
                CommandEvent::Error(err) => {
                    write_log(&sidecar_log2, &format!("error: {}", err));
                }
                CommandEvent::Stdout(line) => {
                    write_log(&sidecar_log2, &format!("stdout: {}", bytes_to_line(line)));
                }
                CommandEvent::Stderr(line) => {
                    let text = bytes_to_line(line);
                    write_log(&sidecar_log2, &format!("stderr: {}", text));
                    let mut buf = stderr_buf.lock().unwrap();
                    buf.push_str(&text);
                    buf.push('\n');
                }
                _ => {}
            }
        }
    });

    *state.child.lock().unwrap() = Some(child);
    Ok(())
}

fn stop_sidecar_internal(state: &SidecarManager) -> Result<(), String> {
    if let Some(child) = state.child.lock().unwrap().take() {
        child.kill().map_err(|e| e.to_string())?;
    }
    Ok(())
}

fn update_tray_status(app: &AppHandle, status: &SidecarStatus) {
    let state = app.state::<SidecarManager>();
    let item = state.status_item.lock().unwrap().clone();
    if let Some(item) = item {
        let text = if status.running {
            format!("Server: Running ({})", status.listen_address)
        } else {
            format!("Server: Stopped ({})", status.listen_address)
        };
        let _ = item.set_text(text);
    }
}

fn update_tray_toggle(app: &AppHandle) {
    let state = app.state::<SidecarManager>();
    let item = state.toggle_item.lock().unwrap().clone();
    if let Some(item) = item {
        if let Some(window) = app.get_webview_window("main") {
            let visible = window.is_visible().unwrap_or(true);
            let _ = item.set_text(if visible { "Hide Vessel" } else { "Show Vessel" });
        }
    }
}

#[tauri::command]
fn get_sidecar_status(
    app: AppHandle,
    state: State<'_, SidecarManager>,
) -> Result<SidecarStatus, String> {
    let workdir = ensure_workdir(&app, &state).map_err(|e| e.to_string())?;
    let status = build_status(&state, &workdir);
    update_tray_status(&app, &status);
    Ok(status)
}

#[tauri::command]
fn start_sidecar(
    app: AppHandle,
    state: State<'_, SidecarManager>,
) -> Result<SidecarStatus, String> {
    let workdir = ensure_workdir(&app, &state).map_err(|e| e.to_string())?;
    start_server_sidecar(&app, &state, &workdir).map_err(|e| e.to_string())?;
    let status = build_status(&state, &workdir);
    update_tray_status(&app, &status);
    Ok(status)
}

#[tauri::command]
fn stop_sidecar(app: AppHandle, state: State<'_, SidecarManager>) -> Result<(), String> {
    stop_sidecar_internal(&state)?;
    let workdir = ensure_workdir(&app, &state).map_err(|e| e.to_string())?;
    let status = build_status(&state, &workdir);
    update_tray_status(&app, &status);
    Ok(())
}

#[tauri::command]
fn get_server_address(
    app: AppHandle,
    state: State<'_, SidecarManager>,
) -> Result<ServerAddress, String> {
    let workdir = ensure_workdir(&app, &state).map_err(|e| e.to_string())?;
    let listen = read_listen_address(&workdir).unwrap_or_else(|| DEFAULT_LISTEN.to_string());
    Ok(parse_listen(&listen))
}

#[tauri::command]
fn update_server_address(
    app: AppHandle,
    state: State<'_, SidecarManager>,
    host: String,
    port: u16,
) -> Result<SidecarStatus, String> {
    let host = host.trim().to_string();
    if host.is_empty() {
        return Err("Host must not be empty".into());
    }
    if port == 0 {
        return Err("Port must be between 1 and 65535".into());
    }

    let _guard = state
        .restart_lock
        .lock()
        .map_err(|_| "restart lock poisoned".to_string())?;

    let workdir = ensure_workdir(&app, &state).map_err(|e| e.to_string())?;
    let previous = read_listen_address(&workdir).unwrap_or_else(|| DEFAULT_LISTEN.to_string());
    let new_listen = format!("{}:{}", host, port);

    if new_listen == previous {
        let status = build_status(&state, &workdir);
        update_tray_status(&app, &status);
        return Ok(status);
    }

    write_listen_address(&workdir, &new_listen)?;
    stop_sidecar_internal(&state)?;
    // Give the OS a moment to release the previous bind
    std::thread::sleep(Duration::from_millis(300));

    if let Err(err) = start_server_sidecar(&app, &state, &workdir) {
        let _ = write_listen_address(&workdir, &previous);
        let _ = start_server_sidecar(&app, &state, &workdir);
        let status = build_status(&state, &workdir);
        update_tray_status(&app, &status);
        return Err(format!("Failed to restart sidecar: {}", err));
    }

    // Wait briefly to detect bind failures
    std::thread::sleep(Duration::from_millis(900));

    let terminated = *state.terminated_flag.lock().unwrap();
    let stderr_text = state.last_stderr.lock().unwrap().clone();
    let lower = stderr_text.to_ascii_lowercase();
    let bind_failed = lower.contains("address already in use")
        || lower.contains("permission denied")
        || lower.contains("failed to bind")
        || lower.contains("cannot assign requested address");

    if terminated || bind_failed {
        let _ = stop_sidecar_internal(&state);
        let _ = write_listen_address(&workdir, &previous);
        let _ = start_server_sidecar(&app, &state, &workdir);
        let status = build_status(&state, &workdir);
        update_tray_status(&app, &status);
        let detail = if bind_failed {
            stderr_text
                .lines()
                .last()
                .unwrap_or("bind failed")
                .to_string()
        } else {
            "sidecar terminated".to_string()
        };
        return Err(format!("Failed to bind {}: {}", new_listen, detail));
    }

    let status = build_status(&state, &workdir);
    update_tray_status(&app, &status);
    let _ = app.emit("sidecar-restarted", &status);
    Ok(status)
}

#[tauri::command]
fn open_settings_window(app: AppHandle) -> Result<(), String> {
    if let Some(existing) = app.get_webview_window("settings") {
        let _ = existing.show();
        let _ = existing.set_focus();
        return Ok(());
    }

    WebviewWindowBuilder::new(
        &app,
        "settings",
        WebviewUrl::App(SETTINGS_QUERY.into()),
    )
    .title("Vessel Server Settings")
    .inner_size(440.0, 320.0)
    .min_inner_size(440.0, 320.0)
    .resizable(false)
    .minimizable(false)
    .maximizable(false)
    .build()
    .map_err(|e| e.to_string())?;
    Ok(())
}

fn build_tray(app: &AppHandle) -> Result<(), Box<dyn std::error::Error>> {
    let toggle = MenuItem::with_id(app, "toggle", "Hide Vessel", true, None::<&str>)?;
    let status = MenuItem::with_id(app, "status", "Server: \u{2026}", false, None::<&str>)?;
    let settings = MenuItem::with_id(
        app,
        "settings",
        "Server Settings\u{2026}",
        true,
        None::<&str>,
    )?;
    let quit = MenuItem::with_id(app, "quit", "Quit Vessel", true, None::<&str>)?;
    let sep1 = PredefinedMenuItem::separator(app)?;
    let sep2 = PredefinedMenuItem::separator(app)?;

    let menu = Menu::with_items(
        app,
        &[&toggle, &sep1, &status, &settings, &sep2, &quit],
    )?;

    {
        let mgr = app.state::<SidecarManager>();
        *mgr.status_item.lock().unwrap() = Some(status.clone());
        *mgr.toggle_item.lock().unwrap() = Some(toggle.clone());
    }

    let icon_path = app.path().resource_dir().ok().and_then(|d| {
        let candidate = d.join("icons/tray-template.png");
        if candidate.exists() {
            Some(candidate)
        } else {
            None
        }
    });

    let icon = if let Some(path) = icon_path {
        Image::from_path(path)?
    } else {
        app.default_window_icon()
            .cloned()
            .ok_or("missing default window icon")?
    };

    let _tray = TrayIconBuilder::with_id("main")
        .icon(icon)
        .icon_as_template(true)
        .menu(&menu)
        .show_menu_on_left_click(true)
        .on_menu_event(move |app, event| match event.id.as_ref() {
            "toggle" => {
                if let Some(window) = app.get_webview_window("main") {
                    let visible = window.is_visible().unwrap_or(false);
                    if visible {
                        let _ = window.hide();
                    } else {
                        let _ = window.show();
                        let _ = window.set_focus();
                    }
                    update_tray_toggle(app);
                }
            }
            "settings" => {
                let _ = open_settings_window(app.clone());
            }
            "quit" => {
                if let Some(child) = app
                    .state::<SidecarManager>()
                    .child
                    .lock()
                    .unwrap()
                    .take()
                {
                    let _ = child.kill();
                }
                app.exit(0);
            }
            _ => {}
        })
        .on_tray_icon_event(|tray, event| {
            if let TrayIconEvent::Click {
                button: MouseButton::Left,
                button_state: MouseButtonState::Up,
                ..
            } = event
            {
                update_tray_toggle(tray.app_handle());
            }
        })
        .build(app)?;

    Ok(())
}

fn main() {
    // JS snippet that blocks Backspace navigation while allowing edits in inputs/contentEditable.
    // Runs for every webview we create.
    const PREVENT_NAV_JS: &str = r#"
      const shouldAllowBackspace = (event) => {
        const path = event.composedPath ? event.composedPath() : [event.target];
        return path.some((el) => {
          if (!el || !el.tagName) return false;
          const tag = el.tagName.toUpperCase();
          const dataset = el.dataset || {};
          if (dataset.allowBackspace === 'true') return true;
          return el.isContentEditable || tag === 'INPUT' || tag === 'TEXTAREA';
        });
      };

      const preventBackNavigation = (e) => {
        if (e.key !== 'Backspace') return;
        if (shouldAllowBackspace(e)) return;
        e.preventDefault();
        e.stopPropagation();
      };

      window.addEventListener('keydown', preventBackNavigation, { capture: true });
    "#;

    tauri::Builder::default()
        .manage(SidecarManager::default())
        .plugin(tauri_plugin_deep_link::init())
        .plugin(tauri_plugin_shell::init())
        .plugin(
            PreventBuilder::new()
                // Block browser back/forward shortcuts
                .shortcut(KeyboardShortcut::new("Alt+Left"))
                .shortcut(KeyboardShortcut::new("Alt+Right"))
                .build(),
        )
        .on_page_load(|window, _| {
            let _ = window.eval(PREVENT_NAV_JS);
        })
        .on_window_event(|window, event| {
            // Hide the main window instead of closing so the tray remains useful.
            if window.label() == "main" {
                if let tauri::WindowEvent::CloseRequested { api, .. } = event {
                    api.prevent_close();
                    let _ = window.hide();
                    update_tray_toggle(window.app_handle());
                }
            }
        })
        .setup(|app| {
            for window in app.webview_windows().values() {
                let _ = window.eval(PREVENT_NAV_JS);
            }

            #[cfg(any(target_os = "macos", target_os = "linux", target_os = "windows"))]
            {
                use tauri_plugin_deep_link::DeepLinkExt;
                let app_handle = app.handle().clone();
                app.deep_link().on_open_url(move |event| {
                    let urls: Vec<String> = event.urls().iter().map(|u| u.to_string()).collect();
                    let _ = app_handle.emit("deep-link-opened", urls);
                });
            }

            let handle = app.handle().clone();
            let state = app.state::<SidecarManager>();
            let workdir = ensure_workdir(&handle, &state)?;
            start_server_sidecar(&handle, &state, &workdir)?;

            build_tray(&handle)?;

            let status = build_status(&state, &workdir);
            update_tray_status(&handle, &status);
            update_tray_toggle(&handle);

            Ok(())
        })
        .invoke_handler(tauri::generate_handler![
            get_sidecar_status,
            start_sidecar,
            stop_sidecar,
            get_server_address,
            update_server_address,
            open_settings_window
        ])
        .build(tauri::generate_context!())
        .expect("error while building tauri application")
        .run(|app, event| {
            if let tauri::RunEvent::Exit = event {
                if let Some(child) = app.state::<SidecarManager>().child.lock().unwrap().take() {
                    let _ = child.kill();
                }
            }
        });
}


================================================
FILE: apps/desktop/src-tauri/tauri.conf.json
================================================
{
  "$schema": "https://schema.tauri.app/config/2",
  "productName": "Vessel",
  "version": "0.1.0",
  "identifier": "com.vessel.desktop",
  "build": {
    "beforeDevCommand": "cd ../.. && mkdir -p target/bundle-staging/libs target/bundle-staging/gstreamer-1.0 && npm run build --workspace=@vessel/capsule-client && npm run build --workspace=client && cargo build --release -p server && HOST=$(rustc -vV | sed -n 's/^host: //p') && BIN=target/release/server && cp \"$BIN\" \"${BIN}-${HOST}\" && npm run dev:vite --workspace=client",
    "beforeBuildCommand": "cd ../.. && npm run build --workspace=@vessel/capsule-client && npm run build --workspace=client && cargo build --release -p server && bash scripts/bundle-macos-deps.sh && HOST=$(rustc -vV | sed -n 's/^host: //p') && BIN=target/release/server && cp \"$BIN\" \"${BIN}-${HOST}\"",
    "devUrl": "http://localhost:5175",
    "frontendDist": "../../client/dist"
  },
  "app": {
    "security": {
      "capabilities": ["main"]
    },
    "withGlobalTauri": true,
    "windows": [
      {
        "label": "main",
        "title": "Vessel",
        "width": 1280,
        "height": 800,
        "resizable": true,
        "fullscreen": false
      }
    ],
    "security": {
      "csp": null
    }
  },
  "bundle": {
    "active": true,
    "targets": ["app", "dmg"],
    "icon": ["icons/icon.icns", "icons/icon.png"],
    "externalBin": ["../../../target/release/server"],
    "resources": {
      "../../../target/bundle-staging/libs": "libs",
      "../../../target/bundle-staging/gstreamer-1.0": "gstreamer-1.0",
      "icons/tray-template.png": "icons/tray-template.png"
    },
    "macOS": {
      "minimumSystemVersion": "11.0",
      "entitlements": "entitlements.plist",
      "hardenedRuntime": true,
      "frameworks": []
    }
  },
  "plugins": {
    "deep-link": {
      "desktop": {
        "schemes": ["vessel"]
      }
    },
    "prevent-default": {
      "back": true,
      "backspace": true,
      "alt-left": true,
      "alt-right": true
    }
  }
}


================================================
FILE: apps/landing/.gitignore
================================================
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*

node_modules
dist
dist-ssr
*.local

# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?


================================================
FILE: apps/landing/README.md
================================================
# React + TypeScript + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh

## Expanding the ESLint configuration

If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:

```js
export default tseslint.config([
  globalIgnores(['dist']),
  {
    files: ['**/*.{ts,tsx}'],
    extends: [
      // Other configs...

      // Remove tseslint.configs.recommended and replace with this
      ...tseslint.configs.recommendedTypeChecked,
      // Alternatively, use this for stricter rules
      ...tseslint.configs.strictTypeChecked,
      // Optionally, add this for stylistic rules
      ...tseslint.configs.stylisticTypeChecked,

      // Other configs...
    ],
    languageOptions: {
      parserOptions: {
        project: ['./tsconfig.node.json', './tsconfig.app.json'],
        tsconfigRootDir: import.meta.dirname,
      },
      // other options...
    },
  },
])
```

You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:

```js
// eslint.config.js
import reactX from 'eslint-plugin-react-x'
import reactDom from 'eslint-plugin-react-dom'

export default tseslint.config([
  globalIgnores(['dist']),
  {
    files: ['**/*.{ts,tsx}'],
    extends: [
      // Other configs...
      // Enable lint rules for React
      reactX.configs['recommended-typescript'],
      // Enable lint rules for React DOM
      reactDom.configs.recommended,
    ],
    languageOptions: {
      parserOptions: {
        project: ['./tsconfig.node.json', './tsconfig.app.json'],
        tsconfigRootDir: import.meta.dirname,
      },
      // other options...
    },
  },
])
```


================================================
FILE: apps/landing/components.json
================================================
{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "new-york",
  "rsc": false,
  "tsx": true,
  "tailwind": {
    "config": "",
    "css": "src/index.css",
    "baseColor": "neutral",
    "cssVariables": true,
    "prefix": ""
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/components/ui",
    "lib": "@/lib",
    "hooks": "@/hooks"
  },
  "iconLibrary": "lucide"
}

================================================
FILE: apps/landing/index.html
================================================
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vessel: The Open-Source C2 Platform</title>
    <meta name="title" content="Vessel: The Open-Source C2 Platform">
    <meta name="description" content="Connect, orchestrate, and automate your physical devices. Vessel is an open-source platform for building proactive security and automation flows with a visual editor to protect your home and assets.">
    <meta name="keywords" content="open source, C2 software, command and control, physical security, home automation, IoT platform, sensor orchestration, device management, visual programming, flow-based, Node-RED alternative, Anduril alternative, DIY security, asset protection">
    <meta name="author" content="cartesiancs">
    <meta name="robots" content="index, follow">

    <meta property="og:type" content="website">
    <meta property="og:url" content="https://vessel.cartesiancs.com/">
    <meta property="og:title" content="Vessel: The Open-Source C2 Platform for Physical Security & Automation">
    <meta property="og:description" content="Connect, orchestrate, and automate your physical devices. Vessel is an open-source platform for building proactive security and automation flows with a visual editor to protect your home and assets.">
    <meta property="og:image" content="https://vessel.cartesiancs.com/vessel-social-card.png"> 
    <meta property="twitter:card" content="summary_large_image">
    <meta property="twitter:url" content="https://vessel.cartesiancs.com/">
    <meta property="twitter:title" content="Vessel: The Open-Source C2 Platform for Physical Security & Automation">
    <meta property="twitter:description" content="Connect, orchestrate, and automate your physical devices. Vessel is an open-source platform for building proactive security and automation flows with a visual editor to protect your home and assets.">
    <meta property="twitter:image" content="https://vessel.cartesiancs.com/vessel-social-card.png">
    <script type="text/javascript">
      (function(e,c){if(!c.__SV){var l,h;window.mixpanel=c;c._i=[];c.init=function(q,r,f){function t(d,a){var g=a.split(".");2==g.length&&(d=d[g[0]],a=g[1]);d[a]=function(){d.push([a].concat(Array.prototype.slice.call(arguments,0)))}}var b=c;"undefined"!==typeof f?b=c[f]=[]:f="mixpanel";b.people=b.people||[];b.toString=function(d){var a="mixpanel";"mixpanel"!==f&&(a+="."+f);d||(a+=" (stub)");return a};b.people.toString=function(){return b.toString(1)+".people (stub)"};l="disable time_event track track_pageview track_links track_forms track_with_groups add_group set_group remove_group register register_once alias unregister identify name_tag set_config reset opt_in_tracking opt_out_tracking has_opted_in_tracking has_opted_out_tracking clear_opt_in_out_tracking start_batch_senders start_session_recording stop_session_recording people.set people.set_once people.unset people.increment people.append people.union people.track_charge people.clear_charges people.delete_user people.remove".split(" ");
      for(h=0;h<l.length;h++)t(b,l[h]);var n="set set_once union unset remove delete".split(" ");b.get_group=function(){function d(p){a[p]=function(){b.push([g,[p].concat(Array.prototype.slice.call(arguments,0))])}}for(var a={},g=["get_group"].concat(Array.prototype.slice.call(arguments,0)),m=0;m<n.length;m++)d(n[m]);return a};c._i.push([q,r,f])};c.__SV=1.2;var k=e.createElement("script");k.type="text/javascript";k.async=!0;k.src="undefined"!==typeof MIXPANEL_CUSTOM_LIB_URL?MIXPANEL_CUSTOM_LIB_URL:"file:"===
      e.location.protocol&&"//cdn.mxpnl.com/libs/mixpanel-2-latest.min.js".match(/^\/\//)?"https://cdn.mxpnl.com/libs/mixpanel-2-latest.min.js":"//cdn.mxpnl.com/libs/mixpanel-2-latest.min.js";e=e.getElementsByTagName("script")[0];e.parentNode.insertBefore(k,e)}})(document,window.mixpanel||[])
      var isLocal = location.hostname === "localhost" || location.hostname === "127.0.0.1";
      if (!isLocal) {
        mixpanel.init('368d5a13ee869cacc30b696066ffee40', {
          autocapture: false,
          record_sessions_percent: 100,
        })
      }

    </script>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>


================================================
FILE: apps/landing/package.json
================================================
{
  "name": "landing",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite --host",
    "build": "tsc -b && vite build",
    "lint": "eslint .",
    "preview": "vite preview"
  },
  "dependencies": {
    "@radix-ui/react-alert-dialog": "^1.1.14",
    "@radix-ui/react-navigation-menu": "^1.2.14",
    "@radix-ui/react-slot": "^1.2.3",
    "@react-three/drei": "^10.7.7",
    "@react-three/fiber": "^9.5.0",
    "@react-three/postprocessing": "^3.0.4",
    "@supabase/supabase-js": "^2.90.1",
    "@theatre/core": "^0.7.2",
    "lucide-react": "^0.564.0",
    "maath": "^0.10.8",
    "next-themes": "^0.4.6",
    "recharts": "^2.15.4",
    "sonner": "^2.0.7",
    "three": "^0.183.2"
  },
  "devDependencies": {
    "@theatre/studio": "^0.7.2",
    "@types/three": "^0.183.1"
  }
}


================================================
FILE: apps/landing/src/App.tsx
================================================
import { createBrowserRouter, RouterProvider } from "react-router";
import LandingPage from "./pages/Main";
import RoadmapPage from "./pages/Roadmap";
import UsecasePage from "./pages/UseCase";
import { PrivacyPage } from "./pages/Privacy";
import PrivacyPolicyPage from "./pages/PrivacyPolicy";
import PricingPage from "./pages/Pricing";
import LoginPage from "./pages/Login";
import DashboardPage from "./pages/Dashboard";
import CheckoutSuccessPage from "./pages/CheckoutSuccess";
import CapsulePage from "./pages/Capsule";
import ContactPage from "./pages/Contact";
import TermsPage from "./pages/Terms";
import DisclaimerPage from "./pages/Disclaimer";
import { Toaster } from "sonner";

const router = createBrowserRouter([
  {
    path: "/",
    element: <LandingPage />,
  },
  {
    path: "/roadmap",
    element: <RoadmapPage />,
  },
  {
    path: "/usecase",
    element: <UsecasePage />,
  },
  {
    path: "/privacy",
    element: <PrivacyPage />,
  },
  {
    path: "/privacy-policy",
    element: <PrivacyPolicyPage />,
  },
  {
    path: "/pricing",
    element: <PricingPage />,
  },
  {
    path: "/login",
    element: <LoginPage />,
  },
  {
    path: "/dashboard",
    element: <DashboardPage />,
  },
  {
    path: "/checkout/success",
    element: <CheckoutSuccessPage />,
  },
  {
    path: "/capsule",
    element: <CapsulePage />,
  },
  {
    path: "/contact",
    element: <ContactPage />,
  },
  {
    path: "/terms",
    element: <TermsPage />,
  },
  {
    path: "/disclaimer",
    element: <DisclaimerPage />,
  },
]);

function App() {
  return (
    <>
      <RouterProvider router={router} />
      <Toaster />
    </>
  );
}

export default App;


================================================
FILE: apps/landing/src/components/Footer.tsx
================================================
const footerNav = {
  resources: [
    { name: "Pricing", href: "/pricing" },
    { name: "Roadmap", href: "/roadmap" },
    { name: "Usecase", href: "/usecase" },
    { name: "Contact", href: "/contact" },
    { name: "Privacy", href: "/privacy" },
    { name: "Capsule", href: "/capsule" },
  ],
  contents: [
    { name: "Privacy Policy", href: "/privacy-policy" },
    { name: "Terms of Service", href: "/terms" },
    { name: "Disclaimer", href: "/disclaimer" },
    {
      name: "Change Log",
      href: "https://github.com/cartesiancs/vessel/releases",
    },
    { name: "GitHub", href: "https://github.com/cartesiancs/vessel" },
  ],
  company: [
    { name: "Blog", href: "https://blog.cartesiancs.com/" },
    { name: "About", href: "https://cartesiancs.com/about" },
    { name: "LinkedIn", href: "https://www.linkedin.com/company/cartesiancs" },
    { name: "X", href: "https://x.com/cartesiancs" },
    {
      name: "Instagram",
      href: "https://www.instagram.com/cartesiancs.official/",
    },
    {
      name: "Youtube",
      href: "https://www.youtube.com/@cartesiancs",
    },
  ],
};

export function Footer() {
  return (
    <footer className='bg-background border-t'>
      <div className='container mx-auto px-4 sm:px-6 lg:px-8 py-12'>
        <div className='lg:grid lg:grid-cols-4 lg:gap-12'>
          <div className='space-y-4'>
            <p className='text-lg font-bold'>Vessel</p>
            <p className='text-sm text-muted-foreground'>
              Orchestrate physical devices with a single platform
            </p>
          </div>

          <div className='mt-12 grid grid-cols-3 gap-16 sm:grid-cols-3 lg:col-start-3 lg:col-span-3 lg:mt-0'>
            <div>
              <h3 className='text-sm font-semibold leading-6 text-foreground'>
                Resources
              </h3>
              <ul role='list' className='mt-4 space-y-1'>
                {footerNav.resources.map((item) => (
                  <li key={item.name}>
                    <a
                      href={item.href}
                      className='text-sm leading-6 text-muted-foreground hover:text-foreground'
                    >
                      {item.name}
                    </a>
                  </li>
                ))}
              </ul>
            </div>

            <div>
              <h3 className='text-sm font-semibold leading-6 text-foreground'>
                Contents
              </h3>
              <ul role='list' className='mt-4 space-y-1'>
                {footerNav.contents.map((item) => (
                  <li key={item.name}>
                    <a
                      href={item.href}
                      className='text-sm leading-6 text-muted-foreground hover:text-foreground'
                    >
                      {item.name}
                    </a>
                  </li>
                ))}
              </ul>
            </div>

            <div>
              <h3 className='text-sm font-semibold leading-6 text-foreground'>
                Company
              </h3>
              <ul role='list' className='mt-4 space-y-1'>
                {footerNav.company.map((item) => (
                  <li key={item.name}>
                    <a
                      href={item.href}
                      target='_blank'
                      rel='noopener noreferrer'
                      className='text-sm leading-6 text-muted-foreground hover:text-foreground'
                    >
                      {item.name}
                    </a>
                  </li>
                ))}
              </ul>
            </div>
          </div>
        </div>
      </div>
    </footer>
  );
}


================================================
FILE: apps/landing/src/components/Navbar.tsx
================================================
import { useEffect, useState } from "react";
import {
  NavigationMenu,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  navigationMenuTriggerStyle,
} from "@/components/ui/navigation-menu";
import { Link, useNavigate } from "react-router";
import { useAuth } from "@/contexts/AuthContext";


export function Navbar() {
  const navigate = useNavigate();
  const { user, loading } = useAuth();
  const openInNewTab = (url: string) => {
    window.open(url, "_blank", "noopener,noreferrer");
  };

  const [scrolled, setScrolled] = useState(false);

  useEffect(() => {
    const onScroll = () => {
      setScrolled(window.scrollY > 0);
    };
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  return (
    <header
      className={`fixed flex items-center justify-center top-0 z-50 w-full bg-background/95 backdrop-blur-lg supports-[backdrop-filter]:bg-background/70 ${
        scrolled ? "border-b" : ""
      }`}
    >
      <div className='h-12 flex items-center justify-between w-full'>
        <div className='flex items-center'>
          <Link to='/' className='mr-6 flex items-center space-x-2 pl-6 gap-1'>
            <img src='/icon.png' alt='Logo' className='w-8 invert' />
            <span className='hidden font-medium text-sm sm:inline-block'>
              Vessel
            </span>
          </Link>
        </div>

        <NavigationMenu className='pr-2'>
          <NavigationMenuList>
            <NavigationMenuItem>
              <NavigationMenuLink
                className={`${navigationMenuTriggerStyle()} bg-transparent`}
                onClick={() => navigate("/pricing")}
                style={{ cursor: "pointer" }}
              >
                Pricing
              </NavigationMenuLink>
            </NavigationMenuItem>
            <NavigationMenuItem>
              <NavigationMenuLink
                className={`${navigationMenuTriggerStyle()} bg-transparent`}
                onClick={() => openInNewTab("/docs/introduction")}
                style={{ cursor: "pointer" }}
              >
                Docs
              </NavigationMenuLink>
            </NavigationMenuItem>
            <NavigationMenuItem>
              {!loading && (
                <NavigationMenuLink
                  className={`${navigationMenuTriggerStyle()} bg-transparent`}
                  onClick={() => navigate(user ? "/dashboard" : "/login")}
                  style={{ cursor: "pointer" }}
                >
                  {user ? "Dashboard" : "Sign In"}
                </NavigationMenuLink>
              )}
            </NavigationMenuItem>
          </NavigationMenuList>
        </NavigationMenu>
      </div>
    </header>
  );
}


================================================
FILE: apps/landing/src/components/UsageCharts.tsx
================================================
import {
  Bar,
  BarChart,
  XAxis,
  YAxis,
  CartesianGrid,
} from "recharts";
import {
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
  ChartLegend,
  ChartLegendContent,
  type ChartConfig,
} from "@/components/ui/chart";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { Loader2 } from "lucide-react";
import type { DailyUsage } from "@/hooks/useUsageData";

function formatBytes(bytes: number): string {
  if (bytes === 0) return "0 B";
  const k = 1024;
  const sizes = ["B", "KB", "MB", "GB"];
  const i = Math.floor(Math.log(bytes) / Math.log(k));
  return `${(bytes / Math.pow(k, i)).toFixed(1)} ${sizes[i]}`;
}

function formatDate(dateStr: string): string {
  const d = new Date(dateStr);
  return `${d.getMonth() + 1}/${d.getDate()}`;
}

const networkChartConfig = {
  turnBytes: {
    label: "Turn",
    color: "var(--color-chart-1)",
  },
  tunnelBytes: {
    label: "Tunnel",
    color: "var(--color-chart-2)",
  },
} satisfies ChartConfig;

const capsuleRequestsConfig = {
  capsuleRequests: {
    label: "API Requests",
    color: "var(--color-chart-3)",
  },
  capsuleImageRequests: {
    label: "Image Requests",
    color: "var(--color-chart-4)",
  },
} satisfies ChartConfig;


function EmptyState() {
  return (
    <div className='flex items-center justify-center h-[200px] text-muted-foreground text-sm'>
      No usage data
    </div>
  );
}

function hasNetworkData(data: DailyUsage[]): boolean {
  return data.some((d) => d.turnBytes > 0 || d.tunnelBytes > 0);
}

function hasCapsuleRequestData(data: DailyUsage[]): boolean {
  return data.some((d) => d.capsuleRequests > 0 || d.capsuleImageRequests > 0);
}


export function UsageCharts({
  data,
  loading,
}: {
  data: DailyUsage[];
  loading: boolean;
}) {
  if (loading) {
    return (
      <div className='flex items-center justify-center py-12'>
        <Loader2 className='h-6 w-6 animate-spin text-muted-foreground' />
      </div>
    );
  }

  return (
    <div className='grid min-w-0 gap-6'>
      {/* Network Usage: Turn + Tunnel */}
      <Card className='min-w-0 overflow-x-hidden'>
        <CardHeader>
          <CardTitle>Network Usage</CardTitle>
          <CardDescription>
            Turn & Tunnel bandwidth (last 30 days)
          </CardDescription>
        </CardHeader>
        <CardContent className='min-w-0'>
          {!hasNetworkData(data) ? (
            <EmptyState />
          ) : (
            <ChartContainer
              config={networkChartConfig}
              className='h-[250px] w-full min-w-0 max-w-full'
            >
              <BarChart
                data={data}
                accessibilityLayer
                margin={{ top: 8, right: 4, left: 4, bottom: 4 }}
              >
                <CartesianGrid vertical={false} />
                <XAxis
                  dataKey='date'
                  tickFormatter={formatDate}
                  tickLine={false}
                  axisLine={false}
                  tickMargin={6}
                  interval='preserveStartEnd'
                  minTickGap={8}
                />
                <YAxis
                  tickFormatter={formatBytes}
                  tickLine={false}
                  axisLine={false}
                  width={60}
                />
                <ChartTooltip
                  content={
                    <ChartTooltipContent
                      formatter={(value) => formatBytes(value as number)}
                      labelFormatter={(label) => formatDate(label)}
                    />
                  }
                />
                <ChartLegend content={<ChartLegendContent />} />
                <Bar
                  dataKey='turnBytes'
                  stackId='network'
                  fill='var(--color-turnBytes)'
                  radius={[0, 0, 0, 0]}
                />
                <Bar
                  dataKey='tunnelBytes'
                  stackId='network'
                  fill='var(--color-tunnelBytes)'
                  radius={[4, 4, 0, 0]}
                />
              </BarChart>
            </ChartContainer>
          )}
        </CardContent>
      </Card>

      {/* Capsule Requests */}
      <Card className='min-w-0 overflow-x-hidden'>
        <CardHeader>
          <CardTitle>Capsule Requests</CardTitle>
          <CardDescription>API & image requests (last 30 days)</CardDescription>
        </CardHeader>
        <CardContent className='min-w-0'>
          {!hasCapsuleRequestData(data) ? (
            <EmptyState />
          ) : (
            <ChartContainer
              config={capsuleRequestsConfig}
              className='h-[250px] w-full min-w-0 max-w-full'
            >
              <BarChart
                data={data}
                accessibilityLayer
                margin={{ top: 8, right: 4, left: 4, bottom: 4 }}
              >
                <CartesianGrid vertical={false} />
                <XAxis
                  dataKey='date'
                  tickFormatter={formatDate}
                  tickLine={false}
                  axisLine={false}
                  tickMargin={6}
                  interval='preserveStartEnd'
                  minTickGap={8}
                />
                <YAxis tickLine={false} axisLine={false} width={40} />
                <ChartTooltip
                  content={
                    <ChartTooltipContent
                      labelFormatter={(label) => formatDate(label)}
                    />
                  }
                />
                <ChartLegend content={<ChartLegendContent />} />
                <Bar
                  dataKey='capsuleRequests'
                  fill='var(--color-capsuleRequests)'
                  radius={[4, 4, 0, 0]}
                />
                <Bar
                  dataKey='capsuleImageRequests'
                  fill='var(--color-capsuleImageRequests)'
                  radius={[4, 4, 0, 0]}
                />
              </BarChart>
            </ChartContainer>
          )}
        </CardContent>
      </Card>
    </div>
  );
}


================================================
FILE: apps/landing/src/components/sections/CapsulePromo.tsx
================================================
import { useFadeInOnScroll } from "@/lib/useFadeInOnScroll";
import { Shield } from "lucide-react";

function cx(...classes: Array<string | false | null | undefined>) {
  return classes.filter(Boolean).join(" ");
}

export function CapsulePromoSection() {
  const { ref: sectionRef, isVisible } = useFadeInOnScroll<HTMLElement>();

  return (
    <section ref={sectionRef} className='w-full'>
      <div
        className={cx(
          "container mx-auto max-w-7xl px-5 md:px-10 py-16",
          "transition-all duration-700 ease-out",
          isVisible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-6",
        )}
      >
        <a
          href='/capsule'
          className='block rounded-3xl bg-neutral-900 px-10 py-14 md:px-16 md:py-16 transition-colors hover:bg-neutral-800/90 cursor-pointer'
        >
          <div className='flex flex-col items-center gap-10 md:flex-row md:items-center md:gap-16'>
            <div className='flex shrink-0 items-center justify-center'>
              <Shield
                className='h-20 w-20 text-white md:h-24 md:w-24'
                strokeWidth={1.4}
              />
            </div>

            <div className='text-base leading-relaxed tracking-tight text-neutral-400 md:text-lg md:leading-relaxed'>
              Vessel is{" "}
              <span className='font-semibold text-white'>
                designed to protect your privacy
              </span>{" "}
              at every step. It encrypts your messages on-device through
              end-to-end encryption. So it processes your conversations without
              ever accessing your personal data. And with zero-knowledge
              architecture, Capsule can deliver powerful AI responses while
              ensuring your privacy is never compromised.
            </div>
          </div>
        </a>
      </div>
    </section>
  );
}


================================================
FILE: apps/landing/src/components/sections/Faqs.tsx
================================================
import { useState } from "react";
import { Plus } from "lucide-react";
import { useFadeInOnScroll } from "@/lib/useFadeInOnScroll";

type FAQItem = {
  question: string;
  answer: string;
};

const faqs: FAQItem[] = [
  {
    question: "What is Vessel?",
    answer:
      "Vessel is an open-source “Command & Control (C2)” platform that connects, monitors, and orchestrates physical sensors through a visual, flow-based interface, aiming to enable proactive security (from detection to automated response)",
  },
  {
    question: "How does the Flow system work, and what can I automate?",
    answer:
      "Vessel lets you build automation workflows by visually connecting nodes in a pipeline like Sensor (Input) → Logic (Process) → Device/Action (Output). This enables code-free rules (for example, triggering actions via integrations such as Home Assistant) using a drag-and-drop flow editor.",
  },
  {
    question: "Can I use this service without an internet connection?",
    answer:
      "Yes. It can be used without the internet. It was designed with a local-first, offline-first approach and built to give users complete control.",
  },
  {
    question: "How do I install/run Vessel, and is it production-ready?",
    answer:
      "You can run Vessel locally by starting the Rust-based server and the web client (Node/npm), or use Docker; the repository README provides the step-by-step commands. The project is explicitly described as under active development/POC, and it also states it is intended for academic and research purposes with responsibility for use resting with the user.",
  },
  {
    question: "Can I integrate Vessel with my existing smart home setup?",
    answer:
      "Yes. Vessel supports integration with popular platforms like Home Assistant through its flow-based automation system. You can connect your existing devices and sensors to Vessel and orchestrate them together in a unified pipeline.",
  },
  {
    question: "Does Vessel support custom sensors or third-party hardware?",
    answer:
      "Yes. Vessel is designed to be hardware-agnostic. You can connect custom sensors, microcontrollers, or third-party devices via standard protocols, and the flow editor lets you visually wire them into your automation workflows.",
  },
  {
    question: "Can I self-host Vessel on my own server?",
    answer:
      "Yes. Vessel is fully open-source and built for self-hosting. You can deploy it on mac Mini or any machine—whether it's a Raspberry Pi, a local server, or a cloud VM—giving you complete ownership of your data and infrastructure.",
  },
];

function cx(...classes: Array<string | false | null | undefined>) {
  return classes.filter(Boolean).join(" ");
}

export function FAQSection() {
  const { ref: sectionRef, isVisible } = useFadeInOnScroll<HTMLElement>();
  const [activeIndex, setActiveIndex] = useState<number | null>(0);

  return (
    <section ref={sectionRef} className='h-full w-full bg-black text-white'>
      <div
        className={cx(
          "container mx-auto flex h-full max-w-7xl flex-col px-5 md:px-10 py-16",
          "transition-all duration-700 ease-out",
          isVisible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-6",
        )}
      >
        <div className='w-full'>
          {faqs.map((item, idx) => {
            const isOpen = activeIndex === idx;
            return (
              <div key={item.question} className='border-b border-gray-300/40'>
                <button
                  type='button'
                  onClick={() => setActiveIndex(isOpen ? null : idx)}
                  className={cx(
                    "flex w-full items-center justify-between gap-4 py-5 text-left cursor-pointer",
                    "focus:outline-none focus-visible:ring-2 focus-visible:ring-white/70 focus-visible:ring-offset-2 focus-visible:ring-offset-black",
                  )}
                  aria-expanded={isOpen}
                  aria-controls={`faq-panel-${idx}`}
                  id={`faq-trigger-${idx}`}
                >
                  <div className='min-w-0 text-base font-semibold leading-snug'>
                    {item.question}
                  </div>

                  <Plus
                    className={cx(
                      "h-5 w-5 flex-none transition-transform duration-200",
                      isOpen ? "rotate-45" : "rotate-0",
                    )}
                    aria-hidden='true'
                  />
                </button>

                <div
                  id={`faq-panel-${idx}`}
                  role='region'
                  aria-labelledby={`faq-trigger-${idx}`}
                  className={cx(
                    "overflow-hidden transition-[max-height] duration-300 ease-out",
                    isOpen ? "max-h-48" : "max-h-0",
                  )}
                >
                  <div
                    className={cx(
                      "pb-5 text-sm text-white/70 transition-opacity duration-300 ease-out",
                      isOpen ? "opacity-100" : "opacity-0",
                    )}
                  >
                    {item.answer}
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}


================================================
FILE: apps/landing/src/components/sections/Features.tsx
================================================
import { useFadeInOnScroll } from "@/lib/useFadeInOnScroll";

const features = [
  {
    number: "01",
    title: "Flow",
    description:
      "Orchestrate sensors and automations with a flow-based editor that connects devices, AI models, and actions.",
    highlight: "Orchestrate sensors",
    image: "/images/flow.webp",
    alt: "Flow visual editor",
  },
  {
    number: "02",
    title: "Dashboard",
    description:
      "Track streams and system health in one place with a centralized command view.",
    highlight: "Track streams",
    image: "/images/dashboard.webp",
    alt: "Dashboard monitoring",
  },
  {
    number: "03",
    title: "Map",
    description:
      "Coordinate devices spatially with a map UI for faster decisions and responses.",
    highlight: "Coordinate devices",
    image: "/images/map.webp",
    alt: "Map based interface",
  },
];

function HighlightedText({
  text,
  highlight,
  animate,
  delay,
}: {
  text: string;
  highlight: string;
  animate: boolean;
  delay: number;
}) {
  const idx = text.indexOf(highlight);
  if (idx === -1) return <>{text}</>;

  const before = text.slice(0, idx);
  const match = text.slice(idx, idx + highlight.length);
  const after = text.slice(idx + highlight.length);

  return (
    <>
      {before}
      <span className='relative inline'>
        <span
          className='absolute inset-0 -mx-0.5 bg-white/90 origin-left transition-transform duration-700 ease-out'
          style={{
            transform: animate ? "scaleX(1)" : "scaleX(0)",
            transitionDelay: `${delay}ms`,
          }}
        />
        <span
          className='relative transition-colors duration-700'
          style={{
            color: animate ? "#171717" : undefined,
            transitionDelay: `${delay}ms`,
          }}
        >
          {match}
        </span>
      </span>
      {after}
    </>
  );
}

export function FeaturesSection() {
  const { ref: sectionRef, isVisible } = useFadeInOnScroll<HTMLElement>();

  return (
    <section ref={sectionRef} className='w-full'>
      <div
        className={`container mx-auto max-w-7xl px-5 pt-75 md:px-10 py-32 transition-all duration-700 ease-out ${
          isVisible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-6"
        }`}
      >
        {/* Header */}
        <div className='mb-10 text-left'>
          <h2 className='text-3xl font-bold tracking-tight md:text-4xl leading-tight'>
            Physical AI Platform.{" "}
            <span className='text-neutral-500'>Local-First by Design.</span>
          </h2>
        </div>

        {/* Feature Cards */}
        <div className='grid grid-cols-1 md:grid-cols-4 gap-0'>
          {features.map((feature, index) => (
            <div
              key={feature.title}
              className={`relative border border-dashed border-neutral-700 p-6 flex flex-col transition-all duration-500 ease-out ${
                index === 0 ? "md:col-span-2" : ""
              } ${
                isVisible
                  ? "opacity-100 translate-y-0"
                  : "opacity-0 translate-y-4"
              }`}
              style={{ transitionDelay: `${index * 120}ms` }}
            >
              {/* Number Label */}
              <span className='text-sm text-neutral-500 tracking-widest font-mono'>
                [ {feature.number} ]
              </span>

              {/* Image Area */}
              <div className='flex-1 flex items-center justify-center py-12'>
                <img
                  src={feature.image}
                  alt={feature.alt}
                  className='h-48 w-full object-cover opacity-60'
                  loading='lazy'
                />
              </div>

              {/* Description */}
              <p className='text-sm leading-relaxed text-neutral-300'>
                <HighlightedText
                  text={feature.description}
                  highlight={feature.highlight}
                  animate={isVisible}
                  delay={300 + index * 1500}
                />
              </p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}


================================================
FILE: apps/landing/src/components/sections/FooterCta.tsx
================================================
import { useFadeInOnScroll } from "@/lib/useFadeInOnScroll";

function cx(...classes: Array<string | false | null | undefined>) {
  return classes.filter(Boolean).join(" ");
}

export function FooterCtaSection() {
  const { ref: sectionRef, isVisible } = useFadeInOnScroll<HTMLElement>();

  return (
    <section ref={sectionRef} className='w-full bg-black text-white'>
      <div
        className={cx(
          "container mx-auto max-w-6xl px-5 md:px-10 py-24 md:py-32",
          "transition-all duration-700 ease-out",
          isVisible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-6",
        )}
      >
        <div className='mx-auto flex max-w-3xl flex-col items-center text-center'>
          <h2 className='text-4xl font-semibold tracking-tight md:text-5xl'>
            <span className='text-white/50'>Built</span>{" "}
            <span className='text-white'>for independence</span>
          </h2>

          <p className='mt-5 max-w-2xl text-lg leading-relaxed text-white/75 md:text-xl'>
            Vessel is a proactive security system that enables users to achieve
            complete control over their physical spaces.
          </p>

          <div className='mt-10'>
            <button
              className={cx(
                "inline-flex h-12 items-center justify-center px-6",
                "border border-white/25 bg-transparent text-base font-medium text-white",
                "transition-colors hover:border-white/45 hover:bg-white/5",
                "focus:outline-none focus-visible:ring-2 focus-visible:ring-white/30 cursor-pointer",
              )}
              onClick={() =>
                window.open("https://github.com/cartesiancs/vessel")
              }
            >
              See GitHub
            </button>
          </div>
        </div>
      </div>
    </section>
  );
}


================================================
FILE: apps/landing/src/components/sections/HeroScene/CameraRig.tsx
================================================
import { useFrame } from "@react-three/fiber";

const scrollState = { progress: 0 };

function smoothstep(t: number): number {
  return t * t * (3 - 2 * t);
}

const START_POS: [number, number, number] = [-1.5, 1, 5.5];
const END_POS: [number, number, number] = [-0.4, 0.7, 3.8];

export function CameraRig() {
  useFrame(
    (state) => {
      const progress = smoothstep(scrollState.progress);

      const x = START_POS[0] + (END_POS[0] - START_POS[0]) * progress;
      const y = START_POS[1] + (END_POS[1] - START_POS[1]) * progress;
      const z = START_POS[2] + (END_POS[2] - START_POS[2]) * progress;

      state.camera.position.set(x, y, z);
      state.camera.lookAt(0, 0, 0);
      state.camera.updateMatrixWorld(true);
    },
    -1,
  );

  return null;
}


================================================
FILE: apps/landing/src/components/sections/HeroScene/Computers.tsx
================================================
import * as THREE from "three";
import { useMemo, useContext, createContext, useRef } from "react";
import { useFrame } from "@react-three/fiber";
import { useGLTF, Merged, useVideoTexture } from "@react-three/drei";

const context = createContext<any>(null);

export function Instances({ children, ...props }: any) {
  const { nodes } = useGLTF("/glb/Computers.glb") as any;
  const instances = useMemo(
    () => ({
      Object1: nodes.Object_16,
      Sphere: nodes.Sphere,
    }),
    [nodes],
  );
  return (
    <Merged castShadow receiveShadow meshes={instances} {...props}>
      {(instances: any) => (
        <context.Provider value={instances} children={children} />
      )}
    </Merged>
  );
}

export function Computers(props: any) {
  const { nodes: n, materials: m } = useGLTF("/glb/Computers.glb") as any;
  const instances = useContext(context);
  return (
    <group {...props} dispose={null}>
      <instances.Object1
        position={[0, 0, 0]}
        rotation={[0, 0.17, 0]}
        scale={1.52}
      />
      <mesh
        castShadow
        receiveShadow
        geometry={n.Object_18.geometry}
        material={m.Texture}
        position={[-0.82, 0, 0.04]}
        rotation={[0, -0.06, 0]}
        scale={1.52}
      />
      <ScreenVideo
        frame='Object_206'
        panel='Object_207'
        position={[-0.36, 1.53, 0.39]}
      />
      <Leds instances={instances} />
    </group>
  );
}

function ScreenVideo({ frame, panel, ...props }: any) {
  const { nodes, materials } = useGLTF("/glb/Computers.glb") as any;
  const texture = useVideoTexture("/video/video.mp4", {
    loop: true,
    muted: true,
    playsInline: true,
  });

  const screen = useMemo(() => {
    const geo = nodes[panel].geometry;
    geo.computeBoundingBox();
    const bb = geo.boundingBox!;
    return {
      width: bb.max.x - bb.min.x,
      height: bb.max.y - bb.min.y,
      center: [
        (bb.max.x + bb.min.x) / 2,
        (bb.max.y + bb.min.y) / 2,
        bb.max.z + 0.005,
      ] as [number, number, number],
    };
  }, [nodes, panel]);

  return (
    <group {...props}>
      <mesh
        castShadow
        receiveShadow
        geometry={nodes[frame].geometry}
        material={materials.Texture}
      />
      <mesh position={screen.center}>
        <planeGeometry args={[screen.width, screen.height]} />
        <meshBasicMaterial map={texture} toneMapped={false} />
      </mesh>
    </group>
  );
}

function Leds({ instances }: any) {
  const ref = useRef<THREE.Group>(null!);
  const { nodes } = useGLTF("/glb/Computers.glb") as any;
  useMemo(() => {
    nodes.Sphere.material = new THREE.MeshBasicMaterial();
    nodes.Sphere.material.toneMapped = false;
  }, []);
  useFrame((state) => {
    ref.current.children.forEach((instance: any) => {
      const rand = Math.abs(2 + instance.position.x);
      const t = Math.round(
        (1 + Math.sin(rand * 10000 + state.clock.elapsedTime * rand)) / 2,
      );
      instance.color.setRGB(0, t * 1.1, t);
    });
  });
  return (
    <group ref={ref}>
      <instances.Sphere
        position={[-1.04, 1.1, 0.79]}
        scale={0.005}
        color={[1, 2, 1]}
      />
      <instances.Sphere
        position={[-0.04, 1.32, 0.78]}
        scale={0.005}
        color={[1, 2, 1]}
      />
    </group>
  );
}

useGLTF.preload("/glb/Computers.glb");


================================================
FILE: apps/landing/src/components/sections/HeroScene/HeroScene.tsx
================================================
import { Suspense } from "react";
import { Canvas } from "@react-three/fiber";
import {
  BakeShadows,
  MeshReflectorMaterial,
  OrbitControls,
} from "@react-three/drei";
import { EffectComposer, Bloom } from "@react-three/postprocessing";
import { Instances, Computers } from "./Computers";

export function HeroSceneSection() {
  return (
    <section style={{ height: "30vh" }} className='relative bg-black'>
      <Canvas
        shadows
        dpr={[1, 1.5]}
        camera={{
          position: [-0.4, 0.7, 3.8],
          fov: 45,
          near: 1,
          far: 20,
        }}
        style={{ background: "#000000" }}
      >
        <Suspense fallback={null}>
          <color attach='background' args={["black"]} />
          <hemisphereLight intensity={0.15} groundColor='black' />
          <spotLight
            decay={0}
            position={[10, 20, 10]}
            angle={0.12}
            penumbra={1}
            intensity={1}
            castShadow
            shadow-mapSize={1024}
          />

          <group position={[0, -1, 0]}>
            <Instances>
              <Computers scale={0.5} />
            </Instances>

            <mesh receiveShadow rotation={[-Math.PI / 2, 0, 0]}>
              <planeGeometry args={[50, 50]} />
              <MeshReflectorMaterial
                blur={[300, 30]}
                resolution={2048}
                mixBlur={1}
                mixStrength={180}
                roughness={1}
                depthScale={1.2}
                minDepthThreshold={0.4}
                maxDepthThreshold={1.4}
                color='#202020'
                metalness={0.8}
              />
            </mesh>

            <pointLight
              distance={1}
              intensity={0.2}
              position={[-0.15, 0.7, 0]}
              color='#ffa914'
            />
          </group>

          <EffectComposer enableNormalPass={false}>
            <Bloom
              luminanceThreshold={0}
              mipmapBlur
              luminanceSmoothing={0.0}
              intensity={2}
            />
          </EffectComposer>

          <OrbitControls enableZoom={false} enablePan={false} minPolarAngle={Math.PI / 2} maxPolarAngle={Math.PI / 2} />
          <BakeShadows />
        </Suspense>
      </Canvas>
    </section>
  );
}


================================================
FILE: apps/landing/src/components/sections/HeroScene/SpinningBox.tsx
================================================
import { useRef, useState } from "react";
import { useFrame } from "@react-three/fiber";
import { useCursor } from "@react-three/drei";
import type { Mesh } from "three";
import type { ThreeEvent } from "@react-three/fiber";

interface SpinningBoxProps {
  scale?: number;
  position?: [number, number, number];
  [key: string]: any;
}

export function SpinningBox({ scale = 1, ...props }: SpinningBoxProps) {
  const ref = useRef<Mesh>(null!);
  const [hovered, hover] = useState(false);
  const [clicked, click] = useState(false);
  useCursor(hovered);

  useFrame((_state, delta) => {
    ref.current.rotation.x = ref.current.rotation.y += delta;
  });

  return (
    <mesh
      {...props}
      ref={ref}
      scale={clicked ? scale * 1.4 : scale * 1.2}
      onClick={(_event: ThreeEvent<MouseEvent>) => click(!clicked)}
      onPointerOver={(_event: ThreeEvent<PointerEvent>) => hover(true)}
      onPointerOut={(_event: ThreeEvent<PointerEvent>) => hover(false)}
    >
      <boxGeometry />
      <meshStandardMaterial color={hovered ? "hotpink" : "indianred"} />
    </mesh>
  );
}


================================================
FILE: apps/landing/src/components/sections/IntegrationImage.tsx
================================================
import React from "react";
import { useFadeInOnScroll } from "@/lib/useFadeInOnScroll";

function cx(...classes: Array<string | false | null | undefined>) {
  return classes.filter(Boolean).join(" ");
}

const logos = [
  { src: "/logos/ha.webp", alt: "HA" },
  { src: "/logos/ros2.webp", alt: "Ros2" },
  { src: "/logos/ws.webp", alt: "ws" },
  { src: "/logos/mqtt.webp", alt: "mqtt" },
  { src: "/logos/http.webp", alt: "http" },
];

type Logo = { src: string; alt: string };

function LogoMarquee({
  items,
  pxPerSecond = 80,
}: {
  items: Logo[];
  pxPerSecond?: number;
}) {
  const containerRef = React.useRef<HTMLDivElement>(null);
  const setRef = React.useRef<HTMLDivElement>(null);
  const [setWidth, setSetWidth] = React.useState(0);
  const [repeat, setRepeat] = React.useState(2);

  React.useEffect(() => {
    const container = containerRef.current;
    const setEl = setRef.current;
    if (!container || !setEl) return;

    const measure = () => {
      const cw = container.clientWidth;
      const sw = setEl.scrollWidth;
      if (cw <= 0 || sw <= 0) return;

      setSetWidth(sw);

      const needed = Math.ceil((cw * 2) / sw) + 1;
      setRepeat(Math.max(2, needed));
    };

    measure();

    const ro = new ResizeObserver(measure);
    ro.observe(container);
    ro.observe(setEl);

    return () => ro.disconnect();
  }, []);

  const duration = setWidth > 0 ? setWidth / pxPerSecond : 20;

  const trackStyle = {
    ["--marquee-distance" as any]: `${setWidth}px`,
    ["--marquee-duration" as any]: `${duration}s`,
  };

  return (
    <div ref={containerRef} className='relative w-full overflow-hidden'>
      <div className='pointer-events-none absolute inset-y-0 left-0 w-20 bg-gradient-to-r from-black to-transparent md:w-28' />
      <div className='pointer-events-none absolute inset-y-0 right-0 w-20 bg-gradient-to-l from-black to-transparent md:w-28' />

      <div className='marquee-track flex w-max items-center' style={trackStyle}>
        <div ref={setRef} className='flex items-center gap-14 pr-14'>
          {items.map((logo) => (
            <div
              key={logo.alt}
              className='flex h-10 items-center justify-center opacity-80 transition-opacity duration-200 hover:opacity-100 md:h-12'
            >
              <img
                src={logo.src}
                alt={logo.alt}
                className='h-full w-auto select-none object-contain'
                loading='lazy'
                draggable={false}
              />
            </div>
          ))}
        </div>

        {Array.from({ length: repeat - 1 }).map((_, i) => (
          <div
            key={i}
            className='flex items-center gap-14 pr-14'
            aria-hidden='true'
          >
            {items.map((logo) => (
              <div
                key={`${logo.alt}-${i}`}
                className='flex h-10 items-center justify-center opacity-80 transition-opacity duration-200 hover:opacity-100 md:h-12'
              >
                <img
                  src={logo.src}
                  alt=''
                  className='h-full w-auto select-none object-contain'
                  loading='lazy'
                  draggable={false}
                />
              </div>
            ))}
          </div>
        ))}
      </div>

      <style>{`
        .marquee-track {
          animation: marquee var(--marquee-duration) linear infinite;
          will-change: transform;
        }
        .marquee-track:hover {
          animation-play-state: paused;
        }
        @keyframes marquee {
          from {
            transform: translateX(0);
          }
          to {
            transform: translateX(calc(-1 * var(--marquee-distance)));
          }
        }
        @media (prefers-reduced-motion: reduce) {
          .marquee-track {
            animation: none;
            transform: none;
          }
        }
      `}</style>
    </div>
  );
}

export function IntegrationSection() {
  const { ref: sectionRef, isVisible } = useFadeInOnScroll<HTMLElement>();

  return (
    <section ref={sectionRef} className='w-full bg-black text-white'>
      <div
        className={cx(
          "container mx-auto max-w-7xl px-5 md:px-10 pt-40 py-10",
          "transition-all duration-700 ease-out",
          isVisible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-6",
        )}
      >
        <div className='mx-auto max-w-4xl text-center'>
          <h2 className='text-4xl font-semibold tracking-tight md:text-6xl md:leading-[1.05]'>
            <span className='text-white/70'>Integration</span>
            <br />
            <span className='text-white'>with powerful tools</span>
          </h2>
        </div>

        <div className='mx-auto mt-14 w-full max-w-5xl'>
          <div className='relative mx-auto w-full overflow-hidden bg-black py-10'>
            <LogoMarquee items={logos} pxPerSecond={80} />
          </div>
        </div>
      </div>
    </section>
  );
}


================================================
FILE: apps/landing/src/components/sections/ListCards.tsx
================================================
import { useEffect, useRef, useState } from "react";
import { ChevronLeft, ChevronRight } from "lucide-react";
import { useFadeInOnScroll } from "@/lib/useFadeInOnScroll";

type Slide = {
  image: string;
  alt: string;
  title: string;
  caption: string;
};

const slides: Slide[] = [
  {
    image: "/images/s1.webp",
    alt: "Smart home dashboard",
    title: "Edge orchestration",
    caption: "Connect every device and keep control at the edge.",
  },
  {
    image: "/images/s2.webp",
    alt: "Industrial robot arm",
    title: "Low-latency control",
    caption: "Drive ROS 2 robots with dependable, real-time flows.",
  },
  {
    image: "/images/s3.webp",
    alt: "Factory overview",
    title: "Mission control",
    caption: "See every stream and respond instantly from one place.",
  },
  {
    image: "/images/s4.webp",
    alt: "Wearable alerting",
    title: "Always-on insight",
    caption: "Surface critical signals wherever your teams are.",
  },
];

const defaultTrackPadding = "clamp(1.5rem, 4vw, 3rem)";

function cx(...classes: Array<string | false | null | undefined>) {
  return classes.filter(Boolean).join(" ");
}

export function ListCardsSection() {
  const { ref: sectionRef, isVisible } = useFadeInOnScroll<HTMLElement>();
  const trackRef = useRef<HTMLDivElement>(null);
  const cardRefs = useRef<(HTMLDivElement | null)[]>([]);
  const [activeIndex, setActiveIndex] = useState(0);
  const containerRef = useRef<HTMLDivElement>(null);
  const [paddingInline, setPaddingInline] = useState<{
    left: string;
    right: string;
  }>({
    left: defaultTrackPadding,
    right: defaultTrackPadding,
  });

  const scrollToIndex = (index: number) => {
    const target = cardRefs.current[index];
    if (!target) return;

    target.scrollIntoView({
      behavior: "smooth",
      block: "nearest",
      inline: "start",
    });
    setActiveIndex(index);
  };

  useEffect(() => {
    const track = trackRef.current;
    if (!track) return;

    const handleScroll = () => {
      const trackRect = track.getBoundingClientRect();
      const center = trackRect.left + trackRect.width / 2;

      let closestIndex = activeIndex;
      let smallestDistance = Number.POSITIVE_INFINITY;

      cardRefs.current.forEach((card, idx) => {
        if (!card) return;
        const cardRect = card.getBoundingClientRect();
        const cardCenter = cardRect.left + cardRect.width / 2;
        const distance = Math.abs(center - cardCenter);
        if (distance < smallestDistance) {
          smallestDistance = distance;
          closestIndex = idx;
        }
      });

      if (closestIndex !== activeIndex) {
        setActiveIndex(closestIndex);
      }
    };

    track.addEventListener("scroll", handleScroll, { passive: true });
    return () => {
      track.removeEventListener("scroll", handleScroll);
    };
  }, [activeIndex]);

  useEffect(() => {
    const updatePadding = () => {
      const container = containerRef.current;
      if (!container) return;

      const rect = container.getBoundingClientRect();
      const style = window.getComputedStyle(container);
      const left = rect.left + (parseFloat(style.paddingLeft ?? "0") || 0);
      const right =
        window.innerWidth -
        rect.right +
        (parseFloat(style.paddingRight ?? "0") || 0);

      setPaddingInline({
        left: `${Math.max(left, 0)}px`,
        right: `${Math.max(right, 0)}px`,
      });
    };

    updatePadding();
    window.addEventListener("resize", updatePadding);
    return () => {
      window.removeEventListener("resize", updatePadding);
    };
  }, []);

  return (
    <section ref={sectionRef} className='w-full text-white'>
      <div
        ref={containerRef}
        className={cx(
          "container mx-auto max-w-7xl px-5 md:px-10 py-40",
          "transition-all duration-700 ease-out",
          isVisible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-6",
        )}
      >
        <div className='mb-6 flex items-baseline justify-between gap-6'>
          <div>
            <h2 className='text-3xl font-semibold text-neutral-400 md:text-4xl'>
              Take a closer look.
            </h2>
          </div>
        </div>

        <div className='relative'>
          <div
            ref={trackRef}
            className='relative left-1/2 flex w-screen -translate-x-1/2 snap-x snap-mandatory gap-6 overflow-x-auto pb-8 cursor-grab active:cursor-grabbing'
            style={{
              paddingLeft: paddingInline.left,
              paddingRight: paddingInline.right,
              scrollPaddingLeft: paddingInline.left,
              scrollPaddingRight: paddingInline.right,
            }}
          >
            {slides.map((slide, idx) => (
              <div
                key={slide.title}
                ref={(el) => {
                  cardRefs.current[idx] = el;
                }}
                className='relative flex aspect-video min-h-[280px] shrink-0 snap-start basis-[85%] items-end overflow-hidden border border-white/10 bg-gradient-to-b from-white/10 to-white/5 shadow-[0_30px_120px_rgba(0,0,0,0.5)] md:aspect-auto md:min-h-0 md:h-[520px] md:basis-[70%]'
              >
                <img
                  src={slide.image}
                  alt={slide.alt}
                  className='absolute inset-0 h-full w-full object-cover'
                  loading='lazy'
                />
              </div>
            ))}
          </div>

          <div className='mt-4 hidden justify-end gap-2 md:flex'>
            <div className='flex gap-2'>
              <button
                type='button'
                onClick={() =>
                  scrollToIndex(
                    (activeIndex - 1 + slides.length) % slides.length,
                  )
                }
                className='flex h-9 w-9 items-center justify-center border border-white/10 bg-white/5 text-white transition hover:border-white/20 hover:bg-white/10 cursor-pointer'
                aria-label='View previous slide'
              >
                <ChevronLeft className='h-4 w-4' />
              </button>
              <button
                type='button'
                onClick={() => scrollToIndex((activeIndex + 1) % slides.length)}
                className='flex h-9 w-9 items-center justify-center border border-white/10 bg-white/5 text-white transition hover:border-white/20 hover:bg-white/10 cursor-pointer'
                aria-label='View next slide'
              >
                <ChevronRight className='h-4 w-4' />
              </button>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}


================================================
FILE: apps/landing/src/components/sections/MidCta.tsx
================================================
import { useFadeInOnScroll } from "@/lib/useFadeInOnScroll";

function cx(...classes: Array<string | false | null | undefined>) {
  return classes.filter(Boolean).join(" ");
}

function MapPlaneIllustration() {
  return (
    <svg
      viewBox='0 0 900 360'
      className='h-full w-full'
      role='img'
      aria-label='Map with a plane flying along a route'
    >
      <defs>
        <pattern id='grid' width='36' height='36' patternUnits='userSpaceOnUse'>
          <path
            d='M 36 0 L 0 0 0 36'
            fill='none'
            stroke='rgba(255,255,255,0.08)'
            strokeWidth='1'
          />
        </pattern>

        <linearGradient id='fade' x1='0' y1='0' x2='1' y2='0'>
          <stop offset='0.55' stopColor='rgba(255,255,255,0.0)' />
          <stop offset='0.55' stopColor='rgba(255,255,255,0.64)' />
          <stop offset='0.55' stopColor='rgba(255,255,255,0.64)' />
          <stop offset='0.55' stopColor='rgba(255,255,255,0.0)' />
        </linearGradient>

        <style>
          {`
            .stroke { stroke: rgba(255,255,255,0.65); }
            .muted { stroke: rgba(255,255,255,0.28); }
            .dash  { stroke: rgba(255,255,255,0.55); stroke-dasharray: 8 10; }
            .thin  { stroke-width: 2; fill: none; }
            .thick { stroke-width: 3; fill: none; }
          `}
        </style>

        <path
          id='route'
          d='M120,250
             C190,170 250,165 305,205
             C360,250 410,255 465,220
             C520,185 570,170 625,205
             C680,240 725,245 790,190'
        />
      </defs>

      <rect x='0' y='0' width='900' height='360' fill='url(#grid)' />
      <rect
        x='0'
        y='0'
        width='900'
        height='360'
        fill='url(#fade)'
        opacity='0.9'
      />

      <use href='#route' className='dash thick' />
      <use href='#route' className='stroke thick' opacity='0.15' />

      <g>
        <circle r='10' fill='rgba(255,255,255,0.10)'>
          <animateMotion dur='6.5s' repeatCount='indefinite' rotate='auto'>
            <mpath href='#route' />
          </animateMotion>
        </circle>

        <g>
          <path d='M0,-10 L22,0 L0,10 L4,0 Z' fill='rgba(255,255,255,0.9)' />
          <path d='M5,-2 L12,-2' stroke='rgba(0,0,0,0.35)' strokeWidth='2' />
          <animateMotion dur='6.5s' repeatCount='indefinite' rotate='auto'>
            <mpath href='#route' />
          </animateMotion>
        </g>
      </g>
    </svg>
  );
}

export function MidCTASection() {
  const { ref: sectionRef, isVisible } = useFadeInOnScroll<HTMLElement>();

  return (
    <section
      ref={sectionRef}
      className='h-full w-full bg-neutral-950 text-white'
    >
      <div
        className={cx(
          "container mx-auto flex h-full max-w-7xl flex-col gap-12 px-5 md:px-10 py-16 md:flex-row md:items-center md:justify-between",
          "transition-all duration-700 ease-out",
          isVisible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-6",
        )}
      >
        <div className='w-full md:w-[46%]'>
          <h2 className='text-4xl font-semibold tracking-tight md:text-5xl'>
            Start with a demo
            <br />
            <span className='font-serif font-medium'>See it in action.</span>
          </h2>

          <div className='mt-8 flex flex-wrap items-center gap-4'>
            <button
              type='button'
              className='inline-flex h-11 items-center justify-center bg-white px-5 text-sm font-medium text-black transition-opacity hover:opacity-90 focus:outline-none focus-visible:ring-2 focus-visible:ring-white/80 cursor-pointer'
              onClick={() => window.open("https://demo.vsl.cartesiancs.com/")}
            >
              Start for free
            </button>

            <button
              type='button'
              className='inline-flex h-11 items-center justify-center border border-white/30 bg-transparent px-5 text-sm font-medium text-white transition-colors hover:border-white/50 focus:outline-none focus-visible:ring-2 focus-visible:ring-white/80 cursor-pointer'
              onClick={() => (location.href = "/roadmap")}
            >
              See our roadmap
            </button>
          </div>
        </div>

        <div className='hidden w-full md:block md:w-[54%]'>
          <div className='relative h-[320px] w-full'>
            <MapPlaneIllustration />
          </div>
        </div>
      </div>
    </section>
  );
}


================================================
FILE: apps/landing/src/components/sections/ScrollBox.tsx
================================================
import { useState, useEffect, useRef, useCallback } from "react";
import { Canvas, useFrame } from "@react-three/fiber";
import type { Mesh } from "three";

const EXTRA_SCROLL_PX = 1000;

function RotatingBox({ progress }: { progress: number }) {
  const meshRef = useRef<Mesh>(null);
  const targetRotation = useRef({ x: 0, y: 0 });

  targetRotation.current = {
    x: progress * Math.PI * 2,
    y: progress * Math.PI * 2,
  };

  useFrame(() => {
    if (!meshRef.current) return;
    const lerpFactor = 0.1;
    meshRef.current.rotation.x +=
      (targetRotation.current.x - meshRef.current.rotation.x) * lerpFactor;
    meshRef.current.rotation.y +=
      (targetRotation.current.y - meshRef.current.rotation.y) * lerpFactor;
  });

  return (
    <mesh ref={meshRef}>
      <boxGeometry args={[2, 2, 2]} />
      <meshStandardMaterial color="#ffffff" metalness={0.3} roughness={0.4} />
    </mesh>
  );
}

export function ScrollBoxSection() {
  const sectionRef = useRef<HTMLElement>(null);
  const [scrollProgress, setScrollProgress] = useState(0);

  const handleScroll = useCallback(() => {
    if (!sectionRef.current) return;
    const rect = sectionRef.current.getBoundingClientRect();
    const sectionHeight = rect.height;
    const viewportHeight = window.innerHeight;

    const scrollableDistance = sectionHeight - viewportHeight;
    const scrolled = -rect.top;
    const progress =
      scrollableDistance > 0 ? scrolled / scrollableDistance : 0;

    setScrollProgress(Math.max(0, Math.min(1, progress)));
  }, []);

  useEffect(() => {
    window.addEventListener("scroll", handleScroll, { passive: true });
    handleScroll();
    return () => window.removeEventListener("scroll", handleScroll);
  }, [handleScroll]);

  return (
    <section
      ref={sectionRef}
      style={{ height: `calc(100vh + ${EXTRA_SCROLL_PX}px)` }}
      className="relative bg-black"
    >
      <div className="sticky top-0 h-screen flex items-center justify-center">
        <Canvas
          gl={{ alpha: false }}
          camera={{ position: [0, 0, 5], fov: 50 }}
          style={{ background: "#000000" }}
        >
          <ambientLight intensity={0.4} />
          <directionalLight position={[5, 5, 5]} intensity={1} />
          <pointLight position={[-5, -5, -5]} intensity={0.5} />
          <RotatingBox progress={scrollProgress} />
        </Canvas>
      </div>
    </section>
  );
}


================================================
FILE: apps/landing/src/components/sections/ScrollTextReveal.tsx
================================================
import { useState, useEffect, useRef, useCallback } from "react";

const QUOTE = {
  text: `"Physical AI that discovers, and adapts — built for explorers"`,
  author: "H. Jun Huh",
  title: "Founder · cartesiancs",
};

function Word({ word, progress }: { word: string; progress: number }) {
  const clamped = Math.max(0, Math.min(1, progress));
  // Dark theme: reveal from dark gray (0.3) to white (1.0)
  const lightness = 0.3 + clamped * 0.7;
  const color = `oklch(${lightness} 0 0)`;

  return (
    <span
      style={{
        color,
        transition: "color 0.08s ease-out",
      }}
      className='inline'
    >
      {word}{" "}
    </span>
  );
}

function QuoteSection() {
  const sectionRef = useRef<HTMLElement>(null);
  const [scrollProgress, setScrollProgress] = useState(0);

  const handleScroll = useCallback(() => {
    if (!sectionRef.current) return;
    const rect = sectionRef.current.getBoundingClientRect();
    const sectionHeight = rect.height;
    const viewportHeight = window.innerHeight;

    const scrollableDistance = sectionHeight - viewportHeight;
    const scrolled = -rect.top;
    const progress = scrollableDistance > 0 ? scrolled / scrollableDistance : 0;

    setScrollProgress(Math.max(0, Math.min(1, progress)));
  }, []);

  useEffect(() => {
    window.addEventListener("scroll", handleScroll, { passive: true });
    handleScroll();
    return () => window.removeEventListener("scroll", handleScroll);
  }, [handleScroll]);

  const words = QUOTE.text.split(" ");

  return (
    <section
      ref={sectionRef}
      style={{ height: `${Math.max(250, words.length * 18)}vh` }}
      className='relative'
    >
      <div className='sticky top-0 h-screen flex flex-col items-center justify-center px-[8vw]'>
        <p
          className='text-center font-bold leading-[1.25] tracking-tight max-w-[820px] m-0'
          style={{
            fontSize: "clamp(1.8rem, 4.2vw, 3.6rem)",
            letterSpacing: "-0.02em",
          }}
        >
          {words.map((word, i) => {
            const wordStart = i / words.length;
            const wordEnd = (i + 1) / words.length;
            const wordProgress =
              (scrollProgress - wordStart) / (wordEnd - wordStart);
            return <Word key={i} word={word} progress={wordProgress} />;
          })}
        </p>

        <div
          className='mt-8 text-center'
          style={{
            opacity:
              scrollProgress > 0.15
                ? Math.min(1, (scrollProgress - 0.15) * 3)
                : 0,
            transform: `translateY(${scrollProgress > 0.15 ? 0 : 8}px)`,
            transition: "opacity 0.4s ease-out, transform 0.4s ease-out",
          }}
        >
          <p className='text-sm font-semibold text-foreground m-0 tracking-wide'>
            {QUOTE.author}
          </p>
          <p className='text-xs font-normal text-neutral-500 mt-1 m-0 tracking-wide'>
            {QUOTE.title}
          </p>
        </div>
      </div>
    </section>
  );
}

export function ScrollTextRevealSection() {
  return (
    <section className='w-full'>
      <QuoteSection />
    </section>
  );
}


================================================
FILE: apps/landing/src/components/sections/SecurityCta.tsx
================================================
import { useFadeInOnScroll } from "@/lib/useFadeInOnScroll";

function cx(...classes: Array<string | false | null | undefined>) {
  return classes.filter(Boolean).join(" ");
}

export function SecurityCTASection() {
  const { ref: sectionRef, isVisible } = useFadeInOnScroll<HTMLElement>();

  return (
    <section ref={sectionRef} className='h-full w-full bg-black text-white'>
      <div
        className={cx(
          "container mx-auto flex h-full max-w-7xl flex-col gap-12 px-5 md:px-10 py-16 md:flex-row md:items-center md:justify-between",
          "transition-all duration-700 ease-out",
          isVisible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-6",
        )}
      >
        <div className='w-full md:w-[46%]'>
          <h2 className='text-4xl font-semibold tracking-tight md:text-5xl'>
            Zero Tracker.
            <br />
            <span className='font-serif font-medium'>Absolute Privacy</span>
          </h2>

          <div className='mt-8 flex flex-wrap items-center gap-4'>
            <button
              type='button'
              className='inline-flex h-11 items-center justify-center bg-white px-5 text-sm font-medium text-black transition-opacity hover:opacity-90 focus:outline-none focus-visible:ring-2 focus-visible:ring-white/80 cursor-pointer'
              onClick={() =>
                window.open("https://github.com/cartesiancs/vessel")
              }
            >
              How Vessel works
            </button>

            <button
              type='button'
              className='inline-flex h-11 items-center justify-center border border-white/30 bg-transparent px-5 text-sm font-medium text-white transition-colors hover:border-white/50 focus:outline-none focus-visible:ring-2 focus-visible:ring-white/80 cursor-pointer'
              onClick={() => (location.href = "/privacy")}
            >
              Privacy
            </button>
          </div>
        </div>

        <div className='hidden md:block md:w-[54%]'>
          <div className='relative h-[320px] w-full'></div>
        </div>
      </div>
    </section>
  );
}


================================================
FILE: apps/landing/src/components/sections/SubheadingSection.tsx
================================================
import { useEffect, useRef, useState } from "react";

const TITLE = "Build your own infrastructure";

export function SubheadingSection() {
  const sectionRef = useRef<HTMLElement | null>(null);
  const [isVisible, setIsVisible] = useState(false);

  useEffect(() => {
    const node = sectionRef.current;
    if (!node) return;

    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            setIsVisible(true);
            observer.disconnect();
          }
        });
      },
      { threshold: 0.35 },
    );

    observer.observe(node);
    return () => observer.disconnect();
  }, []);

  return (
    <section
      ref={sectionRef}
      className='flex h-[400px] items-center justify-center px-6'
    >
      <h1 className='flex flex-wrap items-center justify-center gap-2 text-center text-neutral-200 text-2xl md:text-[48px] font-semibold leading-tight tracking-tight'>
        {TITLE.split(" ").map((word, index) => (
          <span
            key={word + index}
            className={`transform-gpu transition-all duration-700 ease-out ${
              isVisible
                ? "translate-y-0 opacity-100 blur-0"
                : "translate-y-2 opacity-0 blur-sm"
            }`}
            style={{ transitionDelay: `${index * 80}ms` }}
          >
            {word}
          </span>
        ))}
      </h1>
    </section>
  );
}


================================================
FILE: apps/landing/src/components/sections/ThreeCards.tsx
================================================
import { useFadeInOnScroll } from "@/lib/useFadeInOnScroll";

type Card = {
  image: string;
  alt: string;
  title: string;
  description: string;
};

const cards: Card[] = [
  {
    image: "/images/ha.webp",
    alt: "Device connections",
    title: "Home Assistant.",
    description:
      "Connect with every supported device. Powered by the world’s most powerful IoT hub.",
  },
  {
    image: "/images/robotarm.webp",
    alt: "Threat detection",
    title: "Robot Control.",
    description: "Control robots in real time with ROS 2’s powerful protocols.",
  },
  {
    image: "/images/watch.webp",
    alt: "Automated response",
    title: "Fundamental Control.",
    description:
      "Bring real-time data from WebSocket, MQTT, and HTTP straight into your flow logic.",
  },
];

function cx(...classes: Array<string | false | null | undefined>) {
  return classes.filter(Boolean).join(" ");
}

export function ThreeCardsSection() {
  const { ref: sectionRef, isVisible } = useFadeInOnScroll<HTMLElement>();

  return (
    <section ref={sectionRef} className='w-full bg-black text-white'>
      <div
        className={cx(
          "container mx-auto max-w-7xl px-5 md:px-10 py-30",
          "transition-all duration-700 ease-out",
          isVisible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-6",
        )}
      >
        <div className='grid gap-10 md:grid-cols-3'>
          {cards.map((c) => (
            <div key={c.title} className='space-y-6'>
              <div className='overflow-hidden bg-white/5'>
                <img
                  src={c.image}
                  alt={c.alt}
                  className='h-[320px] w-full object-cover md:h-[360px]'
                  loading='lazy'
                />
              </div>

              <p className='text-lg leading-snug'>
                <span className='font-semibold text-white'>{c.title} </span>
                <span className='text-white/55'>{c.description}</span>
              </p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}


================================================
FILE: apps/landing/src/components/sections/Usecase.tsx
================================================
import { useCallback, useMemo, useRef, useState } from "react";
import { useFadeInOnScroll } from "@/lib/useFadeInOnScroll";

type Usecase = {
  title: string;
  description: string;
  image: string;
  alt: string;
};

const usecases: Usecase[] = [
  {
    title: "Realtime Control",
    description:
      "Coordinate sensors, cameras, and automated responses across large sites without relying on cloud connectivity.",
    image: "/images/house.webp",
    alt: "Perimeter operations map",
  },
  {
    title: "Mission Control Watchtower",
    description:
      "Fuse live feeds, alerts, and playbooks into a single command layer for faster, safer decisions.",
    image: "/images/factory.webp",
    alt: "Mission control dashboard",
  },
  {
    title: "CCTV Dashboard",
    description:
      "RTSP and low-level UDP RTP video stream support. Aggregate multiple media sources for real-time visibility and control.",
    image: "/images/cctv.webp",
    alt: "Mission control dashboard",
  },
];

function cx(...classes: Array<string | false | null | undefined>) {
  return classes.filter(Boolean).join(" ");
}

export function UsecaseSection() {
  const { ref: sectionRef, isVisible } = useFadeInOnScroll<HTMLElement>();
  const [activeIndex, setActiveIndex] = useState(0);
  const tabBarRef = useRef<HTMLDivElement>(null);

  const active = useMemo(() => usecases[activeIndex], [activeIndex]);

  const handleTabClick = useCallback((idx: number, el: HTMLButtonElement) => {
    setActiveIndex(idx);
    el.scrollIntoView({ behavior: "smooth", inline: "center", block: "nearest" });
  }, []);

  return (
    <section ref={sectionRef} className='w-full'>
      <div
        className={cx(
          "container mx-auto max-w-7xl px-5 md:px-10 py-30 transition-all duration-700 ease-out",
          "flex flex-col",
          isVisible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-6",
        )}
      >
        <div className='mb-10 text-left'>
          <h2 className='mt-3 text-3xl font-bold tracking-tight md:text-4xl'>
            Explore <span className='text-neutral-500'>What You Can Build</span>
          </h2>
        </div>

        {/* Image area – crossfade */}
        <div className='relative w-full overflow-hidden aspect-[16/10] md:aspect-[16/9]'>
          {usecases.map((u, idx) => (
            <img
              key={u.image}
              src={u.image}
              alt={u.alt}
              className={cx(
                "absolute inset-0 h-full w-full object-cover transition-opacity duration-700 ease-in-out",
                idx === activeIndex ? "opacity-100" : "opacity-0",
              )}
              loading='lazy'
            />
          ))}
          <div
            className='absolute inset-0 bg-gradient-to-t from-black/40 to-transparent'
            aria-hidden='true'
          />
        </div>

        {/* Tab bar */}
        <div ref={tabBarRef} className='mt-8 flex gap-4 md:gap-8 md:justify-center overflow-x-auto'>
          {usecases.map((u, idx) => {
            const isActive = idx === activeIndex;
            return (
              <button
                key={u.title}
                type='button'
                onClick={(e) => handleTabClick(idx, e.currentTarget)}
                className={cx(
                  "pb-2 text-sm md:text-base font-medium transition-all duration-200 cursor-pointer border-b-2 whitespace-nowrap shrink-0",
                  isActive
                    ? "text-white border-white"
                    : "text-neutral-500 border-transparent hover:text-neutral-300",
                )}
              >
                {u.title}
              </button>
            );
          })}
        </div>

        {/* Description */}
        <p className='mt-6 mx-auto max-w-2xl text-center text-sm md:text-base leading-relaxed text-neutral-400'>
          {active.description}
        </p>
      </div>
    </section>
  );
}


================================================
FILE: apps/landing/src/components/sections/UsecaseAI.tsx
================================================
import { useCallback, useMemo, useRef, useState } from "react";
import { useFadeInOnScroll } from "@/lib/useFadeInOnScroll";

type Usecase = {
  title: string;
  description: string;
  image: string;
  alt: string;
};

const usecases: Usecase[] = [
  {
    title: "Flow Auto Generation",
    description:
      "Describe what you want in natural language and the AI agent instantly builds a complete automation flow.",
    image: "/images/ai1.webp",
    alt: "AI generating automation flow",
  },
  {
    title: "Home Analysis",
    description:
      "The AI continuously monitors sensor data, cameras, and device states to understand what is happening at home and surface actionable insights in real time.",
    image: "/images/house.webp",
    alt: "AI analyzing home status",
  },
  {
    title: "Flow Integration",
    description:
      "Seamlessly merge AI-generated suggestions into your existing flows. The agent resolves conflicts, optimizes triggers, and keeps everything in sync.",
    image: "/images/factory.webp",
    alt: "AI integrating into existing flows",
  },
  {
    title: "Capsule Security",
    description:
      "Every AI action runs inside an isolated capsule with scoped permissions, ensuring that automation never exceeds the boundaries you define.",
    image: "/images/s1.webp",
    alt: "Capsule-based security layer",
  },
];

function cx(...classes: Array<string | false | null | undefined>) {
  return classes.filter(Boolean).join(" ");
}

export function UsecaseAIAssistantSection() {
  const { ref: sectionRef, isVisible } = useFadeInOnScroll<HTMLElement>();
  const [activeIndex, setActiveIndex] = useState(0);
  const tabBarRef = useRef<HTMLDivElement>(null);

  const active = useMemo(() => usecases[activeIndex], [activeIndex]);

  const handleTabClick = useCallback((idx: number, el: HTMLButtonElement) => {
    setActiveIndex(idx);
    el.scrollIntoView({ behavior: "smooth", inline: "center", block: "nearest" });
  }, []);

  return (
    <section ref={sectionRef} className='w-full'>
      <div
        className={cx(
          "container mx-auto max-w-7xl px-5 md:px-10 py-30 transition-all duration-700 ease-out",
          "flex flex-col",
          isVisible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-6",
        )}
      >
        <div className='mb-10 text-left'>
          <h2 className='mt-3 text-3xl font-bold tracking-tight md:text-4xl'>
            AI Agent{" "}
            <span className='text-neutral-500'>
              for understanding the world
            </span>
          </h2>
        </div>

        {/* Image area – crossfade */}
        <div className='relative w-full overflow-hidden aspect-[16/10] md:aspect-[16/9]'>
          {usecases.map((u, idx) => (
            <img
              key={u.image}
              src={u.image}
              alt={u.alt}
              className={cx(
                "absolute inset-0 h-full w-full object-cover transition-opacity duration-700 ease-in-out",
                idx === activeIndex ? "opacity-100" : "opacity-0",
              )}
              loading='lazy'
            />
          ))}
          <div
            className='absolute inset-0 bg-gradient-to-t from-black/40 to-transparent'
            aria-hidden='true'
          />
        </div>

        {/* Tab bar */}
        <div ref={tabBarRef} className='mt-8 flex gap-4 md:gap-8 md:justify-center overflow-x-auto'>
          {usecases.map((u, idx) => {
            const isActive = idx === activeIndex;
            return (
              <button
                key={u.title}
                type='button'
                onClick={(e) => handleTabClick(idx, e.currentTarget)}
                className={cx(
                  "pb-2 text-sm md:text-base font-medium transition-all duration-200 cursor-pointer border-b-2 whitespace-nowrap shrink-0",
                  isActive
                    ? "text-white border-white"
                    : "text-neutral-500 border-transparent hover:text-neutral-300",
                )}
              >
                {u.title}
              </button>
            );
          })}
        </div>

        {/* Description */}
        <p className='mt-6 mx-auto max-w-2xl text-center text-sm md:text-base leading-relaxed text-neutral-400'>
          {active.description}
        </p>
      </div>
    </section>
  );
}


================================================
FILE: apps/landing/src/components/sections/capsule/CapsuleArchitecture.tsx
================================================
import { Cpu, Box, Gauge } from "lucide-react";
import { useFadeInOnScroll } from "@/lib/useFadeInOnScroll";
import type { ComponentType } from "react";

function cx(...classes: Array<string | false | null | undefined>) {
  return classes.filter(Boolean).join(" ");
}

type Card = {
  icon: ComponentType<{ className?: string; strokeWidth?: number }>;
  title: string;
  description: string;
};

const cards: Card[] = [
  {
    icon: Cpu,
    title: "Rust Backend.",
    description:
      "Built with Rust for memory safety, zero-cost abstractions, and blazing performance. No garbage collector, no runtime overhead.",
  },
  {
    icon: Box,
    title: "Hardened Containers.",
    description:
      "Alpine Linux, non-root user, read-only filesystem, no shell access. Every layer minimizes the attack surface.",
  },
  {
    icon: Gauge,
    title: "Rate-Limited Access.",
    description:
      "Subscription tiers with intelligent rate limiting. Fair usage guaranteed, abuse prevented at the infrastructure level.",
  },
];

export function CapsuleArchitecture() {
  const { ref: sectionRef, isVisible } = useFadeInOnScroll<HTMLElement>();

  return (
    <section ref={sectionRef} className='w-full bg-black text-white'>
      <div
        className={cx(
          "container mx-auto max-w-6xl px-8 py-40",
          "transition-all duration-700 ease-out",
          isVisible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-6",
        )}
      >
        <div className='mb-14 text-left'>
          <h2 className='text-3xl font-bold tracking-tight md:text-4xl'>
            Architecture <span className='text-neutral-500'>Built to Last</span>
          </h2>
        </div>

        <div className='grid gap-10 md:grid-cols-3'>
          {cards.map((c) => {
            const Icon = c.icon;
            return (
              <div key={c.title} className='space-y-6'>
                <div className='flex h-[320px] w-full items-center justify-center overflow-hidden bg-white/5 md:h-[360px]'>
                  <Icon className='h-20 w-20 text-white/20' strokeWidth={1} />
                </div>

                <p className='text-lg leading-snug'>
                  <span className='font-semibold text-white'>{c.title} </span>
                  <span className='text-white/55'>{c.description}</span>
                </p>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}


================================================
FILE: apps/landing/src/components/sections/capsule/CapsuleFaq.tsx
================================================
import { useState } from "react";
import { Plus } from "lucide-react";
import { useFadeInOnScroll } from "@/lib/useFadeInOnScroll";

function cx(...classes: Array<string | false | null | undefined>) {
  return classes.filter(Boolean).join(" ");
}

type FAQItem = {
  question: string;
  answer: string;
};

const faqs: FAQItem[] = [
  {
    question: "What is Capsule?",
    answer:
      "Capsule is a secure, privacy-first AI chat service. Every conversation is end-to-end encrypted using X25519 ECDH key exchange and XChaCha20-Poly1305 authenticated encryption, ensuring that only you and the AI can access your messages.",
  },
  {
    question: "Can Capsule read my messages?",
    answer:
      "No. Capsule uses a zero-knowledge architecture. Messages are encrypted on your device before transmission. The server processes encrypted payloads and never has access to plaintext content. Private keys are never persisted to disk.",
  },
  {
    question: "What encryption does Capsule use?",
    answer:
      "Capsule uses X25519 Elliptic Curve Diffie-Hellman for key exchange and XChaCha20-Poly1305 for authenticated encryption. Key derivation uses HKDF-SHA256. All keys are automatically zeroized from memory after use.",
  },
  {
    question: "Does image analysis compromise my privacy?",
    answer:
      "No. Images are encrypted client-side before upload using the same X25519 + XChaCha20-Poly1305 scheme. The server decrypts them only for GPT-4o vision analysis, then immediately zeroizes all image data from memory.",
  },
  {
    question: "What happens to my data if there is a breach?",
    answer:
      "Even in a breach scenario, your data remains unreadable. All messages are transmitted encrypted, encryption keys are never persisted on the server, and memory is automatically zeroized after each request.",
  },
  {
    question: "How does the subscription work?",
    answer:
      "Capsule uses JWT-based authentication through Supabase. Subscribe to a Pro plan for full access to encrypted AI chat and image analysis, with rate-limited usage to ensure fair service for all users.",
  },
];

export function CapsuleFaq() {
  const { ref: sectionRef, isVisible } = useFadeInOnScroll<HTMLElement>();
  const [activeIndex, setActiveIndex] = useState<number | null>(0);

  return (
    <section ref={sectionRef} className='h-full w-full bg-black text-white'>
      <div
        className={cx(
          "container mx-auto flex h-full max-w-6xl flex-col px-8 md:px-10 py-16",
          "transition-all duration-700 ease-out",
          isVisible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-6",
        )}
      >
        <div className='mb-12 text-left'>
          <h2 className='text-3xl font-bold tracking-tight md:text-4xl'>
            Frequently Asked{" "}
            <span className='text-neutral-500'>Questions</span>
          </h2>
        </div>

        <div className='w-full'>
          {faqs.map((item, idx) => {
            const isOpen = activeIndex === idx;
            return (
              <div key={item.question} className='border-b border-gray-300/40'>
                <button
                  type='button'
                  onClick={() => setActiveIndex(isOpen ? null : idx)}
                  className={cx(
                    "flex w-full items-center justify-between gap-4 py-5 text-left cursor-pointer",
                    "focus:outline-none focus-visible:ring-2 focus-visible:ring-white/70 focus-visible:ring-offset-2 focus-visible:ring-offset-black",
                  )}
                  aria-expanded={isOpen}
                  aria-controls={`capsule-faq-panel-${idx}`}
                  id={`capsule-faq-trigger-${idx}`}
                >
                  <div className='min-w-0 text-base font-semibold leading-snug'>
                    {item.question}
                  </div>

                  <Plus
                    className={cx(
                      "h-5 w-5 flex-none transition-transform duration-200",
                      isOpen ? "rotate-45" : "rotate-0",
                    )}
                    aria-hidden='true'
                  />
                </button>

                <div
                  id={`capsule-faq-panel-${idx}`}
                  role='region'
                  aria-labelledby={`capsule-faq-trigger-${idx}`}
                  className={cx(
                    "overflow-hidden transition-[max-height] duration-300 ease-out",
                    isOpen ? "max-h-48" : "max-h-0",
                  )}
                >
                  <div
                    className={cx(
                      "pb-5 text-sm text-white/70 transition-opacity duration-300 ease-out",
                      isOpen ? "opacity-100" : "opacity-0",
                    )}
                  >
                    {item.answer}
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}


================================================
FILE: apps/landing/src/components/sections/capsule/CapsuleFeatures.tsx
================================================
import {
  Lock,
  Image,
  Radio,
  ShieldCheck,
  KeyRound,
  Server,
} from "lucide-react";
import { useFadeInOnScroll } from "@/lib/useFadeInOnScroll";
import type { ComponentType } from "react";

function cx(...classes: Array<string | false | null | undefined>) {
  return classes.filter(Boolean).join(" ");
}

type Feature = {
  icon: ComponentType<{ className?: string; strokeWidth?: number }>;
  title: string;
  description: string;
};

const features: Feature[] = [
  {
    icon: Lock,
    title: "End-to-End Encryption",
    description:
      "Every message encrypted with X25519 ECDH + XChaCha20-Poly1305 before leaving your device. No one but you and the AI can read it.",
  },
  {
    icon: Image,
    title: "Encrypted Image Analysis",
    description:
      "Send images for AI analysis. Images are encrypted client-side and processed securely via GPT-4o vision, then wiped from memory.",
  },
  {
    icon: Radio,
    title: "Streaming Responses",
    description:
      "Real-time AI responses delivered via Server-Sent Events. Watch answers appear token-by-token as they are generated.",
  },
  {
    icon: ShieldCheck,
    title: "Memory Protection",
    description:
      "Automatic zeroization ensures all sensitive data — keys, plaintext, images — is wiped from server memory immediately after use.",
  },
  {
    icon: KeyRound,
    title: "Powerful Authentication",
    description:
      "Secure session management backed by Supabase authentication with ES256 token validation and audience checks.",
  },
  {
    icon: Server,
    title: "Hardened Deployment",
    description:
      "Alpine-based containers running as non-root with read-only filesystems. Minimal attack surface by design.",
  },
];

export function CapsuleFeatures() {
  const { ref: sectionRef, isVisible } = useFadeInOnScroll<HTMLElement>();

  return (
    <section
      id='features'
      ref={sectionRef}
      className='w-full bg-black text-white'
    >
      <div
        className={cx(
          "container mx-auto max-w-6xl px-8 py-30",
          "transition-all duration-700 ease-out",
          isVisible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-6",
        )}
      >
        <div className='mb-14 text-left'>
          <h2 className='text-3xl font-bold tracking-tight md:text-4xl'>
            Built for Security,{" "}
            <span className='text-neutral-500'>from the Ground Up</span>
          </h2>
        </div>

        <div className='grid gap-8 md:grid-cols-2 lg:grid-cols-3'>
          {features.map((feature, index) => {
            const Icon = feature.icon;
            return (
              <div
                key={feature.title}
                className={cx(
                  "space-y-4 border border-white/10 p-6 transition-all duration-700 ease-out",
                  isVisible
                    ? "opacity-100 translate-y-0"
                    : "opacity-0 translate-y-4",
                )}
                style={{ transitionDelay: `${index * 100}ms` }}
              >
                <div className='flex h-12 w-12 items-center justify-center bg-white/5 border border-white/10'>
                  <Icon className='h-6 w-6 text-white/80' strokeWidth={1.5} />
                </div>
                <h3 className='text-lg font-semibold text-white'>
                  {feature.title}
                </h3>
                <p className='text-sm leading-relaxed text-white/55'>
                  {feature.description}
                </p>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}


================================================
FILE: apps/landing/src/components/sections/capsule/CapsuleFooterCta.tsx
================================================
import { useFadeInOnScroll } from "@/lib/useFadeInOnScroll";

function cx(...classes: Array<string | false | null | undefined>) {
  return classes.filter(Boolean).join(" ");
}

export function CapsuleFooterCta() {
  const { ref: sectionRef, isVisible } = useFadeInOnScroll<HTMLElement>();

  return (
    <section ref={sectionRef} className='w-full bg-black text-white'>
      <div
        className={cx(
          "container mx-auto max-w-6xl px-8 md:px-10 py-24 md:py-32",
          "transition-all duration-700 ease-out",
          isVisible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-6",
        )}
      >
        <div className='mx-auto flex max-w-3xl flex-col items-center text-center'>
          <h2 className='text-4xl font-semibold tracking-tight md:text-5xl'>
            <span className='text-white/50'>Built</span>{" "}
            <span className='text-white'>for privacy</span>
          </h2>

          <p className='mt-5 max-w-2xl text-lg leading-relaxed text-white/75 md:text-xl'>
            Capsule ensures your AI conversations remain truly private.
            End-to-end encrypted, zero-knowledge, and built on Rust.
          </p>

          <div className='mt-10'>
            <button
              className={cx(
                "inline-flex h-12 items-center justify-center px-6",
                "border border-white/25 bg-transparent text-base font-medium text-white",
                "transition-colors hover:border-white/45 hover:bg-white/5",
                "focus:outline-none focus-visible:ring-2 focus-visible:ring-white/30 cursor-pointer",
              )}
              onClick={() => (location.href = "/pricing")}
            >
              Get Started
            </button>
          </div>
        </div>
      </div>
    </section>
  );
}


================================================
FILE: apps/landing/src/components/sections/capsule/CapsuleHero.tsx
================================================
import { Button } from "@/components/ui/button";

export function CapsuleHero() {
  return (
    <section className='flex h-[600px] flex-col items-center justify-center px-8 md:px-10'>
      <div className='flex flex-col items-center gap-y-6'>
        <h1 className='text-4xl md:text-6xl lg:text-6xl md:leading-17 leading-10 md:font-bold font-semibold tracking-tight text-center'>
          Capsule
        </h1>
        <div className='flex items-center gap-x-4 pt-2'>
          <Button
            variant='default'
            onClick={() => (location.href = "/pricing")}
          >
            Get Started
          </Button>
          <Button
            variant='outline'
            onClick={() =>
              (location.href = "https://github.com/cartesiancs/vessel")
            }
          >
            Learn More
          </Button>
        </div>
      </div>
    </section>
  );
}


================================================
FILE: apps/landing/src/components/sections/capsule/CapsuleHowItWorks.tsx
================================================
import { useFadeInOnScroll } from "@/lib/useFadeInOnScroll";
import EncryptionFlowIllustration from "./EncryptionFlowIllustration";

function cx(...classes: Array<string | false | null | undefined>) {
  return classes.filter(Boolean).join(" ");
}

const steps = [
  {
    number: "01",
    title: "Key Exchange",
    description:
      "X25519 ECDH establishes a shared secret between your device and the server. No keys are ever transmitted in plaintext.",
  },
  {
    number: "02",
    title: "Message Sealing",
    description:
      "XChaCha20-Poly1305 encrypts every message with a unique nonce. Authenticated encryption prevents any tampering.",
  },
  {
    number: "03",
    title: "Zero Residue",
    description:
      "After processing, all plaintext, keys, and decrypted images are automatically zeroized from memory. Nothing persists.",
  },
];

export function CapsuleHowItWorks() {
  const { ref: sectionRef, isVisible } = useFadeInOnScroll<HTMLElement>();

  return (
    <section
      ref={sectionRef}
      className='h-full w-full bg-neutral-950 text-white'
    >
      <div
        className={cx(
          "container mx-auto flex h-full max-w-6xl flex-col gap-12 px-8 py-30 md:flex-row md:items-center md:justify-between",
          "transition-all duration-700 ease-out",
          isVisible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-6",
        )}
      >
        <div className='w-full md:w-[46%]'>
          <h2 className='text-4xl font-semibold tracking-tight md:text-5xl'>
            How Capsule
            <br />
            <span className='font-serif font-medium'>Protects You</span>
          </h2>

          <div className='mt-10 space-y-8'>
            {steps.map((step) => (
              <div key={step.number} className='flex gap-4'>
                <div className='flex h-8 w-8 shrink-0 items-center justify-center border border-white/20 text-sm font-semibold text-white'>
                  {step.number}
                </div>
                <div>
                  <h3 className='text-base font-semibold'>{step.title}</h3>
                  <p className='mt-1 text-sm leading-relaxed text-white/55'>
                    {step.description}
                  </p>
                </div>
              </div>
            ))}
          </div>
        </div>

        <div className='w-full md:w-[54%]'>
          <div className='relative h-[260px] w-full md:h-[320px]'>
            <EncryptionFlowIllustration />
          </div>
        </div>
      </div>
    </section>
  );
}


================================================
FILE: apps/landing/src/components/sections/capsule/CapsuleSecurity.tsx
================================================
import { useFadeInOnScroll } from "@/lib/useFadeInOnScroll";
import { ShieldCheck } from "lucide-react";

function cx(...classes: Array<string | false | null | undefined>) {
  return classes.filter(Boolean).join(" ");
}

export function CapsuleSecurity() {
  const { ref: sectionRef, isVisible } = useFadeInOnScroll<HTMLElement>();

  return (
    <section ref={sectionRef} className='h-full w-full bg-black text-white'>
      <div
        className={cx(
          "container mx-auto flex h-full max-w-6xl flex-col gap-12 px-8 py-40 md:flex-row md:items-center md:justify-between",
          "transition-all duration-700 ease-out",
          isVisible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-6",
        )}
      >
        <div className='w-full md:w-[46%]'>
          <h2 className='text-4xl font-semibold tracking-tight md:text-5xl'>
            Zero Knowledge
            <br />
            Architecture.
            <br />
            <span className='font-serif font-medium'>Absolute Encryption</span>
          </h2>

          <p className='mt-6 text-base leading-relaxed text-white/55'>
            Capsule cannot read your messages. The server processes encrypted
            payloads and returns encrypted results. Even in a breach, your data
            remains unreadable. Private keys exist only in memory and are never
            persisted to disk.
          </p>

          <div className='mt-8 flex flex-wrap items-center gap-4'>
            <button
              type='button'
              className='inline-flex h-11 items-center justify-center bg-white px-5 text-sm font-medium text-black transition-opacity hover:opacity-90 focus:outline-none focus-visible:ring-2 focus-visible:ring-white/80 cursor-pointer'
              onClick={() => (location.href = "/privacy")}
            >
              View Privacy Policy
            </button>

            <button
              type='button'
              className='inline-flex h-11 items-center justify-center border border-white/30 bg-transparent px-5 text-sm font-medium text-white transition-colors hover:border-white/50 focus:outline-none focus-visible:ring-2 focus-visible:ring-white/80 cursor-pointer'
              onClick={() => (location.href = "/pricing")}
            >
              See Pricing
            </button>
          </div>
        </div>

        <div className='w-full md:w-[54%]'>
          <div className='relative flex h-[260px] w-full items-center justify-center md:h-[320px]'>
            {/* Decorative concentric rings */}
            <div className='absolute h-64 w-64 rounded-full border border-white/5' />
            <div className='absolute h-48 w-48 rounded-full border border-white/8' />
            <div className='absolute h-32 w-32 rounded-full border border-white/12' />
            <ShieldCheck
              className='relative h-16 w-16 text-white/60'
              strokeWidth={1.2}
            />
          </div>
        </div>
      </div>
    </section>
  );
}


================================================
FILE: apps/landing/src/components/sections/capsule/CapsuleSubheading.tsx
================================================
import { useEffect, useRef, useState } from "react";

const TITLE = "Zero knowledge LLM call";

export function CapsuleSubheading() {
  const sectionRef = useRef<HTMLElement | null>(null);
  const [isVisible, setIsVisible] = useState(false);

  useEffect(() => {
    const node = sectionRef.current;
    if (!node) return;

    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            setIsVisible(true);
            observer.disconnect();
          }
        });
      },
      { threshold: 0.35 },
    );

    observer.observe(node);
    return () => observer.disconnect();
  }, []);

  return (
    <section
      ref={sectionRef}
      className='flex h-[400px] items-center justify-center px-6'
    >
      <h1 className='flex flex-wrap items-center justify-center gap-2 text-center text-neutral-200 text-[48px] font-semibold leading-tight tracking-tight'>
        {TITLE.split(" ").map((word, index) => (
          <span
            key={word + index}
            className={`transform-gpu transition-all duration-700 ease-out ${
              isVisible
                ? "translate-y-0 opacity-100 blur-0"
                : "translate-y-2 opacity-0 blur-sm"
            }`}
            style={{ transitionDelay: `${index * 80}ms` }}
          >
            {word}
          </span>
        ))}
      </h1>
    </section>
  );
}


================================================
FILE: apps/landing/src/components/sections/capsule/CapsuleUsecases.tsx
================================================
import { useMemo, useState } from "react";
import { ChevronDown, MessageSquareLock, ScanEye, Users } from "lucide-react";
import { useFadeInOnScroll } from "@/lib/useFadeInOnScroll";
import type { ComponentType } from "react";

function cx(...classes: Array<string | false | null | undefined>) {
  return classes.filter(Boolean).join(" ");
}

type Usecase = {
  title: string;
  description: string;
  icon: ComponentType<{ className?: string; strokeWidth?: number }>;
};

const usecases: Usecase[] = [
  {
    title: "Private AI Assistant",
    description:
      "Ask sensitive questions — financial, medical, legal — without your data being stored or shared. Your queries stay yours, protected by end-to-end encryption.",
    icon: MessageSquareLock,
  },
  {
    title: "Secure Image Analysis",
    description:
      "Upload encrypted photos for AI analysis. Medical scans, documents, personal photos — analyzed privately by GPT-4o vision, never stored on the server.",
    icon: ScanEye,
  },
  {
    title: "Team-Safe Communication",
    description:
      "Subscription-based access with intelligent rate limiting ensures fair usage. JWT authentication keeps every session isolated and accountable.",
    icon: Users,
  },
];

export function CapsuleUsecases() {
  const { ref: sectionRef, isVisible } = useFadeInOnScroll<HTMLElement>();
  const [activeIndex, setActiveIndex] = useState(0);

  const active = useMemo(() => usecases[activeIndex], [activeIndex]);

  return (
    <section ref={sectionRef} className='w-full h-[100vh]'>
      <div
        className={cx(
          "container mx-auto max-w-6xl px-8 md:px-10 py-16 transition-all duration-700 ease-out",
          "h-full flex flex-col",
          isVisible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-6",
        )}
      >
        <div className='mb-12 text-left'>
          <h2 className='mt-3 text-3xl font-bold tracking-tight md:text-4xl'>
            Use Cases{" "}
            <span className='text-neutral-500'>for Every Scenario</span>
          </h2>
        </div>

        <div className='flex w-full flex-1 flex-col gap-6 lg:flex-row min-h-0'>
          <div className='w-full lg:w-[30%] h-full min-h-0'>
            <div className='h-full overflow-auto'>
              {usecases.map((u, idx) => {
                const isOpen = idx === activeIndex;
                return (
                  <div key={u.title} className='border-b border-gray-500'>
                    <button
                      type='button'
                      onClick={() => setActiveIndex(idx)}
                      className={cx(
                        "flex w-full items-center justify-between gap-4 py-4 text-left cursor-pointer",
                        "focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
                      )}
                      aria-expanded={isOpen}
                      aria-controls={`capsule-usecase-panel-${idx}`}
                      id={`capsule-usecase-trigger-${idx}`}
                    >
                      <div className='min-w-0'>
                        <div className='text-base font-semibold leading-snug'>
                          {u.title}
                        </div>
                      </div>

                      <ChevronDown
                        className={cx(
                          "h-5 w-5 flex-none transition-transform duration-200",
                          isOpen ? "rotate-180" : "rotate-0",
                        )}
                        aria-hidden='true'
                      />
                    </button>

                    <div
                      id={`capsule-usecase-panel-${idx}`}
                      role='region'
                      aria-labelledby={`capsule-usecase-trigger-${idx}`}
                      className={cx(
                        "overflow-hidden transition-[max-height] duration-300 ease-out",
                        isOpen ? "max-h-40" : "max-h-0",
                      )}
                    >
                      <div
                        className={cx(
                          "pb-4 text-sm text-muted-foreground transition-opacity duration-300 ease-out",
                          isOpen ? "opacity-100" : "opacity-0",
                        )}
                      >
                        {u.description}
                      </div>
                    </div>
                  </div>
                );
              })}
            </div>
          </div>

          <div className='relative w-full lg:w-[70%] h-full min-h-0'>
            <div className='absolute inset-0 flex items-center justify-center bg-gradient-to-br from-white/5 to-white/0 border border-white/10'>
              <active.icon
                className='h-32 w-32 text-white/20 transition-all duration-500'
                strokeWidth={1}
              />
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}


================================================
FILE: apps/landing/src/components/sections/capsule/EncryptionFlowIllustration.tsx
================================================
function EncryptionFlowIllustration() {
  return (
    <svg
      viewBox='0 0 900 360'
      className='h-full w-full'
      role='img'
      aria-label='Encryption flow diagram showing Client to Server to AI'
    >
      <defs>
        {/* Subtle dot grid instead of lines — cleaner, more tactical */}
        <pattern
          id='dot-grid'
          width='24'
          height='24'
          patternUnits='userSpaceOnUse'
        >
          <circle cx='0.5' cy='0.5' r='0.5' fill='rgba(255,255,255,0.07)' />
        </pattern>

        {/* Scanline overlay */}
        <pattern
          id='scanlines'
          width='4'
          height='4'
          patternUnits='userSpaceOnUse'
        >
          <line
            x1='0'
            y1='0'
            x2='4'
            y2='0'
            stroke='rgba(255,255,255,0.015)'
            strokeWidth='1'
          />
        </pattern>

        {/* Glow filter for nodes */}
        <filter id='node-glow' x='-50%' y='-50%' width='200%' height='200%'>
          <feGaussianBlur in='SourceGraphic' stdDeviation='6' result='blur' />
          <feComposite in='SourceGraphic' in2='blur' operator='over' />
        </filter>

        {/* Ping pulse filter */}
        <filter id='ping-blur' x='-100%' y='-100%' width='300%' height='300%'>
          <feGaussianBlur stdDeviation='3' />
        </filter>

        <style>
          {`
            @keyframes dash-flow {
              to { stroke-dashoffset: -36; }
            }
            @keyframes pulse-ring {
              0% { r: 36; opacity: 0.3; }
              100% { r: 56; opacity: 0; }
            }
            @keyframes packet-pulse {
              0%, 100% { opacity: 0.9; }
              50% { opacity: 0.4; }
            }
            @keyframes status-blink {
              0%, 90% { opacity: 1; }
              95% { opacity: 0.2; }
              100% { opacity: 1; }
            }
            .flow-line {
              stroke: rgba(255,255,255,0.1);
              stroke-width: 1;
              fill: none;
            }
            .flow-dash {
              stroke: rgba(255,255,255,0.3);
              stroke-dasharray: 6 12;
              stroke-width: 1;
              fill: none;
              animation: dash-flow 2s linear infinite;
            }
            .node-label {
              font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
              letter-spacing: 0.08em;
              text-transform: uppercase;
            }
            .status-dot {
              animation: status-blink 3s ease-in-out infinite;
            }
          `}
        </style>

        {/* Main route path */}
        <path
          id='main-route'
          d='M150,180 C260,180 310,120 450,120 C590,120 640,180 750,180'
        />

        {/* Return route (faint) */}
        <path
          id='return-route'
          d='M750,180 C640,180 590,240 450,240 C310,240 260,180 150,180'
        />
      </defs>

      {/* Background layers */}
      <rect width='900' height='360' fill='url(#dot-grid)' />
      <rect width='900' height='360' fill='url(#scanlines)' />

      {/* Coordinate markers — subtle tactical framing */}
      <text
        x='16'
        y='20'
        fill='rgba(255,255,255,0.1)'
        fontSize='8'
        fontFamily='monospace'
      >
        00:00
      </text>
      <text
        x='860'
        y='20'
        fill='rgba(255,255,255,0.1)'
        fontSize='8'
        fontFamily='monospace'
        textAnchor='end'
      >
        SEC.FLOW
      </text>
      <text
        x='16'
        y='352'
        fill='rgba(255,255,255,0.1)'
        fontSize='8'
        fontFamily='monospace'
      >
        E2E.ENC
      </text>

      {/* Corner brackets — military HUD style */}
      {/* Top-left */}
      <path
        d='M8,28 L8,8 L28,8'
        fill='none'
        stroke='rgba(255,255,255,0.08)'
        strokeWidth='1'
      />
      {/* Top-right */}
      <path
        d='M872,8 L892,8 L892,28'
        fill='none'
        stroke='rgba(255,255,255,0.08)'
        strokeWidth='1'
      />
      {/* Bottom-left */}
      <path
        d='M8,332 L8,352 L28,352'
        fill='none'
        stroke='rgba(255,255,255,0.08)'
        strokeWidth='1'
      />
      {/* Bottom-right */}
      <path
        d='M872,352 L892,352 L892,332'
        fill='none'
        stroke='rgba(255,255,255,0.08)'
        strokeWidth='1'
      />

      {/* Connection lines — forward route */}
      <use href='#main-route' className='flow-line' />
      <use href='#main-route' className='flow-dash' />

      {/* Return route — barely visible */}
      <path
        d='M750,180 C640,180 590,240 450,240 C310,240 260,180 150,180'
        stroke='rgba(255,255,255,0.04)'
        strokeWidth='1'
        strokeDasharray='2 16'
        fill='none'
      />

      {/* Animated packet — forward */}
      <g>
        <g style={{ animation: "packet-pulse 1.5s ease-in-out infinite" }}>
          <rect
            width='12'
            height='4'
            rx='1'
            fill='rgba(255,255,255,0.6)'
            x='-6'
            y='-2'
          >
            <animateMotion dur='3.5s' repeatCount='indefinite'>
              <mpath href='#main-route' />
            </animateMotion>
          </rect>
          <rect
            width='12'
            height='4'
            rx='1'
            fill='rgba(255,255,255,0.15)'
            x='-6'
            y='-2'
            filter='url(#ping-blur)'
          >
            <animateMotion dur='3.5s' repeatCount='indefinite'>
              <mpath href='#main-route' />
            </animateMotion>
          </rect>
        </g>
      </g>

      {/* Second packet — staggered */}
      <g opacity='0.4'>
        <rect width='6' height='2' rx='1' fill='rgba(255,255,255,0.5)'>
          <animateMotion dur='3.5s' repeatCount='indefinite' begin='1.75s'>
            <mpath href='#main-route' />
          </animateMotion>
        </rect>
      </g>

      {/* ==================== CLIENT NODE ==================== */}
      <g transform='translate(150,180)'>
        {/* Pulse ring */}
        <circle
          r='36'
          fill='none'
          stroke='rgba(255,255,255,0.15)'
          strokeWidth='0.5'
        >
          <animate
            attributeName='r'
            values='36;56'
            dur='3s'
            repeatCount='indefinite'
          />
          <animate
            attributeName='opacity'
            values='0.3;0'
            dur='3s'
            repeatCount='indefinite'
          />
        </circle>

        {/* Crosshair marks */}
        <line
          x1='-44'
          y1='0'
          x2='-38'
          y2='0'
          stroke='rgba(255,255,255,0.15)'
          strokeWidth='0.5'
        />
        <line
          x1='38'
          y1='0'
          x2='44'
          y2='0'
          stroke='rgba(255,255,255,0.15)'
          strokeWidth='0.5'
        />
        <line
          x1='0'
          y1='-44'
          x2='0'
          y2='-38'
          stroke='rgba(255,255,255,0.15)'
          strokeWidth='0.5'
        />
        <line
          x1='0'
          y1='38'
          x2='0'
          y2='44'
          stroke='rgba(255,255,255,0.15)'
          strokeWidth='0.5'
        />

        {/* Main circle */}
        <circle
          r='36'
          fill='rgba(255,255,255,0.03)'
          stroke='rgba(255,255,255,0.2)'
          strokeWidth='1'
        />

        {/* Inner ring */}
        <circle
          r='28'
          fill='none'
          stroke='rgba(255,255,255,0.06)'
          strokeWidth='0.5'
          strokeDasharray='2 4'
        />

        {/* Label */}
        <text
          textAnchor='middle'
          y='4'
          fill='rgba(255,255,255,0.85)'
          fontSize='11'
          className='node-label'
        >
          Client
        </text>

        {/* Status */}
        <g transform='translate(0,60)'>
          <circle
            cx='-18'
            cy='0'
            r='2'
            fill='rgba(255,255,255,0.5)'
            className='status-dot'
          />
          <text
            x='-10'
            y='3'
            fill='rgba(255,255,255,0.3)'
            fontSize='9'
            fontFamily='monospace'
            letterSpacing='0.05em'
          >
            ENCRYPT
          </text>
        </g>
      </g>

      {/* ==================== SERVER NODE ==================== */}
      <g transform='translate(450,120)'>
        {/* Pulse ring */}
        <circle
          r='36'
          fill='none'
          stroke='rgba(255,255,255,0.15)'
          strokeWidth='0.5'
        >
          <animate
            attributeName='r'
            values='36;56'
            dur='3s'
            begin='1s'
            repeatCount='indefinite'
          />
          <animate
            attributeName='opacity'
            values='0.3;0'
            dur='3s'
            begin='1s'
            repeatCount='indefinite'
          />
        </circle>

        {/* Crosshair marks */}
        <line
          x1='-44'
          y1='0'
          x2='-38'
          y2='0'
          stroke='rgba(255,255,255,0.15)'
          strokeWidth='0.5'
        />
        <line
          x1='38'
          y1='0'
          x2='44'
          y2='0'
          stroke='rgba(255,255,255,0.15)'
          strokeWidth='0.5'
        />
        <line
          x1='0'
          y1='-44'
          x2='0'
          y2='-38'
          stroke='rgba(255,255,255,0.15)'
          strokeWidth='0.5'
        />
        <line
          x1='0'
          y1='38'
          x2='0'
          y2='44'
          stroke='rgba(255,255,255,0.15)'
          strokeWidth='0.5'
        />

        {/* Main circle */}
        <circle
          r='36'
          fill='rgba(255,255,255,0.03)'
          stroke='rgba(255,255,255,0.25)'
          strokeWidth='1'
        />

        {/* Inner ring */}
        <circle
          r='28'
          fill='none'
          stroke='rgba(255,255,255,0.06)'
          strokeWidth='0.5'
          strokeDasharray='2 4'
        />

        {/* Lock icon — refined */}
        <rect
          x='-5'
          y='-2'
          width='10'
          height='8'
          rx='1.5'
          fill='rgba(255,255,255,0.15)'
          stroke='rgba(255,255,255,0.5)'
          strokeWidth='0.8'
        />
        <path
          d='M-2.5,-2 L-2.5,-6 A2.5,2.5 0 0,1 2.5,-6 L2.5,-2'
          fill='none'
          stroke='rgba(255,255,255,0.5)'
          strokeWidth='0.8'
        />
        <circle cx='0' cy='2' r='1' fill='rgba(255,255,255,0.4)' />

        {/* Label */}
        <text
          textAnchor='middle'
          y='18'
          fill='rgba(255,255,255,0.85)'
          fontSize='11'
          className='node-label'
        >
          Capsule
        </text>

        {/* Status */}
        <g transform='translate(0,60)'>
          <circle
            cx='-18'
            cy='0'
            r='2'
            fill='rgba(255,255,255,0.5)'
            className='status-dot'
          />
          <text
            x='-10'
            y='3'
            fill='rgba(255,255,255,0.3)'
            fontSize='9'
            fontFamily='monospace'
            letterSpacing='0.05em'
          >
            PROCESS
          </text>
        </g>
      </g>

      {/* ==================== AI NODE ==================== */}
      <g transform='translate(750,180)'>
        {/* Pulse ring */}
        <circle
          r='36'
          fill='none'
          stroke='rgba(255,255,255,0.15)'
          strokeWidth='0.5'
        >
          <animate
            attributeName='r'
            values='36;56'
            dur='3s'
            begin='2s'
            repeatCount='indefinite'
          />
          <animate
            attributeName='opacity'
            values='0.3;0'
            dur='3s'
            begin='2s'
            repeatCount='indefinite'
          />
        </circle>

        {/* Crosshair marks */}
        <line
          x1='-44'
          y1='0'
          x2='-38'
          y2='0'
          stroke='rgba(255,255,255,0.15)'
          strokeWidth='0.5'
        />
        <line
          x1='38'
          y1='0'
          x2='44'
          y2='0'
          stroke='rgba(255,255,255,0.15)'
          strokeWidth='0.5'
        />
        <line
          x1='0'
          y1='-44'
          x2='0'
          y2='-38'
          stroke='rgba(255,255,255,0.15)'
          strokeWidth='0.5'
        />
        <line
          x1='0'
          y1='38'
          x2='0'
          y2='44'
          stroke='rgba(255,255,255,0.15)'
          strokeWidth='0.5'
        />

        {/* Main circle */}
        <circle
          r='36'
          fill='rgba(255,255,255,0.03)'
          stroke='rgba(255,255,255,0.2)'
          strokeWidth='1'
        />

        {/* Inner ring */}
        <circle
          r='28'
          fill='none'
          stroke='rgba(255,255,255,0.06)'
          strokeWidth='0.5'
          strokeDasharray='2 4'
        />

        {/* Label */}
        <text
          textAnchor='middle'
          y='4'
          fill='rgba(255,255,255,0.85)'
          fontSize='11'
          className='node-label'
        >
          AI
        </text>

        {/* Status */}
        <g transform='translate(0,60)'>
          <circle
            cx='-20'
            cy='0'
            r='2'
            fill='rgba(255,255,255,0.5)'
            className='status-dot'
          />
          <text
            x='-12'
            y='3'
            fill='rgba(255,255,255,0.3)'
            fontSize='9'
            fontFamily='monospace'
            letterSpacing='0.05em'
          >
            RESPOND
          </text>
        </g>
      </g>

      {/* Midpoint labels on path */}
      <text
        x='290'
        y='145'
        fill='rgba(255,255,255,0.12)'
        fontSize='7'
        fontFamily='monospace'
        letterSpacing='0.1em'
      >
        TLS 1.3
      </text>
      <text
        x='590'
        y='145'
        fill='rgba(255,255,255,0.12)'
        fontSize='7'
        fontFamily='monospace'
        letterSpacing='0.1em'
      >
        AES-256
      </text>
    </svg>
  );
}

export default EncryptionFlowIllustration;


================================================
FILE: apps/landing/src/components/ui/alert-dialog.tsx
================================================
import * as React from "react";
import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";

import { cn } from "@/lib/utils";
import { buttonVariants } from "@/components/ui/button";

function AlertDialog({
  ...props
}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />;
}

function AlertDialogTrigger({
  ...props
}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
  return (
    <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
  );
}

function AlertDialogPortal({
  ...props
}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
  return (
    <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
  );
}

function AlertDialogOverlay({
  className,
  ...props
}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
  return (
    <AlertDialogPrimitive.Overlay
      data-slot="alert-dialog-overlay"
      className={cn(
        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
        className
      )}
      {...props}
    />
  );
}

function AlertDialogContent({
  className,
  ...props
}: React.ComponentProps<typeof AlertDialogPrimitive.Content>) {
  return (
    <AlertDialogPortal>
      <AlertDialogOverlay />
      <AlertDialogPrimitive.Content
        data-slot="alert-dialog-content"
        className={cn(
          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
          className
        )}
        {...props}
      />
    </AlertDialogPortal>
  );
}

function AlertDialogHeader({
  className,
  ...props
}: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="alert-dialog-header"
      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
      {...props}
    />
  );
}

function AlertDialogFooter({
  className,
  ...props
}: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="alert-dialog-footer"
      className={cn(
        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
        className
      )}
      {...props}
    />
  );
}

function AlertDialogTitle({
  className,
  ...props
}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
  return (
    <AlertDialogPrimitive.Title
      data-slot="alert-dialog-title"
      className={cn("text-lg font-semibold", className)}
      {...props}
    />
  );
}

function AlertDialogDescription({
  className,
  ...props
}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
  return (
    <AlertDialogPrimitive.Description
      data-slot="alert-dialog-description"
      className={cn("text-muted-foreground text-sm", className)}
      {...props}
    />
  );
}

function AlertDialogAction({
  className,
  ...props
}: React.ComponentProps<typeof AlertDialogPrimitive.Action>) {
  return (
    <AlertDialogPrimitive.Action
      className={cn(buttonVariants(), className)}
      {...props}
    />
  );
}

function AlertDialogCancel({
  className,
  ...props
}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) {
  return (
    <AlertDialogPrimitive.Cancel
      className={cn(buttonVariants({ variant: "outline" }), className)}
      {...props}
    />
  );
}

export {
  AlertDialog,
  AlertDialogPortal,
  AlertDialogOverlay,
  AlertDialogTrigger,
  AlertDialogContent,
  AlertDialogHeader,
  AlertDialogFooter,
  AlertDialogTitle,
  AlertDialogDescription,
  AlertDialogAction,
  AlertDialogCancel,
};


================================================
FILE: apps/landing/src/components/ui/button.tsx
================================================
import * as React from "react"
import { Slot } from "@radix-ui/react-slot"
import { cva, type VariantProps } from "class-variance-authority"

import { cn } from "@/lib/utils"

const buttonVariants = cva(
  "inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium transition-all cursor-pointer disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
  {
    variants: {
      variant: {
        default:
          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
        destructive:
          "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
        outline:
          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
        secondary:
          "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
        ghost:
          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
        link: "text-primary underline-offset-4 hover:underline",
      },
      size: {
        default: "h-9 px-4 py-2 has-[>svg]:px-3",
        sm: "h-8 gap-1.5 px-3 has-[>svg]:px-2.5",
        lg: "h-10 px-6 has-[>svg]:px-4",
        icon: "size-9",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "default",
    },
  }
)

function Button({
  className,
  variant,
  size,
  asChild = false,
  ...props
}: React.ComponentProps<"button"> &
  VariantProps<typeof buttonVariants> & {
    asChild?: boolean
  }) {
  const Comp = asChild ? Slot : "button"

  return (
    <Comp
      data-slot="button"
      className={cn(buttonVariants({ variant, size, className }))}
      {...props}
    />
  )
}

export { Button, buttonVariants }


================================================
FILE: apps/landing/src/components/ui/card.tsx
================================================
import * as React from "react";

import { cn } from "@/lib/utils";

function Card({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot='card'
      className={cn(
        "bg-card text-card-foreground flex flex-col gap-6 border py-6 shadow-sm",
        className,
      )}
      {...props}
    />
  );
}

function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot='card-header'
      className={cn(
        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
        className,
      )}
      {...props}
    />
  );
}

function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot='card-title'
      className={cn("leading-none font-semibold", className)}
      {...props}
    />
  );
}

function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot='card-description'
      className={cn("text-muted-foreground text-sm", className)}
      {...props}
    />
  );
}

function CardAction({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot='card-action'
      className={cn(
        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
        className,
      )}
      {...props}
    />
  );
}

function CardContent({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot='card-content'
      className={cn("px-6", className)}
      {...props}
    />
  );
}

function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot='card-footer'
      className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
      {...props}
    />
  );
}

export {
  Card,
  CardHeader,
  CardFooter,
  CardTitle,
  CardAction,
  CardDescription,
  CardContent,
};


================================================
FILE: apps/landing/src/components/ui/chart.tsx
================================================
import * as React from "react"
import * as RechartsPrimitive from "recharts"

import { cn } from "@/lib/utils"

// Format: { THEME_NAME: CSS_SELECTOR }
const THEMES = { light: "", dark: ".dark" } as const

export type ChartConfig = {
  [k in string]: {
    label?: React.ReactNode
    icon?: React.ComponentType
  } & (
    | { color?: string; theme?: never }
    | { color?: never; theme: Record<keyof typeof THEMES, string> }
  )
}

type ChartContextProps = {
  config: ChartConfig
}

const ChartContext = React.createContext<ChartContextProps | null>(null)

function useChart() {
  const context = React.useContext(ChartContext)

  if (!context) {
    throw new Error("useChart must be used within a <ChartContainer />")
  }

  return context
}

function ChartContainer({
  id,
  className,
  children,
  config,
  ...props
}: React.ComponentProps<"div"> & {
  config: ChartConfig
  children: React.ComponentProps<
    typeof RechartsPrimitive.ResponsiveContainer
  >["children"]
}) {
  const uniqueId = React.useId()
  const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`

  return (
    <ChartContext.Provider value={{ config }}>
      <div
        data-slot="chart"
        data-chart={chartId}
        className={cn(
          "[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex aspect-auto min-h-0 min-w-0 w-full max-w-full justify-center text-xs [&_.recharts-responsive-container]:!w-full [&_.recharts-responsive-container]:min-w-0 [&_.recharts-responsive-container]:max-w-full [&_.recharts-surface]:max-w-full [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden",
          className
        )}
        {...props}
      >
        <ChartStyle id={chartId} config={config} />
        <RechartsPrimitive.ResponsiveContainer
          width="100%"
          height="100%"
          minWidth={0}
        >
          {children}
        </RechartsPrimitive.ResponsiveContainer>
      </div>
    </ChartContext.Provider>
  )
}

const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
  const colorConfig = Object.entries(config).filter(
    ([, config]) => config.theme || config.color
  )

  if (!colorConfig.length) {
    return null
  }

  return (
    <style
      dangerouslySetInnerHTML={{
        __html: Object.entries(THEMES)
          .map(
            ([theme, prefix]) => `
${prefix} [data-chart=${id}] {
${colorConfig
  .map(([key, itemConfig]) => {
    const color =
      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||
      itemConfig.color
    return color ? `  --color-${key}: ${color};` : null
  })
  .join("\n")}
}
`
          )
          .join("\n"),
      }}
    />
  )
}

const ChartTooltip = RechartsPrimitive.Tooltip

function ChartTooltipContent({
  active,
  payload,
  className,
  indicator = "dot",
  hideLabel = false,
  hideIndicator = false,
  label,
  labelFormatter,
  labelClassName,
  formatter,
  color,
  nameKey,
  labelKey,
}: React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
  React.ComponentProps<"div"> & {
    hideLabel?: boolean
    hideIndicator?: boolean
    indicator?: "line" | "dot" | "dashed"
    nameKey?: string
    labelKey?: string
  }) {
  const { config } = useChart()

  const tooltipLabel = React.useMemo(() => {
    if (hideLabel || !payload?.length) {
      return null
    }

    const [item] = payload
    const key = `${labelKey || item?.dataKey || item?.name || "value"}`
    const itemConfig = getPayloadConfigFromPayload(config, item, key)
    const value =
      !labelKey && typeof label === "string"
        ? config[label as keyof typeof config]?.label || label
        : itemConfig?.label

    if (labelFormatter) {
      return (
        <div className={cn("font-medium", labelClassName)}>
          {labelFormatter(value, payload)}
        </div>
      )
    }

    if (!value) {
      return null
    }

    return <div className={cn("font-medium", labelClassName)}>{value}</div>
  }, [
    label,
    labelFormatter,
    payload,
    hideLabel,
    labelClassName,
    config,
    labelKey,
  ])

  if (!active || !payload?.length) {
    return null
  }

  const nestLabel = payload.length === 1 && indicator !== "dot"

  return (
    <div
      className={cn(
        "border-border/50 bg-background grid min-w-[8rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl",
        className
      )}
    >
      {!nestLabel ? tooltipLabel : null}
      <div className="grid gap-1.5">
        {payload
          .filter((item) => item.type !== "none")
          .map((item, index) => {
            const key = `${nameKey || item.name || item.dataKey || "value"}`
            const itemConfig = getPayloadConfigFromPayload(config, item, key)
            const indicatorColor = color || item.payload.fill || item.color

            return (
              <div
                key={item.dataKey}
                className={cn(
                  "[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5",
                  indicator === "dot" && "items-center"
                )}
              >
                {formatter && item?.value !== undefined && item.name ? (
                  formatter(item.value, item.name, item, index, item.payload)
                ) : (
                  <>
                    {itemConfig?.icon ? (
                      <itemConfig.icon />
                    ) : (
                      !hideIndicator && (
                        <div
                          className={cn(
                            "shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)",
                            {
                              "h-2.5 w-2.5": indicator === "dot",
                              "w-1": indicator === "line",
                              "w-0 border-[1.5px] border-dashed bg-transparent":
                                indicator === "dashed",
                              "my-0.5": nestLabel && indicator === "dashed",
                            }
                          )}
                          style={
                            {
                              "--color-bg": indicatorColor,
                              "--color-border": indicatorColor,
                            } as React.CSSProperties
                          }
                        />
                      )
                    )}
                    <div
                      className={cn(
                        "flex flex-1 justify-between leading-none",
                        nestLabel ? "items-end" : "items-center"
                      )}
                    >
                      <div className="grid gap-1.5">
                        {nestLabel ? tooltipLabel : null}
                        <span className="text-muted-foreground">
                          {itemConfig?.label || item.name}
                        </span>
                      </div>
                      {item.value && (
                        <span className="text-foreground font-mono font-medium tabular-nums">
                          {item.value.toLocaleString()}
                        </span>
                      )}
                    </div>
                  </>
                )}
              </div>
            )
          })}
      </div>
    </div>
  )
}

const ChartLegend = RechartsPrimitive.Legend

function ChartLegendContent({
  className,
  hideIcon = false,
  payload,
  verticalAlign = "bottom",
  nameKey,
}: React.ComponentProps<"div"> &
  Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
    hideIcon?: boolean
    nameKey?: string
  }) {
  const { config } = useChart()

  if (!payload?.length) {
    return null
  }

  return (
    <div
      className={cn(
        "flex flex-wrap items-center justify-center gap-x-4 gap-y-2",
        verticalAlign === "top" ? "pb-3" : "pt-3",
        className
      )}
    >
      {payload
        .filter((item) => item.type !== "none")
        .map((item) => {
          const key = `${nameKey || item.dataKey || "value"}`
          const itemConfig = getPayloadConfigFromPayload(config, item, key)

          return (
            <div
              key={item.value}
              className={cn(
                "[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3"
              )}
            >
              {itemConfig?.icon && !hideIcon ? (
                <itemConfig.icon />
              ) : (
                <div
                  className="h-2 w-2 shrink-0 rounded-[2px]"
                  style={{
                    backgroundColor: item.color,
                  }}
                />
              )}
              {itemConfig?.label}
            </div>
          )
        })}
    </div>
  )
}

// Helper to extract item config from a payload.
function getPayloadConfigFromPayload(
  config: ChartConfig,
  payload: unknown,
  key: string
) {
  if (typeof payload !== "object" || payload === null) {
    return undefined
  }

  const payloadPayload =
    "payload" in payload &&
    typeof payload.payload === "object" &&
    payload.payload !== null
      ? payload.payload
      : undefined

  let configLabelKey: string = key

  if (
    key in payload &&
    typeof payload[key as keyof typeof payload] === "string"
  ) {
    configLabelKey = payload[key as keyof typeof payload] as string
  } else if (
    payloadPayload &&
    key in payloadPayload &&
    typeof payloadPayload[key as keyof typeof payloadPayload] === "string"
  ) {
    configLabelKey = payloadPayload[
      key as keyof typeof payloadPayload
    ] as string
  }

  return configLabelKey in config
    ? config[configLabelKey]
    : config[key as keyof typeof config]
}

export {
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
  ChartLegend,
  ChartLegendContent,
  ChartStyle,
}


================================================
FILE: apps/landing/src/components/ui/navigation-menu.tsx
================================================
import * as React from "react";
import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
import { cva } from "class-variance-authority";
import { ChevronDownIcon } from "lucide-react";

import { cn } from "@/lib/utils";

function NavigationMenu({
  className,
  children,
  viewport = true,
  ...props
}: React.ComponentProps<typeof NavigationMenuPrimitive.Root> & {
  viewport?: boolean;
}) {
  return (
    <NavigationMenuPrimitive.Root
      data-slot='navigation-menu'
      data-viewport={viewport}
      className={cn(
        "group/navigation-menu relative flex max-w-max flex-1 items-center justify-center",
        className,
      )}
      {...props}
    >
      {children}
      {viewport && <NavigationMenuViewport />}
    </NavigationMenuPrimitive.Root>
  );
}

function NavigationMenuList({
  className,
  ...props
}: React.ComponentProps<typeof NavigationMenuPrimitive.List>) {
  return (
    <NavigationMenuPrimitive.List
      data-slot='navigation-menu-list'
      className={cn(
        "group flex flex-1 list-none items-center justify-center gap-0",
        className,
      )}
      {...props}
    />
  );
}

function NavigationMenuItem({
  className,
  ...props
}: React.ComponentProps<typeof NavigationMenuPrimitive.Item>) {
  return (
    <NavigationMenuPrimitive.Item
      data-slot='navigation-menu-item'
      className={cn("relative", className)}
      {...props}
    />
  );
}

const navigationMenuTriggerStyle = cva(
  "group inline-flex h-9 w-max items-center justify-center bg-background px-4 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50 focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1",
);

function NavigationMenuTrigger({
  className,
  children,
  ...props
}: React.ComponentProps<typeof NavigationMenuPrimitive.Trigger>) {
  return (
    <NavigationMenuPrimitive.Trigger
      data-slot='navigation-menu-trigger'
      className={cn(navigationMenuTriggerStyle(), "group", className)}
      {...props}
    >
      {children}{" "}
      <ChevronDownIcon
        className='relative top-[1px] ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180'
        aria-hidden='true'
      />
    </NavigationMenuPrimitive.Trigger>
  );
}

function NavigationMenuContent({
  className,
  ...props
}: React.ComponentProps<typeof NavigationMenuPrimitive.Content>) {
  return (
    <NavigationMenuPrimitive.Content
      data-slot='navigation-menu-content'
      className={cn(
        "data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 top-0 left-0 w-full p-2 pr-2.5 md:absolute md:w-auto",
        "group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:duration-200 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none",
        className,
      )}
      {...props}
    />
  );
}

function NavigationMenuViewport({
  className,
  ...props
}: React.ComponentProps<typeof NavigationMenuPrimitive.Viewport>) {
  return (
    <div
      className={cn(
        "absolute top-full left-0 isolate z-50 flex justify-center",
      )}
    >
      <NavigationMenuPrimitive.Viewport
        data-slot='navigation-menu-viewport'
        className={cn(
          "origin-top-center bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden border shadow md:w-[var(--radix-navigation-menu-viewport-width)]",
          className,
        )}
        {...props}
      />
    </div>
  );
}

function NavigationMenuLink({
  className,
  ...props
}: React.ComponentProps<typeof NavigationMenuPrimitive.Link>) {
  return (
    <NavigationMenuPrimitive.Link
      data-slot='navigation-menu-link'
      className={cn(
        "data-[active=true]:focus:bg-accent data-[active=true]:hover:bg-accent data-[active=true]:bg-accent/50 data-[active=true]:text-accent-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus-visible:ring-ring/50 [&_svg:not([class*='text-'])]:text-muted-foreground flex flex-col gap-1 p-2 text-sm transition-all outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4",
        className,
      )}
      {...props}
    />
  );
}

function NavigationMenuIndicator({
  className,
  ...props
}: React.ComponentProps<typeof NavigationMenuPrimitive.Indicator>) {
  return (
    <NavigationMenuPrimitive.Indicator
      data-slot='navigation-menu-indicator'
      className={cn(
        "data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden",
        className,
      )}
      {...props}
    >
      <div className='bg-border relative top-[60%] h-2 w-2 rotate-45 shadow-md' />
    </NavigationMenuPrimitive.Indicator>
  );
}

export {
  NavigationMenu,
  NavigationMenuList,
  NavigationMenuItem,
  NavigationMenuContent,
  NavigationMenuTrigger,
  NavigationMenuLink,
  NavigationMenuIndicator,
  NavigationMenuViewport,
  navigationMenuTriggerStyle,
};


================================================
FILE: apps/landing/src/components/ui/sonner.tsx
================================================
import {
  CircleCheckIcon,
  InfoIcon,
  Loader2Icon,
  OctagonXIcon,
  TriangleAlertIcon,
} from "lucide-react"
import { useTheme } from "next-themes"
import { Toaster as Sonner, type ToasterProps } from "sonner"

const Toaster = ({ ...props }: ToasterProps) => {
  const { theme = "system" } = useTheme()

  return (
    <Sonner
      theme={theme as ToasterProps["theme"]}
      className="toaster group"
      icons={{
        success: <CircleCheckIcon className="size-4" />,
        info: <InfoIcon className="size-4" />,
        warning: <TriangleAlertIcon className="size-4" />,
        error: <OctagonXIcon className="size-4" />,
        loading: <Loader2Icon className="size-4 animate-spin" />,
      }}
      style={
        {
          "--normal-bg": "var(--popover)",
          "--normal-text": "var(--popover-foreground)",
          "--normal-border": "var(--border)",
          "--border-radius": "var(--radius)",
        } as React.CSSProperties
      }
      {...props}
    />
  )
}

export { Toaster }


================================================
FILE: apps/landing/src/contexts/AuthContext.tsx
================================================
import {
  createContext,
  useContext,
  useEffect,
  useState,
  type ReactNode,
} from "react";
import type { User, Session } from "@supabase/supabase-js";
import { supabase } from "@/lib/supabase";

interface AuthContextType {
  user: User | null;
  session: Session | null;
  loading: boolean;
  signInWithGoogle: () => Promise<void>;
  signOut: () => Promise<void>;
}

const AuthContext = createContext<AuthContextType | undefined>(undefined);

export function AuthProvider({ children }: { children: ReactNode }) {
  const [user, setUser] = useState<User | null>(null);
  const [session, setSession] = useState<Session | null>(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    supabase.auth.getSession().then(({ data: { session } }) => {
      setSession(session);
      setUser(session?.user ?? null);
      setLoading(false);
    });

    const {
      data: { subscription },
    } = supabase.auth.onAuthStateChange((_event, session) => {
      setSession(session);
      setUser(session?.user ?? null);
      setLoading(false);
    });

    return () => subscription.unsubscribe();
  }, []);

  const signInWithGoogle = async () => {
    const { error } = await supabase.auth.signInWithOAuth({
      provider: "google",
      options: {
        redirectTo: window.location.origin,
      },
    });
    if (error) {
      console.error("Error signing in with Google:", error.message);
    }
  };

  const signOut = async () => {
    const { error } = await supabase.auth.signOut();
    if (error) {
      console.error("Error signing out:", error.message);
    }
  };

  return (
    <AuthContext.Provider
      value={{ user, session, loading, signInWithGoogle, signOut }}
    >
      {children}
    </AuthContext.Provider>
  );
}

export function useAuth() {
  const context = useContext(AuthContext);
  if (context === undefined) {
    throw new Error("useAuth must be used within an AuthProvider");
  }
  return context;
}


================================================
FILE: apps/landing/src/hooks/useUsageData.ts
================================================
import { useEffect, useState } from "react";
import { supabase } from "@/lib/supabase";
import type { User } from "@supabase/supabase-js";

export interface DailyUsage {
  date: string;
  turnBytes: number;
  tunnelBytes: number;
  capsuleRequests: number;
  capsuleImageRequests: number;
  capsuleInputTokens: number;
  capsuleOutputTokens: number;
}

function getThirtyDaysAgo(): string {
  const d = new Date();
  d.setDate(d.getDate() - 30);
  return d.toISOString().split("T")[0];
}

function toDateKey(value: string): string {
  return value.split("T")[0];
}

export function useUsageData(user: User | null) {
  const [data, setData] = useState<DailyUsage[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    if (!user) {
      setLoading(false);
      return;
    }

    const fetchUsage = async () => {
      setLoading(true);
      const since = getThirtyDaysAgo();

      const [turnRes, tunnelRes, capsuleRes] = await Promise.all([
        supabase
          .from("turn_usage_periods")
          .select("period_start, egress_bytes, ingress_bytes")
          .eq("user_id", user.id)
          .gte("period_start", since),
        supabase
          .from("tunnel_usage")
          .select("recorded_at, inbound_bytes, outbound_bytes")
          .eq("user_id", user.id)
          .gte("recorded_at", since),
        supabase
          .from("enclave_usage")
          .select("date, request_count, input_tokens, output_tokens, image_requests")
          .eq("user_id", user.id)
          .gte("date", since),
      ]);

      const map = new Map<string, DailyUsage>();

      const getOrCreate = (date: string): DailyUsage => {
        let entry = map.get(date);
        if (!entry) {
          entry = {
            date,
            turnBytes: 0,
            tunnelBytes: 0,
            capsuleRequests: 0,
            capsuleImageRequests: 0,
            capsuleInputTokens: 0,
            capsuleOutputTokens: 0,
          };
          map.set(date, entry);
        }
        return entry;
      };

      if (turnRes.data) {
        for (const row of turnRes.data) {
          const entry = getOrCreate(toDateKey(row.period_start));
          entry.turnBytes += Number(row.egress_bytes) + Number(row.ingress_bytes);
        }
      }

      if (tunnelRes.data) {
        for (const row of tunnelRes.data) {
          const entry = getOrCreate(toDateKey(row.recorded_at));
          entry.tunnelBytes += Number(row.inbound_bytes) + Number(row.outbound_bytes);
        }
      }

      if (capsuleRes.data) {
        for (const row of capsuleRes.data) {
          const entry = getOrCreate(row.date);
          entry.capsuleRequests += row.request_count;
          entry.capsuleImageRequests += row.image_requests;
          entry.capsuleInputTokens += row.input_tokens;
          entry.capsuleOutputTokens += row.output_tokens;
        }
      }

      // Fill in missing dates so the chart has continuous x-axis
      const today = new Date();
      const start = new Date(since);
      for (let d = new Date(start); d <= today; d.setDate(d.getDate() + 1)) {
        const key = d.toISOString().split("T")[0];
        getOrCreate(key);
      }

      const sorted = Array.from(map.values()).sort((a, b) =>
        a.date.localeCompare(b.date),
      );

      setData(sorted);
      setLoading(false);
    };

    fetchUsage();
  }, [user]);

  return { data, loading };
}


================================================
FILE: apps/landing/src/index.css
================================================
@import "tailwindcss";
@import "tw-animate-css";

@import "tailwindcss";
@import "tw-animate-css";

@tailwind utilities;

@custom-variant dark (&:is(.dark *));

:root {
  --background: oklch(0 0 0);
  --foreground: oklch(1 0 0);
  --card: oklch(0.205 0 0);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.205 0 0);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.922 0 0);
  --primary-foreground: oklch(0.205 0 0);
  --secondary: oklch(0.269 0 0);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.269 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --accent: oklch(0.269 0 0);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.704 0.191 22.216);
  --destructive-foreground: oklch(0.637 0.237 25.331);
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 15%);
  --ring: oklch(0.556 0 0);
  --chart-1: oklch(0.488 0.243 264.376);
  --chart-2: oklch(0.696 0.17 162.48);
  --chart-3: oklch(0.769 0.188 70.08);
  --chart-4: oklch(0.627 0.265 303.9);
  --chart-5: oklch(0.645 0.246 16.439);
  --radius: 0.625rem;
  --sidebar: oklch(0.205 0 0);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.488 0.243 264.376);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.269 0 0);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(1 0 0 / 10%);
  --sidebar-ring: oklch(0.556 0 0);
}

.dark {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.205 0 0);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.205 0 0);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.922 0 0);
  --primary-foreground: oklch(0.205 0 0);
  --secondary: oklch(0.269 0 0);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.269 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --accent: oklch(0.269 0 0);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.704 0.191 22.216);
  --destructive-foreground: oklch(0.637 0.237 25.331);
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 15%);
  --ring: oklch(0.556 0 0);
  --chart-1: oklch(0.488 0.243 264.376);
  --chart-2: oklch(0.696 0.17 162.48);
  --chart-3: oklch(0.769 0.188 70.08);
  --chart-4: oklch(0.627 0.265 303.9);
  --chart-5: oklch(0.645 0.246 16.439);
  --sidebar: oklch(0.205 0 0);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.488 0.243 264.376);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.269 0 0);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(1 0 0 / 10%);
  --sidebar-ring: oklch(0.556 0 0);
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
}
html,
body,
#root {
  width: 100%;
  height: 100%;
}

body {
  -ms-overflow-style: none;
}

::-webkit-scrollbar {
  display: none;
}


================================================
FILE: apps/landing/src/lib/billing.ts
================================================
export async function cancelSubscription(accessToken: string) {
  const response = await fetch(
    `${import.meta.env.VITE_SUPABASE_URL}/functions/v1/cancel-subscription`,
    {
      method: "POST",
      headers: {
        Authorization: `Bearer ${accessToken}`,
        "Content-Type": "application/json",
        apikey: import.meta.env.VITE_SUPABASE_ANON_KEY,
      },
    },
  );

  const data = await response.json();

  if (!response.ok) {
    throw new Error(data.error || "Failed to cancel subscription");
  }

  return data;
}


================================================
FILE: apps/landing/src/lib/supabase.ts
================================================
import { createClient } from "@supabase/supabase-js";

const supabaseUrl = import.meta.env.VITE_SUPABASE_URL;
const supabaseAnonKey = import.meta.env.VITE_SUPABASE_ANON_KEY;

if (!supabaseUrl || !supabaseAnonKey) {
  throw new Error("Missing Supabase environment variables");
}

export const supabase = createClient(supabaseUrl, supabaseAnonKey);


================================================
FILE: apps/landing/src/lib/theatre.ts
================================================
import { getProject } from "@theatre/core";

const project = getProject("VesselLanding");

export const heroSheet = project.sheet("HeroScene");


================================================
FILE: apps/landing/src/lib/useFadeInOnScroll.ts
================================================
import { useEffect, useRef, useState } from "react";

/**
 * Returns a ref and visibility flag that turns true once the element enters the viewport.
 */
export function useFadeInOnScroll<T extends HTMLElement>() {
  const ref = useRef<T | null>(null);
  const [isVisible, setIsVisible] = useState(false);

  useEffect(() => {
    const node = ref.current;
    if (!node || isVisible) return;

    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            setIsVisible(true);
            observer.unobserve(entry.target);
          }
        });
      },
      { threshold: 0.2 },
    );

    observer.observe(node);
    return () => observer.disconnect();
  }, [isVisible]);

  return { ref, isVisible };
}


================================================
FILE: apps/landing/src/lib/utils.ts
================================================
import { clsx, type ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}


================================================
FILE: apps/landing/src/main.tsx
================================================
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.tsx'
import { AuthProvider } from './contexts/AuthContext'

async function init() {
  if (import.meta.env.DEV) {
    const { default: studio } = await import("@theatre/studio");
    studio.initialize();
  }

  createRoot(document.getElementById('root')!).render(
    <StrictMode>
      <AuthProvider>
        <App />
      </AuthProvider>
    </StrictMode>,
  );
}

init();


================================================
FILE: apps/landing/src/pages/Capsule.tsx
================================================
import { Navbar } from "@/components/Navbar";
import { Footer } from "@/components/Footer";
import { CapsuleHero } from "@/components/sections/capsule/CapsuleHero";
import { CapsuleSubheading } from "@/components/sections/capsule/CapsuleSubheading";
import { CapsuleFeatures } from "@/components/sections/capsule/CapsuleFeatures";
import { CapsuleHowItWorks } from "@/components/sections/capsule/CapsuleHowItWorks";
import { CapsuleArchitecture } from "@/components/sections/capsule/CapsuleArchitecture";
import { CapsuleFaq } from "@/components/sections/capsule/CapsuleFaq";
import { CapsuleFooterCta } from "@/components/sections/capsule/CapsuleFooterCta";

function CapsulePage() {
  return (
    <>
      <Navbar />
      <main className='w-screen bg-background text-foreground'>
        <CapsuleHero />
        <CapsuleSubheading />
        <CapsuleFeatures />
        <CapsuleHowItWorks />
        <CapsuleArchitecture />
        <CapsuleFaq />
        <CapsuleFooterCta />
      </main>
      <Footer />
    </>
  );
}

export default CapsulePage;


================================================
FILE: apps/landing/src/pages/CheckoutSuccess.tsx
================================================
import { useEffect, useRef, useState } from "react";
import { useNavigate, useSearchParams } from "react-router";
import { Navbar } from "@/components/Navbar";
import { Footer } from "@/components/Footer";
import { Button } from "@/components/ui/button";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { CheckCircle2, Loader2, XCircle } from "lucide-react";
import { useAuth } from "@/contexts/AuthContext";
import { supabase } from "@/lib/supabase";

type SubscriptionStatus = "loading" | "active" | "pending" | "error";

const MAX_POLLS = 10;
const POLL_INTERVAL = 2000;

export default function CheckoutSuccessPage() {
  const navigate = useNavigate();
  const [searchParams] = useSearchParams();
  const { user, loading: authLoading } = useAuth();
  const [status, setStatus] = useState<SubscriptionStatus>("loading");

  const checkoutId = searchParams.get("checkout_id");
  const pollCountRef = useRef(0);
  const timeoutRef = useRef<number | null>(null);

  const checkSubscription = async () => {
    if (!user) return;

    try {
      const { data, error } = await supabase
        .from("billing_subscriptions")
        .select("status")
        .eq("user_id", user.id)
        .eq("status", "active")
        .limit(1)
        .maybeSingle();

      if (error) {
        console.error("Error checking subscription:", error);
        setStatus("error");
        return;
      }

      if (data) {
        setStatus("active");
        return;
      }

      pollCountRef.current += 1;

      if (pollCountRef.current < MAX_POLLS) {
        timeoutRef.current = window.setTimeout(
          checkSubscription,
          POLL_INTERVAL,
        );
      } else {
        setStatus("pending");
      }
    } catch (err) {
      console.error("Unexpected error:", err);
      setStatus("error");
    }
  };

  useEffect(() => {
    if (authLoading) return;

    if (!user) {
      navigate("/login");
      return;
    }

    pollCountRef.current = 0;
    checkSubscription();

    return () => {
      if (timeoutRef.current) {
        clearTimeout(timeoutRef.current);
      }
    };
  }, [user, authLoading, navigate]);

  const handleRetry = () => {
    if (timeoutRef.current) {
      clearTimeout(timeoutRef.current);
    }
    pollCountRef.current = 0;
    setStatus("loading");
    checkSubscription();
  };

  if (authLoading) {
    return (
      <div className='min-h-screen flex items-center justify-center bg-background'>
        <Loader2 className='h-8 w-8 animate-spin text-muted-foreground' />
      </div>
    );
  }

  return (
    <>
      <Navbar />
      <main className='min-h-screen pt-20 px-4'>
        <div className='max-w-lg mx-auto mt-16'>
          <Card className='bg-black'>
            <CardHeader className='text-center'>
              {status === "loading" && (
                <>
                  <div className='flex justify-center mb-4'>
                    <Loader2 className='h-12 w-12 animate-spin text-primary' />
                  </div>
                  <CardTitle className='text-2xl'>
                    Processing your subscription
                  </CardTitle>
                  <CardDescription>
                    Please wait while we confirm your payment...
                  </CardDescription>
                </>
              )}

              {status === "active" && (
                <>
                  <div className='flex justify-center mb-4'>
                    <CheckCircle2 className='h-12 w-12 text-green-500' />
                  </div>
                  <CardTitle className='text-2xl'>
                    Subscription activated!
                  </CardTitle>
                  <CardDescription>
                    Thank you for subscribing to Vessel Pro
                  </CardDescription>
                </>
              )}

              {status === "pending" && (
                <>
                  <div className='flex justify-center mb-4'>
                    <Loader2 className='h-12 w-12 text-yellow-500' />
                  </div>
                  <CardTitle className='text-2xl'>
                    Payment is being processed
                  </CardTitle>
                  <CardDescription>
                    Your subscription will be activated shortly. You can check
                    your status in the dashboard.
                  </CardDescription>
                </>
              )}

              {status === "error" && (
                <>
                  <div className='flex justify-center mb-4'>
                    <XCircle className='h-12 w-12 text-red-500' />
                  </div>
                  <CardTitle className='text-2xl'>
                    Something went wrong
                  </CardTitle>
                  <CardDescription>
                    We couldn't verify your subscription. Please contact support
                    if this issue persists.
                  </CardDescription>
                </>
              )}
            </CardHeader>
            <CardContent className='space-y-4'>
              {checkoutId && (
                <p className='text-xs text-center text-muted-foreground'>
                  Checkout ID: {checkoutId}
                </p>
              )}

              <div className='flex flex-col gap-3'>
                <Button
                  onClick={() => navigate("/dashboard")}
                  className='w-full'
                >
                  Go to Dashboard
                </Button>
                {(status === "pending" || status === "error") && (
                  <Button
                    variant='outline'
                    onClick={handleRetry}
                    className='w-full'
                  >
                    Check again
                  </Button>
                )}
              </div>
            </CardContent>
          </Card>
        </div>
      </main>
      <Footer />
    </>
  );
}


================================================
FILE: apps/landing/src/pages/Contact.tsx
================================================
import { Footer } from "@/components/Footer";
import { Navbar } from "@/components/Navbar";
import { ArrowRight } from "lucide-react";

const contactMethods = [
  {
    title: "Email",
    value: "info@cartesiancs.com",
    href: "mailto:info@cartesiancs.com",
  },
  {
    title: "LinkedIn",
    value: "company/cartesiancs",
    href: "https://www.linkedin.com/company/cartesiancs",
  },
];

function ContactPage() {
  return (
    <>
      <Navbar />
      <main className='w-screen bg-background text-foreground'>
        {/* Hero Section */}
        <section className='flex min-h-[600px] flex-col items-center justify-center px-8 md:px-10'>
          <div className='flex max-w-3xl flex-col items-center gap-y-6 text-center'>
            <h1 className='text-4xl md:text-6xl lg:text-6xl md:leading-17 leading-10 md:font-bold font-semibold tracking-tight text-center'>
              Contact Us
            </h1>
          </div>
        </section>

        <div className='container mx-auto mt-12 mb-30 max-w-6xl px-8 md:px-10'>
          <div className='space-y-8'>
            {contactMethods.map((method) => (
              <div
                key={method.title}
                className='flex flex-col gap-2 border-b border-border pb-6'
              >
                <p className='text-sm text-muted-foreground'>{method.title}</p>
                <a
                  href={method.href}
                  target='_blank'
                  rel='noopener noreferrer'
                  className='group inline-flex w-fit items-center gap-2 text-md tracking-tight transition-opacity md:text-2xl'
                >
                  <span className='transition-opacity group-hover:opacity-60'>
                    {method.value}
                  </span>
                  <ArrowRight className='h-4 w-4 translate-x-[-4px] opacity-0 transition-all duration-200 group-hover:translate-x-0 group-hover:opacity-100 md:h-5 md:w-5' />
                </a>
              </div>
            ))}
          </div>
        </div>
      </main>
      <Footer />
    </>
  );
}

export default ContactPage;


================================================
FILE: apps/landing/src/pages/Dashboard.tsx
================================================
import { useEffect, useState } from "react";
import { useNavigate } from "react-router";
import { useAuth } from "@/contexts/AuthContext";
import { Navbar } from "@/components/Navbar";
import { Footer } from "@/components/Footer";
import { Button } from "@/components/ui/button";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/ui/alert-dialog";
import { Loader2, CheckCircle2, User } from "lucide-react";
import { supabase } from "@/lib/supabase";
import { cancelSubscription } from "@/lib/billing";
import { toast } from "sonner";
import { useUsageData } from "@/hooks/useUsageData";
import { UsageCharts } from "@/components/UsageCharts";

export default function DashboardPage() {
  const navigate = useNavigate();
  const { user, loading, signOut } = useAuth();
  const [signingOut, setSigningOut] = useState(false);
  const [isSubscribed, setIsSubscribed] = useState(false);
  const [subscriptionLoading, setSubscriptionLoading] = useState(true);
  const [avatarError, setAvatarError] = useState(false);
  const [cancelLoading, setCancelLoading] = useState(false);
  const [cancelAtPeriodEnd, setCancelAtPeriodEnd] = useState(false);
  const [currentPeriodEnd, setCurrentPeriodEnd] = useState<string | null>(null);
  const { data: usageData, loading: usageLoading } = useUsageData(user);

  useEffect(() => {
    if (!loading && !user) {
      navigate("/login");
    }
  }, [user, loading, navigate]);

  useEffect(() => {
    const checkSubscription = async () => {
      if (!user) {
        setSubscriptionLoading(false);
        return;
      }

      try {
        const { data } = await supabase
          .from("billing_subscriptions")
          .select("status, cancel_at_period_end, current_period_end")
          .eq("user_id", user.id)
          .eq("status", "active")
          .limit(1)
          .maybeSingle();

        setIsSubscribed(!!data);
        if (data) {
          setCancelAtPeriodEnd(data.cancel_at_period_end ?? false);
          setCurrentPeriodEnd(data.current_period_end ?? null);
        }
      } catch (err) {
        console.error("Error checking subscription:", err);
      } finally {
        setSubscriptionLoading(false);
      }
    };

    if (!loading && user) {
      checkSubscription();
    }
  }, [user, loading]);

  const handleSignOut = async () => {
    setSigningOut(true);
    await signOut();
    navigate("/");
  };

  const handleCancelSubscription = async () => {
    setCancelLoading(true);
    try {
      const {
        data: { session },
      } = await supabase.auth.getSession();
      if (!session?.access_token) {
        toast.error("Please sign in again to cancel your subscription");
        return;
      }

      await cancelSubscription(session.access_token);
      toast.success("Subscription cancelled successfully");
      setIsSubscribed(false);
    } catch (err) {
      toast.error(
        err instanceof Error ? err.message : "Failed to cancel subscription",
      );
    } finally {
      setCancelLoading(false);
    }
  };

  if (loading) {
    return (
      <div className='min-h-screen flex items-center justify-center bg-background'>
        <p className='text-muted-foreground'>Loading...</p>
      </div>
    );
  }

  if (!user) {
    return null;
  }

  return (
    <>
      <Navbar />
      <main className='min-h-screen min-w-0 bg-background pt-20 px-4'>
        <div className='mx-auto max-w-4xl min-w-0'>
          <div className='flex items-center justify-between mb-8'>
            <h1 className='text-3xl font-bold'>Dashboard</h1>
            <Button
              variant='outline'
              onClick={handleSignOut}
              disabled={signingOut}
            >
              {signingOut ? (
                <>
                  <Loader2 className='mr-2 h-4 w-4 animate-spin' />
                  Signing out...
                </>
              ) : (
                "Sign Out"
              )}
            </Button>
          </div>

          <div className='grid gap-6 md:grid-cols-2'>
            <Card>
              <CardHeader>
                <CardTitle>Profile</CardTitle>
                <CardDescription>Your account information</CardDescription>
              </CardHeader>
              <CardContent className='space-y-4'>
                {user.user_metadata?.avatar_url && !avatarError ? (
                  <img
                    src={user.user_metadata.avatar_url}
                    alt='Profile'
                    className='w-16 h-16 rounded-full'
                    onError={() => setAvatarError(true)}
                  />
                ) : (
                  <div className='w-16 h-16 rounded-full bg-muted flex items-center justify-center'>
                    <User className='w-8 h-8 text-muted-foreground' />
                  </div>
                )}
                <div>
                  <p className='text-sm text-muted-foreground'>Name</p>
                  <p className='font-medium'>
                    {user.user_metadata?.full_name || "Not provided"}
                  </p>
                </div>
                <div>
                  <p className='text-sm text-muted-foreground'>Email</p>
                  <p className='font-medium'>{user.email}</p>
                </div>
                <div>
                  <p className='text-sm text-muted-foreground'>User ID</p>
                  <p className='font-mono text-sm text-muted-foreground'>
                    {user.id}
                  </p>
                </div>
              </CardContent>
            </Card>

            <Card>
              <CardHeader>
                <CardTitle>Subscription</CardTitle>
                <CardDescription>Your current plan</CardDescription>
              </CardHeader>
              <CardContent>
                {subscriptionLoading ? (
                  <div className='flex items-center gap-2 text-muted-foreground'>
                    <Loader2 className='h-4 w-4 animate-spin' />
                    <span>Checking subscription...</span>
                  </div>
                ) : isSubscribed ? (
                  <div className='space-y-4'>
                    <div className='flex items-center gap-3'>
                      <div>
                        <p className='font-semibold flex items-center gap-2'>
                          Pro Plan
                          {cancelAtPeriodEnd ? (
                            <span className='text-xs font-normal text-amber-500'>
                              Cancelling
                            </span>
                          ) : (
                            <CheckCircle2 className='h-4 w-4 text-green-500' />
                          )}
                        </p>
                        <p className='text-sm text-muted-foreground'>
                          {cancelAtPeriodEnd && currentPeriodEnd
                            ? `Ends on ${new Date(currentPeriodEnd).toLocaleDateString()}`
                            : "Active subscription"}
                        </p>
                      </div>
                    </div>
                    {cancelAtPeriodEnd ? (
                      <p className='text-sm text-amber-500'>
                        Your subscription will be cancelled at the end of the
                        current billing period.
                      </p>
                    ) : (
                      <AlertDialog>
                        <AlertDialogTrigger asChild>
                          <Button
                            variant='outline'
                            className='w-full text-destructive hover:text-destructive'
                            disabled={cancelLoading}
                          >
                            {cancelLoading ? (
                              <>
                                <Loader2 className='mr-2 h-4 w-4 animate-spin' />
                                Cancelling...
                              </>
                            ) : (
                              "Cancel Subscription"
                            )}
                          </Button>
                        </AlertDialogTrigger>
                        <AlertDialogContent>
                          <AlertDialogHeader>
                            <AlertDialogTitle>
                              Cancel Subscription
                            </AlertDialogTitle>
                            <AlertDialogDescription>
                              Are you sure you want to cancel your subscription?
                              You will lose access to Pro features at the end of
                              the current billing period.
                            </AlertDialogDescription>
                          </AlertDialogHeader>
                          <AlertDialogFooter>
                            <AlertDialogCancel>
                              Keep Subscription
                            </AlertDialogCancel>
                            <AlertDialogAction
                              onClick={handleCancelSubscription}
                              className='bg-red-500 text-white hover:bg-destructive/90'
                            >
                              Yes, Cancel
                            </AlertDialogAction>
                          </AlertDialogFooter>
                        </AlertDialogContent>
                      </AlertDialog>
                    )}
                  </div>
                ) : (
                  <div className='space-y-3'>
                    <p className='text-muted-foreground'>
                      You are currently on the Free plan.
                    </p>
                    <Button
                      variant='outline'
                      className='w-full'
                      onClick={() => navigate("/pricing")}
                    >
                      Upgrade to Pro
                    </Button>
                  </div>
                )}
              </CardContent>
            </Card>

            <Card>
              <CardHeader>
                <CardTitle>Quick Links</CardTitle>
                <CardDescription>Useful resources</CardDescription>
              </CardHeader>
              <CardContent className='space-y-3'>
                <Button
                  variant='outline'
                  className='w-full justify-start'
                  onClick={() => window.open("/docs/introduction", "_blank")}
                >
                  Documentation
                </Button>
                <Button
                  variant='outline'
                  className='w-full justify-start'
                  onClick={() =>
                    window.open(
                      "https://github.com/cartesiancs/vessel",
                      "_blank",
                    )
                  }
                >
                  GitHub Repository
                </Button>
                <Button
                  variant='outline'
                  className='w-full justify-start'
                  onClick={() => navigate("/pricing")}
                >
                  Pricing Plans
                </Button>
              </CardContent>
            </Card>

            <Card>
              <CardHeader>
                <CardTitle>Support & Roadmap</CardTitle>
                <CardDescription>
                  Get help and see what's coming next
                </CardDescription>
              </CardHeader>
              <CardContent className='space-y-3'>
                <Button
                  variant='outline'
                  className='w-full justify-start'
                  onClick={() => navigate("/contact")}
                >
                  Contact Support
                </Button>
                <Button
                  variant='outline'
                  className='w-full justify-start'
                  onClick={() => navigate("/roadmap")}
                >
                  View Product Roadmap
                </Button>
              </CardContent>
            </Card>
          </div>

          <div className='my-8 min-w-0'>
            <h2 className='text-2xl font-bold mb-6'>Usage</h2>
            <UsageCharts data={usageData} loading={usageLoading} />
          </div>
        </div>
      </main>
      <Footer />
    </>
  );
}


================================================
FILE: apps/landing/src/pages/Disclaimer.tsx
================================================
import { Navbar } from "@/components/Navbar";
import { Footer } from "@/components/Footer";

export default function DisclaimerPage() {
  return (
    <>
      <Navbar />
      <main className="min-h-screen bg-background text-foreground">
        <article className="container mx-auto max-w-4xl px-4 pt-24 pb-16 md:pt-28 md:pb-24">
          <h1 className="text-4xl font-extrabold tracking-tight md:text-5xl mb-8">
            Disclaimer
          </h1>
          <p className="text-muted-foreground mb-8">
            Last updated: April 11, 2026
          </p>

          <div className="prose prose-invert max-w-none space-y-8">
            <section>
              <h2 className="text-2xl font-bold mb-4">
                1. General Disclaimer
              </h2>
              <p className="text-muted-foreground leading-relaxed">
                The information, software, and services provided by Vessel
                ("we," "our," or "us") are offered on an "as is" and "as
                available" basis without warranties of any kind, either express
                or implied. We do not warrant that the Services will be
                uninterrupted, error-free, or free of harmful components.
              </p>
              <p className="text-muted-foreground leading-relaxed mt-4">
                Your use of the Services is at your sole risk. We expressly
                disclaim all warranties, including but not limited to implied
                warranties of merchantability, fitness for a particular purpose,
                and non-infringement.
              </p>
            </section>

            <section>
              <h2 className="text-2xl font-bold mb-4">
                2. Open-Source Software
              </h2>
              <p className="text-muted-foreground leading-relaxed">
                Vessel's core dashboard and orchestration engine are open-source
                software. Open-source software is provided without any warranty,
                as stated in the applicable open-source license. You acknowledge
                that:
              </p>
              <ul className="list-disc list-inside text-muted-foreground space-y-2 mt-4">
                <li>
                  The software may contain bugs, errors, or vulnerabilities
                </li>
                <li>
                  You are responsible for evaluating the software's suitability
                  for your intended use
                </li>
                <li>
                  Self-hosted deployments are entirely your responsibility,
                  including security, maintenance, and compliance
                </li>
                <li>
                  Community contributions are not guaranteed to be reviewed,
                  tested, or free of defects
                </li>
              </ul>
            </section>

            <section>
              <h2 className="text-2xl font-bold mb-4">
                3. Device and Hardware Interactions
              </h2>
              <p className="text-muted-foreground leading-relaxed">
                Vessel is designed to orchestrate and automate physical devices.
                You acknowledge and agree that:
              </p>
              <ul className="list-disc list-inside text-muted-foreground space-y-2 mt-4">
                <li>
                  <strong>Physical Risk:</strong> Controlling physical devices
                  remotely involves inherent risks. Incorrect configurations,
                  software errors, or network failures could result in
                  unintended device behavior.
                </li>
                <li>
                  <strong>No Liability for Damage:</strong> We are not liable for
                  any damage to property, equipment, or persons resulting from
                  the use or misuse of Vessel in connection with physical
                  devices.
                </li>
                <li>
                  <strong>User Responsibility:</strong> You are solely
                  responsible for ensuring that your device configurations,
                  automation flows, and security settings are appropriate and
                  safe for your environment.
                </li>
                <li>
                  <strong>Compliance:</strong> You are responsible for complying
                  with all applicable laws and regulations governing the
                  operation of connected devices in your jurisdiction.
                </li>
              </ul>
            </section>

            <section>
              <h2 className="text-2xl font-bold mb-4">
                4. Security Disclaimer
              </h2>
              <p className="text-muted-foreground leading-relaxed">
                While we implement reasonable security measures for our cloud
                Services, no system is completely secure. We disclaim liability
                for:
              </p>
              <ul className="list-disc list-inside text-muted-foreground space-y-2 mt-4">
                <li>
                  Unauthorized access to your account or devices resulting from
                  compromised credentials or third-party breaches
                </li>
                <li>
                  Security vulnerabilities in self-hosted deployments that are
                  not maintained or updated
                </li>
                <li>
                  Data loss or interception during transmission over public
                  networks
                </li>
                <li>
                  Security incidents arising from third-party integrations or
                  plugins
                </li>
              </ul>
              <p className="text-muted-foreground leading-relaxed mt-4">
                You are responsible for implementing appropriate security
                practices, including keeping your software up to date, using
                strong authentication, and regularly reviewing access controls.
              </p>
            </section>

            <section>
              <h2 className="text-2xl font-bold mb-4">
                5. Cloud Services
              </h2>
              <p className="text-muted-foreground leading-relaxed">
                Our cloud Services, including remote tunnel access and
                TURN/STUN relay, are provided for convenience and may be
                subject to:
              </p>
              <ul className="list-disc list-inside text-muted-foreground space-y-2 mt-4">
                <li>Scheduled or unscheduled downtime for maintenance</li>
                <li>
                  Capacity limitations or throttling during high-demand periods
                </li>
                <li>
                  Service modifications, suspensions, or discontinuations with
                  reasonable notice
                </li>
                <li>
                  Regional availability restrictions due to infrastructure or
                  legal requirements
                </li>
              </ul>
              <p className="text-muted-foreground leading-relaxed mt-4">
                We do not guarantee any specific uptime percentage or service
                level unless explicitly stated in a separate service level
                agreement (SLA).
              </p>
            </section>

            <section>
              <h2 className="text-2xl font-bold mb-4">
                6. Third-Party Services
              </h2>
              <p className="text-muted-foreground leading-relaxed">
                The Services may integrate with or rely on third-party services,
                including but not limited to Google OAuth, Supabase, and Polar.
                We are not responsible for the availability, accuracy, or
                reliability of any third-party services. Your use of third-party
                services is subject to their respective terms and policies.
              </p>
            </section>

            <section>
              <h2 className="text-2xl font-bold mb-4">
                7. No Professional Advice
              </h2>
              <p className="text-muted-foreground leading-relaxed">
                Nothing in our Services, documentation, or communications
                constitutes professional, legal, security, or engineering advice.
                The information provided is for general informational purposes
                only. You should consult qualified professionals for advice
                specific to your situation, particularly regarding physical
                security systems and device automation.
              </p>
            </section>

            <section>
              <h2 className="text-2xl font-bold mb-4">
                8. Limitation of Liability
              </h2>
              <p className="text-muted-foreground leading-relaxed">
                TO THE FULLEST EXTENT PERMITTED BY APPLICABLE LAW, VESSEL SHALL
                NOT BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
                CONSEQUENTIAL, OR EXEMPLARY DAMAGES, INCLUDING BUT NOT LIMITED
                TO DAMAGES FOR LOSS OF PROFITS, GOODWILL, DATA, OR OTHER
                INTANGIBLE LOSSES, RESULTING FROM:
              </p>
              <ul className="list-disc list-inside text-muted-foreground space-y-2 mt-4">
                <li>Your use or inability to use the Services</li>
                <li>
                  Any unauthorized access to or alteration of your data or
                  devices
                </li>
                <li>
                  Any interruption, suspension, or termination of the Services
                </li>
                <li>
                  Any bugs, errors, or inaccuracies in the software or
                  documentation
                </li>
                <li>
                  Any damage to physical property or personal injury resulting
                  from the use of the Services with physical devices
                </li>
              </ul>
            </section>

            <section>
              <h2 className="text-2xl font-bold mb-4">
                9. Indemnification
              </h2>
              <p className="text-muted-foreground leading-relaxed">
                You agree to indemnify and hold harmless Vessel, its affiliates,
                and their respective officers, directors, employees, and agents
                from any claims, damages, losses, liabilities, and expenses
                (including attorneys' fees) arising from your use of the
                Services, your violation of these terms, or your infringement of
                any third-party rights.
              </p>
            </section>

            <section>
              <h2 className="text-2xl font-bold mb-4">
                10. Changes to This Disclaimer
              </h2>
              <p className="text-muted-foreground leading-relaxed">
                We reserve the right to update or modify this Disclaimer at any
                time. Changes will be effective upon posting to our website. Your
                continued use of the Services after any changes constitutes
                acceptance of the updated Disclaimer.
              </p>
            </section>

            <section>
              <h2 className="text-2xl font-bold mb-4">11. Contact Us</h2>
              <p className="text-muted-foreground leading-relaxed">
                If you have questions or concerns about this Disclaimer, please
                contact us at:
              </p>
              <p className="text-muted-foreground leading-relaxed mt-4">
                <strong>Email:</strong>{" "}
                <a
                  href="mailto:info@cartesiancs.com"
                  className="text-primary hover:underline"
                >
                  info@cartesiancs.com
                </a>
              </p>
              <p className="text-muted-foreground leading-relaxed mt-2">
                <strong>GitHub:</strong>{" "}
                <a
                  href="https://github.com/cartesiancs/vessel"
                  className="text-primary hover:underline"
                  target="_blank"
                  rel="noopener noreferrer"
                >
                  github.com/cartesiancs/vessel
                </a>
              </p>
            </section>
          </div>
        </article>
      </main>
      <Footer />
    </>
  );
}


================================================
FILE: apps/landing/src/pages/Login.tsx
================================================
import { useEffect, useState } from "react";
import { useNavigate } from "react-router";
import { useAuth } from "@/contexts/AuthContext";
import { Button } from "@/components/ui/button";
import {
  Card,
  CardContent,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { FcGoogle } from "react-icons/fc";
import { Loader2 } from "lucide-react";

export default function LoginPage() {
  const navigate = useNavigate();
  const { user, loading, signInWithGoogle } = useAuth();
  const [signingIn, setSigningIn] = useState(false);

  useEffect(() => {
    if (!loading && user) {
      navigate("/dashboard");
    }
  }, [user, loading, navigate]);

  const handleSignIn = async () => {
    setSigningIn(true);
    await signInWithGoogle();
  };

  if (loading) {
    return (
      <div className='flex min-h-dvh items-center justify-center bg-background pt-[env(safe-area-inset-top,0px)] pb-[env(safe-area-inset-bottom,0px)]'>
        <p className='text-muted-foreground'>Loading...</p>
      </div>
    );
  }

  return (
    <div className='flex min-h-dvh items-center justify-center bg-background px-4 pt-[env(safe-area-inset-top,0px)] pb-[env(safe-area-inset-bottom,0px)]'>
      <Card className='w-full max-w-md bg-black py-10'>
        <CardHeader className='text-center'>
          <div className='flex justify-center mb-4'>
            <img src='/icon.png' alt='Logo' className='w-12 invert' />
          </div>
          <CardTitle className='text-2xl'>Welcome to Vessel</CardTitle>
        </CardHeader>
        <CardContent>
          <Button
            variant='outline'
            className='w-full'
            size='lg'
            onClick={handleSignIn}
            disabled={signingIn}
          >
            {signingIn ? (
              <>
                <Loader2 className='mr-2 h-5 w-5 animate-spin' />
                Signing in...
              </>
            ) : (
              <>
                <FcGoogle className='mr-2 h-5 w-5' />
                Continue with Google
              </>
            )}
          </Button>
          <p className='text-center text-sm text-muted-foreground mt-6'>
            By signing in, you agree to our{" "}
            <a
              href='/privacy-policy'
              className='underline hover:text-foreground'
            >
              Privacy Policy
            </a>
          </p>
        </CardContent>
      </Card>
    </div>
  );
}


================================================
FILE: apps/landing/src/pages/Main.tsx
================================================
import { useLayoutEffect, useState } from "react";
import { Navbar } from "@/components/Navbar";
import { Footer } from "@/components/Footer";
import { FeaturesSection } from "@/components/sections/Features";
import { UsecaseSection } from "@/components/sections/Usecase";
import { Button } from "@/components/ui/button";
import { BookText } from "lucide-react";
import { FaGithub } from "react-icons/fa";
import { MidCTASection } from "@/components/sections/MidCta";
import { FAQSection } from "@/components/sections/Faqs";
import { FooterCtaSection } from "@/components/sections/FooterCta";
import { ThreeCardsSection } from "@/components/sections/ThreeCards";
import { SecurityCTASection } from "@/components/sections/SecurityCta";
import { IntegrationSection } from "@/components/sections/IntegrationImage";
import { ListCardsSection } from "@/components/sections/ListCards";
import { CapsulePromoSection } from "@/components/sections/CapsulePromo";
import { ScrollTextRevealSection } from "@/components/sections/ScrollTextReveal";
import { HeroSceneSection } from "@/components/sections/HeroScene/HeroScene";
import { UsecaseAIAssistantSection } from "@/components/sections/UsecaseAI";
import { cn } from "@/lib/utils";

// const HERO_BG_SRC = "/videos/back.webp";

/** Matches previous Tailwind inset-10 / md:16 / lg:24 / xl:28 (px). */
function maxHeroInsetForWidth(width: number): number {
  if (width >= 1280) return 112;
  if (width >= 1024) return 96;
  if (width >= 768) return 64;
  return 40;
}

/** Scroll this fraction of viewport height to go from max inset to 0. */
const HERO_INSET_SCROLL_RANGE = 0.72;

/** Below Tailwind `md` — no hero background media (save bandwidth & battery). */
const MOBILE_BG_OFF_MEDIA = "(max-width: 767px)";

function LandingPage() {
  const [heroBgReady] = useState(false);
  const [heroBgFailed] = useState(false);
  const [heroInsetPx, setHeroInsetPx] = useState(40);
  const [isMobileViewport, setIsMobileViewport] = useState(() =>
    typeof window !== "undefined"
      ? window.matchMedia(MOBILE_BG_OFF_MEDIA).matches
      : false,
  );

  useLayoutEffect(() => {
    const mq = window.matchMedia(MOBILE_BG_OFF_MEDIA);
    let rafId = 0;

    const updateHeroInset = () => {
      const maxInset = maxHeroInsetForWidth(window.innerWidth);
      const range = Math.max(1, window.innerHeight * HERO_INSET_SCROLL_RANGE);
      const t = Math.min(1, Math.max(0, window.scrollY / range));
      setHeroInsetPx(maxInset * (1 - t));
    };

    const onScrollOrResize = () => {
      cancelAnimationFrame(rafId);
      rafId = requestAnimationFrame(updateHeroInset);
    };

    const detachScroll = () => {
      cancelAnimationFrame(rafId);
      window.removeEventListener("scroll", onScrollOrResize);
      window.removeEventListener("resize", onScrollOrResize);
    };

    const syncMobileAndScroll = () => {
      const mobile = mq.matches;
      setIsMobileViewport(mobile);
      detachScroll();
      if (!mobile) {
        updateHeroInset();
        window.addEventListener("scroll", onScrollOrResize, { passive: true });
        window.addEventListener("resize", onScrollOrResize);
      }
    };

    mq.addEventListener("change", syncMobileAndScroll);
    syncMobileAndScroll();

    return () => {
      mq.removeEventListener("change", syncMobileAndScroll);
      detachScroll();
    };
  }, []);

  return (
    <>
      <Navbar />
      <main className='w-screen bg-background text-foreground'>
        <section className='relative flex h-svh flex-col items-center justify-center overflow-hidden bg-black px-5 md:px-10'>
          {!heroBgFailed && !isMobileViewport && (
            <div
              className={cn(
                "pointer-events-none absolute transition-opacity duration-[1400ms] ease-out",
                heroBgReady ? "opacity-100" : "opacity-0",
              )}
              style={{
                top: heroInsetPx,
                right: heroInsetPx,
                bottom: heroInsetPx,
                left: heroInsetPx,
              }}
            >
              <div className='relative h-full w-full overflow-hidden'>
                {/* <img
                  src={HERO_BG_SRC}
                  alt=''
                  aria-hidden
                  loading='eager'
                  fetchPriority='high'
                  decoding='async'
                  onLoad={() => {
                    requestAnimationFrame(() => setHeroBgReady(true));
                  }}
                  onError={() => setHeroBgFailed(true)}
                  className='h-full w-full object-cover brightness-[0.92]'
                /> */}
                <div className='absolute inset-0 bg-black/35' aria-hidden />
              </div>
            </div>
          )}
          <div className='relative z-10 flex flex-col items-start gap-y-6'>
            <h1 className='self-center text-4xl md:text-6xl lg:text-6xl md:leading-17 leading-10 md:font-bold font-semibold tracking-tight text-center'>
              Personal C2 platform <br /> for Physical AI
            </h1>
            <div className='flex items-center gap-x-4 pt-2 self-center'>
              <Button
                variant='default'
                onClick={() => window.open("/docs/introduction")}
              >
                <BookText /> Docs
              </Button>
              <Button
                onClick={() =>
                  window.open("https://github.com/cartesiancs/vessel")
                }
                variant='outline'
              >
                <FaGithub />
                GitHub
              </Button>
            </div>
          </div>
        </section>

        {/* <SubheadingSection /> */}
        <FeaturesSection />
        <ScrollTextRevealSection />
        <UsecaseSection />
        <ListCardsSection />
        <MidCTASection />
        <IntegrationSection />
        <ThreeCardsSection />
        <UsecaseAIAssistantSection />
        <SecurityCTASection />
        <CapsulePromoSection />
        <FAQSection />
        <FooterCtaSection />
      </main>
      <Footer />
      <HeroSceneSection />
    </>
  );
}

export default LandingPage;


================================================
FILE: apps/landing/src/pages/Pricing.tsx
================================================
import { useState, useEffect } from "react";
import { useNavigate } from "react-router";
import { Navbar } from "@/components/Navbar";
import { Footer } from "@/components/Footer";
import {
  Card,
  CardContent,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Check, Loader2 } from "lucide-react";
import { toast } from "sonner";
import { useAuth } from "@/contexts/AuthContext";
import { supabase } from "@/lib/supabase";

const proFeatures = [
  "Remote Tunnel",
  "Secure Option",
  "Streaming Server (10GB)",
  "Custom Flow",
  "Advanced data sources",
  "1:1 support",
  "Priority access to new features",
];

const freeFeatures = [
  "Self Host",
  "Core Flow",
  "Realtime device orchestration",
  "Community support",
  "GitHub updates",
];

const enterpriseHighlights = [
  "Scope and pricing aligned to your requirements",
  "Security and infrastructure architecture designed together",
  "Dedicated onboarding and ongoing partnership",
];

function PricingPage() {
  const navigate = useNavigate();
  const { user, loading: authLoading } = useAuth();
  const [checkoutLoading, setCheckoutLoading] = useState(false);
  const [isSubscribed, setIsSubscribed] = useState(false);

  useEffect(() => {
    const checkSubscription = async () => {
      if (!user) return;

      try {
        const { data } = await supabase
          .from("billing_subscriptions")
          .select("status")
          .eq("user_id", user.id)
          .eq("status", "active")
          .limit(1)
          .maybeSingle();

        setIsSubscribed(!!data);
      } catch (err) {
        console.error("Error checking subscription:", err);
      }
    };

    if (!authLoading) {
      checkSubscription();
    }
  }, [user, authLoading]);

  const handleProCheckout = async () => {
    if (authLoading) return;

    if (!user) {
      toast.error("Please sign in to subscribe");
      navigate("/login");
      return;
    }

    const productId = import.meta.env.VITE_POLAR_PRO_PRODUCT_ID;
    if (!productId) {
      toast.error("Product configuration is missing");
      return;
    }

    setCheckoutLoading(true);

    try {
      const { data, error } = await supabase.functions.invoke(
        "create-checkout-session",
        {
          body: { productId },
        }
      );

      if (error) {
        toast.error(error.message || "Failed to create checkout session");
        return;
      }

      const url = data?.url as string | undefined;
      if (!url) {
        toast.error("Failed to get checkout URL");
        return;
      }

      window.location.assign(url);
    } catch (err) {
      toast.error("An unexpected error occurred");
      console.error("Checkout error:", err);
    } finally {
      setCheckoutLoading(false);
    }
  };

  return (
    <>
      <Navbar />
      <main className="min-h-screen bg-background text-foreground">
        <section className="container mx-auto max-w-5xl px-4 pt-24 pb-16 md:pt-28 md:pb-24">
          <div className="text-center space-y-4">
            <h1 className="text-4xl font-extrabold tracking-tight md:text-5xl">
              Pricing
            </h1>
            <p className="text-lg text-muted-foreground max-w-3xl mx-auto">
              Start Vessel with transparent pricing and tailored support for any
              team size.
            </p>
          </div>

          <div className="mt-12 grid gap-6 md:mt-16 md:grid-cols-3">
            <Card className="h-full">
              <CardHeader className="pb-0 space-y-4">
                <CardTitle className="text-xl font-semibold">Free</CardTitle>
                <div className="space-y-1">
                  <div className="text-5xl font-extrabold leading-none">$0</div>
                  <p className="text-sm text-muted-foreground">Per month</p>
                </div>
              </CardHeader>
              <CardContent className="flex-1 space-y-5">
                <ul className="space-y-3 text-base">
                  {freeFeatures.map((feature) => (
                    <li key={feature} className="flex items-center gap-3">
                      <span className="flex h-5 w-5 items-center justify-center text-primary">
                        <Check className="h-4 w-4" />
                      </span>
                      <span className="text-base text-muted-foreground">
                        {feature}
                      </span>
                    </li>
                  ))}
                </ul>
              </CardContent>
              <CardFooter className="mt-auto">
                <Button
                  className="h-11 w-full text-base"
                  variant="outline"
                  onClick={() =>
                    window.open(
                      "https://github.com/cartesiancs/vessel",
                      "_blank"
                    )
                  }
                >
                  Start for free
                </Button>
              </CardFooter>
            </Card>

            <Card className="border-primary/15 shadow-lg shadow-primary/5 h-full">
              <CardHeader className="pb-0 space-y-4">
                <CardTitle className="text-xl font-semibold">Pro</CardTitle>
                <div className="space-y-1">
                  <div className="text-5xl font-extrabold leading-none">
                    $21
                  </div>
                  <p className="text-sm text-muted-foreground">Per month</p>
                </div>
              </CardHeader>
              <CardContent className="flex-1 space-y-5">
                <ul className="space-y-3 text-base">
                  {proFeatures.map((feature) => (
                    <li key={feature} className="flex items-center gap-3">
                      <span className="flex h-5 w-5 items-center justify-center text-primary">
                        <Check className="h-4 w-4" />
                      </span>
                      <span className="text-base text-muted-foreground">
                        {feature}
                      </span>
                    </li>
                  ))}
                </ul>
              </CardContent>
              <CardFooter className="mt-auto">
                <Button
                  className="h-11 w-full text-base"
                  onClick={handleProCheckout}
                  disabled={checkoutLoading || authLoading || isSubscribed}
                >
                  {checkoutLoading ? (
                    <>
                      <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                      Redirecting...
                    </>
                  ) : isSubscribed ? (
                    "Already subscribed"
                  ) : (
                    "Continue with Pro"
                  )}
                </Button>
              </CardFooter>
            </Card>

            <Card className="border-primary/15 shadow-lg shadow-primary/5 h-full">
              <CardHeader className="pb-0 space-y-4">
                <CardTitle className="text-xl font-semibold">
                  Enterprise
                </CardTitle>
                <div className="space-y-1">
                  <div className="text-5xl font-extrabold leading-none">
                    Custom
                  </div>
                  <p className="text-sm text-muted-foreground">Per month</p>
                </div>
              </CardHeader>
              <CardContent className="flex-1 space-y-5">
                <ul className="space-y-3 text-base text-white">
                  {enterpriseHighlights.map((item) => (
                    <li key={item} className="flex items-center gap-3">
                      <span className="flex h-5 w-5 items-center justify-center text-primary">
                        <Check className="h-4 w-4" />
                      </span>
                      <span className="text-base text-muted-foreground">
                        {item}
                      </span>
                    </li>
                  ))}
                </ul>
              </CardContent>
              <CardFooter className="mt-auto">
                <Button
                  className="h-11 w-full text-base"
                  variant="ghost"
                  onClick={() => {
                    window.location.href = "mailto:info@cartesiancs.com";
                  }}
                >
                  Contact Us
                </Button>
              </CardFooter>
            </Card>
          </div>
        </section>
      </main>
      <Footer />
    </>
  );
}

export default PricingPage;


================================================
FILE: apps/landing/src/pages/Privacy.tsx
================================================
import { Navbar } from "@/components/Navbar";
import { Footer } from "@/components/Footer";
import { Button } from "@/components/ui/button";
import { SecurityCTASection } from "@/components/sections/SecurityCta";
import { useFadeInOnScroll } from "@/lib/useFadeInOnScroll";
import {
  EyeOff,
  Code,
  HardDrive,
  Lock,
  UserCheck,
  BookOpen,
  Check,
  X,
} from "lucide-react";
import { FaGithub } from "react-icons/fa";

function cx(...classes: Array<string | false | null | undefined>) {
  return classes.filter(Boolean).join(" ");
}

const privacyPrinciples = [
  {
    icon: EyeOff,
    title: "No Tracking",
    description:
      "Vessel contains zero analytics trackers, no telemetry beacons, and no fingerprinting. Your usage patterns are never observed or recorded.",
  },
  {
    icon: Code,
    title: "Open Source",
    description:
      "Every line of the Vessel core is publicly auditable on GitHub. You never have to trust a black box — verify the code yourself.",
  },
  {
    icon: HardDrive,
    title: "Local-First",
    description:
      "All processing happens on your own hardware. Sensor data, video streams, and automation logic stay on your network by default.",
  },
  {
    icon: Lock,
    title: "Encrypted by Design",
    description:
      "Connections between your devices and Vessel use industry-standard encryption. When you opt into cloud services, data is encrypted in transit and at rest.",
  },
  {
    icon: UserCheck,
    title: "You Own Your Data",
    description:
      "There is no data harvesting, no profiling, and no selling of information to third parties. Your operational data is yours alone.",
  },
  {
    icon: BookOpen,
    title: "Full Transparency",
    description:
      "Our privacy policy is written in plain language. We disclose every piece of data we collect and exactly how it is used.",
  },
];

const cloudCollected = [
  {
    label: "Account information",
    detail: "Name and email via Google OAuth for authentication.",
  },
  {
    label: "Payment data",
    detail: "Processed by Polar. We never store full card numbers.",
  },
  {
    label: "Tunnel usage metadata",
    detail: "Connection logs and usage statistics for service delivery.",
  },
  {
    label: "Device connection metadata",
    detail: "Device identifiers and connection data for tunnel routing.",
  },
  {
    label: "Server logs",
    detail: "IP addresses and access times for security and troubleshooting.",
  },
];

const neverCollected = [
  "Your sensor data or video streams",
  "The content of your automation flows",
  "Your device configurations or credentials",
  "Location data from your devices",
  "Behavioral analytics or usage profiling",
  "Data from your self-hosted deployments",
];

export function PrivacyPage() {
  const { ref: principlesRef, isVisible: principlesVisible } =
    useFadeInOnScroll<HTMLElement>();
  const { ref: cloudRef, isVisible: cloudVisible } =
    useFadeInOnScroll<HTMLElement>();

  return (
    <>
      <Navbar />
      <main className='w-screen bg-background text-foreground'>
        {/* Hero Section */}
        <section className='flex min-h-[600px] flex-col items-center justify-center px-8 md:px-10'>
          <div className='flex max-w-3xl flex-col items-center gap-y-6 text-center'>
            <h1 className='text-4xl md:text-6xl lg:text-6xl md:leading-17 leading-10 md:font-bold font-semibold tracking-tight text-center'>
              Absolute Privacy
            </h1>
            <div className='flex items-center gap-x-4 pt-2'>
              <Button
                variant='default'
                onClick={() => (location.href = "/privacy-policy")}
              >
                Read Privacy Policy
              </Button>
              <Button
                variant='outline'
                onClick={() =>
                  window.open("https://github.com/cartesiancs/vessel")
                }
              >
                <FaGithub />
                View Source Code
              </Button>
            </div>
          </div>
        </section>

        {/* Privacy Principles */}
        <section ref={principlesRef} className='w-full bg-black text-white'>
          <div
            className={cx(
              "container mx-auto max-w-6xl px-8 py-40 md:px-10",
              "transition-all duration-700 ease-out",
              principlesVisible
                ? "opacity-100 translate-y-0"
                : "opacity-0 translate-y-6",
            )}
          >
            <div className='mb-14 text-left'>
              <h2 className='text-3xl font-bold tracking-tight md:text-4xl'>
                Privacy by Principle,{" "}
                <span className='text-neutral-500'>not by Promise</span>
              </h2>
            </div>
            <div className='grid gap-8 md:grid-cols-2 lg:grid-cols-3'>
              {privacyPrinciples.map((principle, index) => {
                const Icon = principle.icon;
                return (
                  <div
                    key={principle.title}
                    className={cx(
                      "space-y-4 border border-white/10 p-6 transition-all duration-700 ease-out",
                      principlesVisible
                        ? "opacity-100 translate-y-0"
                        : "opacity-0 translate-y-4",
                    )}
                    style={{ transitionDelay: `${index * 100}ms` }}
                  >
                    <div className='flex h-12 w-12 items-center justify-center border border-white/10 bg-white/5'>
                      <Icon
                        className='h-6 w-6 text-white/80'
                        strokeWidth={1.5}
                      />
                    </div>
                    <h3 className='text-lg font-semibold text-white'>
                      {principle.title}
                    </h3>
                    <p className='text-sm leading-relaxed text-white/55'>
                      {principle.description}
                    </p>
                  </div>
                );
              })}
            </div>
          </div>
        </section>

        {/* Cloud Services Privacy */}
        <section ref={cloudRef} className='w-full bg-black text-white'>
          <div
            className={cx(
              "container mx-auto max-w-6xl px-8 py-40 md:px-10",
              "transition-all duration-700 ease-out",
              cloudVisible
                ? "opacity-100 translate-y-0"
                : "opacity-0 translate-y-6",
            )}
          >
            <div className='mb-14 text-left'>
              <h2 className='text-3xl font-bold tracking-tight md:text-4xl'>
                When You Use Our Cloud,{" "}
                <span className='text-neutral-500'>here is what happens.</span>
              </h2>
              <p className='mt-4 max-w-2xl text-base leading-relaxed text-white/55'>
                If you choose to use Vessel's cloud services such as Remote
                Tunnel, we collect only what is strictly necessary to provide
                the service. Here is a complete breakdown.
              </p>
            </div>

            <div className='grid gap-8 md:grid-cols-2'>
              <div className='space-y-6 border border-white/10 p-8'>
                <h3 className='text-xl font-semibold text-white'>
                  What We Collect
                </h3>
                <ul className='space-y-4'>
                  {cloudCollected.map((item) => (
                    <li key={item.label} className='flex items-start gap-3'>
                      <Check className='mt-0.5 h-5 w-5 shrink-0 text-white/40' />
                      <div>
                        <span className='text-sm font-medium text-white'>
                          {item.label}
                        </span>
                        <p className='mt-1 text-sm text-white/45'>
                          {item.detail}
                        </p>
                      </div>
                    </li>
                  ))}
                </ul>
              </div>

              <div className='space-y-6 border border-white/10 p-8'>
                <h3 className='text-xl font-semibold text-white'>
                  What We Never Collect
                </h3>
                <ul className='space-y-4'>
                  {neverCollected.map((item) => (
                    <li key={item} className='flex items-start gap-3'>
                      <X className='mt-0.5 h-5 w-5 shrink-0 text-white/40' />
                      <span className='text-sm text-white/55'>{item}</span>
                    </li>
                  ))}
                </ul>
              </div>
            </div>
          </div>
        </section>

        <SecurityCTASection />
      </main>
      <Footer />
    </>
  );
}


================================================
FILE: apps/landing/src/pages/PrivacyPolicy.tsx
================================================
import { Navbar } from "@/components/Navbar";
import { Footer } from "@/components/Footer";

export default function PrivacyPolicyPage() {
  return (
    <>
      <Navbar />
      <main className="min-h-screen bg-background text-foreground">
        <article className="container mx-auto max-w-4xl px-4 pt-24 pb-16 md:pt-28 md:pb-24">
          <h1 className="text-4xl font-extrabold tracking-tight md:text-5xl mb-8">
            Privacy Policy
          </h1>
          <p className="text-muted-foreground mb-8">
            Last updated: January 23, 2026
          </p>

          <div className="prose prose-invert max-w-none space-y-8">
            <section>
              <h2 className="text-2xl font-bold mb-4">1. Introduction</h2>
              <p className="text-muted-foreground leading-relaxed">
                Vessel ("we," "our," or "us") is committed to protecting your
                privacy. This Privacy Policy explains how we collect, use,
                disclose, and safeguard your information when you use our
                services, including our cloud-based remote tunnel service and
                related offerings.
              </p>
              <p className="text-muted-foreground leading-relaxed mt-4">
                Our core dashboard and orchestration software is open source and
                available on GitHub. This Privacy Policy applies specifically to
                the cloud services we provide, including account management,
                remote tunnel access, and subscription billing.
              </p>
            </section>

            <section>
              <h2 className="text-2xl font-bold mb-4">
                2. Information We Collect
              </h2>

              <h3 className="text-xl font-semibold mb-3 mt-6">
                2.1 Information You Provide
              </h3>
              <ul className="list-disc list-inside text-muted-foreground space-y-2">
                <li>
                  <strong>Account Information:</strong> When you create an
                  account, we collect your name, email address, and
                  authentication credentials through Google OAuth.
                </li>
                <li>
                  <strong>Payment Information:</strong> When you subscribe to
                  our paid services, payment processing is handled by our
                  third-party payment processor (Polar). We do not store your
                  full credit card numbers.
                </li>
                <li>
                  <strong>Support Communications:</strong> If you contact us for
                  support, we collect the information you provide in your
                  communications.
                </li>
              </ul>

              <h3 className="text-xl font-semibold mb-3 mt-6">
                2.2 Information Collected Automatically
              </h3>
              <ul className="list-disc list-inside text-muted-foreground space-y-2">
                <li>
                  <strong>Usage Data:</strong> We collect information about how
                  you interact with our services, including connection logs,
                  tunnel usage statistics, and feature usage.
                </li>
                <li>
                  <strong>Device Information:</strong> We may collect
                  information about the devices you use to access our services,
                  including device identifiers and connection metadata.
                </li>
                <li>
                  <strong>Log Data:</strong> Our servers automatically record
                  information including IP addresses, access times, and request
                  details for security and troubleshooting purposes.
                </li>
              </ul>
            </section>

            <section>
              <h2 className="text-2xl font-bold mb-4">
                3. How We Use Your Information
              </h2>
              <p className="text-muted-foreground leading-relaxed mb-4">
                We use the information we collect to:
              </p>
              <ul className="list-disc list-inside text-muted-foreground space-y-2">
                <li>Provide, maintain, and improve our services</li>
                <li>Process transactions and manage your subscription</li>
                <li>
                  Send you technical notices, updates, and support messages
                </li>
                <li>Respond to your comments, questions, and requests</li>
                <li>
                  Monitor and analyze trends, usage, and activities in
                  connection with our services
                </li>
                <li>
                  Detect, investigate, and prevent fraudulent transactions and
                  other illegal activities
                </li>
                <li>Protect the rights and safety of Vessel and our users</li>
              </ul>
            </section>

            <section>
              <h2 className="text-2xl font-bold mb-4">
                4. Data Sharing and Disclosure
              </h2>
              <p className="text-muted-foreground leading-relaxed mb-4">
                We do not sell your personal information. We may share your
                information in the following circumstances:
              </p>
              <ul className="list-disc list-inside text-muted-foreground space-y-2">
                <li>
                  <strong>Service Providers:</strong> We share information with
                  third-party vendors who perform services on our behalf,
                  including payment processing (Polar), authentication
                  (Supabase), and cloud infrastructure providers.
                </li>
                <li>
                  <strong>Legal Requirements:</strong> We may disclose
                  information if required by law, regulation, or legal process.
                </li>
                <li>
                  <strong>Business Transfers:</strong> In connection with any
                  merger, sale of company assets, or acquisition, your
                  information may be transferred.
                </li>
                <li>
                  <strong>With Your Consent:</strong> We may share information
                  with your consent or at your direction.
                </li>
              </ul>
            </section>

            <section>
              <h2 className="text-2xl font-bold mb-4">
                5. Open Source Software
              </h2>
              <p className="text-muted-foreground leading-relaxed">
                The Vessel dashboard and core orchestration software are open
                source projects maintained on GitHub. When you self-host Vessel,
                no data is transmitted to us unless you explicitly connect to
                our cloud services. The open source software operates entirely
                on your own infrastructure.
              </p>
              <p className="text-muted-foreground leading-relaxed mt-4">
                This Privacy Policy applies only to data collected through our
                cloud services (such as Remote Tunnel, account management, and
                subscription services) and our website.
              </p>
            </section>

            <section>
              <h2 className="text-2xl font-bold mb-4">6. Data Security</h2>
              <p className="text-muted-foreground leading-relaxed">
                We implement appropriate technical and organizational measures
                to protect your personal information against unauthorized
                access, alteration, disclosure, or destruction. These measures
                include encryption in transit and at rest, access controls, and
                regular security assessments.
              </p>
              <p className="text-muted-foreground leading-relaxed mt-4">
                However, no method of transmission over the Internet or
                electronic storage is 100% secure. While we strive to protect
                your personal information, we cannot guarantee its absolute
                security.
              </p>
            </section>

            <section>
              <h2 className="text-2xl font-bold mb-4">7. Data Retention</h2>
              <p className="text-muted-foreground leading-relaxed">
                We retain your personal information for as long as your account
                is active or as needed to provide you services. We will retain
                and use your information as necessary to comply with our legal
                obligations, resolve disputes, and enforce our agreements.
              </p>
              <p className="text-muted-foreground leading-relaxed mt-4">
                You may request deletion of your account and associated data by
                contacting us. Upon deletion, we will remove your personal
                information from our active systems, though some information may
                be retained in backups for a limited period.
              </p>
            </section>

            <section>
              <h2 className="text-2xl font-bold mb-4">8. Your Rights</h2>
              <p className="text-muted-foreground leading-relaxed mb-4">
                Depending on your location, you may have certain rights
                regarding your personal information:
              </p>
              <ul className="list-disc list-inside text-muted-foreground space-y-2">
                <li>
                  <strong>Access:</strong> You can request a copy of your
                  personal information.
                </li>
                <li>
                  <strong>Correction:</strong> You can request that we correct
                  inaccurate information.
                </li>
                <li>
                  <strong>Deletion:</strong> You can request that we delete your
                  personal information.
                </li>
                <li>
                  <strong>Portability:</strong> You can request a copy of your
                  data in a portable format.
                </li>
                <li>
                  <strong>Opt-out:</strong> You can opt out of certain data
                  processing activities.
                </li>
              </ul>
              <p className="text-muted-foreground leading-relaxed mt-4">
                To exercise these rights, please contact us at the email address
                provided below.
              </p>
            </section>

            <section>
              <h2 className="text-2xl font-bold mb-4">
                9. California Privacy Rights
              </h2>
              <p className="text-muted-foreground leading-relaxed">
                If you are a California resident, you have additional rights
                under the California Consumer Privacy Act (CCPA). These include
                the right to know what personal information we collect, the
                right to delete your personal information, and the right to
                opt-out of the sale of personal information. We do not sell
                personal information.
              </p>
            </section>

            <section>
              <h2 className="text-2xl font-bold mb-4">
                10. Children's Privacy
              </h2>
              <p className="text-muted-foreground leading-relaxed">
                Our services are not directed to children under the age of 13.
                We do not knowingly collect personal information from children
                under 13. If we learn that we have collected personal
                information from a child under 13, we will take steps to delete
                such information promptly.
              </p>
            </section>

            <section>
              <h2 className="text-2xl font-bold mb-4">
                11. International Data Transfers
              </h2>
              <p className="text-muted-foreground leading-relaxed">
                Your information may be transferred to and processed in
                countries other than your country of residence. These countries
                may have data protection laws that are different from the laws
                of your country. We take appropriate safeguards to ensure that
                your personal information remains protected in accordance with
                this Privacy Policy.
              </p>
            </section>

            <section>
              <h2 className="text-2xl font-bold mb-4">
                12. Changes to This Policy
              </h2>
              <p className="text-muted-foreground leading-relaxed">
                We may update this Privacy Policy from time to time. If we make
                material changes, we will notify you by updating the date at the
                top of this policy and, in some cases, we may provide additional
                notice (such as adding a statement to our website or sending you
                a notification).
              </p>
            </section>

            <section>
              <h2 className="text-2xl font-bold mb-4">13. Contact Us</h2>
              <p className="text-muted-foreground leading-relaxed">
                If you have any questions about this Privacy Policy or our
                privacy practices, please contact us at:
              </p>
              <p className="text-muted-foreground leading-relaxed mt-4">
                <strong>Email:</strong>{" "}
                <a
                  href="mailto:info@cartesiancs.com"
                  className="text-primary hover:underline"
                >
                  info@cartesiancs.com
                </a>
              </p>
              <p className="text-muted-foreground leading-relaxed mt-2">
                <strong>GitHub:</strong>{" "}
                <a
                  href="https://github.com/cartesiancs/vessel"
                  className="text-primary hover:underline"
                  target="_blank"
                  rel="noopener noreferrer"
                >
                  github.com/cartesiancs/vessel
                </a>
              </p>
            </section>
          </div>
        </article>
      </main>
      <Footer />
    </>
  );
}


================================================
FILE: apps/landing/src/pages/Roadmap.tsx
================================================
import { Navbar } from "@/components/Navbar";
import { CheckCircle, Circle, Rocket } from "lucide-react";
import {
  Card,
  CardContent,
  CardHeader,
  CardTitle,
  CardDescription,
} from "@/components/ui/card";
import { Footer } from "@/components/Footer";

const roadmapData = [
  {
    status: "completed",
    title: "Phase 1: Prototype",
    description:
      "Defined core features and finalized the technology stack. Completed user experience (UX) design.",
    icon: <CheckCircle className='h-6 w-6 text-green-500' />,
  },
  {
    status: "in-progress",
    title: "Phase 2: Core Feature Development",
    description:
      "Developing key features, including video & audio hardware integration, MQTT connection, UDP, RTSP, real-time communication with WebRTC, a flow-based visual scripting tool, and map navigation, along with other minor functionalities.",
    icon: <Rocket className='h-6 w-6 text-blue-500 animate-pulse' />,
  },
  {
    status: "pending",
    title: "Phase 3: More Advanced Features",
    description:
      "Refining the product with more advanced features, including motion detection, enhanced security, LoRa communication, Agentic AI integration, map-based decision-making, audio analysis, and a comprehensive history feature.",
    icon: <Circle className='h-6 w-6 text-gray-400' />,
  },
  {
    status: "pending",
    title: "Phase 4: Minimum of C2 Software",
    description:
      "An integrated C2 (Command and Control) platform for spatial analysis, decision-making, threat detection, tracking, and third-party software integration.",
    icon: <Circle className='h-6 w-6 text-gray-400' />,
  },
  {
    status: "pending",
    title: "Phase 5: Launch of Watchtower",
    description:
      "Announcing a new, all-in-one hardware solution for instrumentation, security, and detection, featuring a full suite of integrated sensors including a 360° camera, audio, GPS, thermal imaging, and various environmental sensors.",
    icon: <Circle className='h-6 w-6 text-gray-400' />,
  },
  {
    status: "pending",
    title: "Phase 6: Launch of Self-Operating Drone",
    description: "Launching a drone that can contain multiple payloads.",
    icon: <Circle className='h-6 w-6 text-gray-400' />,
  },
];

function RoadmapPage() {
  return (
    <>
      <Navbar />
      <main className='container mx-auto max-w-3xl px-4 py-12 md:py-16'>
        <div className='text-center mb-12'>
          <h1 className='text-4xl font-extrabold tracking-tight lg:text-5xl pt-16'>
            Project Roadmap
          </h1>
          <p className='mt-4 text-lg text-muted-foreground'>
            Follow our journey and see what's next on our agenda.
          </p>
        </div>

        <div className='relative'>
          <div className='absolute left-3 top-3 h-full w-0.5 bg-border -z-10'></div>

          <div className='space-y-10'>
            {roadmapData.map((item, index) => (
              <div key={index} className='flex items-start space-x-6'>
                <div className='flex-shrink-0 mt-1.5 bg-background'>
                  {item.icon}
                </div>
                <Card
                  className={`w-full ${
                    item.status === "in-progress"
                      ? "border-blue-500 shadow-lg"
                      : ""
                  }`}
                >
                  <CardHeader>
                    <div className='flex justify-between items-center'>
                      <CardTitle>{item.title}</CardTitle>
                      <span
                        className={`px-3 py-1 text-xs font-semibold ${
                          item.status === "completed"
                            ? "bg-green-100 text-green-800"
                            : item.status === "in-progress"
                            ? "bg-blue-100 text-blue-800"
                            : "bg-gray-100 text-gray-800"
                        }`}
                      >
                        {item.status === "completed"
                          ? "Completed"
                          : item.status === "in-progress"
                          ? "In Progress"
                          : "Planned"}
                      </span>
                    </div>
                  </CardHeader>
                  <CardContent>
                    <CardDescription>{item.description}</CardDescription>
                  </CardContent>
                </Card>
              </div>
            ))}
          </div>
        </div>
      </main>
      <Footer />
    </>
  );
}

export default RoadmapPage;


================================================
FILE: apps/landing/src/pages/Terms.tsx
================================================
import { Navbar } from "@/components/Navbar";
import { Footer } from "@/components/Footer";

export default function TermsPage() {
  return (
    <>
      <Navbar />
      <main className="min-h-screen bg-background text-foreground">
        <article className="container mx-auto max-w-4xl px-4 pt-24 pb-16 md:pt-28 md:pb-24">
          <h1 className="text-4xl font-extrabold tracking-tight md:text-5xl mb-8">
            Terms of Service
          </h1>
          <p className="text-muted-foreground mb-8">
            Last updated: April 11, 2026
          </p>

          <div className="prose prose-invert max-w-none space-y-8">
            <section>
              <h2 className="text-2xl font-bold mb-4">1. Acceptance of Terms</h2>
              <p className="text-muted-foreground leading-relaxed">
                By accessing or using Vessel's services, website, cloud
                platform, or any related software (collectively, the "Services"),
                you agree to be bound by these Terms of Service ("Terms"). If you
                do not agree to these Terms, you may not use the Services.
              </p>
              <p className="text-muted-foreground leading-relaxed mt-4">
                We may update these Terms from time to time. Continued use of the
                Services after any changes constitutes your acceptance of the
                revised Terms.
              </p>
            </section>

            <section>
              <h2 className="text-2xl font-bold mb-4">2. Description of Services</h2>
              <p className="text-muted-foreground leading-relaxed">
                Vessel is an open-source command-and-control (C2) platform for
                orchestrating and automating physical devices. The Services
                include:
              </p>
              <ul className="list-disc list-inside text-muted-foreground space-y-2 mt-4">
                <li>
                  <strong>Open-Source Software:</strong> The Vessel dashboard and
                  core orchestration engine, available under the applicable
                  open-source license on GitHub.
                </li>
                <li>
                  <strong>Cloud Services:</strong> Managed remote tunnel access,
                  TURN/STUN relay services, Capsule API endpoints, account
                  management, and subscription billing.
                </li>
                <li>
                  <strong>Documentation:</strong> Technical documentation, guides,
                  and resources provided on our website.
                </li>
              </ul>
            </section>

            <section>
              <h2 className="text-2xl font-bold mb-4">3. Account Registration</h2>
              <p className="text-muted-foreground leading-relaxed">
                To access certain features of the Services, you must create an
                account. You agree to:
              </p>
              <ul className="list-disc list-inside text-muted-foreground space-y-2 mt-4">
                <li>Provide accurate and complete registration information</li>
                <li>Maintain the security of your account credentials</li>
                <li>
                  Promptly update your information if it changes
                </li>
                <li>
                  Accept responsibility for all activities that occur under your
                  account
                </li>
              </ul>
              <p className="text-muted-foreground leading-relaxed mt-4">
                We reserve the right to suspend or terminate accounts that violate
                these Terms or that we reasonably believe are being used for
                unauthorized purposes.
              </p>
            </section>

            <section>
              <h2 className="text-2xl font-bold mb-4">4. Acceptable Use</h2>
              <p className="text-muted-foreground leading-relaxed mb-4">
                You agree not to use the Services to:
              </p>
              <ul className="list-disc list-inside text-muted-foreground space-y-2">
                <li>
                  Violate any applicable laws, regulations, or third-party rights
                </li>
                <li>
                  Interfere with or disrupt the integrity or performance of the
                  Services
                </li>
                <li>
                  Attempt to gain unauthorized access to any systems, networks,
                  or data
                </li>
                <li>
                  Distribute malware, viruses, or any other harmful software
                </li>
                <li>
                  Engage in any activity that could damage, disable, or impair
                  the Services
                </li>
                <li>
                  Use the Services for any illegal surveillance or unauthorized
                  monitoring activities
                </li>
                <li>
                  Resell, redistribute, or sublicense the cloud Services without
                  our prior written consent
                </li>
              </ul>
            </section>

            <section>
              <h2 className="text-2xl font-bold mb-4">
                5. Subscription and Payments
              </h2>
              <p className="text-muted-foreground leading-relaxed">
                Certain features of the Services require a paid subscription.
                By subscribing, you agree to the following:
              </p>
              <ul className="list-disc list-inside text-muted-foreground space-y-2 mt-4">
                <li>
                  <strong>Billing:</strong> Subscriptions are billed on a
                  recurring basis (monthly or annually) at the prices listed on
                  our pricing page at the time of purchase.
                </li>
                <li>
                  <strong>Payment Processing:</strong> Payments are processed by
                  our third-party payment provider (Polar). Your use of payment
                  services is subject to their terms.
                </li>
                <li>
                  <strong>Cancellation:</strong> You may cancel your subscription
                  at any time through your dashboard. Upon cancellation, you will
                  retain access until the end of your current billing period.
                </li>
                <li>
                  <strong>Refunds:</strong> Subscription fees are generally
                  non-refundable. Refunds may be granted at our sole discretion
                  on a case-by-case basis.
                </li>
                <li>
                  <strong>Price Changes:</strong> We reserve the right to change
                  our prices. We will provide advance notice of any price changes.
                </li>
              </ul>
            </section>

            <section>
              <h2 className="text-2xl font-bold mb-4">
                6. Intellectual Property
              </h2>
              <p className="text-muted-foreground leading-relaxed">
                The Vessel open-source software is licensed under the terms of
                its applicable open-source license, as specified in the project
                repository. All other aspects of the Services — including but
                not limited to the website design, branding, logos, cloud
                infrastructure, and proprietary APIs — are owned by Vessel and
                protected by intellectual property laws.
              </p>
              <p className="text-muted-foreground leading-relaxed mt-4">
                You retain ownership of any data or content you transmit through
                the Services. By using the Services, you grant us a limited
                license to process your data solely to provide and improve the
                Services.
              </p>
            </section>

            <section>
              <h2 className="text-2xl font-bold mb-4">
                7. Open-Source Components
              </h2>
              <p className="text-muted-foreground leading-relaxed">
                Vessel's core software is open source. Your use of the
                open-source components is governed by the applicable open-source
                license. In the event of a conflict between these Terms and the
                open-source license, the open-source license will prevail with
                respect to the open-source components.
              </p>
              <p className="text-muted-foreground leading-relaxed mt-4">
                Self-hosted instances of Vessel operate independently, and these
                Terms apply only to the extent that you connect to or use our
                cloud Services.
              </p>
            </section>

            <section>
              <h2 className="text-2xl font-bold mb-4">
                8. Service Availability
              </h2>
              <p className="text-muted-foreground leading-relaxed">
                We strive to maintain high availability of our cloud Services but
                do not guarantee uninterrupted or error-free operation. We may
                suspend or discontinue any part of the Services at any time for
                maintenance, updates, or other reasons. We will make reasonable
                efforts to provide advance notice of planned downtime.
              </p>
            </section>

            <section>
              <h2 className="text-2xl font-bold mb-4">
                9. Limitation of Liability
              </h2>
              <p className="text-muted-foreground leading-relaxed">
                TO THE MAXIMUM EXTENT PERMITTED BY LAW, VESSEL AND ITS
                AFFILIATES, OFFICERS, DIRECTORS, EMPLOYEES, AND AGENTS SHALL NOT
                BE LIABLE FOR ANY INDIRECT, INCIDENTAL, SPECIAL, CONSEQUENTIAL,
                OR PUNITIVE DAMAGES ARISING OUT OF OR RELATED TO YOUR USE OF THE
                SERVICES, REGARDLESS OF THE CAUSE OF ACTION OR THE THEORY OF
                LIABILITY.
              </p>
              <p className="text-muted-foreground leading-relaxed mt-4">
                OUR TOTAL AGGREGATE LIABILITY FOR ALL CLAIMS RELATED TO THE
                SERVICES SHALL NOT EXCEED THE AMOUNT YOU PAID US IN THE TWELVE
                (12) MONTHS PRECEDING THE CLAIM.
              </p>
            </section>

            <section>
              <h2 className="text-2xl font-bold mb-4">
                10. Indemnification
              </h2>
              <p className="text-muted-foreground leading-relaxed">
                You agree to indemnify, defend, and hold harmless Vessel and its
                affiliates from and against any claims, liabilities, damages,
                losses, and expenses (including reasonable attorneys' fees)
                arising out of or related to your use of the Services, your
                violation of these Terms, or your violation of any rights of a
                third party.
              </p>
            </section>

            <section>
              <h2 className="text-2xl font-bold mb-4">11. Termination</h2>
              <p className="text-muted-foreground leading-relaxed">
                We may terminate or suspend your access to the Services at any
                time, with or without cause, and with or without notice. Upon
                termination, your right to use the Services will immediately
                cease. Provisions of these Terms that by their nature should
                survive termination will survive, including but not limited to
                ownership provisions, warranty disclaimers, indemnity, and
                limitations of liability.
              </p>
            </section>

            <section>
              <h2 className="text-2xl font-bold mb-4">
                12. Governing Law
              </h2>
              <p className="text-muted-foreground leading-relaxed">
                These Terms are governed by and construed in accordance with the
                laws of the Republic of Korea, without regard to its conflict of
                law principles. Any disputes arising under these Terms shall be
                subject to the exclusive jurisdiction of the courts located in
                the Republic of Korea.
              </p>
            </section>

            <section>
              <h2 className="text-2xl font-bold mb-4">13. Contact Us</h2>
              <p className="text-muted-foreground leading-relaxed">
                If you have any questions about these Terms, please contact us
                at:
              </p>
              <p className="text-muted-foreground leading-relaxed mt-4">
                <strong>Email:</strong>{" "}
                <a
                  href="mailto:info@cartesiancs.com"
                  className="text-primary hover:underline"
                >
                  info@cartesiancs.com
                </a>
              </p>
              <p className="text-muted-foreground leading-relaxed mt-2">
                <strong>GitHub:</strong>{" "}
                <a
                  href="https://github.com/cartesiancs/vessel"
                  className="text-primary hover:underline"
                  target="_blank"
                  rel="noopener noreferrer"
                >
                  github.com/cartesiancs/vessel
                </a>
              </p>
            </section>
          </div>
        </article>
      </main>
      <Footer />
    </>
  );
}


================================================
FILE: apps/landing/src/pages/UseCase.tsx
================================================
import { Circle } from "lucide-react";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Footer } from "@/components/Footer";
import { Navbar } from "@/components/Navbar";

const useCases = [
  {
    icon: Circle,
    title: "Automation with Flow",
    description:
      "Anyone can easily control the space using a visual editing tool.",
    image: "/images/flow.png",
  },
  {
    icon: Circle,
    title: "Space Control",
    description:
      "Control your surroundings and protect your assets through an intuitive, at-a-glance map interface.",
    image: "/images/map.png",
  },
  {
    icon: Circle,
    title: "Threat Detection (Coming Soon)",
    description:
      "Detect threats like burglars and porch pirates, and you can sound an alarm or respond automatically through Flow.",
  },
  {
    icon: Circle,
    title: "Local Mode (Coming Soon)",
    description:
      "Install the Vessel server on your laptop to use it on the go or in different network environments.",
  },
];

function UsecasePage() {
  return (
    <>
      <Navbar />
      <main className='container mx-auto max-w-5xl px-4 py-12 md:py-16'>
        <div className='text-center mb-16'>
          <h1 className='text-4xl font-extrabold tracking-tight lg:text-5xl pt-16'>
            Use Cases
          </h1>
          <p className='mt-4 text-lg text-muted-foreground'>
            See how our product can be utilized in various scenarios.
          </p>
        </div>

        <div className='grid grid-cols-1 gap-8 md:grid-cols-2'>
          {useCases.map((useCase, index) => (
            <Card
              key={index}
              className='flex flex-col overflow-hidden transition-transform transform hover:-translate-y-1'
            >
              <CardHeader>
                <div className='flex items-center gap-4'>
                  <div className='flex h-12 w-12 items-center justify-center bg-primary/10'>
                    <useCase.icon className='h-6 w-6 text-primary' />
                  </div>
                  <CardTitle className='text-lg'>{useCase.title}</CardTitle>
                </div>
              </CardHeader>
              <CardContent className='flex flex-col flex-grow'>
                {useCase.image && (
                  <div className='w-full h-48 mb-4 overflow-hidden'>
                    <img
                      src={useCase.image}
                      alt={`${useCase.title} image`}
                      className='w-full h-full object-cover'
                      loading='lazy'
                    />
                  </div>
                )}

                <p className='text-muted-foreground'>{useCase.description}</p>
              </CardContent>
            </Card>
          ))}
        </div>
      </main>
      <Footer />
    </>
  );
}

export default UsecasePage;


================================================
FILE: apps/landing/src/vite-env.d.ts
================================================
/// <reference types="vite/client" />

interface ImportMetaEnv {
  readonly VITE_SUPABASE_URL: string;
  readonly VITE_SUPABASE_ANON_KEY: string;
  readonly VITE_POLAR_PRO_PRODUCT_ID: string;
}

interface ImportMeta {
  readonly env: ImportMetaEnv;
}


================================================
FILE: apps/landing/tsconfig.app.json
================================================
{
  "compilerOptions": {
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
    "target": "ES2022",
    "useDefineForClassFields": true,
    "lib": ["ES2022", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    },

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "verbatimModuleSyntax": true,
    "moduleDetection": "force",
    "noEmit": true,
    "jsx": "react-jsx",

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "erasableSyntaxOnly": true,
    "noFallthroughCasesInSwitch": true,
    "noUncheckedSideEffectImports": true
  },
  "include": ["src"]
}


================================================
FILE: apps/landing/tsconfig.json
================================================
{
  "files": [],
  "references": [
    { "path": "./tsconfig.app.json" },
    { "path": "./tsconfig.node.json" }
  ],
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}


================================================
FILE: apps/landing/tsconfig.node.json
================================================
{
  "compilerOptions": {
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
    "target": "ES2023",
    "lib": ["ES2023"],
    "module": "ESNext",
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "verbatimModuleSyntax": true,
    "moduleDetection": "force",
    "noEmit": true,

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "erasableSyntaxOnly": true,
    "noFallthroughCasesInSwitch": true,
    "noUncheckedSideEffectImports": true
  },
  "include": ["vite.config.ts"]
}


================================================
FILE: apps/landing/vite.config.ts
================================================
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import path from "path";
import tailwindcss from "@tailwindcss/vite";

// https://vite.dev/config/
export default defineConfig({
  server: {
    port: 5174,
  },
  plugins: [react(), tailwindcss()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
});


================================================
FILE: apps/server/Cargo.toml
================================================
[package]
name = "server"
version = "0.1.0"
edition = "2021"

[dependencies]
tokio = { version = "1", features = ["full"] }
tokio-util = { version = "0.7", features = ["io"] }
axum = { version = "0.7", features = ["ws"] }
serde = { version = "1", features = ["derive"] }
serde_json = "1"
anyhow = "1"
tracing = "0.1"
tracing-subscriber = { version = "0.3", features = ["env-filter"] }
futures-util = "0.3"
tokio-stream = "0.1"
url = "2"
rumqttd = "0.19.0"
toml = "0.9.5"
rumqttc = "0.24.0"
webrtc = "0.13.0"
interceptor = "0.14.0"
clap = { version = "4.5.4", features = ["derive"] } 
tower-http = { version = "0.5.2", features = ["fs", "cors"] }
bytes = "1.10.1"
jsonwebtoken = "9"
axum-extra = { version = "0.9", features = ["typed-header"] }
chrono = { version = "0.4.41", features = ["serde"] }
async-trait = "0.1.88"
dotenvy = "0.15.7"
diesel = { version = "2.2.0", features = ["sqlite", "chrono", "r2d2", "returning_clauses_for_sqlite_3_35"] }
libsqlite3-sys = { version = "*", features = ["bundled"] }
diesel_migrations = "2.2.0"
bcrypt = "0.17.0"
r2d2 = "0.8"
dashmap = "6.1.0"
rtp = "0.13.0"
rand = "0.9.2"
base64 = "0.22.1"
tracing-appender = "0.2.3"
rust-embed = "8"
mime_guess = "2.0"
sysinfo = "0.36.1"
reqwest = { version = "0.12.23", features = ["json"]}
gstreamer = "0.24"
gstreamer-app = "0.24"
crossbeam-channel = "0.5.15"
ort = "=2.0.0-rc.10"
ndarray = "0.15"
image = "0.25"
once_cell = "1.19"
opus = "0.3"
tract-onnx = "0.22"
lazy_static = "1.5.0"
colored = "3.0.0"
local-ip-address = "0.6.5"
uuid = "1.18.1"
rhai = { version = "1", features = ["serde"] }
rhai-rand = "0.1"
config = { version =  "0.15.15", features = ["toml"] }
tokio-tungstenite = { version = "0.27", features = ["rustls-tls-native-roots"] }
tungstenite = { version = "0.27", features = ["rustls-tls-native-roots"] }
httparse = "1.9"
http = "1"


[[bin]]
name = "server"
path = "src/main.rs"



[dev-dependencies]
tokio-test = "0.4"
tempfile = "3"

[target.x86_64-unknown-linux-musl]
linker = "musl-gcc"

[target.x86_64-pc-windows-gnu]
linker = 'x86_64-w64-mingw32-gcc'


================================================
FILE: apps/server/build.rs
================================================
use std::env;
use std::process::Command;

fn main() -> Result<(), Box<dyn std::error::Error>> {
    if let Ok(profile) = env::var("PROFILE") {
        if profile == "release" {
            let client_dir = std::path::Path::new("../../apps/client");

            println!("cargo:warning=Running 'npm run build' in ../../apps/client...");
            let output = Command::new("npm")
                .arg("run")
                .arg("build")
                .current_dir(&client_dir)
                .output()?;

            if !output.status.success() {
                panic!(
                    "npm run build failed: {}",
                    String::from_utf8_lossy(&output.stderr)
                );
            }
        }
    }

    Ok(())
}


================================================
FILE: apps/server/diesel.toml
================================================
# For documentation on how to configure this file,
# see https://diesel.rs/guides/configuring-diesel-cli


[print_schema]
file = "src/db/schema.rs"
custom_type_derives = ["diesel::query_builder::QueryId", "Clone"]

[migrations_directory]
dir = "/Users/huhhyeongjun/Documents/GitHub/vessel/apps/server/migrations"


================================================
FILE: apps/server/migrations/.keep
================================================


================================================
FILE: apps/server/migrations/2025-08-07-152325_users/down.sql
================================================
-- This file should undo anything in `up.sql`
DROP TABLE users;


================================================
FILE: apps/server/migrations/2025-08-07-152325_users/up.sql
================================================
CREATE TABLE users (
    id INTEGER PRIMARY KEY NOT NULL,
    username VARCHAR(255) NOT NULL UNIQUE,
    email VARCHAR(255) NOT NULL UNIQUE,
    password_hash VARCHAR(255) NOT NULL,
    created_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
    updated_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP
);

CREATE TABLE devices (
    id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT,
    device_id VARCHAR(255) NOT NULL UNIQUE, 
    name VARCHAR(255),
    manufacturer VARCHAR(255),
    model VARCHAR(255)
);

CREATE TABLE device_tokens (
    id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT,
    device_id INTEGER NOT NULL UNIQUE,
    token_hash VARCHAR(255) NOT NULL UNIQUE,
    expires_at DATETIME,
    last_used_at DATETIME,
    created_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
    FOREIGN KEY(device_id) REFERENCES devices(id) ON DELETE CASCADE
);

CREATE TABLE entities (
    id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT,
    entity_id VARCHAR(255) NOT NULL UNIQUE,
    device_id INTEGER,
    friendly_name VARCHAR(255),
    platform VARCHAR(255),
    entity_type VARCHAR(255),
    FOREIGN KEY(device_id) REFERENCES devices(id) ON DELETE CASCADE
);

CREATE TABLE states_meta (
    metadata_id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT,
    entity_id VARCHAR(255) NOT NULL UNIQUE
);

CREATE TABLE states (
    state_id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT,
    metadata_id INTEGER,
    state VARCHAR(255),
    attributes TEXT,
    last_changed DATETIME,
    last_updated DATETIME,
    created DATETIME,
    FOREIGN KEY(metadata_id) REFERENCES states_meta(metadata_id)
);

CREATE TABLE events (
    event_id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT,
    event_type VARCHAR(64),
    event_data TEXT,
    origin VARCHAR(32),
    time_fired DATETIME
);

CREATE TABLE entities_configurations (
    id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT,
    entity_id INTEGER NOT NULL UNIQUE,
    configuration TEXT NOT NULL,
    created_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
    updated_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
    FOREIGN KEY(entity_id) REFERENCES entities(id) ON DELETE CASCADE
);

CREATE TABLE system_configurations (
    id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT,
    key VARCHAR(255) NOT NULL UNIQUE,
    value TEXT NOT NULL,
    enabled INTEGER NOT NULL DEFAULT 1 CHECK(enabled IN (0, 1)),
    description TEXT,
    created_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
    updated_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP
);

CREATE TABLE flows (
    id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT,
    name VARCHAR(255) NOT NULL,
    description TEXT,
    enabled INTEGER NOT NULL DEFAULT 1 CHECK(enabled IN (0, 1)),
    created_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
    updated_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP
);

CREATE TABLE flow_versions (
    id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT,
    flow_id INTEGER NOT NULL,
    version INTEGER NOT NULL,
    graph_json TEXT NOT NULL,
    comment TEXT,
    created_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
    FOREIGN KEY(flow_id) REFERENCES flows(id) ON DELETE CASCADE,
    UNIQUE(flow_id, version)
);

================================================
FILE: apps/server/migrations/2025-08-22-092047_map/down.sql
================================================
-- This file should undo anything in `up.sql`
DROP TABLE map_layers;
DROP TABLE map_features;
DROP TABLE map_vertices;


================================================
FILE: apps/server/migrations/2025-08-22-092047_map/up.sql
================================================

CREATE TABLE map_layers (
    id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT,
    name VARCHAR(255) NOT NULL,
    description TEXT,
    owner_user_id INTEGER NOT NULL,
    is_visible INTEGER NOT NULL DEFAULT 1 CHECK(is_visible IN (0, 1)), 
    created_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
    updated_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
    FOREIGN KEY(owner_user_id) REFERENCES users(id) ON DELETE CASCADE
);


CREATE TABLE map_features (
    id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT,
    layer_id INTEGER NOT NULL,
    feature_type VARCHAR(10) NOT NULL CHECK(feature_type IN ('POINT', 'LINE', 'POLYGON')), 
    name VARCHAR(255),
    style_properties TEXT,
    created_by_user_id INTEGER NOT NULL,
    created_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
    updated_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
    FOREIGN KEY(layer_id) REFERENCES map_layers(id) ON DELETE CASCADE,
    FOREIGN KEY(created_by_user_id) REFERENCES users(id) ON DELETE SET NULL
);


CREATE TABLE map_vertices (
    id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT,
    feature_id INTEGER NOT NULL,
    latitude REAL NOT NULL,
    longitude REAL NOT NULL,
    altitude REAL,
    sequence INTEGER NOT NULL,
    FOREIGN KEY(feature_id) REFERENCES map_features(id) ON DELETE CASCADE
);

================================================
FILE: apps/server/migrations/2025-09-08-073323_create_rbac_tables/down.sql
================================================
DROP TABLE user_roles;
DROP TABLE role_permissions;
DROP TABLE permissions;
DROP TABLE roles;

================================================
FILE: apps/server/migrations/2025-09-08-073323_create_rbac_tables/up.sql
================================================
CREATE TABLE roles (
    id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT,
    name VARCHAR(255) NOT NULL UNIQUE, -- ex: 'admin', 'editor', 'viewer'
    description TEXT
);

CREATE TABLE permissions (
    id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT,
    name VARCHAR(255) NOT NULL UNIQUE, -- ex: 'users:create', 'devices:edit', 'flows:view'
    description TEXT
);

CREATE TABLE role_permissions (
    role_id INTEGER NOT NULL,
    permission_id INTEGER NOT NULL,
    PRIMARY KEY (role_id, permission_id),
    FOREIGN KEY(role_id) REFERENCES roles(id) ON DELETE CASCADE,
    FOREIGN KEY(permission_id) REFERENCES permissions(id) ON DELETE CASCADE
);

CREATE TABLE user_roles (
    user_id INTEGER NOT NULL,
    role_id INTEGER NOT NULL,
    PRIMARY KEY (user_id, role_id),
    FOREIGN KEY(user_id) REFERENCES users(id) ON DELETE CASCADE,
    FOREIGN KEY(role_id) REFERENCES roles(id) ON DELETE CASCADE
);

================================================
FILE: apps/server/migrations/2025-09-11-151252_custom_node/down.sql
================================================
-- This file should undo anything in `up.sql`
DROP TABLE custom_nodes;


================================================
FILE: apps/server/migrations/2025-09-11-151252_custom_node/up.sql
================================================
CREATE TABLE custom_nodes (
  node_type TEXT PRIMARY KEY NOT NULL,
  data TEXT NOT NULL
);

================================================
FILE: apps/server/migrations/2025-09-19-060609_create_streams/down.sql
================================================
-- This file should undo anything in `up.sql`
DROP TABLE streams;


================================================
FILE: apps/server/migrations/2025-09-19-060609_create_streams/up.sql
================================================
-- Your SQL goes here
CREATE TABLE streams (
    ssrc INTEGER PRIMARY KEY NOT NULL,
    topic TEXT NOT NULL,
    device_id TEXT NOT NULL,
    media_type TEXT NOT NULL,
    created_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
    UNIQUE(topic, device_id)
);

================================================
FILE: apps/server/migrations/2026-01-12-023507_dyndashboard/down.sql
================================================
-- This file should undo anything in `up.sql`
DROP TABLE IF EXISTS dynamic_dashboards;


================================================
FILE: apps/server/migrations/2026-01-12-023507_dyndashboard/up.sql
================================================
-- Your SQL goes here
CREATE TABLE dynamic_dashboards (
    id TEXT PRIMARY KEY NOT NULL,
    name TEXT NOT NULL,
    layout TEXT NOT NULL,
    created_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
    updated_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP
);


================================================
FILE: apps/server/migrations/2026-01-31-000001_create_recordings/down.sql
================================================
DROP INDEX IF EXISTS idx_recordings_started_at;
DROP INDEX IF EXISTS idx_recordings_status;
DROP INDEX IF EXISTS idx_recordings_topic;
DROP TABLE recordings;


================================================
FILE: apps/server/migrations/2026-01-31-000001_create_recordings/up.sql
================================================
CREATE TABLE recordings (
    id INTEGER PRIMARY KEY AUTOINCREMENT NOT NULL,
    stream_ssrc INTEGER NOT NULL,
    topic TEXT NOT NULL,
    device_id TEXT NOT NULL,
    media_type TEXT NOT NULL,
    filename TEXT NOT NULL,
    file_path TEXT NOT NULL,
    file_size INTEGER NOT NULL DEFAULT 0,
    duration_ms INTEGER NOT NULL DEFAULT 0,
    status TEXT NOT NULL DEFAULT 'recording',
    started_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
    ended_at TIMESTAMP,
    created_by_user_id INTEGER
);

CREATE INDEX idx_recordings_topic ON recordings(topic);
CREATE INDEX idx_recordings_status ON recordings(status);
CREATE INDEX idx_recordings_started_at ON recordings(started_at);


================================================
FILE: apps/server/src/broker_mqtt.rs
================================================
use std::sync::Arc;

use crate::{
    db,
    state::{AppState, MqttMessage, Protocol},
};
use anyhow::Result;
use rumqttc::{AsyncClient, Event, EventLoop, Incoming, QoS};
use serde_json::json;
use tokio::sync::broadcast;
use tracing::{error, info, warn};

pub async fn start_event_loop(
    client: AsyncClient,
    mut eventloop: EventLoop,
    mqtt_tx: broadcast::Sender<MqttMessage>,
    state: Arc<AppState>,
) -> Result<()> {
    client.subscribe("#", QoS::AtMostOnce).await?;

    info!("Internal MQTT client connected and subscribed to all topics.");

    loop {
        match eventloop.poll().await {
            Ok(Event::Incoming(Incoming::Publish(p))) => {
                let topic_str = p.topic.clone();
                let payload_str = match std::str::from_utf8(&p.payload) {
                    Ok(v) => v,
                    Err(_) => {
                        warn!(
                            "Received non-UTF8 payload on topic '{}'. Skipping.",
                            &topic_str
                        );
                        continue;
                    }
                };
                let msg = MqttMessage {
                    topic: p.topic,
                    bytes: p.payload.to_vec().into(),
                };

                let topic_map = state.topic_map.read().await;
                let matched_mapping = topic_map
                    .iter()
                    .find(|m| m.protocol == Protocol::MQTT && m.topic == topic_str);

                if let Some(mapping) = matched_mapping {
                    let pool = state.pool.clone();
                    let entity_id = mapping.entity_id.clone();
                    let state_value = payload_str.to_string();

                    if let Ok(s) =
                        db::repository::set_entity_state(&pool, &entity_id, &state_value, None)
                    {
                        let ws_message = json!({
                            "type": "change_state",
                            "payload": {
                                "entity_id": entity_id,
                                "state": s.clone()
                            }
                        });
                        if let Ok(payload_str) = serde_json::to_string(&ws_message) {
                            if state.broadcast_tx.send(payload_str).is_err() {
                                error!("Failed to send health check response.");
                            }
                        }
                    } else {
                        error!("Failed to set entity state");
                    }
                }

                if mqtt_tx.send(msg).is_err() {
                    warn!("mqtt::event_loop ▶ receiver lagging, mqtt message dropped");
                }
            }
            Ok(Event::Incoming(Incoming::Disconnect)) => {
                warn!("MQTT client disconnected, stopping event loop.");
                break;
            }
            Err(e) => {
                error!("MQTT event loop error: {}", e);
                tokio::time::sleep(std::time::Duration::from_secs(1)).await;
            }
            _ => {}
        }
    }
    Ok(())
}


================================================
FILE: apps/server/src/config.rs
================================================
use config::{Config, ConfigError, File};
use rand::{distr::Alphanumeric, Rng};
use serde::{Deserialize, Serialize};
use std::{env, fs, path::Path};

const CONFIG_FILE: &str = "config.toml";

#[derive(Debug, Deserialize, Serialize)]
pub struct Settings {
    pub jwt_secret: String,
    pub listen_address: String,
    pub database_url: String,
}

impl Settings {
    pub fn new() -> Result<Self, ConfigError> {
        if cfg!(debug_assertions) {
            println!("INFO: Running in DEV mode. Loading from .env file.");
            dotenvy::dotenv().expect(".env file not found in DEV mode");

            let s = Config::builder()
                .add_source(config::Environment::default().separator("__"))
                .build()?;
            s.try_deserialize()
        } else {
            println!("INFO: Running in PROD mode. Loading from {}.", CONFIG_FILE);
            if Path::new(CONFIG_FILE).exists() {
                let s = Config::builder()
                    .add_source(File::with_name(CONFIG_FILE))
                    .build()?;
                s.try_deserialize()
            } else {
                println!(
                    "INFO: {} not found. Generating and using a new one.",
                    CONFIG_FILE
                );
                let secret: String = rand::rng()
                    .sample_iter(&Alphanumeric)
                    .take(32)
                    .map(char::from)
                    .collect();

                let default_settings = Settings {
                    jwt_secret: secret,
                    listen_address: "0.0.0.0:6174".to_string(),
                    database_url: "database.db".to_string(),
                };

                let toml_content = toml::to_string(&default_settings).unwrap();
                fs::write(CONFIG_FILE, toml_content).expect("Failed to write config file");

                Ok(default_settings)
            }
        }
    }
}


================================================
FILE: apps/server/src/db/conn.rs
================================================
use diesel::r2d2::{self, ConnectionManager, CustomizeConnection};
use diesel::sqlite::SqliteConnection;
use diesel::connection::SimpleConnection;

use crate::state::DbPool;

#[derive(Debug)]
struct SqliteConnectionCustomizer;

impl CustomizeConnection<SqliteConnection, diesel::r2d2::Error> for SqliteConnectionCustomizer {
    fn on_acquire(&self, conn: &mut SqliteConnection) -> Result<(), diesel::r2d2::Error> {
        conn.batch_execute("PRAGMA journal_mode = WAL; PRAGMA busy_timeout = 5000;")
            .map_err(|e| diesel::r2d2::Error::QueryError(e))?;
        Ok(())
    }
}

pub fn establish_connection(database_url: &str) -> DbPool {
    let manager = ConnectionManager::<SqliteConnection>::new(database_url);
    r2d2::Pool::builder()
        .connection_customizer(Box::new(SqliteConnectionCustomizer))
        .build(manager)
        .expect("Failed to create pool.")
}


================================================
FILE: apps/server/src/db/mod.rs
================================================
pub mod conn;
pub mod models;
pub mod repository;
pub mod schema;


================================================
FILE: apps/server/src/db/models.rs
================================================
use crate::db::schema::{
    device_tokens, devices, entities, entities_configurations, events, flow_versions, flows,
    map_features, map_layers, map_vertices, recordings, states, states_meta, streams,
    system_configurations, users,
};
use chrono::NaiveDateTime;
use diesel::prelude::*;
use serde::{Deserialize, Serialize};
use serde_json::Value;

#[derive(Queryable, Selectable, Identifiable, Serialize)]
#[diesel(table_name = crate::db::schema::users)]
#[diesel(check_for_backend(diesel::sqlite::Sqlite))]
pub struct User {
    pub id: i32,
    pub username: String,
    pub email: String,
    #[serde(skip_serializing)]
    pub password_hash: String,
    pub created_at: NaiveDateTime,
    pub updated_at: NaiveDateTime,
}

#[derive(Serialize, Clone)]
pub struct UserWithRoles {
    pub id: i32,
    pub username: String,
    pub email: String,
    pub created_at: NaiveDateTime,
    pub updated_at: NaiveDateTime,
    pub roles: Vec<Role>,
}

#[derive(Insertable)]
#[diesel(table_name = users)]
pub struct NewUser<'a> {
    pub username: &'a str,
    pub email: &'a str,
    pub password_hash: &'a str,
}

#[derive(AsChangeset, Deserialize, Default)]
#[diesel(table_name = users)]
pub struct UpdateUser {
    pub username: Option<String>,
    pub email: Option<String>,
    pub password_hash: Option<String>,
}

#[derive(Queryable, Selectable, Identifiable, Serialize)]
#[diesel(table_name = devices)]
pub struct Device {
    pub id: i32,
    pub device_id: String,
    pub name: Option<String>,
    pub manufacturer: Option<String>,
    pub model: Option<String>,
}

#[derive(Insertable)]
#[diesel(table_name = devices)]
pub struct NewDevice<'a> {
    pub device_id: &'a str,
    pub name: Option<&'a str>,
    pub manufacturer: Option<&'a str>,
    pub model: Option<&'a str>,
}

#[derive(Queryable, Selectable, Identifiable, Associations, Serialize, Deserialize, Clone)]
#[diesel(table_name = entities)]
#[diesel(belongs_to(Device))]
pub struct Entity {
    pub id: i32,
    pub entity_id: String,
    pub device_id: Option<i32>,
    pub friendly_name: Option<String>,
    pub platform: Option<String>,
    pub entity_type: Option<String>,
}

#[derive(Insertable)]
#[diesel(table_name = entities)]
pub struct NewEntity<'a> {
    pub entity_id: &'a str,
    pub device_id: Option<i32>,
    pub friendly_name: Option<&'a str>,
    pub platform: Option<&'a str>,
    pub entity_type: Option<&'a str>,
}

#[derive(Queryable, Selectable, Identifiable, Associations, Serialize, Deserialize, Clone)]
#[diesel(table_name = entities_configurations)]
#[diesel(belongs_to(Entity))]
#[diesel(primary_key(id))]
pub struct EntityConfiguration {
    pub id: i32,
    pub entity_id: i32,
    pub configuration: String,
    pub created_at: NaiveDateTime,
    pub updated_at: NaiveDateTime,
}

#[derive(Insertable)]
#[diesel(table_name = entities_configurations)]
pub struct NewEntityConfiguration<'a> {
    pub entity_id: i32,
    pub configuration: &'a str,
}

#[derive(Serialize, Deserialize, Clone)]
pub struct EntityWithConfig {
    #[serde(flatten)]
    pub entity: Entity,
    pub configuration: Option<Value>,
}

#[derive(Serialize, Deserialize)]
pub struct EntityWithStateAndConfig {
    #[serde(flatten)]
    pub entity: Entity,
    pub configuration: Option<Value>,
    pub state: Option<State>,
}

#[derive(Queryable, Selectable, Identifiable, Serialize)]
#[diesel(table_name = states_meta)]
#[diesel(primary_key(metadata_id))]
pub struct StatesMeta {
    pub metadata_id: i32,
    pub entity_id: String,
}

#[derive(Insertable)]
#[diesel(table_name = states_meta)]
pub struct NewStatesMeta<'a> {
    pub entity_id: &'a str,
}

#[derive(Queryable, Selectable, Identifiable, Associations, Serialize, Deserialize, Clone)]
#[diesel(table_name = states)]
#[diesel(primary_key(state_id))]
#[diesel(belongs_to(StatesMeta, foreign_key = metadata_id))]
pub struct State {
    pub state_id: i32,
    pub metadata_id: Option<i32>,
    pub state: Option<String>,
    pub attributes: Option<String>,
    pub last_changed: Option<NaiveDateTime>,
    pub last_updated: Option<NaiveDateTime>,
    pub created: Option<NaiveDateTime>,
}

#[derive(Insertable)]
#[diesel(table_name = states)]
pub struct NewState<'a> {
    pub metadata_id: Option<i32>,
    pub state: Option<&'a str>,
    pub attributes: Option<&'a str>,
    pub last_changed: Option<NaiveDateTime>,
    pub last_updated: Option<NaiveDateTime>,
    pub created: Option<NaiveDateTime>,
}

#[derive(Queryable, Selectable, Identifiable, Serialize)]
#[diesel(table_name = events)]
#[diesel(primary_key(event_id))]
pub struct Event {
    pub event_id: i32,
    pub event_type: Option<String>,
    pub event_data: Option<String>,
    pub origin: Option<String>,
    pub time_fired: Option<NaiveDateTime>,
}

#[derive(Insertable)]
#[diesel(table_name = events)]
pub struct NewEvent<'a> {
    pub event_type: Option<&'a str>,
    pub event_data: Option<&'a str>,
    pub origin: Option<&'a str>,
    pub time_fired: Option<NaiveDateTime>,
}

#[derive(Queryable, Selectable, Identifiable, Serialize, Clone, Debug)]
#[diesel(table_name = system_configurations)]
pub struct SystemConfiguration {
    pub id: i32,
    pub key: String,
    pub value: String,
    pub enabled: i32,
    pub description: Option<String>,
    pub created_at: NaiveDateTime,
    pub updated_at: NaiveDateTime,
}

#[derive(Insertable, AsChangeset)]
#[diesel(table_name = system_configurations)]
pub struct NewSystemConfiguration<'a> {
    pub key: &'a str,
    pub value: &'a str,
    pub enabled: Option<i32>,
    pub description: Option<&'a str>,
}

#[derive(Queryable, Identifiable, Serialize, Clone, Selectable)]
#[diesel(table_name = crate::db::schema::dynamic_dashboards)]
#[diesel(primary_key(id))]
pub struct DynamicDashboard {
    pub id: String,
    pub name: String,
    pub layout: String,
    pub created_at: NaiveDateTime,
    pub updated_at: NaiveDateTime,
}

#[derive(Insertable)]
#[diesel(table_name = crate::db::schema::dynamic_dashboards)]
pub struct NewDynamicDashboard<'a> {
    pub id: &'a str,
    pub name: &'a str,
    pub layout: &'a str,
}

#[derive(AsChangeset)]
#[diesel(table_name = crate::db::schema::dynamic_dashboards)]
pub struct UpdateDynamicDashboard<'a> {
    pub name: Option<&'a str>,
    pub layout: Option<&'a str>,
    pub updated_at: Option<NaiveDateTime>,
}

#[derive(Queryable, Selectable, Identifiable, Associations, Serialize, Clone)]
#[diesel(table_name = device_tokens)]
#[diesel(belongs_to(Device))]
pub struct DeviceToken {
    pub id: i32,
    pub device_id: i32,
    #[serde(skip_serializing)]
    pub token_hash: String,
    pub expires_at: Option<NaiveDateTime>,
    pub last_used_at: Option<NaiveDateTime>,
    pub created_at: NaiveDateTime,
}

#[derive(Insertable)]
#[diesel(table_name = device_tokens)]
pub struct NewDeviceToken<'a> {
    pub device_id: i32,
    pub token_hash: &'a str,
}

#[derive(Queryable, Selectable, Identifiable, Serialize, Clone)]
#[diesel(table_name = flows)]
pub struct Flow {
    pub id: i32,
    pub name: String,
    pub description: Option<String>,
    pub enabled: i32,
    pub created_at: NaiveDateTime,
    pub updated_at: NaiveDateTime,
}

#[derive(Insertable, AsChangeset)]
#[diesel(table_name = flows)]
pub struct NewFlow<'a> {
    pub name: &'a str,
    pub description: Option<&'a str>,
    pub enabled: Option<i32>,
}

#[derive(Queryable, Selectable, Identifiable, Associations, Serialize, Clone)]
#[diesel(table_name = flow_versions)]
#[diesel(belongs_to(Flow))]
pub struct FlowVersion {
    pub id: i32,
    pub flow_id: i32,
    pub version: i32,
    pub graph_json: String,
    pub comment: Option<String>,
    pub created_at: NaiveDateTime,
}

#[derive(Insertable)]
#[diesel(table_name = flow_versions)]
pub struct NewFlowVersion<'a> {
    pub flow_id: i32,
    pub version: i32,
    pub graph_json: &'a str,
    pub comment: Option<&'a str>,
}

#[derive(Queryable, Selectable, Identifiable, Associations, Serialize, Clone)]
#[diesel(table_name = crate::db::schema::map_layers)]
#[diesel(belongs_to(User, foreign_key = owner_user_id))]
#[diesel(check_for_backend(diesel::sqlite::Sqlite))]
pub struct MapLayer {
    pub id: i32,
    pub name: String,
    pub description: Option<String>,
    pub owner_user_id: i32,
    pub is_visible: i32,
    pub created_at: NaiveDateTime,
    pub updated_at: NaiveDateTime,
}

#[derive(Insertable)]
#[diesel(table_name = map_layers)]
pub struct NewMapLayer<'a> {
    pub name: &'a str,
    pub description: Option<&'a str>,
    pub owner_user_id: i32,
    pub is_visible: Option<i32>,
}

#[derive(AsChangeset, Deserialize)]
#[diesel(table_name = map_layers)]
pub struct UpdateMapLayer {
    pub name: Option<String>,
    pub description: Option<String>,
    pub is_visible: Option<i32>,
}

#[derive(Queryable, Selectable, Identifiable, Associations, Serialize, Clone)]
#[diesel(table_name = crate::db::schema::map_features)]
#[diesel(belongs_to(MapLayer, foreign_key = layer_id))]
#[diesel(belongs_to(User, foreign_key = created_by_user_id))]
#[diesel(check_for_backend(diesel::sqlite::Sqlite))]
pub struct MapFeature {
    pub id: i32,
    pub layer_id: i32,
    pub feature_type: String,
    pub name: Option<String>,
    pub style_properties: Option<String>,
    pub created_by_user_id: i32,
    pub created_at: NaiveDateTime,
    pub updated_at: NaiveDateTime,
}

#[derive(Insertable)]
#[diesel(table_name = map_features)]
pub struct NewMapFeature<'a> {
    pub layer_id: i32,
    pub feature_type: &'a str,
    pub name: Option<&'a str>,
    pub style_properties: Option<&'a str>,
    pub created_by_user_id: i32,
}

#[derive(AsChangeset, Deserialize, Default)]
#[diesel(table_name = map_features)]
pub struct UpdateMapFeature {
    pub name: Option<String>,
    pub style_properties: Option<String>,
}

impl UpdateMapFeature {
    pub fn has_changes(&self) -> bool {
        self.name.is_some() || self.style_properties.is_some()
    }
}

#[derive(Queryable, Selectable, Identifiable, Associations, Serialize, Deserialize, Clone)]
#[diesel(table_name = crate::db::schema::map_vertices)]
#[diesel(belongs_to(MapFeature, foreign_key = feature_id))]
#[diesel(check_for_backend(diesel::sqlite::Sqlite))]
pub struct MapVertex {
    pub id: i32,
    pub feature_id: i32,
    pub latitude: f32,
    pub longitude: f32,
    pub altitude: Option<f32>,
    pub sequence: i32,
}

#[derive(Insertable, Clone)]
#[diesel(table_name = map_vertices)]
pub struct NewMapVertex {
    pub feature_id: i32,
    pub latitude: f32,
    pub longitude: f32,
    pub altitude: Option<f32>,
    pub sequence: i32,
}

#[derive(Serialize, Clone)]
pub struct FeatureWithVertices {
    #[serde(flatten)]
    pub feature: MapFeature,
    pub vertices: Vec<MapVertex>,
}

#[derive(Serialize, Clone)]
pub struct LayerWithFeatures {
    #[serde(flatten)]
    pub layer: MapLayer,
    pub features: Vec<FeatureWithVertices>,
}

#[derive(Queryable, Selectable, Identifiable, Serialize, Deserialize, Clone)]
#[diesel(table_name = crate::db::schema::roles)]
#[diesel(check_for_backend(diesel::sqlite::Sqlite))]
pub struct Role {
    pub id: i32,
    pub name: String,
    pub description: Option<String>,
}

#[derive(Insertable, AsChangeset, Deserialize)]
#[diesel(table_name = crate::db::schema::roles)]
pub struct NewRole<'a> {
    pub name: &'a str,
    pub description: Option<&'a str>,
}

#[derive(Queryable, Selectable, Identifiable, Serialize, Deserialize, Clone)]
#[diesel(table_name = crate::db::schema::permissions)]
#[diesel(check_for_backend(diesel::sqlite::Sqlite))]
pub struct Permission {
    pub id: i32,
    pub name: String,
    pub description: Option<String>,
}

#[derive(Insertable, Deserialize)]
#[diesel(table_name = crate::db::schema::permissions)]
pub struct NewPermission<'a> {
    pub name: &'a str,
    pub description: Option<&'a str>,
}

#[derive(Queryable, Selectable, Identifiable, Associations, Serialize, Deserialize, Clone)]
#[diesel(table_name = crate::db::schema::user_roles)]
#[diesel(belongs_to(User))]
#[diesel(belongs_to(Role))]
#[diesel(primary_key(user_id, role_id))]
#[diesel(check_for_backend(diesel::sqlite::Sqlite))]
pub struct UserRole {
    pub user_id: i32,
    pub role_id: i32,
}

#[derive(Insertable)]
#[diesel(table_name = crate::db::schema::user_roles)]
pub struct NewUserRole {
    pub user_id: i32,
    pub role_id: i32,
}

#[derive(Queryable, Selectable, Identifiable, Associations, Serialize, Deserialize, Clone)]
#[diesel(table_name = crate::db::schema::role_permissions)]
#[diesel(belongs_to(Role))]
#[diesel(belongs_to(Permission))]
#[diesel(primary_key(role_id, permission_id))]
#[diesel(check_for_backend(diesel::sqlite::Sqlite))]
pub struct RolePermission {
    pub role_id: i32,
    pub permission_id: i32,
}

#[derive(Insertable)]
#[diesel(table_name = crate::db::schema::role_permissions)]
pub struct NewRolePermission {
    pub role_id: i32,
    pub permission_id: i32,
}

#[derive(Serialize, Clone)]
pub struct RoleWithPermissions {
    pub id: i32,
    pub name: String,
    pub description: Option<String>,
    pub permissions: Vec<Permission>,
}

#[derive(Queryable, Selectable, Identifiable, Serialize, Deserialize, Clone)]
#[diesel(table_name = crate::db::schema::custom_nodes)]
#[diesel(primary_key(node_type))]
#[diesel(check_for_backend(diesel::sqlite::Sqlite))]
pub struct CustomNode {
    pub node_type: String,
    pub data: String,
}

#[derive(Serialize, Deserialize, Clone)]
pub struct CustomNodeResult {
    pub node_type: String,
    pub data: Option<Value>,
}

#[derive(Insertable, Deserialize)]
#[diesel(table_name = crate::db::schema::custom_nodes)]
pub struct NewCustomNode<'a> {
    pub node_type: &'a str,
    pub data: &'a str,
}

#[derive(AsChangeset, Deserialize)]
#[diesel(table_name = crate::db::schema::custom_nodes)]
pub struct UpdateCustomNode {
    pub data: Option<String>,
}

#[derive(Queryable, Selectable, Insertable, AsChangeset, Serialize, Deserialize, Debug)]
#[diesel(table_name = streams)]
#[diesel(primary_key(ssrc))]
pub struct Stream {
    pub ssrc: i32,
    pub topic: String,
    pub device_id: String,
    pub media_type: String,
    pub created_at: NaiveDateTime,
}

#[derive(Insertable)]
#[diesel(table_name = streams)]
pub struct NewStream<'a> {
    pub ssrc: i32,
    pub topic: &'a str,
    pub device_id: &'a str,
    pub media_type: &'a str,
}

#[derive(Queryable, Selectable, Identifiable, Serialize, Clone)]
#[diesel(table_name = recordings)]
pub struct Recording {
    pub id: i32,
    pub stream_ssrc: i32,
    pub topic: String,
    pub device_id: String,
    pub media_type: String,
    pub filename: String,
    pub file_path: String,
    pub file_size: i32,
    pub duration_ms: i32,
    pub status: String,
    pub started_at: NaiveDateTime,
    pub ended_at: Option<NaiveDateTime>,
    pub created_by_user_id: Option<i32>,
}

#[derive(Insertable)]
#[diesel(table_name = recordings)]
pub struct NewRecording<'a> {
    pub stream_ssrc: i32,
    pub topic: &'a str,
    pub device_id: &'a str,
    pub media_type: &'a str,
    pub filename: &'a str,
    pub file_path: &'a str,
    pub status: &'a str,
    pub created_by_user_id: Option<i32>,
}

#[derive(AsChangeset, Default)]
#[diesel(table_name = recordings)]
pub struct UpdateRecording {
    pub file_size: Option<i32>,
    pub duration_ms: Option<i32>,
    pub status: Option<String>,
    pub ended_at: Option<NaiveDateTime>,
}


================================================
FILE: apps/server/src/db/repository/dashboards.rs
================================================
use crate::{
    db::models::{DynamicDashboard, NewDynamicDashboard, UpdateDynamicDashboard},
    db::schema::dynamic_dashboards::dsl::*,
    state::DbPool,
};
use chrono::Utc;
use diesel::{prelude::*, OptionalExtension};
use serde_json::Value;
use uuid::Uuid;

pub fn list_dynamic_dashboards(pool: &DbPool) -> Result<Vec<DynamicDashboard>, anyhow::Error> {
    let mut conn = pool.get()?;
    let dashboards = dynamic_dashboards
        .select(DynamicDashboard::as_select())
        .order_by(created_at.asc())
        .load::<DynamicDashboard>(&mut conn)?;
    Ok(dashboards)
}

pub fn get_dynamic_dashboard(
    pool: &DbPool,
    target_id: &str,
) -> Result<Option<DynamicDashboard>, anyhow::Error> {
    let mut conn = pool.get()?;
    let dashboard = dynamic_dashboards
        .filter(id.eq(target_id))
        .select(DynamicDashboard::as_select())
        .first::<DynamicDashboard>(&mut conn)
        .optional()?;
    Ok(dashboard)
}

pub fn create_dynamic_dashboard(
    pool: &DbPool,
    name_value: &str,
    layout_json: &Value,
) -> Result<DynamicDashboard, anyhow::Error> {
    let mut conn = pool.get()?;
    let layout_str = serde_json::to_string(layout_json)?;
    let new_dashboard = NewDynamicDashboard {
        id: &Uuid::new_v4().to_string(),
        name: name_value,
        layout: &layout_str,
    };

    let created = diesel::insert_into(dynamic_dashboards)
        .values(&new_dashboard)
        .get_result::<DynamicDashboard>(&mut conn)?;

    Ok(created)
}

pub fn update_dynamic_dashboard(
    pool: &DbPool,
    target_id: &str,
    name_value: Option<&str>,
    layout_json: Option<&Value>,
) -> Result<Option<DynamicDashboard>, anyhow::Error> {
    let mut conn = pool.get()?;
    let layout_str = layout_json.map(|v| serde_json::to_string(v)).transpose()?;

    let changes = UpdateDynamicDashboard {
        name: name_value,
        layout: layout_str.as_deref(),
        updated_at: Some(Utc::now().naive_utc()),
    };

    let updated = diesel::update(dynamic_dashboards.filter(id.eq(target_id)))
        .set(changes)
        .get_result::<DynamicDashboard>(&mut conn)
        .optional()?;

    Ok(updated)
}

pub fn delete_dynamic_dashboard(pool: &DbPool, target_id: &str) -> Result<usize, anyhow::Error> {
    let mut conn = pool.get()?;
    let deleted = diesel::delete(dynamic_dashboards.filter(id.eq(target_id))).execute(&mut conn)?;
    Ok(deleted)
}


================================================
FILE: apps/server/src/db/repository/mod.rs
================================================
pub mod dashboards;
pub mod rbac;
pub mod recordings;
pub mod streams;

use std::collections::HashMap;

use chrono::Utc;
use diesel::GroupedBy;
use diesel::{
    dsl::max, BelongingToDsl, Connection, ExpressionMethods, JoinOnDsl, OptionalExtension,
    QueryDsl, QueryResult, RunQueryDsl, SelectableHelper,
};
use serde_json::Value;

use crate::db::models::CustomNodeResult;
use crate::db::models::{
    CustomNode, FeatureWithVertices, LayerWithFeatures, MapFeature, MapLayer, MapVertex,
    NewCustomNode, NewMapFeature, NewMapLayer, NewMapVertex, Role, UpdateCustomNode,
    UpdateMapFeature, UpdateMapLayer, UserRole, UserWithRoles,
};
use crate::{
    db::models::{
        Device, DeviceToken, Entity, EntityConfiguration, EntityWithConfig,
        EntityWithStateAndConfig, Flow, FlowVersion, NewDevice, NewDeviceToken, NewEntity,
        NewEntityConfiguration, NewFlow, NewFlowVersion, NewState, NewStatesMeta,
        NewSystemConfiguration, NewUser, State, StatesMeta, SystemConfiguration, UpdateUser, User,
    },
    state::DbPool,
};

pub fn get_user_by_name(pool: &DbPool, target_username: &str) -> Result<User, anyhow::Error> {
    use crate::db::schema::users::dsl::*;

    let mut conn = pool.get()?;

    let user = users
        .filter(username.eq(target_username))
        .select(User::as_select())
        .first(&mut conn)?;

    Ok(user)
}

pub fn get_all_users(pool: &DbPool) -> Result<Vec<UserWithRoles>, anyhow::Error> {
    let mut conn = pool.get()?;

    let users_list = crate::db::schema::users::table.load::<User>(&mut conn)?;
    let roles_list = crate::db::schema::roles::table.load::<Role>(&mut conn)?;

    let user_roles_list = UserRole::belonging_to(&users_list).load::<UserRole>(&mut conn)?;

    let roles_map: HashMap<i32, Role> = roles_list.into_iter().map(|r| (r.id, r)).collect();
    let user_roles_grouped = user_roles_list.grouped_by(&users_list);
    let result = users_list
        .into_iter()
        .zip(user_roles_grouped)
        .map(|(user, user_role_associations)| {
            let roles_for_user = user_role_associations
                .iter()
                .filter_map(|ur| roles_map.get(&ur.role_id).cloned())
                .collect::<Vec<Role>>();

            UserWithRoles {
                id: user.id,
                username: user.username,
                email: user.email,
                created_at: user.created_at,
                updated_at: user.updated_at,
                roles: roles_for_user,
            }
        })
        .collect();

    Ok(result)
}

pub fn create_user(pool: &DbPool, new_user: NewUser) -> Result<User, anyhow::Error> {
    use crate::db::schema::users::dsl::*;

    let mut conn = pool.get()?;
    let user = diesel::insert_into(users)
        .values(&new_user)
        .get_result(&mut conn)?;

    Ok(user)
}

pub fn get_user_by_id(pool: &DbPool, user_id: i32) -> Result<User, anyhow::Error> {
    use crate::db::schema::users::dsl::*;

    let mut conn = pool.get()?;
    let user = users
        .find(user_id)
        .select(User::as_select())
        .first(&mut conn)?;

    Ok(user)
}

pub fn update_user(
    pool: &DbPool,
    user_id: i32,
    user_data: &UpdateUser,
) -> Result<User, anyhow::Error> {
    use crate::db::schema::users::dsl::*;

    let mut conn = pool.get()?;
    let user = diesel::update(users.find(user_id))
        .set(user_data)
        .get_result(&mut conn)?;

    Ok(user)
}

pub fn delete_user(pool: &DbPool, user_id: i32) -> Result<usize, anyhow::Error> {
    use crate::db::schema::users::dsl::*;

    let mut conn = pool.get()?;
    let num_deleted = diesel::delete(users.find(user_id)).execute(&mut conn)?;

    Ok(num_deleted)
}

pub fn create_device(pool: &DbPool, new_device: NewDevice) -> Result<Device, anyhow::Error> {
    use crate::db::schema::devices::dsl::*;
    let mut conn = pool.get()?;
    let device = diesel::insert_into(devices)
        .values(&new_device)
        .get_result(&mut conn)?;

    Ok(device)
}

pub fn get_all_devices(pool: &DbPool) -> Result<Vec<Device>, anyhow::Error> {
    use crate::db::schema::devices::dsl::*;
    let mut conn = pool.get()?;
    let all_devices = devices
        .select(Device::as_select())
        .load::<Device>(&mut conn)?;
    Ok(all_devices)
}

pub fn update_device(
    pool: &DbPool,
    target_id: i32,
    updated_device: &NewDevice,
) -> Result<Device, anyhow::Error> {
    use crate::db::schema::devices::dsl::*;
    let mut conn = pool.get()?;
    let device = diesel::update(devices.find(target_id))
        .set((
            device_id.eq(&updated_device.device_id),
            name.eq(&updated_device.name),
            manufacturer.eq(&updated_device.manufacturer),
            model.eq(&updated_device.model),
        ))
        .get_result(&mut conn)?;
    Ok(device)
}

pub fn delete_device(pool: &DbPool, target_id: i32) -> Result<usize, anyhow::Error> {
    use crate::db::schema::devices::dsl::*;
    let mut conn = pool.get()?;
    let num_deleted = diesel::delete(devices.find(target_id)).execute(&mut conn)?;
    Ok(num_deleted)
}

pub fn create_entity(pool: &DbPool, new_entity: NewEntity) -> Result<Entity, anyhow::Error> {
    use crate::db::schema::entities::dsl::*;
    let mut conn = pool.get()?;
    let entity = diesel::insert_into(entities)
        .values(&new_entity)
        .get_result(&mut conn)?;
    Ok(entity)
}

pub fn get_all_entities(pool: &DbPool) -> Result<Vec<Entity>, anyhow::Error> {
    use crate::db::schema::entities::dsl::*;
    let mut conn = pool.get()?;
    let all_entities = entities
        .select(Entity::as_select())
        .load::<Entity>(&mut conn)?;
    Ok(all_entities)
}

pub fn update_entity(
    pool: &DbPool,
    target_id: i32,
    updated_entity: &NewEntity,
) -> Result<Entity, anyhow::Error> {
    use crate::db::schema::entities::dsl::*;
    let mut conn = pool.get()?;
    let entity = diesel::update(entities.find(target_id))
        .set((
            entity_id.eq(&updated_entity.entity_id),
            device_id.eq(updated_entity.device_id),
            friendly_name.eq(&updated_entity.friendly_name),
            platform.eq(&updated_entity.platform),
        ))
        .get_result(&mut conn)?;
    Ok(entity)
}

pub fn create_entity_with_config(
    pool: &DbPool,
    new_entity: NewEntity,
    config_str: &str,
) -> Result<(Entity, Option<EntityConfiguration>), anyhow::Error> {
    use crate::db::schema::entities;
    use crate::db::schema::entities_configurations;

    let mut conn = pool.get()?;

    conn.transaction(|conn| {
        let entity: Entity = diesel::insert_into(entities::table)
            .values(&new_entity)
            .get_result(conn)?;

        if !config_str.is_empty() {
            let new_config = NewEntityConfiguration {
                entity_id: entity.id,
                configuration: config_str,
            };

            let config: EntityConfiguration = diesel::insert_into(entities_configurations::table)
                .values(&new_config)
                .get_result(conn)?;

            Ok((entity, Some(config)))
        } else {
            Ok((entity, None))
        }
    })
}

pub fn get_all_entities_with_configs(
    pool: &DbPool,
) -> Result<Vec<EntityWithConfig>, anyhow::Error> {
    use crate::db::schema::entities::dsl as e;
    use crate::db::schema::entities_configurations::dsl as ec;

    let mut conn = pool.get()?;

    let results = e::entities
        .left_join(ec::entities_configurations.on(e::id.eq(ec::entity_id)))
        .load::<(Entity, Option<EntityConfiguration>)>(&mut conn)?;

    let entities_with_configs = results
        .into_iter()
        .map(|(entity, config_opt)| {
            let configuration = config_opt
                .map(|c| serde_json::from_str(&c.configuration).unwrap_or(serde_json::Value::Null))
                .filter(|v| !v.is_null());
            EntityWithConfig {
                entity,
                configuration,
            }
        })
        .collect();

    Ok(entities_with_configs)
}

pub fn get_all_entities_with_configs_filter(
    pool: &DbPool,
    entity_type_filter: Option<String>,
) -> Result<Vec<EntityWithConfig>, anyhow::Error> {
    use crate::db::schema::entities::dsl as e;
    use crate::db::schema::entities_configurations::dsl as ec;

    let mut conn = pool.get()?;

    let mut query = e::entities
        .left_join(ec::entities_configurations.on(e::id.eq(ec::entity_id)))
        .into_boxed();

    if let Some(e_type) = entity_type_filter {
        query = query.filter(e::entity_type.eq(e_type));
    }

    let results = query.load::<(Entity, Option<EntityConfiguration>)>(&mut conn)?;

    let entities_with_configs = results
        .into_iter()
        .map(|(entity, config_opt)| {
            let configuration = config_opt
                .map(|c| serde_json::from_str(&c.configuration).unwrap_or(serde_json::Value::Null))
                .filter(|v| !v.is_null());
            EntityWithConfig {
                entity,
                configuration,
            }
        })
        .collect();

    Ok(entities_with_configs)
}

pub fn get_entities_by_device_id(
    pool: &DbPool,
    target_device_id: i32,
) -> Result<Vec<EntityWithStateAndConfig>, anyhow::Error> {
    use crate::db::schema::entities::dsl as e;
    use crate::db::schema::entities_configurations::dsl as ec;
    use crate::db::schema::states::dsl as s;
    use crate::db::schema::states_meta::dsl as sm;

    let mut conn = pool.get()?;

    let entities_and_configs = e::entities
        .filter(e::device_id.eq(target_device_id))
        .left_join(ec::entities_configurations.on(e::id.eq(ec::entity_id)))
        .load::<(Entity, Option<EntityConfiguration>)>(&mut conn)?;

    if entities_and_configs.is_empty() {
        return Ok(Vec::new());
    }

    let entity_ids: Vec<String> = entities_and_configs
        .iter()
        .map(|(entity, _)| entity.entity_id.clone())
        .collect();

    let states_meta_map: std::collections::HashMap<String, i32> = sm::states_meta
        .filter(sm::entity_id.eq_any(&entity_ids))
        .load::<StatesMeta>(&mut conn)?
        .into_iter()
        .map(|meta| (meta.entity_id, meta.metadata_id))
        .collect();

    let metadata_ids: Vec<i32> = states_meta_map.values().cloned().collect();

    let latest_states: std::collections::HashMap<i32, State> = if !metadata_ids.is_empty() {
        let relevant_states = s::states
            .filter(s::metadata_id.eq_any(metadata_ids))
            .order(s::last_updated.desc())
            .load::<State>(&mut conn)?;

        relevant_states
            .into_iter()
            .fold(std::collections::HashMap::new(), |mut acc, state| {
                if let Some(mid) = state.metadata_id {
                    acc.entry(mid).or_insert(state);
                }
                acc
            })
    } else {
        std::collections::HashMap::new()
    };

    let result = entities_and_configs
        .into_iter()
        .map(|(entity, config_opt)| {
            let configuration = config_opt
                .map(|c| serde_json::from_str(&c.configuration).unwrap_or(serde_json::Value::Null))
                .filter(|v| !v.is_null());

            let state = states_meta_map
                .get(&entity.entity_id)
                .and_then(|metadata_id| latest_states.get(metadata_id).cloned());

            EntityWithStateAndConfig {
                entity,
                configuration,
                state,
            }
        })
        .collect();

    Ok(result)
}

pub fn update_entity_with_config(
    pool: &DbPool,
    target_id: i32,
    updated_entity: &NewEntity,
    config_str: &str,
) -> Result<(Entity, Option<EntityConfiguration>), anyhow::Error> {
    use crate::db::schema::entities;
    use crate::db::schema::entities_configurations;

    let mut conn = pool.get()?;

    conn.transaction(|conn| {
        let entity: Entity = diesel::update(entities::table.find(target_id))
            .set((
                entities::entity_id.eq(&updated_entity.entity_id),
                entities::device_id.eq(updated_entity.device_id),
                entities::friendly_name.eq(&updated_entity.friendly_name),
                entities::platform.eq(&updated_entity.platform),
                entities::entity_type.eq(&updated_entity.entity_type),
            ))
            .get_result(conn)?;

        use crate::db::schema::entities_configurations::dsl::*;
        if !config_str.is_empty() {
            let new_config = NewEntityConfiguration {
                entity_id: entity.id,
                configuration: config_str,
            };

            let config: EntityConfiguration = diesel::insert_into(entities_configurations)
                .values(&new_config)
                .on_conflict(entity_id)
                .do_update()
                .set(configuration.eq(config_str))
                .get_result(conn)?;

            Ok((entity, Some(config)))
        } else {
            diesel::delete(entities_configurations.filter(entity_id.eq(target_id)))
                .execute(conn)?;
            Ok((entity, None))
        }
    })
}

pub fn delete_entity(pool: &DbPool, target_id: i32) -> Result<usize, anyhow::Error> {
    use crate::db::schema::entities::dsl::*;
    let mut conn = pool.get()?;
    let num_deleted = diesel::delete(entities.find(target_id)).execute(&mut conn)?;
    Ok(num_deleted)
}

pub fn create_system_config(
    pool: &DbPool,
    new_config: NewSystemConfiguration,
) -> Result<SystemConfiguration, anyhow::Error> {
    use crate::db::schema::system_configurations::dsl::*;
    let mut conn = pool.get()?;
    let config = diesel::insert_into(system_configurations)
        .values(&new_config)
        .on_conflict(key)
        .do_update()
        .set(&new_config)
        .get_result(&mut conn)?;
    Ok(config)
}

pub fn get_all_system_configs(pool: &DbPool) -> Result<Vec<SystemConfiguration>, anyhow::Error> {
    use crate::db::schema::system_configurations::dsl::*;
    let mut conn = pool.get()?;
    let configs = system_configurations
        .select(SystemConfiguration::as_select())
        .load::<SystemConfiguration>(&mut conn)?;
    Ok(configs)
}

/// `system_configurations` key for the Code workspace (file browser / storage API).
pub const CODE_SERVICE_CONFIG_KEY: &str = "code_service_enabled";

pub fn is_code_service_enabled(pool: &DbPool) -> Result<bool, anyhow::Error> {
    use crate::db::schema::system_configurations::dsl::{key as key_col, system_configurations};
    let mut conn = pool.get()?;
    let config = system_configurations
        .filter(key_col.eq(CODE_SERVICE_CONFIG_KEY))
        .select(SystemConfiguration::as_select())
        .first::<SystemConfiguration>(&mut conn)
        .optional()?;
    Ok(config.is_some_and(|c| c.enabled == 1))
}

pub fn update_system_config(
    pool: &DbPool,
    target_id: i32,
    updated_config: &NewSystemConfiguration,
) -> Result<SystemConfiguration, anyhow::Error> {
    use crate::db::schema::system_configurations::dsl::*;
    let mut conn = pool.get()?;
    let config = diesel::update(system_configurations.find(target_id))
        .set(updated_config)
        .get_result(&mut conn)?;
    Ok(config)
}

pub fn delete_system_config(pool: &DbPool, target_id: i32) -> Result<usize, anyhow::Error> {
    use crate::db::schema::system_configurations::dsl::*;
    let mut conn = pool.get()?;
    let num_deleted = diesel::delete(system_configurations.find(target_id)).execute(&mut conn)?;
    Ok(num_deleted)
}

pub fn create_or_replace_device_token(
    pool: &DbPool,
    target_device_id: i32,
    hashed_token: &str,
) -> Result<DeviceToken, anyhow::Error> {
    use crate::db::schema::device_tokens::dsl::*;
    let mut conn = pool.get()?;

    let new_token = NewDeviceToken {
        device_id: target_device_id,
        token_hash: hashed_token,
    };

    let token = diesel::insert_into(device_tokens)
        .values(&new_token)
        .on_conflict(device_id)
        .do_update()
        .set(token_hash.eq(hashed_token))
        .get_result(&mut conn)?;

    Ok(token)
}

pub fn get_token_info_for_device(
    pool: &DbPool,
    target_device_id: i32,
) -> Result<Option<DeviceToken>, anyhow::Error> {
    use crate::db::schema::device_tokens::dsl::*;
    let mut conn = pool.get()?;
    let token_info = device_tokens
        .filter(device_id.eq(target_device_id))
        .select(DeviceToken::as_select())
        .first::<DeviceToken>(&mut conn)
        .optional()?;
    Ok(token_info)
}

pub fn delete_token_for_device(
    pool: &DbPool,
    target_device_id: i32,
) -> Result<usize, anyhow::Error> {
    use crate::db::schema::device_tokens::dsl::*;
    let mut conn = pool.get()?;
    let num_deleted =
        diesel::delete(device_tokens.filter(device_id.eq(target_device_id))).execute(&mut conn)?;
    Ok(num_deleted)
}

pub fn get_device_by_device_id(
    pool: &DbPool,
    target_device_id: &str,
) -> Result<Device, anyhow::Error> {
    use crate::db::schema::devices::dsl::*;
    let mut conn = pool.get()?;
    let device_result = devices
        .filter(device_id.eq(target_device_id))
        .select(Device::as_select())
        .first::<Device>(&mut conn)?;
    Ok(device_result)
}

pub fn get_device_by_id(pool: &DbPool, target_id: i32) -> Result<Device, anyhow::Error> {
    use crate::db::schema::devices::dsl::*;
    let mut conn = pool.get()?;
    let device_result = devices
        .filter(id.eq(target_id))
        .select(Device::as_select())
        .first::<Device>(&mut conn)?;
    Ok(device_result)
}

pub fn create_flow(pool: &DbPool, new_flow: NewFlow) -> Result<Flow, anyhow::Error> {
    use crate::db::schema::flows::dsl::*;
    let mut conn = pool.get()?;

    let version_insert = diesel::insert_into(flows)
        .values(&new_flow)
        .returning(Flow::as_returning())
        .get_result(&mut conn)?;

    Ok(version_insert)
}

pub fn get_all_flows(pool: &DbPool) -> Result<Vec<Flow>, anyhow::Error> {
    use crate::db::schema::flows::dsl::*;
    let mut conn = pool.get()?;
    let all_flows = flows.select(Flow::as_select()).load::<Flow>(&mut conn)?;
    Ok(all_flows)
}

pub fn update_flow(
    pool: &DbPool,
    target_id: i32,
    updated_flow: &NewFlow,
) -> Result<usize, anyhow::Error> {
    use crate::db::schema::flows::dsl::*;
    let mut conn = pool.get()?;
    let num_updated = diesel::update(flows.find(target_id))
        .set(updated_flow)
        .execute(&mut conn)?;
    Ok(num_updated)
}

pub fn delete_flow(pool: &DbPool, target_id: i32) -> Result<usize, anyhow::Error> {
    use crate::db::schema::flows::dsl::*;
    let mut conn = pool.get()?;
    let num_deleted = diesel::delete(flows.find(target_id)).execute(&mut conn)?;
    Ok(num_deleted)
}

pub fn create_flow_version(
    pool: &DbPool,
    new_version_data: NewFlowVersion,
) -> Result<FlowVersion, anyhow::Error> {
    use crate::db::schema::flow_versions::dsl::*;
    let mut conn = pool.get()?;
    let version_insert = diesel::insert_into(flow_versions)
        .values(&new_version_data)
        .get_result(&mut conn)?;
    Ok(version_insert)
}

pub fn overwrite_flow_version(
    pool: &DbPool,
    target_flow_id: i32,
    new_version_data: NewFlowVersion,
) -> Result<FlowVersion, anyhow::Error> {
    use crate::db::schema::flow_versions;
    use crate::db::schema::flow_versions::dsl::*;
    let mut conn = pool.get()?;
    conn.transaction(|conn| {
        diesel::delete(flow_versions.filter(flow_id.eq(target_flow_id))).execute(conn)?;
        let version_insert = diesel::insert_into(flow_versions::table)
            .values(&new_version_data)
            .get_result(conn)?;
        Ok(version_insert)
    })
}

pub fn get_latest_version_number(
    pool: &DbPool,
    target_flow_id: i32,
) -> Result<Option<i32>, anyhow::Error> {
    use crate::db::schema::flow_versions::dsl::*;
    let mut conn = pool.get()?;
    let max_version = flow_versions
        .filter(flow_id.eq(target_flow_id))
        .select(max(version))
        .first::<Option<i32>>(&mut conn)?;
    Ok(max_version)
}

pub fn get_versions_for_flow(
    pool: &DbPool,
    target_flow_id: i32,
) -> Result<Vec<FlowVersion>, anyhow::Error> {
    use crate::db::schema::flow_versions::dsl::*;
    let mut conn = pool.get()?;
    let versions = flow_versions
        .filter(flow_id.eq(target_flow_id))
        .order(version.desc())
        .select(FlowVersion::as_select())
        .load::<FlowVersion>(&mut conn)?;
    Ok(versions)
}

pub fn get_entity_by_entity_id(
    pool: &DbPool,
    target_entity_id: &str,
) -> Result<Entity, anyhow::Error> {
    use crate::db::schema::entities::dsl::*;

    let mut conn = pool.get()?;

    let entity = entities
        .filter(entity_id.eq(target_entity_id))
        .select(Entity::as_select())
        .first(&mut conn)?;

    Ok(entity)
}

pub fn set_entity_state(
    pool: &DbPool,
    target_entity_id: &str,
    new_state_value: &str,
    new_attributes: Option<&Value>,
) -> Result<State, anyhow::Error> {
    let mut conn = pool.get()?;

    conn.transaction(|conn| {
        let meta: StatesMeta = {
            use crate::db::schema::states_meta::dsl::*;
            let existing_meta = states_meta
                .filter(entity_id.eq(target_entity_id))
                .first::<StatesMeta>(conn)
                .optional()?;

            if let Some(meta) = existing_meta {
                meta
            } else {
                use crate::db::schema::entities::dsl::{entities, entity_id as entity_id_col}; // 'self::' 제거
                entities
                    .filter(entity_id_col.eq(target_entity_id))
                    .select(crate::db::schema::entities::id)
                    .first::<i32>(conn)
                    .map_err(|_| {
                        anyhow::anyhow!("Entity with id '{}' not found", target_entity_id)
                    })?;

                let new_meta = NewStatesMeta {
                    entity_id: target_entity_id,
                };
                diesel::insert_into(states_meta)
                    .values(&new_meta)
                    .get_result(conn)?
            }
        };

        use crate::db::schema::states::dsl::*;
        let last_state_record: Option<State> = states
            .filter(metadata_id.eq(meta.metadata_id))
            .order(last_updated.desc())
            .first::<State>(conn)
            .optional()?;

        let now_utc = Utc::now().naive_utc();

        let last_changed_time = if let Some(ref last_state) = last_state_record {
            if last_state.state.as_deref() != Some(new_state_value) {
                Some(now_utc)
            } else {
                last_state.last_changed
            }
        } else {
            Some(now_utc)
        };

        let attributes_string = new_attributes
            .map(|v| serde_json::to_string(v))
            .transpose()?;

        let new_state = NewState {
            metadata_id: Some(meta.metadata_id),
            state: Some(new_state_value),
            attributes: attributes_string.as_deref(),
            last_changed: last_changed_time,
            last_updated: Some(now_utc),
            created: Some(now_utc),
        };

        diesel::insert_into(states)
            .values(&new_state)
            .get_result(conn)
            .map_err(anyhow::Error::from)
    })
}

pub fn get_entity_state_history(
    pool: &DbPool,
    target_entity_id: &str,
) -> Result<Vec<State>, anyhow::Error> {
    use crate::db::schema::states::dsl as s;
    use crate::db::schema::states_meta::dsl as sm;

    let mut conn = pool.get()?;

    let metadata_id_opt: Option<i32> = sm::states_meta
        .filter(sm::entity_id.eq(target_entity_id))
        .select(sm::metadata_id)
        .first::<i32>(&mut conn)
        .optional()?;

    let Some(meta_id) = metadata_id_opt else {
        return Ok(Vec::new());
    };

    let history = s::states
        .filter(s::metadata_id.eq(meta_id))
        .order(s::last_updated.asc())
        .load::<State>(&mut conn)?;

    Ok(history)
}

pub fn get_all_entities_with_states_and_configs(
    pool: &DbPool,
) -> Result<Vec<EntityWithStateAndConfig>, anyhow::Error> {
    use crate::db::schema::entities::dsl as e;
    use crate::db::schema::entities_configurations::dsl as ec;
    use crate::db::schema::states::dsl as s;
    use crate::db::schema::states_meta::dsl as sm;

    let mut conn = pool.get()?;

    let entities_and_configs = e::entities
        .left_join(ec::entities_configurations.on(e::id.eq(ec::entity_id)))
        .load::<(Entity, Option<EntityConfiguration>)>(&mut conn)?;

    let states_meta_map: std::collections::HashMap<String, i32> = sm::states_meta
        .load::<StatesMeta>(&mut conn)?
        .into_iter()
        .map(|meta| (meta.entity_id, meta.metadata_id))
        .collect();

    let all_states = s::states
        .order(s::last_updated.desc())
        .load::<State>(&mut conn)?;

    let latest_states: std::collections::HashMap<i32, State> =
        all_states
            .into_iter()
            .fold(std::collections::HashMap::new(), |mut acc, state| {
                if let Some(mid) = state.metadata_id {
                    acc.entry(mid).or_insert(state);
                }
                acc
            });

    let result = entities_and_configs
        .into_iter()
        .map(|(entity, config_opt)| {
            let configuration = config_opt
                .map(|c| serde_json::from_str(&c.configuration).unwrap_or(serde_json::Value::Null))
                .filter(|v| !v.is_null());

            let state = states_meta_map
                .get(&entity.entity_id)
                .and_then(|metadata_id| latest_states.get(metadata_id).cloned());

            EntityWithStateAndConfig {
                entity,
                configuration,
                state,
            }
        })
        .collect();

    Ok(result)
}

pub fn get_all_entities_with_states_and_configs_filter(
    pool: &DbPool,
    entity_type_filter: Option<String>,
) -> Result<Vec<EntityWithStateAndConfig>, anyhow::Error> {
    use crate::db::schema::entities::dsl as e;
    use crate::db::schema::entities_configurations::dsl as ec;
    use crate::db::schema::states::dsl as s;
    use crate::db::schema::states_meta::dsl as sm;

    let mut conn = pool.get()?;

    let mut entities_query = e::entities
        .left_join(ec::entities_configurations.on(e::id.eq(ec::entity_id)))
        .into_boxed();

    if let Some(e_type) = entity_type_filter {
        entities_query = entities_query.filter(e::entity_type.eq(e_type));
    }

    let entities_and_configs =
        entities_query.load::<(Entity, Option<EntityConfiguration>)>(&mut conn)?;

    let states_meta_map: std::collections::HashMap<String, i32> = sm::states_meta
        .load::<StatesMeta>(&mut conn)?
        .into_iter()
        .map(|meta| (meta.entity_id, meta.metadata_id))
        .collect();

    let all_states = s::states
        .order(s::last_updated.desc())
        .load::<State>(&mut conn)?;

    let latest_states: std::collections::HashMap<i32, State> =
        all_states
            .into_iter()
            .fold(std::collections::HashMap::new(), |mut acc, state| {
                if let Some(mid) = state.metadata_id {
                    acc.entry(mid).or_insert(state);
                }
                acc
            });

    let result = entities_and_configs
        .into_iter()
        .map(|(entity, config_opt)| {
            let configuration = config_opt
                .map(|c| serde_json::from_str(&c.configuration).unwrap_or(serde_json::Value::Null))
                .filter(|v| !v.is_null());

            let state = states_meta_map
                .get(&entity.entity_id)
                .and_then(|metadata_id| latest_states.get(metadata_id).cloned());

            EntityWithStateAndConfig {
                entity,
                configuration,
                state,
            }
        })
        .collect();

    Ok(result)
}

pub fn get_entity_with_config_by_entity_id(
    pool: &DbPool,
    target_entity_id: &str,
) -> Result<Option<EntityWithConfig>, anyhow::Error> {
    use crate::db::schema::entities::dsl as e;
    use crate::db::schema::entities_configurations::dsl as ec;

    let mut conn = pool.get()?;

    let result = e::entities
        .filter(e::entity_id.eq(target_entity_id))
        .left_join(ec::entities_configurations.on(e::id.eq(ec::entity_id)))
        .first::<(Entity, Option<EntityConfiguration>)>(&mut conn)
        .optional()?;

    Ok(result.map(|(entity, config_opt)| {
        let configuration = config_opt
            .map(|c| serde_json::from_str(&c.configuration).unwrap_or(serde_json::Value::Null))
            .filter(|v| !v.is_null());
        EntityWithConfig {
            entity,
            configuration,
        }
    }))
}

pub fn upsert_device(
    pool: &DbPool,
    target_device_id: &str,
    target_name: Option<&str>,
    target_manufacturer: Option<&str>,
    target_model: Option<&str>,
) -> Result<Device, anyhow::Error> {
    use crate::db::schema::devices::dsl::*;

    let mut conn = pool.get()?;

    let existing = devices
        .filter(device_id.eq(target_device_id))
        .select(Device::as_select())
        .first::<Device>(&mut conn)
        .optional()?;

    if let Some(existing_device) = existing {
        let updated = diesel::update(devices.find(existing_device.id))
            .set((
                name.eq(target_name),
                manufacturer.eq(target_manufacturer),
                model.eq(target_model),
            ))
            .get_result(&mut conn)?;
        Ok(updated)
    } else {
        let new_device = NewDevice {
            device_id: target_device_id,
            name: target_name,
            manufacturer: target_manufacturer,
            model: target_model,
        };
        let created = diesel::insert_into(devices)
            .values(&new_device)
            .get_result(&mut conn)?;
        Ok(created)
    }
}

pub fn upsert_entity_with_config(
    pool: &DbPool,
    target_entity_id: &str,
    target_device_id: Option<i32>,
    target_friendly_name: Option<&str>,
    target_platform: Option<&str>,
    target_entity_type: Option<&str>,
    config_str: &str,
) -> Result<(Entity, Option<EntityConfiguration>), anyhow::Error> {
    use crate::db::schema::entities;
    use crate::db::schema::entities_configurations;

    let mut conn = pool.get()?;

    let existing = entities::table
        .filter(entities::entity_id.eq(target_entity_id))
        .select(Entity::as_select())
        .first::<Entity>(&mut conn)
        .optional()?;

    conn.transaction(|conn| {
        let entity: Entity = if let Some(existing_entity) = existing {
            diesel::update(entities::table.find(existing_entity.id))
                .set((
                    entities::device_id.eq(target_device_id),
                    entities::friendly_name.eq(target_friendly_name),
                    entities::platform.eq(target_platform),
                    entities::entity_type.eq(target_entity_type),
                ))
                .get_result(conn)?
        } else {
            let new_entity = NewEntity {
                entity_id: target_entity_id,
                device_id: target_device_id,
                friendly_name: target_friendly_name,
                platform: target_platform,
                entity_type: target_entity_type,
            };
            diesel::insert_into(entities::table)
                .values(&new_entity)
                .get_result(conn)?
        };

        if !config_str.is_empty() {
            let new_config = NewEntityConfiguration {
                entity_id: entity.id,
                configuration: config_str,
            };

            let config: EntityConfiguration =
                diesel::insert_into(entities_configurations::table)
                    .values(&new_config)
                    .on_conflict(entities_configurations::entity_id)
                    .do_update()
                    .set(entities_configurations::configuration.eq(config_str))
                    .get_result(conn)?;

            Ok((entity, Some(config)))
        } else {
            Ok((entity, None))
        }
    })
}

pub fn delete_device_by_device_id(
    pool: &DbPool,
    target_device_id: &str,
) -> Result<usize, anyhow::Error> {
    use crate::db::schema::devices::dsl::*;
    let mut conn = pool.get()?;
    let num_deleted =
        diesel::delete(devices.filter(device_id.eq(target_device_id))).execute(&mut conn)?;
    Ok(num_deleted)
}

pub fn create_map_layer(pool: &DbPool, new_layer: NewMapLayer) -> Result<MapLayer, anyhow::Error> {
    use crate::db::schema::map_layers::dsl::*;

    let mut conn = pool.get()?;
    let layer = diesel::insert_into(map_layers)
        .values(&new_layer)
        .get_result(&mut conn)?;
    Ok(layer)
}

pub fn get_all_map_layers(pool: &DbPool) -> Result<Vec<MapLayer>, anyhow::Error> {
    use crate::db::schema::map_layers::dsl::*;

    let mut conn = pool.get()?;
    let layers = map_layers.select(MapLayer::as_select()).load(&mut conn)?;
    Ok(layers)
}

pub fn get_map_layer_with_features(
    pool: &DbPool,
    target_layer_id: i32,
) -> Result<LayerWithFeatures, anyhow::Error> {
    use crate::db::schema::{map_features, map_layers, map_vertices};

    let mut conn = pool.get()?;

    let layer: MapLayer = map_layers::table.find(target_layer_id).first(&mut conn)?;

    let features: Vec<MapFeature> = MapFeature::belonging_to(&layer)
        .select(MapFeature::as_select())
        .load(&mut conn)?;

    let vertices: Vec<MapVertex> = MapVertex::belonging_to(&features)
        .select(MapVertex::as_select())
        .load(&mut conn)?;

    let features_with_vertices = features
        .into_iter()
        .map(|f| {
            let feature_vertices = vertices
                .iter()
                .filter(|v| v.feature_id == f.id)
                .cloned()
                .collect();
            FeatureWithVertices {
                feature: f,
                vertices: feature_vertices,
            }
        })
        .collect();

    Ok(LayerWithFeatures {
        layer,
        features: features_with_vertices,
    })
}

pub fn update_map_layer(
    pool: &DbPool,
    target_layer_id: i32,
    update_data: &UpdateMapLayer,
) -> Result<MapLayer, anyhow::Error> {
    use crate::db::schema::map_layers::dsl::*;

    let mut conn = pool.get()?;
    let layer = diesel::update(map_layers.find(target_layer_id))
        .set(update_data)
        .get_result(&mut conn)?;
    Ok(layer)
}

pub fn delete_map_layer(pool: &DbPool, target_layer_id: i32) -> Result<usize, anyhow::Error> {
    use crate::db::schema::{map_features, map_layers, map_vertices};

    let mut conn = pool.get()?;
    conn.transaction::<_, anyhow::Error, _>(|conn| {
        let features_to_delete: Vec<MapFeature> = map_features::table
            .filter(map_features::layer_id.eq(target_layer_id))
            .load(conn)?;

        if !features_to_delete.is_empty() {
            let feature_ids: Vec<i32> = features_to_delete.iter().map(|f| f.id).collect();

            diesel::delete(
                map_vertices::table.filter(map_vertices::feature_id.eq_any(feature_ids)),
            )
            .execute(conn)?;

            diesel::delete(map_features::table.filter(map_features::layer_id.eq(target_layer_id)))
                .execute(conn)?;
        }

        let num_deleted = diesel::delete(map_layers::table.find(target_layer_id)).execute(conn)?;
        Ok(num_deleted)
    })
}

pub fn create_map_feature(
    pool: &DbPool,
    new_feature: NewMapFeature,
    vertices_data: Vec<NewMapVertex>,
) -> Result<MapFeature, anyhow::Error> {
    use crate::db::schema::{map_features, map_vertices};

    let mut conn = pool.get()?;

    let feature = conn.transaction::<_, diesel::result::Error, _>(|conn| {
        let feature: MapFeature = diesel::insert_into(map_features::table)
            .values(&new_feature)
            .get_result(conn)?;

        let vertices_with_id: Vec<NewMapVertex> = vertices_data
            .into_iter()
            .map(|mut v| {
                v.feature_id = feature.id;
                v
            })
            .collect();

        diesel::insert_into(map_vertices::table)
            .values(&vertices_with_id)
            .execute(conn)?;

        Ok(feature)
    })?;

    Ok(feature)
}

pub fn get_map_feature_with_vertices(
    pool: &DbPool,
    target_feature_id: i32,
) -> Result<FeatureWithVertices, anyhow::Error> {
    use crate::db::schema::{map_features, map_vertices};
    let mut conn = pool.get()?;

    let feature: MapFeature = map_features::table
        .find(target_feature_id)
        .first(&mut conn)?;
    let vertices: Vec<MapVertex> = MapVertex::belonging_to(&feature).load(&mut conn)?;

    Ok(FeatureWithVertices { feature, vertices })
}

pub fn update_map_feature(
    pool: &DbPool,
    target_feature_id: i32,
    feature_data: &UpdateMapFeature,
    new_vertices_data: Option<Vec<NewMapVertex>>,
) -> Result<MapFeature, anyhow::Error> {
    use crate::db::schema::{map_features, map_vertices};

    let mut conn = pool.get()?;

    conn.transaction::<_, anyhow::Error, _>(|conn| {
        if feature_data.has_changes() {
            diesel::update(map_features::table.find(target_feature_id))
                .set(feature_data)
                .execute(conn)?;
        }

        if let Some(vertices_data) = new_vertices_data {
            diesel::delete(
                map_vertices::table.filter(map_vertices::feature_id.eq(target_feature_id)),
            )
            .execute(conn)?;

            let vertices_with_id: Vec<NewMapVertex> = vertices_data
                .into_iter()
                .map(|mut v| {
                    v.feature_id = target_feature_id;
                    v
                })
                .collect();

            diesel::insert_into(map_vertices::table)
                .values(&vertices_with_id)
                .execute(conn)?;
        }

        let result = map_features::table.find(target_feature_id).first(conn)?;
        Ok(result)
    })
    .map_err(Into::into)
}

pub fn delete_map_feature(pool: &DbPool, target_feature_id: i32) -> Result<usize, anyhow::Error> {
    use crate::db::schema::{map_features, map_vertices};

    let mut conn = pool.get()?;
    conn.transaction::<_, anyhow::Error, _>(|conn| {
        diesel::delete(map_vertices::table.filter(map_vertices::feature_id.eq(target_feature_id)))
            .execute(conn)?;

        let num_deleted =
            diesel::delete(map_features::table.find(target_feature_id)).execute(conn)?;
        Ok(num_deleted)
    })
}

pub fn create_custom_node(
    pool: &DbPool,
    new_node: &NewCustomNode,
) -> Result<CustomNode, anyhow::Error> {
    use crate::db::schema::custom_nodes::dsl::*;
    let mut conn = pool.get()?;
    let node = diesel::insert_into(custom_nodes)
        .values(new_node)
        .get_result(&mut conn)?;
    Ok(node)
}

pub fn get_all_custom_nodes(pool: &DbPool) -> Result<Vec<CustomNodeResult>, anyhow::Error> {
    use crate::db::schema::custom_nodes::dsl::*;
    let mut conn = pool.get()?;
    let nodes = custom_nodes
        .select(CustomNode::as_select())
        .load::<CustomNode>(&mut conn)?;

    let nodes_map: Vec<CustomNodeResult> = nodes
        .into_iter()
        .map(|(node)| {
            let configuration_data = serde_json::from_str::<serde_json::Value>(&node.data)
                .ok()
                .filter(|v| !v.is_null());
            CustomNodeResult {
                node_type: node.node_type,
                data: configuration_data,
            }
        })
        .collect();

    Ok(nodes_map)
}

pub fn get_custom_node(pool: &DbPool, target_node_type: &str) -> Result<CustomNode, anyhow::Error> {
    use crate::db::schema::custom_nodes::dsl::*;
    let mut conn = pool.get()?;
    let node = custom_nodes
        .filter(node_type.eq(target_node_type))
        .first::<CustomNode>(&mut conn)?;
    Ok(node)
}

pub fn update_custom_node(
    pool: &DbPool,
    target_node_type: &str,
    updated_data: &UpdateCustomNode,
) -> Result<CustomNodeResult, anyhow::Error> {
    use crate::db::schema::custom_nodes::dsl::*;
    let mut conn = pool.get()?;
    let node: CustomNode = diesel::update(custom_nodes.find(target_node_type))
        .set(updated_data)
        .get_result(&mut conn)?;

    let configuration_data = if node.data.is_empty() {
        None
    } else {
        serde_json::from_str::<Value>(&node.data)
            .ok()
            .filter(|v| v.is_object())
    };

    let result = CustomNodeResult {
        node_type: node.node_type,
        data: configuration_data,
    };

    Ok(result)
}

pub fn delete_custom_node(pool: &DbPool, target_node_type: &str) -> Result<(), anyhow::Error> {
    use crate::db::schema::custom_nodes::dsl::*;
    let mut conn = pool.get()?;
    diesel::delete(custom_nodes.find(target_node_type)).execute(&mut conn)?;
    Ok(())
}


================================================
FILE: apps/server/src/db/repository/rbac.rs
================================================
use std::collections::HashMap;

use crate::{
    db::models::{
        NewPermission, NewRole, NewRolePermission, NewUserRole, Permission, Role, RolePermission,
        RoleWithPermissions,
    },
    state::DbPool,
};
use diesel::prelude::*;

pub fn create_role_with_permissions(
    pool: &DbPool,
    name: &str,
    description: Option<&str>,
    permission_ids: &[i32],
) -> Result<Role, anyhow::Error> {
    use crate::db::schema::{role_permissions, roles};

    let mut conn = pool.get()?;

    conn.transaction(|conn| {
        let new_role = NewRole { name, description };

        let role: Role = diesel::insert_into(roles::table)
            .values(&new_role)
            .get_result(conn)?;

        if !permission_ids.is_empty() {
            let new_permissions: Vec<NewRolePermission> = permission_ids
                .iter()
                .map(|pid| NewRolePermission {
                    role_id: role.id,
                    permission_id: *pid,
                })
                .collect();

            diesel::insert_into(role_permissions::table)
                .values(&new_permissions)
                .execute(conn)?;
        }

        Ok(role)
    })
}

pub fn update_role_with_permissions(
    pool: &DbPool,
    role_id_to_update: i32,
    name: &str,
    description: Option<&str>,
    permission_ids: &[i32],
) -> Result<Role, anyhow::Error> {
    use crate::db::schema::{role_permissions, roles};

    let mut conn = pool.get()?;

    conn.transaction(|conn| {
        let role_data = NewRole { name, description };
        let updated_role = diesel::update(roles::table.find(role_id_to_update))
            .set(&role_data)
            .get_result::<Role>(conn)?;

        diesel::delete(
            role_permissions::table.filter(role_permissions::role_id.eq(role_id_to_update)),
        )
        .execute(conn)?;

        if !permission_ids.is_empty() {
            let new_permissions: Vec<NewRolePermission> = permission_ids
                .iter()
                .map(|pid| NewRolePermission {
                    role_id: role_id_to_update,
                    permission_id: *pid,
                })
                .collect();

            diesel::insert_into(role_permissions::table)
                .values(&new_permissions)
                .execute(conn)?;
        }

        Ok(updated_role)
    })
}

pub fn get_all_roles(pool: &DbPool) -> Result<Vec<Role>, anyhow::Error> {
    use crate::db::schema::roles::dsl::*;
    let mut conn = pool.get()?;
    let all_roles = roles.select(Role::as_select()).load(&mut conn)?;
    Ok(all_roles)
}

pub fn delete_role(pool: &DbPool, role_id: i32) -> Result<usize, anyhow::Error> {
    use crate::db::schema::roles::dsl::*;
    let mut conn = pool.get()?;
    let num_deleted = diesel::delete(roles.find(role_id)).execute(&mut conn)?;
    Ok(num_deleted)
}

pub fn create_permission(
    pool: &DbPool,
    new_permission: NewPermission,
) -> Result<Permission, anyhow::Error> {
    use crate::db::schema::permissions::dsl::*;
    let mut conn = pool.get()?;
    let permission = diesel::insert_into(permissions)
        .values(&new_permission)
        .get_result(&mut conn)?;
    Ok(permission)
}

pub fn get_all_permissions(pool: &DbPool) -> Result<Vec<Permission>, anyhow::Error> {
    use crate::db::schema::permissions::dsl::*;
    let mut conn = pool.get()?;
    let all_permissions = permissions
        .select(Permission::as_select())
        .load(&mut conn)?;
    Ok(all_permissions)
}

pub fn assign_role_to_user(
    pool: &DbPool,
    target_user_id: i32,
    target_role_id: i32,
) -> Result<(), anyhow::Error> {
    use crate::db::schema::user_roles::dsl::*;
    let mut conn = pool.get()?;
    let new_user_role = NewUserRole {
        user_id: target_user_id,
        role_id: target_role_id,
    };
    diesel::insert_into(user_roles)
        .values(&new_user_role)
        .execute(&mut conn)?;
    Ok(())
}

pub fn remove_role_from_user(
    pool: &DbPool,
    target_user_id: i32,
    target_role_id: i32,
) -> Result<usize, anyhow::Error> {
    use crate::db::schema::user_roles::dsl::*;
    let mut conn = pool.get()?;
    let num_deleted = diesel::delete(
        user_roles.filter(user_id.eq(target_user_id).and(role_id.eq(target_role_id))),
    )
    .execute(&mut conn)?;
    Ok(num_deleted)
}

pub fn get_user_roles(pool: &DbPool, target_user_id: i32) -> Result<Vec<Role>, anyhow::Error> {
    use crate::db::schema::{roles, user_roles};
    let mut conn = pool.get()?;
    let user_assigned_roles = user_roles::table
        .inner_join(roles::table)
        .filter(user_roles::user_id.eq(target_user_id))
        .select(Role::as_select())
        .load(&mut conn)?;
    Ok(user_assigned_roles)
}

pub fn grant_permission_to_role(
    pool: &DbPool,
    target_role_id: i32,
    target_permission_id: i32,
) -> Result<(), anyhow::Error> {
    use crate::db::schema::role_permissions::dsl::*;
    let mut conn = pool.get()?;
    let new_role_permission = NewRolePermission {
        role_id: target_role_id,
        permission_id: target_permission_id,
    };

    diesel::insert_into(role_permissions)
        .values(&new_role_permission)
        .execute(&mut conn)?;
    Ok(())
}

pub fn revoke_permission_from_role(
    pool: &DbPool,
    target_role_id: i32,
    target_permission_id: i32,
) -> Result<usize, anyhow::Error> {
    use crate::db::schema::role_permissions::dsl::*;
    let mut conn = pool.get()?;
    let num_deleted = diesel::delete(
        role_permissions.filter(
            role_id
                .eq(target_role_id)
                .and(permission_id.eq(target_permission_id)),
        ),
    )
    .execute(&mut conn)?;
    Ok(num_deleted)
}

pub fn get_role_permissions(
    pool: &DbPool,
    target_role_id: i32,
) -> Result<Vec<Permission>, anyhow::Error> {
    use crate::db::schema::{permissions, role_permissions};
    let mut conn = pool.get()?;
    let role_granted_permissions = role_permissions::table
        .inner_join(permissions::table)
        .filter(role_permissions::role_id.eq(target_role_id))
        .select(Permission::as_select())
        .load(&mut conn)?;
    Ok(role_granted_permissions)
}

pub fn get_all_roles_with_permissions(
    pool: &DbPool,
) -> Result<Vec<RoleWithPermissions>, anyhow::Error> {
    let mut conn = pool.get()?;

    let roles_list = crate::db::schema::roles::table.load::<Role>(&mut conn)?;

    let permissions_list = crate::db::schema::permissions::table.load::<Permission>(&mut conn)?;

    let role_permissions_list =
        RolePermission::belonging_to(&roles_list).load::<RolePermission>(&mut conn)?;

    let permissions_map: HashMap<i32, Permission> =
        permissions_list.into_iter().map(|p| (p.id, p)).collect();

    let results = roles_list
        .into_iter()
        .map(|role| {
            let permissions_for_role = role_permissions_list
                .iter()
                .filter(|rp| rp.role_id == role.id)
                .filter_map(|rp| permissions_map.get(&rp.permission_id).cloned())
                .collect();

            RoleWithPermissions {
                id: role.id,
                name: role.name.clone(),
                description: role.description.clone(),
                permissions: permissions_for_role,
            }
        })
        .collect();

    Ok(results)
}


================================================
FILE: apps/server/src/db/repository/recordings.rs
================================================
use crate::db::models::{NewRecording, Recording, UpdateRecording};
use crate::state::DbPool;
use diesel::prelude::*;

pub fn create_recording(
    pool: &DbPool,
    new_recording: NewRecording,
) -> Result<Recording, anyhow::Error> {
    use crate::db::schema::recordings::dsl::*;

    let mut conn = pool.get()?;
    let recording = diesel::insert_into(recordings)
        .values(&new_recording)
        .get_result(&mut conn)?;

    Ok(recording)
}

pub fn get_all_recordings(pool: &DbPool) -> Result<Vec<Recording>, anyhow::Error> {
    use crate::db::schema::recordings::dsl::*;

    let mut conn = pool.get()?;
    let all_recordings = recordings
        .order(started_at.desc())
        .select(Recording::as_select())
        .load(&mut conn)?;

    Ok(all_recordings)
}

pub fn get_recordings_by_status(
    pool: &DbPool,
    target_status: &str,
) -> Result<Vec<Recording>, anyhow::Error> {
    use crate::db::schema::recordings::dsl::*;

    let mut conn = pool.get()?;
    let filtered_recordings = recordings
        .filter(status.eq(target_status))
        .order(started_at.desc())
        .select(Recording::as_select())
        .load(&mut conn)?;

    Ok(filtered_recordings)
}

pub fn get_recordings_by_topic(
    pool: &DbPool,
    target_topic: &str,
) -> Result<Vec<Recording>, anyhow::Error> {
    use crate::db::schema::recordings::dsl::*;

    let mut conn = pool.get()?;
    let filtered_recordings = recordings
        .filter(topic.eq(target_topic))
        .order(started_at.desc())
        .select(Recording::as_select())
        .load(&mut conn)?;

    Ok(filtered_recordings)
}

pub fn get_active_recording_by_topic(
    pool: &DbPool,
    target_topic: &str,
) -> Result<Option<Recording>, anyhow::Error> {
    use crate::db::schema::recordings::dsl::*;

    let mut conn = pool.get()?;
    let recording = recordings
        .filter(topic.eq(target_topic))
        .filter(status.eq("recording"))
        .first::<Recording>(&mut conn)
        .optional()?;

    Ok(recording)
}

pub fn get_recording_by_id(pool: &DbPool, recording_id: i32) -> Result<Recording, anyhow::Error> {
    use crate::db::schema::recordings::dsl::*;

    let mut conn = pool.get()?;
    let recording = recordings
        .find(recording_id)
        .select(Recording::as_select())
        .first(&mut conn)?;

    Ok(recording)
}

pub fn update_recording(
    pool: &DbPool,
    recording_id: i32,
    update_data: &UpdateRecording,
) -> Result<Recording, anyhow::Error> {
    use crate::db::schema::recordings::dsl::*;

    let mut conn = pool.get()?;
    let recording = diesel::update(recordings.find(recording_id))
        .set(update_data)
        .get_result(&mut conn)?;

    Ok(recording)
}

pub fn delete_recording(pool: &DbPool, recording_id: i32) -> Result<usize, anyhow::Error> {
    use crate::db::schema::recordings::dsl::*;

    let mut conn = pool.get()?;
    let num_deleted = diesel::delete(recordings.find(recording_id)).execute(&mut conn)?;

    Ok(num_deleted)
}

/// Mark all recordings with status="recording" as "abandoned"
/// Called on server startup to cleanup orphaned recordings from crashes
pub fn mark_orphaned_as_abandoned(pool: &DbPool) -> Result<usize, anyhow::Error> {
    use crate::db::schema::recordings::dsl::*;

    let mut conn = pool.get()?;
    let num_updated = diesel::update(recordings.filter(status.eq("recording")))
        .set((
            status.eq("abandoned"),
            ended_at.eq(diesel::dsl::now),
        ))
        .execute(&mut conn)?;

    Ok(num_updated)
}


================================================
FILE: apps/server/src/db/repository/streams.rs
================================================
use std::collections::HashMap;

use crate::{
    db::{
        models::{
            NewPermission, NewRole, NewRolePermission, NewStream, NewUserRole, Permission, Role,
            RolePermission, RoleWithPermissions, Stream,
        },
        schema::streams,
    },
    state::DbPool,
};
use diesel::prelude::*;

pub fn get_all_streams(pool: &DbPool) -> Result<Vec<Stream>, anyhow::Error> {
    use crate::db::schema::streams::dsl::*;

    let mut conn = pool.get()?;
    let all_streams = streams.select(Stream::as_select()).load(&mut conn)?;
    Ok(all_streams)
}

pub fn upsert_stream(pool: &DbPool, new_stream: &NewStream) -> Result<Stream, anyhow::Error> {
    use crate::db::schema::streams;

    let mut conn = pool.get()?;

    let stream = diesel::insert_into(streams::table)
        .values(new_stream)
        .on_conflict((streams::topic, streams::device_id))
        .do_update()
        .set(streams::ssrc.eq(new_stream.ssrc))
        .get_result(&mut conn)?;

    Ok(stream)
}

pub fn delete_stream(pool: &DbPool, target_ssrc: i32) -> Result<usize, anyhow::Error> {
    use crate::db::schema::streams::dsl::*;

    let mut conn = pool.get()?;
    let deleted = diesel::delete(streams.filter(ssrc.eq(target_ssrc))).execute(&mut conn)?;
    Ok(deleted)
}


================================================
FILE: apps/server/src/db/schema.rs
================================================
// @generated automatically by Diesel CLI.

diesel::table! {
    custom_nodes (node_type) {
        node_type -> Text,
        data -> Text,
    }
}

diesel::table! {
    device_tokens (id) {
        id -> Integer,
        device_id -> Integer,
        token_hash -> Text,
        expires_at -> Nullable<Timestamp>,
        last_used_at -> Nullable<Timestamp>,
        created_at -> Timestamp,
    }
}

diesel::table! {
    devices (id) {
        id -> Integer,
        device_id -> Text,
        name -> Nullable<Text>,
        manufacturer -> Nullable<Text>,
        model -> Nullable<Text>,
    }
}

diesel::table! {
    dynamic_dashboards (id) {
        id -> Text,
        name -> Text,
        layout -> Text,
        created_at -> Timestamp,
        updated_at -> Timestamp,
    }
}

diesel::table! {
    entities (id) {
        id -> Integer,
        entity_id -> Text,
        device_id -> Nullable<Integer>,
        friendly_name -> Nullable<Text>,
        platform -> Nullable<Text>,
        entity_type -> Nullable<Text>,
    }
}

diesel::table! {
    entities_configurations (id) {
        id -> Integer,
        entity_id -> Integer,
        configuration -> Text,
        created_at -> Timestamp,
        updated_at -> Timestamp,
    }
}

diesel::table! {
    events (event_id) {
        event_id -> Integer,
        event_type -> Nullable<Text>,
        event_data -> Nullable<Text>,
        origin -> Nullable<Text>,
        time_fired -> Nullable<Timestamp>,
    }
}

diesel::table! {
    flow_versions (id) {
        id -> Integer,
        flow_id -> Integer,
        version -> Integer,
        graph_json -> Text,
        comment -> Nullable<Text>,
        created_at -> Timestamp,
    }
}

diesel::table! {
    flows (id) {
        id -> Integer,
        name -> Text,
        description -> Nullable<Text>,
        enabled -> Integer,
        created_at -> Timestamp,
        updated_at -> Timestamp,
    }
}

diesel::table! {
    map_features (id) {
        id -> Integer,
        layer_id -> Integer,
        feature_type -> Text,
        name -> Nullable<Text>,
        style_properties -> Nullable<Text>,
        created_by_user_id -> Integer,
        created_at -> Timestamp,
        updated_at -> Timestamp,
    }
}

diesel::table! {
    map_layers (id) {
        id -> Integer,
        name -> Text,
        description -> Nullable<Text>,
        owner_user_id -> Integer,
        is_visible -> Integer,
        created_at -> Timestamp,
        updated_at -> Timestamp,
    }
}

diesel::table! {
    map_vertices (id) {
        id -> Integer,
        feature_id -> Integer,
        latitude -> Float,
        longitude -> Float,
        altitude -> Nullable<Float>,
        sequence -> Integer,
    }
}

diesel::table! {
    permissions (id) {
        id -> Integer,
        name -> Text,
        description -> Nullable<Text>,
    }
}

diesel::table! {
    role_permissions (role_id, permission_id) {
        role_id -> Integer,
        permission_id -> Integer,
    }
}

diesel::table! {
    roles (id) {
        id -> Integer,
        name -> Text,
        description -> Nullable<Text>,
    }
}

diesel::table! {
    states (state_id) {
        state_id -> Integer,
        metadata_id -> Nullable<Integer>,
        state -> Nullable<Text>,
        attributes -> Nullable<Text>,
        last_changed -> Nullable<Timestamp>,
        last_updated -> Nullable<Timestamp>,
        created -> Nullable<Timestamp>,
    }
}

diesel::table! {
    states_meta (metadata_id) {
        metadata_id -> Integer,
        entity_id -> Text,
    }
}

diesel::table! {
    streams (ssrc) {
        ssrc -> Integer,
        topic -> Text,
        device_id -> Text,
        media_type -> Text,
        created_at -> Timestamp,
    }
}

diesel::table! {
    recordings (id) {
        id -> Integer,
        stream_ssrc -> Integer,
        topic -> Text,
        device_id -> Text,
        media_type -> Text,
        filename -> Text,
        file_path -> Text,
        file_size -> Integer,
        duration_ms -> Integer,
        status -> Text,
        started_at -> Timestamp,
        ended_at -> Nullable<Timestamp>,
        created_by_user_id -> Nullable<Integer>,
    }
}

diesel::table! {
    system_configurations (id) {
        id -> Integer,
        key -> Text,
        value -> Text,
        enabled -> Integer,
        description -> Nullable<Text>,
        created_at -> Timestamp,
        updated_at -> Timestamp,
    }
}

diesel::table! {
    user_roles (user_id, role_id) {
        user_id -> Integer,
        role_id -> Integer,
    }
}

diesel::table! {
    users (id) {
        id -> Integer,
        username -> Text,
        email -> Text,
        password_hash -> Text,
        created_at -> Timestamp,
        updated_at -> Timestamp,
    }
}

diesel::joinable!(device_tokens -> devices (device_id));
diesel::joinable!(entities -> devices (device_id));
diesel::joinable!(entities_configurations -> entities (entity_id));
diesel::joinable!(flow_versions -> flows (flow_id));
diesel::joinable!(map_features -> map_layers (layer_id));
diesel::joinable!(map_features -> users (created_by_user_id));
diesel::joinable!(map_layers -> users (owner_user_id));
diesel::joinable!(map_vertices -> map_features (feature_id));
diesel::joinable!(role_permissions -> permissions (permission_id));
diesel::joinable!(role_permissions -> roles (role_id));
diesel::joinable!(states -> states_meta (metadata_id));
diesel::joinable!(user_roles -> roles (role_id));
diesel::joinable!(user_roles -> users (user_id));

diesel::allow_tables_to_appear_in_same_query!(
    custom_nodes,
    device_tokens,
    devices,
    dynamic_dashboards,
    entities,
    entities_configurations,
    events,
    flow_versions,
    flows,
    map_features,
    map_layers,
    map_vertices,
    permissions,
    recordings,
    role_permissions,
    roles,
    states,
    states_meta,
    streams,
    system_configurations,
    user_roles,
    users,
);


================================================
FILE: apps/server/src/error.rs
================================================
use axum::{
    http::StatusCode,
    response::{IntoResponse, Response},
};

pub struct AppError(anyhow::Error);

impl IntoResponse for AppError {
    fn into_response(self) -> Response {
        tracing::error!("Application error: {:?}", self.0);

        (
            StatusCode::INTERNAL_SERVER_ERROR,
            format!("Something went wrong: {}", self.0),
        )
            .into_response()
    }
}

impl<E> From<E> for AppError
where
    E: Into<anyhow::Error>,
{
    fn from(err: E) -> Self {
        Self(err.into())
    }
}


================================================
FILE: apps/server/src/flow/binary_store.rs
================================================
use dashmap::DashMap;
use std::sync::Arc;
use std::time::{Duration, Instant};
use uuid::Uuid;

#[derive(Clone)]
pub struct BinaryStore {
    store: Arc<DashMap<Uuid, (Instant, Vec<u8>)>>,
}

impl BinaryStore {
    pub fn new() -> Self {
        let store = Arc::new(DashMap::new());
        let store_clone = store.clone();

        tokio::spawn(async move {
            let mut interval = tokio::time::interval(Duration::from_secs(60));
            loop {
                interval.tick().await;
                let cutoff = Instant::now() - Duration::from_secs(60);
                store_clone.retain(|_, (timestamp, _)| *timestamp > cutoff);
            }
        });

        Self { store }
    }

    pub fn insert(&self, data: Vec<u8>) -> Uuid {
        let id = Uuid::new_v4();
        self.store.insert(id, (Instant::now(), data));
        id
    }

    pub fn remove(&self, id: &Uuid) -> Option<Vec<u8>> {
        self.store.remove(id).map(|(_, (_, data))| data)
    }
}


================================================
FILE: apps/server/src/flow/engine.rs
================================================
use anyhow::{anyhow, Result};
use rumqttc::AsyncClient;
use serde::Deserialize;
use serde_json::{json, Value};
use std::collections::HashMap;
use std::collections::VecDeque;
use std::sync::Arc;
use std::time::Duration;
use tokio::sync::{broadcast, mpsc, watch, Mutex};
use tokio::task::JoinHandle;
use tokio::time;
use tracing::{error, info};

use crate::db::models::SystemConfiguration;
use crate::flow::nodes::branch::BranchNode;
use crate::flow::nodes::custom_node::CustomNode;
use crate::flow::nodes::dashboard_event_listener::DashboardEventListenerNode;
use crate::flow::nodes::decode_h264::DecodeH264Node;
use crate::flow::nodes::decode_opus::DecodeOpusNode;
use crate::flow::nodes::gst_decoder::GstDecoderNode;
use crate::flow::nodes::json_modify::JsonModifyNode;
use crate::flow::nodes::json_selector::JsonSelectorNode;
use crate::flow::nodes::mqtt_publish::MqttPublishNode;
use crate::flow::nodes::mqtt_subscribe::MqttSubscribeNode;
use crate::flow::nodes::rtp_stream_in::RtpStreamInNode;
use crate::flow::nodes::set_variable_with_exec::SetVariableWithExecNode;
use crate::flow::nodes::type_converter::TypeConverterNode;
use crate::flow::nodes::websocket_on::WebSocketOnNode;
use crate::flow::nodes::websocket_send::WebSocketSendNode;
use crate::flow::nodes::yolo_detect::YoloDetectNode;
use crate::flow::nodes::{
    calc::CalcNode, http::HttpNode, interval::IntervalNode, log_message::LogMessageNode,
    logic_operator::LogicOpetatorNode, set_variable::SetVariableNode, show_toast::ShowToastNode,
    start::StartNode, ExecutableNode,
};
use crate::flow::types::{FlowRunContext, Graph, Node};
use crate::flow::BinaryStore;
use crate::state::{DashboardUiEvent, MqttMessage, StreamManager};

pub struct ExecutionContext {
    variables: HashMap<String, Value>,
    mqtt_client: Option<AsyncClient>,
    broadcast_tx: broadcast::Sender<String>,
    flow_id: i32,
    run_context: Option<FlowRunContext>,
}

impl ExecutionContext {
    pub fn new(
        mqtt_client: Option<AsyncClient>,
        broadcast_tx: broadcast::Sender<String>,
        flow_id: i32,
        run_context: Option<FlowRunContext>,
    ) -> Self {
        Self {
            variables: HashMap::new(),
            mqtt_client,
            broadcast_tx,
            flow_id,
            run_context,
        }
    }

    pub fn set_variable(&mut self, name: &str, value: Value) {
        self.variables.insert(name.to_string(), value);
    }

    pub fn get_variable(&self, name: &str) -> Option<&Value> {
        self.variables.get(name)
    }

    pub fn get_broadcast(&self) -> broadcast::Sender<String> {
        self.broadcast_tx.clone()
    }

    /// Broadcast a UI event to clients; only the tab that started the run (matching `session_id`) should react.
    pub fn emit_flow_ui_event(
        &self,
        node_id: &str,
        node_type: &str,
        event_kind: &str,
        event_data: Value,
    ) {
        let Some(ref rc) = self.run_context else {
            return;
        };
        let ws_message = json!({
            "type": "flow_ui_event",
            "payload": {
                "target": { "session_id": rc.session_id },
                "event": { "kind": event_kind, "data": event_data },
                "meta": {
                    "flow_id": self.flow_id,
                    "node_id": node_id,
                    "node_type": node_type,
                }
            }
        });
        if let Ok(payload_str) = serde_json::to_string(&ws_message) {
            if self.broadcast_tx.send(payload_str).is_err() {
                error!("Failed to broadcast flow_ui_event");
            }
        }
    }

    pub fn mqtt_client(&self) -> &Option<AsyncClient> {
        &self.mqtt_client
    }
}

pub struct FlowController {
    shutdown_tx: watch::Sender<bool>,
}

impl FlowController {
    pub fn stop(&self) {
        self.shutdown_tx.send(true).ok();
    }
}

#[derive(Debug)]
pub struct TriggerCommand {
    pub node_id: String,
    pub inputs: HashMap<String, Value>,
}

pub struct FlowEngine {
    pub nodes: HashMap<String, Node>,
    data_flow_graph: HashMap<String, Vec<(String, String, String)>>,
    expected_input_counts: HashMap<String, usize>,
    mqtt_tx: Option<broadcast::Sender<MqttMessage>>,
    dashboard_ui_tx: Option<broadcast::Sender<DashboardUiEvent>>,
    stream_manager: StreamManager,
    binary_store: BinaryStore,
    system_configs: Vec<SystemConfiguration>,
}

impl FlowEngine {
    pub fn new(
        graph: Graph,
        mqtt_tx: Option<broadcast::Sender<MqttMessage>>,
        dashboard_ui_tx: Option<broadcast::Sender<DashboardUiEvent>>,
        stream_manager: StreamManager,
        binary_store: BinaryStore,
        system_configs: Vec<SystemConfiguration>,
    ) -> Result<Self> {
        let nodes_map: HashMap<String, Node> =
            graph.nodes.into_iter().map(|n| (n.id.clone(), n)).collect();

        let mut connector_to_node_map = HashMap::new();
        let mut connector_name_map = HashMap::new();
        for node in nodes_map.values() {
            for connector in &node.connectors {
                connector_to_node_map.insert(connector.id.clone(), node.id.clone());
                connector_name_map.insert(connector.id.clone(), connector.name.clone());
            }
        }

        let mut data_flow_graph: HashMap<String, Vec<(String, String, String)>> = HashMap::new();
        let mut expected_input_counts: HashMap<String, usize> = HashMap::new();

        for edge in &graph.edges {
            let source_node_id = connector_to_node_map
                .get(&edge.source)
                .ok_or_else(|| anyhow!("Node for source connector '{}' not found", edge.source))?;
            let target_node_id = connector_to_node_map
                .get(&edge.target)
                .ok_or_else(|| anyhow!("Node for target connector '{}' not found", edge.target))?;

            let source_connector_name = connector_name_map
                .get(&edge.source)
                .ok_or_else(|| anyhow!("Name for source connector '{}' not found", edge.source))?;
            let target_connector_name = connector_name_map
                .get(&edge.target)
                .ok_or_else(|| anyhow!("Name for target connector '{}' not found", edge.target))?;

            data_flow_graph
                .entry(source_node_id.clone())
                .or_default()
                .push((
                    source_connector_name.clone(),
                    target_node_id.clone(),
                    target_connector_name.clone(),
                ));

            *expected_input_counts
                .entry(target_node_id.clone())
                .or_insert(0) += 1;
        }

        Ok(Self {
            nodes: nodes_map,
            data_flow_graph,
            expected_input_counts,
            mqtt_tx,
            dashboard_ui_tx,
            stream_manager,
            binary_store,
            system_configs,
        })
    }

    pub fn get_node_by_id(&self, node_id: &str) -> Option<&Node> {
        self.nodes.get(node_id)
    }

    pub fn get_start_nodes(&self) -> Vec<String> {
        self.nodes
            .keys()
            .filter(|node_id| *self.expected_input_counts.get(*node_id).unwrap_or(&0) == 0)
            .cloned()
            .collect()
    }

    pub fn get_source_node_ids(&self) -> Vec<String> {
        self.nodes
            .iter()
            .filter(|(id, _)| *self.expected_input_counts.get(*id).unwrap_or(&0) == 0)
            .map(|(id, _)| id.clone())
            .collect()
    }

    pub fn get_node_instance(
        &self,
        node_id: &str,
        source_node_ids: Vec<String>,
    ) -> Result<Box<dyn ExecutableNode>> {
        let node = self
            .nodes
            .get(node_id)
            .ok_or_else(|| anyhow!("Node not found: '{}'", node_id))?;
        match node.node_type.as_str() {
            "START" => Ok(Box::new(StartNode)),
            "SET_VARIABLE" => Ok(Box::new(SetVariableNode::new(&node.data)?)),
            "SET_VARIABLE_WITH_EXEC" => Ok(Box::new(SetVariableWithExecNode::new(&node.data)?)),
            "LOG_MESSAGE" => Ok(Box::new(LogMessageNode)),
            "SHOW_TOAST" => Ok(Box::new(ShowToastNode::new(&node.data, node.id.clone())?)),
            "CALCULATION" => Ok(Box::new(CalcNode::new(&node.data)?)),
            "HTTP_REQUEST" => Ok(Box::new(HttpNode::new(&node.data)?)),
            "LOGIC_OPERATOR" => Ok(Box::new(LogicOpetatorNode::new(&node.data)?)),
            "INTERVAL" => Ok(Box::new(IntervalNode::new(&node.data)?)),
            "MQTT_PUBLISH" => Ok(Box::new(MqttPublishNode::new(&node.data)?)),
            "MQTT_SUBSCRIBE" => {
                let rx = self
                    .mqtt_tx
                    .as_ref()
                    .ok_or_else(|| {
                        anyhow!("MQTT client is not configured for MQTT_SUBSCRIBE node")
                    })?
                    .subscribe();
                Ok(Box::new(MqttSubscribeNode::new(
                    &node.data,
                    rx,
                    source_node_ids,
                )?))
            }
            "DASHBOARD_EVENT_LISTENER" => {
                let rx = self
                    .dashboard_ui_tx
                    .as_ref()
                    .ok_or_else(|| {
                        anyhow!("Dashboard UI bus is not configured for DASHBOARD_EVENT_LISTENER")
                    })?
                    .subscribe();
                Ok(Box::new(DashboardEventListenerNode::new(
                    &node.data,
                    rx,
                )?))
            }
            "TYPE_CONVERTER" => Ok(Box::new(TypeConverterNode::new(&node.data)?)),
            "RTP_STREAM_IN" => Ok(Box::new(RtpStreamInNode::new(
                &node.data,
                self.stream_manager.clone(),
                source_node_ids,
            )?)),
            "DECODE_OPUS" => Ok(Box::new(DecodeOpusNode::new()?)),
            "BRANCH" => Ok(Box::new(BranchNode)),
            "JSON_SELECTOR" => Ok(Box::new(JsonSelectorNode::new(&node.data)?)),
            "JSON_MODIFY" => Ok(Box::new(JsonModifyNode::new(&node.data)?)),
            "DECODE_H264" => Ok(Box::new(DecodeH264Node::new()?)),
            "YOLO_DETECT" => Ok(Box::new(YoloDetectNode::new(
                &node.data,
                self.binary_store.clone(),
            )?)),
            "GST_DECODER" => Ok(Box::new(GstDecoderNode::new(
                &node.data,
                self.stream_manager.clone(),
                self.binary_store.clone(),
            )?)),

            "WEBSOCKET_ON" => Ok(Box::new(WebSocketOnNode::new(
                &node.data,
                self.system_configs.clone(),
            )?)),
            "WEBSOCKET_SEND" => Ok(Box::new(WebSocketSendNode::new(
                &node.data,
                self.system_configs.clone(),
            )?)),
            s if s.starts_with('_') => Ok(Box::new(CustomNode::new(&node)?)),
            _ => Err(anyhow!(
                "Unknown or unimplemented node type: {}",
                node.node_type
            )),
        }
    }

    pub async fn start(
        self: Arc<Self>,
        broadcast_tx: broadcast::Sender<String>,
        mqtt_client: Option<AsyncClient>,
        flow_id: i32,
        run_context: Option<FlowRunContext>,
    ) -> (
        FlowController,
        JoinHandle<Result<()>>,
        mpsc::Sender<TriggerCommand>,
    ) {
        let (shutdown_tx, mut shutdown_rx) = watch::channel(false);
        let (trigger_tx, mut trigger_rx) = mpsc::channel::<TriggerCommand>(100);
        let execution_queue = Arc::new(Mutex::new(VecDeque::new()));
        let node_input_data =
            Arc::new(Mutex::new(HashMap::<String, HashMap<String, Value>>::new()));
        let ws_message = json!({
            "type": "log_message",
            "payload": "Executing flow..."
        });
        if let Ok(payload_str) = serde_json::to_string(&ws_message) {
            if broadcast_tx.clone().send(payload_str).is_err() {
                error!("Failed to send health check response.");
            }
        }
        {
            let mut queue = execution_queue.lock().await;
            for node_id in self.get_source_node_ids() {
                if let Ok(instance) = self.get_node_instance(&node_id, vec![]) {
                    if !instance.is_trigger() {
                        queue.push_back(node_id.clone());
                    }
                }
            }
        }
        let engine_clone = Arc::clone(&self);
        let handle = tokio::spawn(async move {
            let self_ = engine_clone;
            let mut context = ExecutionContext::new(mqtt_client, broadcast_tx, flow_id, run_context);
            info!("Flow Engine task started. Entering main execution loop...");
            loop {
                if *shutdown_rx.borrow() {
                    break;
                }
                let maybe_node_id = execution_queue.lock().await.pop_front();
                if let Some(node_id) = maybe_node_id {
                    let node_instance = match self_.get_node_instance(&node_id, vec![]) {
                        Ok(instance) => instance,
                        Err(e) => {
                            error!("Failed to create instance for node {}: {}", node_id, e);
                            continue;
                        }
                    };
                    let inputs = node_input_data
                        .lock()
                        .await
                        .remove(&node_id)
                        .unwrap_or_default();
                    match node_instance.execute(&mut context, inputs).await {
                        Ok(result) => {
                            for trigger in result.triggers {
                                let mut queue = execution_queue.lock().await;
                                node_input_data
                                    .lock()
                                    .await
                                    .entry(trigger.node_id.clone())
                                    .or_default()
                                    .extend(trigger.inputs);
                                queue.push_back(trigger.node_id);
                            }
                            if let Some(connections) = self_.data_flow_graph.get(&node_id) {
                                for (source_connector, target_node_id, target_connector) in
                                    connections
                                {
                                    if let Some(output_value) = result.outputs.get(source_connector)
                                    {
                                        let mut data_map = node_input_data.lock().await;
                                        let target_inputs =
                                            data_map.entry(target_node_id.clone()).or_default();
                                        target_inputs
                                            .insert(target_connector.clone(), output_value.clone());
                                        let expected_count = *self_
                                            .expected_input_counts
                                            .get(target_node_id)
                                            .unwrap_or(&0);
                                        if target_inputs.len() >= expected_count {
                                            execution_queue
                                                .lock()
                                                .await
                                                .push_back(target_node_id.clone());
                                        }
                                    }
                                }
                            }
                        }
                        Err(e) => {
                            error!("Error executing node {}: {}", node_id, e);
                        }
                    }
                } else {
                    tokio::select! {
                        biased;
                        _ = shutdown_rx.changed() => {
                            if *shutdown_rx.borrow() {
                                break;
                            }
                        },
                        Some(command) = trigger_rx.recv() => {
                            let mut data_map = node_input_data.lock().await;
                            data_map.entry(command.node_id.clone()).or_default().extend(command.inputs);
                            execution_queue.lock().await.push_back(command.node_id);
                        },
                        else => {
                            break;
                        }
                    }
                }
            }
            info!("Flow execution loop stopped.");
            Ok(())
        });
        (FlowController { shutdown_tx }, handle, trigger_tx)
    }
}


================================================
FILE: apps/server/src/flow/manager_state.rs
================================================
use crate::{
    db::{self, models::SystemConfiguration},
    flow::{
        engine::{FlowController, FlowEngine},
        types::{FlowRunContext, Graph},
        BinaryStore,
    },
    state::{DashboardUiEvent, DbPool, MqttMessage, StreamManager},
};
use anyhow::Result;
use chrono::Utc;
use rumqttc::AsyncClient;
use std::{collections::HashMap, sync::Arc};
use tokio::{
    sync::{broadcast, mpsc},
    task::JoinHandle,
};
use tracing::{error, info, warn};

pub enum FlowManagerCommand {
    StartFlow {
        flow_id: i32,
        graph: Graph,
        broadcast_tx: broadcast::Sender<String>,
        run_context: Option<FlowRunContext>,
    },
    StopFlow {
        flow_id: i32,
    },
    GetAllFlows {
        responder: tokio::sync::oneshot::Sender<Vec<(i32, bool)>>,
        pool: DbPool,
    },
}

struct ActiveFlow {
    controller: FlowController,
    _handle: JoinHandle<Result<()>>,
    trigger_tasks: Vec<JoinHandle<()>>,
}

pub struct FlowManagerActor {
    receiver: mpsc::Receiver<FlowManagerCommand>,
    active_flows: HashMap<i32, ActiveFlow>,
    mqtt_client: Option<AsyncClient>,
    mqtt_tx: broadcast::Sender<MqttMessage>,
    dashboard_ui_tx: broadcast::Sender<DashboardUiEvent>,
    stream_manager: StreamManager,
    binary_store: BinaryStore,
    system_configs: Vec<SystemConfiguration>,
    pool: DbPool,
}

impl FlowManagerActor {
    pub fn new(
        receiver: mpsc::Receiver<FlowManagerCommand>,
        mqtt_client: Option<AsyncClient>,
        mqtt_tx: broadcast::Sender<MqttMessage>,
        dashboard_ui_tx: broadcast::Sender<DashboardUiEvent>,
        stream_manager: StreamManager,
        system_configs: Vec<SystemConfiguration>,
        pool: DbPool,
    ) -> Self {
        Self {
            receiver,
            active_flows: HashMap::new(),
            mqtt_client,
            mqtt_tx,
            dashboard_ui_tx,
            stream_manager,
            binary_store: BinaryStore::new(),
            system_configs,
            pool,
        }
    }

    pub async fn run(&mut self) {
        while let Some(cmd) = self.receiver.recv().await {
            match cmd {
                FlowManagerCommand::StartFlow {
                    flow_id,
                    graph,
                    broadcast_tx,
                    run_context,
                } => {
                    if self.active_flows.contains_key(&flow_id) {
                        error!("Flow with ID {} is already running.", flow_id);
                        continue;
                    }
                    info!("Starting flow execution for flow_id: {}", flow_id);

                    // Enrich system_configs with entity-based integration configs
                    let mut enriched_configs = self.system_configs.clone();
                    enrich_configs_from_entities(&self.pool, &mut enriched_configs);

                    match FlowEngine::new(
                        graph,
                        Some(self.mqtt_tx.clone()),
                        Some(self.dashboard_ui_tx.clone()),
                        self.stream_manager.clone(),
                        self.binary_store.clone(),
                        enriched_configs,
                    ) {
                        Ok(engine) => {
                            let engine = Arc::new(engine);
                            let source_node_ids = engine.get_source_node_ids();
                            let (controller, handle, trigger_tx) = engine
                                .clone()
                                .start(
                                    broadcast_tx,
                                    self.mqtt_client.clone(),
                                    flow_id,
                                    run_context,
                                )
                                .await;
                            let mut trigger_tasks = Vec::new();
                            for node_id in engine.nodes.keys() {
                                if let Ok(mut node_instance) =
                                    engine.get_node_instance(node_id, source_node_ids.clone())
                                {
                                    if node_instance.is_trigger() {
                                        match node_instance
                                            .start_trigger(node_id.clone(), trigger_tx.clone())
                                        {
                                            Ok(task_handle) => trigger_tasks.push(task_handle),
                                            Err(e) => error!(
                                                "Failed to start trigger for node {}: {}",
                                                node_id, e
                                            ),
                                        }
                                    }
                                }
                            }
                            self.active_flows.insert(
                                flow_id,
                                ActiveFlow {
                                    controller,
                                    _handle: handle,
                                    trigger_tasks,
                                },
                            );
                        }
                        Err(e) => {
                            error!("Failed to create flow engine for flow {}: {}", flow_id, e);
                        }
                    }
                }
                FlowManagerCommand::StopFlow { flow_id } => {
                    if let Some(active_flow) = self.active_flows.remove(&flow_id) {
                        info!("Stop signal sent to flow_id: {}", flow_id);
                        active_flow.controller.stop();
                        for task in active_flow.trigger_tasks {
                            task.abort();
                        }
                    }
                }
                FlowManagerCommand::GetAllFlows { responder, pool } => {
                    let all_db_flows = db::repository::get_all_flows(&pool).unwrap_or_default();
                    let status: Vec<(i32, bool)> = all_db_flows
                        .into_iter()
                        .map(|f| (f.id, self.active_flows.contains_key(&f.id)))
                        .collect();
                    let _ = responder.send(status);
                }
            }
        }
    }
}

/// Enrich system_configs with values from entity-based integration configurations.
/// This allows flow nodes using placeholders like `{:ros2_websocket_url}` to resolve
/// from entity configurations when they are not present in system_configurations.
fn enrich_configs_from_entities(pool: &DbPool, configs: &mut Vec<SystemConfiguration>) {
    let now = Utc::now().naive_utc();

    // Home Assistant bridge entity → home_assistant_url, home_assistant_token
    if let Ok(Some(ha_entity)) =
        db::repository::get_entity_with_config_by_entity_id(pool, "home_assistant.bridge")
    {
        if let Some(config) = ha_entity.configuration {
            if let Some(url) = config.get("url").and_then(|v| v.as_str()) {
                if !configs.iter().any(|c| c.key == "home_assistant_url") {
                    configs.push(SystemConfiguration {
                        id: 0,
                        key: "home_assistant_url".to_string(),
                        value: url.to_string(),
                        enabled: 1,
                        description: Some("Auto-enriched from entity config".to_string()),
                        created_at: now,
                        updated_at: now,
                    });
                }
            }
            if let Some(token) = config.get("token").and_then(|v| v.as_str()) {
                if !configs.iter().any(|c| c.key == "home_assistant_token") {
                    configs.push(SystemConfiguration {
                        id: 0,
                        key: "home_assistant_token".to_string(),
                        value: token.to_string(),
                        enabled: 1,
                        description: Some("Auto-enriched from entity config".to_string()),
                        created_at: now,
                        updated_at: now,
                    });
                }
            }
        }
    } else {
        warn!("Could not look up home_assistant.bridge entity for config enrichment");
    }

    // ROS2 bridge entity → ros2_websocket_url
    if let Ok(Some(ros2_entity)) =
        db::repository::get_entity_with_config_by_entity_id(pool, "ros2.bridge")
    {
        if let Some(config) = ros2_entity.configuration {
            if let Some(ws_url) = config.get("websocket_url").and_then(|v| v.as_str()) {
                if !configs.iter().any(|c| c.key == "ros2_websocket_url") {
                    configs.push(SystemConfiguration {
                        id: 0,
                        key: "ros2_websocket_url".to_string(),
                        value: ws_url.to_string(),
                        enabled: 1,
                        description: Some("Auto-enriched from entity config".to_string()),
                        created_at: now,
                        updated_at: now,
                    });
                }
            }
        }
    } else {
        warn!("Could not look up ros2.bridge entity for config enrichment");
    }

    // RTL-SDR server entity → sdr_host, sdr_port
    if let Ok(Some(sdr_entity)) =
        db::repository::get_entity_with_config_by_entity_id(pool, "sdr.server")
    {
        if let Some(config) = sdr_entity.configuration {
            if let Some(host) = config.get("host").and_then(|v| v.as_str()) {
                if !configs.iter().any(|c| c.key == "sdr_host") {
                    configs.push(SystemConfiguration {
                        id: 0,
                        key: "sdr_host".to_string(),
                        value: host.to_string(),
                        enabled: 1,
                        description: Some("Auto-enriched from entity config".to_string()),
                        created_at: now,
                        updated_at: now,
                    });
                }
            }
            if let Some(port) = config.get("port").and_then(|v| v.as_str()) {
                if !configs.iter().any(|c| c.key == "sdr_port") {
                    configs.push(SystemConfiguration {
                        id: 0,
                        key: "sdr_port".to_string(),
                        value: port.to_string(),
                        enabled: 1,
                        description: Some("Auto-enriched from entity config".to_string()),
                        created_at: now,
                        updated_at: now,
                    });
                }
            }
        }
    } else {
        warn!("Could not look up sdr.server entity for config enrichment");
    }
}


================================================
FILE: apps/server/src/flow/mod.rs
================================================
pub mod binary_store;
pub mod engine;
pub mod manager_state;
pub mod nodes;
pub mod types;

pub use binary_store::BinaryStore;


================================================
FILE: apps/server/src/flow/nodes/branch.rs
================================================
use crate::flow::engine::ExecutionContext;
use anyhow::{anyhow, Result};
use async_trait::async_trait;
use serde_json::{json, Value};
use std::collections::HashMap;
use tracing::error;

use super::{ExecutableNode, ExecutionResult};

pub struct BranchNode;

impl BranchNode {
    pub fn new() -> Result<Self> {
        Ok(Self)
    }
}

#[async_trait]
impl ExecutableNode for BranchNode {
    async fn execute(
        &self,
        context: &mut ExecutionContext,
        inputs: HashMap<String, Value>,
    ) -> Result<ExecutionResult> {
        let result: Result<ExecutionResult> = (|| {
            let data = inputs
                .get("data")
                .ok_or_else(|| anyhow!("'data' input is missing for BRANCH node"))?;

            let condition = inputs
                .get("condition")
                .and_then(|v| v.as_bool())
                .ok_or_else(|| anyhow!("'condition' input must be a boolean for BRANCH node"))?;

            let mut outputs = HashMap::new();

            if condition {
                outputs.insert("true_output".to_string(), data.clone());
            } else {
                outputs.insert("false_output".to_string(), data.clone());
            }

            Ok(ExecutionResult {
                outputs,
                ..Default::default()
            })
        })();

        match result {
            Ok(execution_result) => Ok(execution_result),
            Err(e) => {
                let ws_message = json!({
                    "type": "log_message",
                    "payload": e.to_string()
                });

                if let Ok(payload_str) = serde_json::to_string(&ws_message) {
                    if context.get_broadcast().send(payload_str).is_err() {
                        error!("Failed to send error message over websocket.");
                    }
                }
                Err(e)
            }
        }
    }
}


================================================
FILE: apps/server/src/flow/nodes/calc.rs
================================================
use crate::flow::engine::ExecutionContext;
use anyhow::{anyhow, Result};
use async_trait::async_trait;
use serde::Deserialize;
use serde_json::Value;
use std::collections::HashMap;
use tokio::sync::broadcast;

use super::{ExecutableNode, ExecutionResult};

#[derive(Deserialize, Debug, Clone)]
#[serde(rename_all = "camelCase")]
struct CalcNodeData {
    operator_calc: String,
}

pub struct CalcNode {
    data: CalcNodeData,
}

impl CalcNode {
    pub fn new(node_data: &Value) -> Result<Self> {
        let data: CalcNodeData = serde_json::from_value(node_data.clone())?;
        Ok(Self { data })
    }
}

#[async_trait]
impl ExecutableNode for CalcNode {
    async fn execute(
        &self,
        _context: &mut ExecutionContext,
        inputs: HashMap<String, Value>,
    ) -> Result<ExecutionResult> {
        let a = inputs
            .get("a")
            .and_then(Value::as_f64)
            .ok_or_else(|| anyhow!("Input 'a' is not a valid number"))?;
        let b = inputs
            .get("b")
            .and_then(Value::as_f64)
            .ok_or_else(|| anyhow!("Input 'b' is not a valid number"))?;
        let operator_calc = Value::from(self.data.operator_calc.clone());
        let result;

        if operator_calc == "+" {
            println!("Adding numbers: a = {}, b = {}", a, b);
            result = a + b;
        } else if operator_calc == "-" {
            println!("Adding numbers: a = {}, b = {}", a, b);
            result = a - b;
        } else if operator_calc == "/" {
            println!("Adding numbers: a = {}, b = {}", a, b);
            result = a / b;
        } else if operator_calc == "*" {
            println!("Adding numbers: a = {}, b = {}", a, b);
            result = a * b;
        } else {
            println!("Adding numbers: a = {}, b = {}", a, b);
            result = a % b;
        }

        let mut outputs = HashMap::new();
        outputs.insert("number".to_string(), Value::from(result));

        Ok(ExecutionResult {
            outputs,
            ..Default::default()
        })
    }
}


================================================
FILE: apps/server/src/flow/nodes/custom_node.rs
================================================
use crate::flow::engine::ExecutionContext;
use crate::flow::types::{ExecutionResult, Node};
use anyhow::{anyhow, Result};
use async_trait::async_trait;
use rhai::packages::Package;
use rhai::{Dynamic, Engine, Scope};
use rhai_rand::RandomPackage;
use serde_json::Value;
use std::collections::HashMap;
use std::time::{SystemTime, UNIX_EPOCH};
use tokio::task;
use tracing::{error, info};

use super::ExecutableNode;

pub struct CustomNode {
    node: Node,
}

impl CustomNode {
    pub fn new(node: &Node) -> Result<Self> {
        let node = node.clone();
        Ok(Self { node })
    }
}

#[async_trait]
impl ExecutableNode for CustomNode {
    async fn execute(
        &self,
        _context: &mut ExecutionContext,
        inputs: HashMap<String, Value>,
    ) -> Result<ExecutionResult> {
        let path_value = self
            .node
            .data
            .get("path")
            .ok_or_else(|| anyhow!("'path' not found in node data"))?;
        let original_path = path_value
            .as_str()
            .ok_or_else(|| anyhow!("'path' must be a string"))?;

        let script_path = original_path.replace("{:code}", "./storage");

        let code = match tokio::fs::read_to_string(&script_path).await {
            Ok(c) => c,
            Err(e) => {
                let err_msg = format!("Failed to read script at '{}': {}", script_path, e);
                error!("{}", err_msg);
                return Err(anyhow!(err_msg));
            }
        };

        let blocking_task = task::spawn_blocking(move || {
            let mut engine = Engine::new();
            engine.register_global_module(RandomPackage::new().as_shared_module());
            engine.register_fn("epoch_ms", || -> i64 {
                SystemTime::now()
                    .duration_since(UNIX_EPOCH)
                    .unwrap()
                    .as_millis() as i64
            });

            let inputs_dynamic: Dynamic = rhai::serde::to_dynamic(&inputs)
                .map_err(|e| anyhow!("Input conversion failed: {}", e))?;

            let ast = engine
                .compile(&code)
                .map_err(|e| anyhow!("Script compilation failed: {}", e))?;
            let mut scope = Scope::new();
            let result: Dynamic = engine
                .call_fn(&mut scope, &ast, "main", (inputs_dynamic,))
                .map_err(|e| anyhow!("Script execution failed: {}", e))?;

            let result_value: Value = rhai::serde::from_dynamic(&result)
                .map_err(|e| anyhow!("Result conversion failed: {}", e))?;
            let outputs: HashMap<String, Value> = match result_value {
                Value::Object(map) => map.into_iter().collect(),
                _ => return Err(anyhow!("Script must return an object map")),
            };
            Ok(outputs)
        });

        match blocking_task.await {
            Ok(Ok(outputs)) => {
                info!("Script executed successfully");
                Ok(ExecutionResult {
                    outputs,
                    ..Default::default()
                })
            }
            Ok(Err(e)) => {
                error!("Error in script execution: {}", e);
                Err(e)
            }
            Err(e) => {
                error!("Failed to run script blocking task: {}", e);
                Err(anyhow!("Task join error: {}", e))
            }
        }
    }
}


================================================
FILE: apps/server/src/flow/nodes/dashboard_event_listener.rs
================================================
use anyhow::Result;
use async_trait::async_trait;
use serde::Deserialize;
use serde_json::{json, Value};
use std::collections::HashMap;
use tokio::{
    sync::{broadcast, mpsc},
    task::JoinHandle,
};
use tracing::warn;

use super::{ExecutableNode, ExecutionResult};
use crate::flow::engine::{ExecutionContext, TriggerCommand};
use crate::state::DashboardUiEvent;

#[derive(Deserialize, Debug, Clone)]
#[serde(rename_all = "camelCase")]
pub struct DashboardEventListenerNodeData {
    pub listener_id: String,
}

pub struct DashboardEventListenerNode {
    data: DashboardEventListenerNodeData,
    dashboard_rx: broadcast::Receiver<DashboardUiEvent>,
}

impl DashboardEventListenerNode {
    pub fn new(
        node_data: &Value,
        dashboard_rx: broadcast::Receiver<DashboardUiEvent>,
    ) -> Result<Self> {
        let data: DashboardEventListenerNodeData = serde_json::from_value(node_data.clone())?;
        Ok(Self { data, dashboard_rx })
    }
}

#[async_trait]
impl ExecutableNode for DashboardEventListenerNode {
    async fn execute(
        &self,
        _context: &mut ExecutionContext,
        inputs: HashMap<String, Value>,
    ) -> Result<ExecutionResult> {
        let mut outputs = HashMap::new();
        if let Some(payload) = inputs.get("payload") {
            outputs.insert("payload".to_string(), payload.clone());
        }
        Ok(ExecutionResult {
            outputs,
            ..Default::default()
        })
    }

    fn is_trigger(&self) -> bool {
        true
    }

    fn start_trigger(
        &self,
        node_id: String,
        trigger_tx: mpsc::Sender<TriggerCommand>,
    ) -> Result<JoinHandle<()>> {
        let target_id = self.data.listener_id.trim().to_string();
        let mut rx = self.dashboard_rx.resubscribe();

        let handle = tokio::spawn(async move {
            loop {
                match rx.recv().await {
                    Ok(ev) => {
                        if ev.listener_id != target_id {
                            continue;
                        }
                        let payload = serde_json::to_value(&ev).unwrap_or(json!({}));
                        let mut inputs = HashMap::new();
                        inputs.insert("payload".to_string(), payload);

                        let cmd = TriggerCommand {
                            node_id: node_id.clone(),
                            inputs,
                        };

                        if trigger_tx.send(cmd).await.is_err() {
                            break;
                        }
                    }
                    Err(broadcast::error::RecvError::Lagged(skipped)) => {
                        warn!(
                            "DASHBOARD_EVENT_LISTENER lagged, skipped {} messages",
                            skipped
                        );
                        continue;
                    }
                    Err(_) => break,
                }
            }
        });
        Ok(handle)
    }
}


================================================
FILE: apps/server/src/flow/nodes/decode_h264.rs
================================================
use anyhow::{anyhow, Result};
use async_trait::async_trait;
use gstreamer::prelude::*;
use gstreamer::{self as gst, glib};
use gstreamer_app::{AppSink, AppSrc};
use serde_json::{json, Value};
use std::collections::HashMap;
use std::sync::Arc;
use tokio::sync::{mpsc, Mutex};
use tracing::{error, info, warn};

use super::{ExecutableNode, ExecutionResult};
use crate::flow::engine::ExecutionContext;

pub struct DecodeH264Node {
    appsrc: AppSrc,
    frame_rx: Arc<Mutex<mpsc::Receiver<Vec<u8>>>>,
    pipeline: gst::Pipeline,
}

impl DecodeH264Node {
    pub fn new() -> Result<Self> {
        gst::init()?;

        let pipeline_str = "appsrc name=mysource ! rtph264depay ! h264parse config-interval=-1 ! appsink name=mysink";
        let pipeline = gst::parse::launch(pipeline_str)?
            .downcast::<gst::Pipeline>()
            .map_err(|_| anyhow!("Failed to downcast GStreamer pipeline"))?;

        let appsrc = pipeline
            .by_name("mysource")
            .ok_or_else(|| anyhow!("Failed to get 'appsrc' from pipeline"))?
            .downcast::<AppSrc>()
            .map_err(|_| anyhow!("Failed to downcast 'appsrc' element"))?;

        appsrc.set_property("is-live", true);
        appsrc.set_property("format", gst::Format::Time);
        appsrc.set_property("do-timestamp", true);

        let caps = gst::Caps::builder("application/x-rtp")
            .field("media", "video")
            .field("clock-rate", 90000)
            .field("encoding-name", "H264")
            .build();
        appsrc.set_caps(Some(&caps));

        let appsink = pipeline
            .by_name("mysink")
            .ok_or_else(|| anyhow!("Failed to get 'appsink' from pipeline"))?
            .downcast::<AppSink>()
            .map_err(|_| anyhow!("Failed to downcast 'appsink' element"))?;

        let (frame_tx, frame_rx) = mpsc::channel::<Vec<u8>>(5);

        appsink.set_callbacks(
            gstreamer_app::AppSinkCallbacks::builder()
                .new_sample(move |sink| {
                    let sample = sink.pull_sample().map_err(|_| gst::FlowError::Eos)?;
                    let buffer = sample.buffer().ok_or(gst::FlowError::Error)?;
                    let map = buffer.map_readable().map_err(|_| gst::FlowError::Error)?;

                    if let Err(e) = frame_tx.try_send(map.as_slice().to_vec()) {
                        warn!("Failed to send frame from GStreamer thread, channel might be full or closed: {}", e);
                    }

                    Ok(gst::FlowSuccess::Ok)
                })
                .build(),
        );

        let bus = pipeline
            .bus()
            .ok_or_else(|| anyhow!("Failed to get GStreamer bus from pipeline"))?;

        bus.add_watch(move |_, msg| {
            match msg.view() {
                gst::MessageView::Error(err) => {
                    error!(
                        "GStreamer pipeline error: {}, Debug: {:?}",
                        err.error(),
                        err.debug()
                    );
                }
                gst::MessageView::Eos(_) => {
                    info!("GStreamer pipeline reached End-Of-Stream.");
                }
                _ => {}
            }
            glib::ControlFlow::Continue
        })?;

        pipeline.set_state(gst::State::Playing)?;

        // FIX: 파이프라인의 상태가 'Playing'으로 완전히 전환될 때까지 최대 5초간 기다립니다.
        pipeline
            .state(gst::ClockTime::from_seconds(5))
            .0
            .map_err(|err| anyhow!("Failed to set pipeline to Playing: {}", err))?;

        Ok(Self {
            appsrc,
            frame_rx: Arc::new(Mutex::new(frame_rx)),
            pipeline,
        })
    }
}

#[async_trait]
impl ExecutableNode for DecodeH264Node {
    async fn execute(
        &self,
        _context: &mut ExecutionContext,
        inputs: HashMap<String, Value>,
    ) -> Result<ExecutionResult> {
        let encoded_packet = inputs
            .get("payload")
            .and_then(|v| v.as_str())
            .ok_or_else(|| anyhow!("'payload' input missing or not a string"))?;

        let rtp_packet_data = base64::decode(encoded_packet)?;

        let buffer = gst::Buffer::from_slice(rtp_packet_data);
        self.appsrc
            .push_buffer(buffer)
            .map_err(|e| anyhow!("Failed to push buffer to GStreamer appsrc: {}", e))?;

        let mut frame_rx = self.frame_rx.lock().await;

        match frame_rx.try_recv() {
            Ok(frame_data) => {
                let frame_base64 = base64::encode(&frame_data);
                let mut outputs = HashMap::new();
                outputs.insert("frame".to_string(), json!(frame_base64));
                println!("send");
                Ok(ExecutionResult {
                    outputs,
                    ..Default::default()
                })
            }
            Err(mpsc::error::TryRecvError::Empty) => Ok(ExecutionResult::default()),
            Err(e) => Err(anyhow!("MPSC channel error in DecodeH264Node: {}", e)),
        }
    }
}

impl Drop for DecodeH264Node {
    fn drop(&mut self) {
        let _ = self.pipeline.set_state(gst::State::Null);
    }
}


================================================
FILE: apps/server/src/flow/nodes/decode_opus.rs
================================================
use anyhow::{anyhow, Result};
use async_trait::async_trait;
use opus;
use serde_json::{json, Value};
use std::collections::HashMap;

use super::{ExecutableNode, ExecutionResult};
use crate::flow::engine::ExecutionContext;

pub struct DecodeOpusNode;

impl DecodeOpusNode {
    pub fn new() -> Result<Self> {
        Ok(Self)
    }
}

#[async_trait]
impl ExecutableNode for DecodeOpusNode {
    async fn execute(
        &self,
        _context: &mut ExecutionContext,
        inputs: HashMap<String, Value>,
    ) -> Result<ExecutionResult> {
        let encoded_payload = inputs
            .get("payload")
            .and_then(|v| v.as_str())
            .ok_or_else(|| anyhow!("'payload' input missing or not a string"))?;

        let opus_data = base64::decode(encoded_payload)?;

        let mut decoder =
            opus::Decoder::new(48000, opus::Channels::Mono).map_err(|e| anyhow!(e))?;

        let mut pcm_output = vec![0i16; 5760];
        let decoded_samples = decoder.decode(&opus_data, &mut pcm_output, false)?;
        let pcm_slice = &pcm_output[..decoded_samples];

        let audio_info = if pcm_slice.is_empty() {
            json!({
                "decibels": -120.0,
                "duration_ms": 0,
                "sample_rate": 48000,
                "channels": 1
            })
        } else {
            let pcm_bytes: Vec<u8> = pcm_slice
                .iter()
                .flat_map(|&sample| sample.to_le_bytes())
                .collect();
            let pcm_payload_base64 = base64::encode(&pcm_bytes);

            let sum_of_squares = pcm_slice.iter().map(|&s| (s as f64).powi(2)).sum::<f64>();
            let rms = (sum_of_squares / pcm_slice.len() as f64).sqrt();

            let dbfs = if rms > 0.0 {
                20.0 * rms.log10() - 20.0 * (i16::MAX as f64).log10()
            } else {
                -120.0
            };

            let duration_ms = (pcm_slice.len() as f64 * 1000.0) / 48000.0;

            json!({
                "decibels": dbfs,
                "duration_ms": duration_ms,
                "sample_rate": 48000,
                "channels": 1
            })
        };

        let mut outputs = HashMap::new();
        outputs.insert("info".to_string(), audio_info);

        Ok(ExecutionResult {
            outputs,
            ..Default::default()
        })
    }
}


================================================
FILE: apps/server/src/flow/nodes/gst_decoder.rs
================================================
use anyhow::{anyhow, Result};
use async_trait::async_trait;
use gstreamer::prelude::*;
use gstreamer::{self as gst, glib};
use gstreamer_app::{AppSink, AppSrc};
use serde::Deserialize;
use serde_json::{json, Value};
use std::collections::HashMap;
use tokio::sync::mpsc;
use tokio::task::JoinHandle;
use tracing::{error, info, warn};
use webrtc::util::Marshal;

use super::{ExecutableNode, ExecutionResult};
use crate::flow::BinaryStore;
use crate::{
    flow::engine::{ExecutionContext, TriggerCommand},
    state::StreamManager,
};

#[derive(Deserialize, Debug, Clone)]
pub struct GstDecoderData {
    topic: String,
}

pub struct GstDecoderNode {
    data: GstDecoderData,
    stream_manager: StreamManager,
    binary_store: BinaryStore,
}

impl GstDecoderNode {
    pub fn new(
        node_data: &Value,
        stream_manager: StreamManager,
        binary_store: BinaryStore,
    ) -> Result<Self> {
        let data: GstDecoderData = serde_json::from_value(node_data.clone())?;
        Ok(Self {
            data,
            stream_manager,
            binary_store,
        })
    }
}

#[async_trait]
impl ExecutableNode for GstDecoderNode {
    async fn execute(
        &self,
        _context: &mut ExecutionContext,
        inputs: HashMap<String, Value>,
    ) -> Result<ExecutionResult> {
        Ok(ExecutionResult {
            outputs: inputs,
            ..Default::default()
        })
    }

    fn is_trigger(&self) -> bool {
        true
    }

    fn start_trigger(
        &self,
        node_id: String,
        trigger_tx: mpsc::Sender<TriggerCommand>,
    ) -> Result<JoinHandle<()>> {
        gst::init()?;
        let stream_info = self
            .stream_manager
            .get_by_topic(&self.data.topic)
            .ok_or_else(|| anyhow!("Stream with topic '{}' not found", self.data.topic))?;

        let pipeline_str = "appsrc name=mysource ! rtph264depay ! vtdec ! videoconvert ! video/x-raw,format=RGB ! appsink name=mysink";
        let pipeline = gst::parse::launch(pipeline_str)?
            .downcast::<gst::Pipeline>()
            .map_err(|_| anyhow!("Failed to downcast GStreamer pipeline"))?;

        let appsrc = pipeline
            .by_name("mysource")
            .ok_or_else(|| anyhow!("Failed to get 'appsrc' from pipeline"))?
            .downcast::<AppSrc>()
            .map_err(|_| anyhow!("Failed to downcast 'appsrc' element"))?;

        appsrc.set_property("is-live", true);
        appsrc.set_property("format", gst::Format::Time);
        appsrc.set_property("do-timestamp", true);
        let caps = gst::Caps::builder("application/x-rtp")
            .field("media", "video")
            .field("clock-rate", 90000)
            .field("encoding-name", "H264")
            .build();
        appsrc.set_caps(Some(&caps));

        let appsink = pipeline
            .by_name("mysink")
            .ok_or_else(|| anyhow!("Failed to get 'appsink' from pipeline"))?
            .downcast::<AppSink>()
            .map_err(|_| anyhow!("Failed to downcast 'appsink' element"))?;

        let bus = pipeline.bus().unwrap();
        bus.add_watch(move |_, msg| {
            match msg.view() {
                gst::MessageView::Error(err) => {
                    error!("GStreamer bus error: {}, {:?}", err.error(), err.debug());
                }
                gst::MessageView::Eos(_) => info!("GStreamer bus EOS."),
                _ => {}
            }
            glib::ControlFlow::Continue
        })?;

        pipeline.set_state(gst::State::Playing)?;
        pipeline
            .state(gst::ClockTime::from_seconds(5))
            .0
            .map_err(|err| anyhow!("Failed to set pipeline to Playing: {}", err))?;

        info!("GStreamer pipeline started for topic '{}'", self.data.topic);

        let binary_store = self.binary_store.clone();

        let handle = tokio::spawn(async move {
            let mut packet_rx = stream_info.packet_tx.subscribe();

            appsink.set_callbacks(
                gstreamer_app::AppSinkCallbacks::builder()
                    .new_sample(move |sink| {
                        let sample = sink.pull_sample().map_err(|_| gst::FlowError::Eos)?;
                        let buffer = sample.buffer().ok_or(gst::FlowError::Error)?;
                        let caps = sample.caps().ok_or(gst::FlowError::Error)?;
                        let s = caps.structure(0).ok_or(gst::FlowError::Error)?;
                        let width =
                            s.get::<i32>("width").map_err(|_| gst::FlowError::Error)? as u32;
                        let height =
                            s.get::<i32>("height").map_err(|_| gst::FlowError::Error)? as u32;

                        let map = buffer.map_readable().map_err(|_| gst::FlowError::Error)?;
                        let frame_bytes = map.as_slice().to_vec();

                        let frame_id = binary_store.insert(frame_bytes);

                        let frame_output = json!({
                               "type": "binary_pointer",
                            "id": frame_id.to_string(),
                            "width": width,
                            "height": height,
                        });

                        let mut inputs = HashMap::new();
                        inputs.insert("frame".to_string(), frame_output);

                        let cmd = TriggerCommand {
                            node_id: node_id.clone(),
                            inputs,
                        };

                        if trigger_tx.try_send(cmd).is_err() {
                            // This warning is expected if YOLO is slower than the video FPS.
                        }

                        Ok(gst::FlowSuccess::Ok)
                    })
                    .build(),
            );

            loop {
                match packet_rx.recv().await {
                    Ok(packet) => {
                        let header_bytes = packet.header.marshal().unwrap();
                        let mut raw_packet_bytes =
                            Vec::with_capacity(header_bytes.len() + packet.payload.len());
                        raw_packet_bytes.extend_from_slice(&header_bytes);
                        raw_packet_bytes.extend_from_slice(&packet.payload);

                        let buffer = gst::Buffer::from_slice(raw_packet_bytes);
                        if appsrc.push_buffer(buffer).is_err() {
                            error!("Failed to push buffer to appsrc, pipeline might have closed.");
                            break;
                        }
                    }
                    Err(e) => {
                        warn!("RTP packet receiver lagged or closed: {}", e);
                    }
                }
            }

            let _ = pipeline.set_state(gst::State::Null);
        });

        Ok(handle)
    }
}


================================================
FILE: apps/server/src/flow/nodes/http.rs
================================================
use crate::flow::engine::ExecutionContext;
use anyhow::{anyhow, Result};
use async_trait::async_trait;
use reqwest::Client;
use serde::Deserialize;
use serde_json::Value;
use std::collections::HashMap;
use tokio::sync::broadcast;

use super::{ExecutableNode, ExecutionResult};

#[derive(Deserialize, Debug, Clone)]
#[serde(rename_all = "camelCase")]
struct HttpNodeData {
    url: String,
    http_method: String,
}

pub struct HttpNode {
    data: HttpNodeData,
}

impl HttpNode {
    pub fn new(node_data: &Value) -> Result<Self> {
        let data: HttpNodeData = serde_json::from_value(node_data.clone())?;
        Ok(Self { data })
    }
}

#[async_trait]
impl ExecutableNode for HttpNode {
    async fn execute(
        &self,
        _context: &mut ExecutionContext,
        inputs: HashMap<String, Value>,
    ) -> Result<ExecutionResult> {
        let client = Client::new();
        let url = &self.data.url;
        let method = self.data.http_method.to_uppercase();

        let response = match method.as_str() {
            "GET" => client.get(url).send().await?,
            "POST" => {
                let _body = inputs.get("body").cloned().unwrap_or(Value::Null);
                client.post(url).send().await?
            }
            "PUT" => {
                let _body = inputs.get("body").cloned().unwrap_or(Value::Null);
                client.put(url).send().await?
            }
            "DELETE" => client.delete(url).send().await?,
            _ => {
                return Err(anyhow!(
                    "Unsupported HTTP method: {}",
                    self.data.http_method
                ));
            }
        };

        let result_body = if response.status().is_success() {
            response.text().await?
        } else {
            return Err(anyhow!(
                "HTTP request failed with status: {}",
                response.status()
            ));
        };

        let mut outputs = HashMap::new();
        outputs.insert("result".to_string(), Value::from(result_body));

        Ok(ExecutionResult {
            outputs,
            ..Default::default()
        })
    }
}


================================================
FILE: apps/server/src/flow/nodes/interval.rs
================================================
use crate::flow::engine::{ExecutionContext, TriggerCommand};
use anyhow::{anyhow, Result};
use async_trait::async_trait;
use serde::Deserialize;
use serde_json::Value;
use std::{collections::HashMap, time::Duration};
use tokio::{sync::mpsc, task::JoinHandle, time};

use super::{ExecutableNode, ExecutionResult};

#[derive(Deserialize, Debug, Clone)]
struct IntervalNodeData {
    interval: u64,
    unit: String,
}

pub struct IntervalNode {
    data: IntervalNodeData,
}

impl IntervalNode {
    pub fn new(node_data: &Value) -> Result<Self> {
        let data: IntervalNodeData = serde_json::from_value(node_data.clone())?;
        Ok(Self { data })
    }

    pub fn get_duration(&self) -> Result<Duration> {
        match self.data.unit.as_str() {
            "milliseconds" => Ok(Duration::from_millis(self.data.interval)),
            "seconds" => Ok(Duration::from_secs(self.data.interval)),
            "minutes" => Ok(Duration::from_secs(self.data.interval * 60)),
            _ => Err(anyhow!("Unsupported time unit: {}", self.data.unit)),
        }
    }
}

#[async_trait]
impl ExecutableNode for IntervalNode {
    async fn execute(
        &self,
        _context: &mut ExecutionContext,
        _inputs: HashMap<String, Value>,
    ) -> Result<ExecutionResult> {
        let mut outputs = HashMap::new();
        outputs.insert("exec".to_string(), Value::Null);
        Ok(ExecutionResult {
            outputs,
            ..Default::default()
        })
    }

    fn is_trigger(&self) -> bool {
        true
    }

    fn start_trigger(
        &self,
        node_id: String,
        trigger_tx: mpsc::Sender<TriggerCommand>,
    ) -> Result<JoinHandle<()>> {
        let duration = self.get_duration()?;
        let handle = tokio::spawn(async move {
            let mut interval = time::interval(duration);
            loop {
                interval.tick().await;
                let cmd = TriggerCommand {
                    node_id: node_id.clone(),
                    inputs: HashMap::new(),
                };
                if trigger_tx.send(cmd).await.is_err() {
                    break;
                }
            }
        });
        Ok(handle)
    }
}


================================================
FILE: apps/server/src/flow/nodes/json_modify.rs
================================================
use crate::flow::engine::ExecutionContext;
use anyhow::{anyhow, Result};
use async_trait::async_trait;
use serde::Deserialize;
use serde_json::Value;
use std::collections::HashMap;

use super::{ExecutableNode, ExecutionResult};

#[derive(Deserialize, Debug)]
struct JsonModifyData {
    path: String,
}

pub struct JsonModifyNode {
    data: JsonModifyData,
}

impl JsonModifyNode {
    pub fn new(node_data: &Value) -> Result<Self> {
        let data: JsonModifyData = serde_json::from_value(node_data.clone())?;
        Ok(Self { data })
    }
}

#[async_trait]
impl ExecutableNode for JsonModifyNode {
    async fn execute(
        &self,
        _context: &mut ExecutionContext,
        inputs: HashMap<String, Value>,
    ) -> Result<ExecutionResult> {
        let mut json_input = inputs
            .get("json")
            .cloned()
            .ok_or_else(|| anyhow!("'json' input is missing for JSON_Modify node"))?;

        let data_input = inputs
            .get("data")
            .cloned()
            .ok_or_else(|| anyhow!("'data' input is missing for JSON_Set node"))?;

        let json_pointer_path = format!("/{}", self.data.path.replace('.', "/"));

        let target = json_input
            .pointer_mut(&json_pointer_path)
            .ok_or_else(|| anyhow!("Path '{}' not found in the input json", self.data.path))?;

        *target = data_input;

        let mut outputs = HashMap::new();
        outputs.insert("value".to_string(), json_input);

        Ok(ExecutionResult {
            outputs,
            ..Default::default()
        })
    }
}


================================================
FILE: apps/server/src/flow/nodes/json_selector.rs
================================================
use crate::flow::engine::ExecutionContext;
use anyhow::{anyhow, Result};
use async_trait::async_trait;
use serde::Deserialize;
use serde_json::Value;
use std::collections::HashMap;

use super::{ExecutableNode, ExecutionResult};

#[derive(Deserialize, Debug)]
struct JsonSelectorData {
    path: String,
}

pub struct JsonSelectorNode {
    data: JsonSelectorData,
}

impl JsonSelectorNode {
    pub fn new(node_data: &Value) -> Result<Self> {
        let data: JsonSelectorData = serde_json::from_value(node_data.clone())?;
        Ok(Self { data })
    }
}

#[async_trait]
impl ExecutableNode for JsonSelectorNode {
    async fn execute(
        &self,
        _context: &mut ExecutionContext,
        inputs: HashMap<String, Value>,
    ) -> Result<ExecutionResult> {
        let json_input = inputs
            .get("json")
            .ok_or_else(|| anyhow!("'json' input is missing for JSON_SELECTOR node"))?;

        let json_pointer_path = format!("/{}", self.data.path.replace('.', "/"));

        let selected_value = json_input
            .pointer(&json_pointer_path)
            .cloned()
            .unwrap_or(Value::Null);

        let mut outputs = HashMap::new();
        outputs.insert("value".to_string(), selected_value);

        Ok(ExecutionResult {
            outputs,
            ..Default::default()
        })
    }
}


================================================
FILE: apps/server/src/flow/nodes/log_message.rs
================================================
use crate::flow::engine::ExecutionContext;
use anyhow::Result;
use async_trait::async_trait;
use serde_json::{json, Value};
use std::collections::HashMap;
use tokio::sync::broadcast;
use tracing::error;

use super::{ExecutableNode, ExecutionResult};

pub struct LogMessageNode;

#[async_trait]
impl ExecutableNode for LogMessageNode {
    async fn execute(
        &self,
        context: &mut ExecutionContext,
        inputs: HashMap<String, Value>,
    ) -> Result<ExecutionResult> {
        println!("[LOG]: {:?}", inputs);

        let ws_message = json!({
            "type": "log_message",
            "payload": inputs.clone()
        });
        if let Ok(payload_str) = serde_json::to_string(&ws_message) {
            if context.get_broadcast().send(payload_str).is_err() {
                error!("Failed to send health check response.");
            }
        }
        Ok(ExecutionResult::default())
    }
}


================================================
FILE: apps/server/src/flow/nodes/logic_operator.rs
================================================
use crate::flow::engine::ExecutionContext;
use anyhow::{anyhow, Result};
use async_trait::async_trait;
use serde::Deserialize;
use serde_json::{json, Value};
use std::collections::HashMap;
use tokio::sync::broadcast;

use super::{ExecutableNode, ExecutionResult};

#[derive(Deserialize, Debug, Clone)]
#[serde(rename_all = "camelCase")]
struct LogicOpetatorNodeData {
    operator: String,
}

pub struct LogicOpetatorNode {
    data: LogicOpetatorNodeData,
}

impl LogicOpetatorNode {
    pub fn new(node_data: &Value) -> Result<Self> {
        let data: LogicOpetatorNodeData = serde_json::from_value(node_data.clone())?;
        Ok(Self { data })
    }

    async fn get_input_as_bool(
        &self,
        key: &str,
        inputs: &HashMap<String, Value>,
        broadcast_tx: &broadcast::Sender<String>,
    ) -> Result<bool> {
        let input_val = inputs
            .get(key)
            .ok_or_else(|| anyhow!("Input '{}' is missing", key))?;

        if let Some(b) = input_val.as_bool() {
            return Ok(b);
        }
        if let Some(n) = input_val.as_f64() {
            return Ok(n != 0.0);
        }

        let err = anyhow!("Input '{}' is not a valid boolean or number", key);
        if let Ok(payload_str) =
            serde_json::to_string(&json!({ "type": "log_message", "payload": err.to_string() }))
        {
            let _ = broadcast_tx.send(payload_str);
        }
        Err(err)
    }

    async fn get_input_as_f64(
        &self,
        key: &str,
        inputs: &HashMap<String, Value>,
        broadcast_tx: &broadcast::Sender<String>,
    ) -> Result<f64> {
        if let Some(n) = inputs.get(key).and_then(Value::as_f64) {
            return Ok(n);
        }

        let err = anyhow!("Input '{}' is not a valid number for comparison", key);
        if let Ok(payload_str) =
            serde_json::to_string(&json!({ "type": "log_message", "payload": err.to_string() }))
        {
            let _ = broadcast_tx.send(payload_str);
        }
        Err(err)
    }
}

#[async_trait]
impl ExecutableNode for LogicOpetatorNode {
    async fn execute(
        &self,
        context: &mut ExecutionContext,
        inputs: HashMap<String, Value>,
    ) -> Result<ExecutionResult> {
        let op = self.data.operator.as_str();

        let result_bool = match op {
            "AND" | "OR" | "XOR" | "NAND" | "NOR" | "XNOR" => {
                let a = self
                    .get_input_as_bool("a", &inputs, &context.get_broadcast())
                    .await?;
                let b = self
                    .get_input_as_bool("b", &inputs, &context.get_broadcast())
                    .await?;

                match op {
                    "AND" => a && b,
                    "OR" => a || b,
                    "XOR" => a ^ b,
                    "NAND" => !(a && b),
                    "NOR" => !(a || b),
                    "XNOR" => !(a ^ b),
                    _ => unreachable!(),
                }
            }
            ">" | "<" | "==" | "!=" | ">=" | "<=" => {
                let a = self
                    .get_input_as_f64("a", &inputs, &context.get_broadcast())
                    .await?;
                let b = self
                    .get_input_as_f64("b", &inputs, &context.get_broadcast())
                    .await?;

                match op {
                    ">" => a > b,
                    "<" => a < b,
                    "==" => a == b,
                    "!=" => a != b,
                    ">=" => a >= b,
                    "<=" => a <= b,
                    _ => unreachable!(),
                }
            }
            _ => {
                let err = anyhow!("Unsupported operator: {}", op);
                if let Ok(payload_str) = serde_json::to_string(
                    &json!({ "type": "log_message", "payload": err.to_string() }),
                ) {
                    let _ = context.get_broadcast().send(payload_str);
                }
                return Err(err);
            }
        };

        let mut outputs = HashMap::new();
        outputs.insert("bool".to_string(), Value::from(result_bool));
        Ok(ExecutionResult {
            outputs,
            ..Default::default()
        })
    }
}


================================================
FILE: apps/server/src/flow/nodes/mod.rs
================================================
use anyhow::{anyhow, Result};
use async_trait::async_trait;
use serde_json::Value;
use std::collections::HashMap;
use tokio::{
    sync::{broadcast, mpsc},
    task::JoinHandle,
};

use crate::flow::{
    engine::{ExecutionContext, TriggerCommand},
    types::ExecutionResult,
};

#[async_trait]
pub trait ExecutableNode: Send + Sync {
    async fn execute(
        &self,
        context: &mut ExecutionContext,
        inputs: HashMap<String, Value>,
    ) -> Result<ExecutionResult>;

    fn is_trigger(&self) -> bool {
        false
    }

    fn start_trigger(
        &self,
        _node_id: String,
        _trigger_tx: mpsc::Sender<TriggerCommand>,
    ) -> Result<JoinHandle<()>> {
        Err(anyhow!("Node is not a trigger"))
    }
}

pub mod branch;
pub mod calc;
pub mod custom_node;
pub mod dashboard_event_listener;
pub mod decode_h264;
pub mod decode_opus;
pub mod gst_decoder;
pub mod http;
pub mod interval;
pub mod json_modify;
pub mod json_selector;
pub mod log_message;
pub mod logic_operator;
pub mod mqtt_publish;
pub mod mqtt_subscribe;
pub mod rtp_stream_in;
pub mod set_variable;
pub mod set_variable_with_exec;
pub mod show_toast;
pub mod start;
pub mod type_converter;
pub mod websocket_on;
pub mod websocket_send;
pub mod yolo_detect;


================================================
FILE: apps/server/src/flow/nodes/mqtt_publish.rs
================================================
use anyhow::{anyhow, Result};
use async_trait::async_trait;
use rumqttc::QoS;
use serde::Deserialize;
use serde_json::{json, to_string, Value};
use std::collections::HashMap;
use tokio::sync::broadcast;
use tracing::{error, warn};

use super::ExecutableNode;
use crate::flow::{engine::ExecutionContext, types::ExecutionResult};

#[derive(Deserialize, Debug, Clone)]
#[serde(rename_all = "camelCase")]
struct MqttPublishNodeData {
    topic: String,
    qos: Option<u8>,
    retain: Option<bool>,
}

pub struct MqttPublishNode {
    data: MqttPublishNodeData,
}

impl MqttPublishNode {
    pub fn new(node_data: &Value) -> Result<Self> {
        let data: MqttPublishNodeData = serde_json::from_value(node_data.clone())?;
        Ok(Self { data })
    }
}

#[async_trait]
impl ExecutableNode for MqttPublishNode {
    async fn execute(
        &self,
        context: &mut ExecutionContext,
        inputs: HashMap<String, Value>,
    ) -> Result<ExecutionResult> {
        let Some(payload) = inputs.get("payload") else {
            return Err(anyhow!("'payload' input is missing for MQTT_PUBLISH node"));
        };

        let payload_bytes = match payload {
            Value::String(s) => s.clone().into_bytes(),
            _ => to_string(payload)?.into_bytes(),
        };

        let qos = match self.data.qos.unwrap_or(1) {
            0 => QoS::AtMostOnce,
            1 => QoS::AtLeastOnce,
            2 => QoS::ExactlyOnce,
            _ => return Err(anyhow!("Invalid QoS value. Must be 0, 1, or 2.")),
        };

        let retain = self.data.retain.unwrap_or(false);

        if let Some(client) = context.mqtt_client() {
            match client
                .publish(&self.data.topic, qos, retain, payload_bytes)
                .await
            {
                Ok(_) => (),
                Err(e) => return Err(anyhow!("Failed to publish MQTT message: {}", e)),
            }
        } else {
            warn!("MQTT client is not available, cannot publish message.");
        }

        let ws_message = json!({
            "type": "log_message",
            "payload": "Publish MQTT Topic"
        });
        if let Ok(payload_str) = serde_json::to_string(&ws_message) {
            if context.get_broadcast().send(payload_str).is_err() {
                error!("Failed to send health check response.");
            }
        }

        Ok(ExecutionResult::default())
    }
}


================================================
FILE: apps/server/src/flow/nodes/mqtt_subscribe.rs
================================================
use anyhow::Result;
use async_trait::async_trait;
use serde::Deserialize;
use serde_json::Value;
use std::collections::HashMap;
use tokio::{
    sync::{broadcast, mpsc},
    task::JoinHandle,
};
use tracing::warn;

use super::{ExecutableNode, ExecutionResult};
use crate::flow::engine::{ExecutionContext, TriggerCommand};
use crate::state::MqttMessage;

#[derive(Deserialize, Debug, Clone)]
#[serde(rename_all = "camelCase")]
pub struct MqttSubscribeNodeData {
    pub topic: String,
}

pub struct MqttSubscribeNode {
    pub data: MqttSubscribeNodeData,
    mqtt_rx: broadcast::Receiver<MqttMessage>,
    source_node_ids: Vec<String>,
}

impl MqttSubscribeNode {
    pub fn new(
        node_data: &Value,
        mqtt_rx: broadcast::Receiver<MqttMessage>,
        source_node_ids: Vec<String>,
    ) -> Result<Self> {
        let data: MqttSubscribeNodeData = serde_json::from_value(node_data.clone())?;
        Ok(Self {
            data,
            mqtt_rx,
            source_node_ids,
        })
    }
}

#[async_trait]
impl ExecutableNode for MqttSubscribeNode {
    async fn execute(
        &self,
        _context: &mut ExecutionContext,
        inputs: HashMap<String, Value>,
    ) -> Result<ExecutionResult> {
        let mut outputs = HashMap::new();
        if let Some(payload) = inputs.get("payload") {
            outputs.insert("payload".to_string(), payload.clone());
        }
        Ok(ExecutionResult {
            outputs,
            ..Default::default()
        })
    }

    fn is_trigger(&self) -> bool {
        true
    }

    fn start_trigger(
        &self,
        node_id: String,
        trigger_tx: mpsc::Sender<TriggerCommand>,
    ) -> Result<JoinHandle<()>> {
        let mut rx = self.mqtt_rx.resubscribe();
        let topic_to_match = self.data.topic.clone();
        let source_ids = self.source_node_ids.clone();

        let handle = tokio::spawn(async move {
            loop {
                match rx.recv().await {
                    Ok(msg) => {
                        if msg.topic == topic_to_match {
                            for source_id in &source_ids {
                                if *source_id != node_id {
                                    let cmd = TriggerCommand {
                                        node_id: source_id.clone(),
                                        inputs: HashMap::new(),
                                    };
                                    if trigger_tx.send(cmd).await.is_err() {
                                        return;
                                    }
                                }
                            }

                            let payload_value = match serde_json::from_slice(&msg.bytes) {
                                Ok(p) => p,
                                Err(_) => {
                                    Value::String(String::from_utf8_lossy(&msg.bytes).to_string())
                                }
                            };
                            let mut inputs = HashMap::new();
                            inputs.insert("payload".to_string(), payload_value);

                            let cmd = TriggerCommand {
                                node_id: node_id.clone(),
                                inputs,
                            };

                            if trigger_tx.send(cmd).await.is_err() {
                                break;
                            }
                        }
                    }
                    Err(tokio::sync::broadcast::error::RecvError::Lagged(_)) => {
                        warn!("MQTT trigger lagged. Some messages may have been missed.");
                        continue;
                    }
                    Err(_) => {
                        break;
                    }
                }
            }
        });
        Ok(handle)
    }
}


================================================
FILE: apps/server/src/flow/nodes/rtp_stream_in.rs
================================================
use anyhow::{anyhow, Result};
use async_trait::async_trait;
use serde::Deserialize;
use serde_json::{json, Value};
use std::collections::HashMap;
use tokio::{sync::mpsc, task::JoinHandle};
use tracing::warn;
use webrtc::util::Marshal;

use super::{ExecutableNode, ExecutionResult};
use crate::{
    flow::engine::{ExecutionContext, TriggerCommand},
    state::StreamManager,
};

#[derive(Deserialize, Debug, Clone)]
pub struct RtpStreamInData {
    topic: String,
}

pub struct RtpStreamInNode {
    data: RtpStreamInData,
    stream_manager: StreamManager,
    source_node_ids: Vec<String>,
}

impl RtpStreamInNode {
    pub fn new(
        node_data: &Value,
        stream_manager: StreamManager,
        source_node_ids: Vec<String>,
    ) -> Result<Self> {
        let data: RtpStreamInData = serde_json::from_value(node_data.clone())?;
        Ok(Self {
            data,
            stream_manager,
            source_node_ids,
        })
    }
}

#[async_trait]
impl ExecutableNode for RtpStreamInNode {
    async fn execute(
        &self,
        _context: &mut ExecutionContext,
        inputs: HashMap<String, Value>,
    ) -> Result<ExecutionResult> {
        let mut outputs = HashMap::new();
        if let Some(payload) = inputs.get("payload") {
            outputs.insert("payload".to_string(), payload.clone());
        }
        if let Some(raw_packet) = inputs.get("raw_packet") {
            outputs.insert("raw_packet".to_string(), raw_packet.clone());
        }
        Ok(ExecutionResult {
            outputs,
            ..Default::default()
        })
    }

    fn is_trigger(&self) -> bool {
        true
    }

    fn start_trigger(
        &self,
        node_id: String,
        trigger_tx: mpsc::Sender<TriggerCommand>,
    ) -> Result<JoinHandle<()>> {
        let stream_info = self
            .stream_manager
            .get_by_topic(&self.data.topic)
            .ok_or_else(|| anyhow!("Stream with topic '{}' not found", self.data.topic))?;

        let mut packet_rx = stream_info.packet_tx.subscribe();
        let source_ids = self.source_node_ids.clone();

        let handle = tokio::spawn(async move {
            loop {
                match packet_rx.recv().await {
                    Ok(packet) => {
                        for source_id in &source_ids {
                            if *source_id != node_id {
                                let cmd = TriggerCommand {
                                    node_id: source_id.clone(),
                                    inputs: HashMap::new(),
                                };
                                if trigger_tx.send(cmd).await.is_err() {
                                    return;
                                }
                            }
                        }

                        let payload_b64 = base64::encode(&packet.payload);

                        let header_bytes = match packet.header.marshal() {
                            Ok(bytes) => bytes,
                            Err(_) => continue,
                        };
                        let mut raw_packet_bytes =
                            Vec::with_capacity(header_bytes.len() + packet.payload.len());
                        raw_packet_bytes.extend_from_slice(&header_bytes);
                        raw_packet_bytes.extend_from_slice(&packet.payload);
                        let raw_packet_b64 = base64::encode(&raw_packet_bytes);

                        let mut inputs = HashMap::new();
                        inputs.insert("payload".to_string(), json!(payload_b64));
                        inputs.insert("raw_packet".to_string(), json!(raw_packet_b64));

                        let cmd = TriggerCommand {
                            node_id: node_id.clone(),
                            inputs,
                        };

                        if trigger_tx.send(cmd).await.is_err() {
                            break;
                        }
                    }
                    Err(tokio::sync::broadcast::error::RecvError::Lagged(_)) => {
                        warn!("RTP trigger lagged. Some packets may have been missed.");
                        continue;
                    }
                    Err(_) => {
                        break;
                    }
                }
            }
        });
        Ok(handle)
    }
}


================================================
FILE: apps/server/src/flow/nodes/set_variable.rs
================================================
use anyhow::{anyhow, Result};
use async_trait::async_trait;
use serde::Deserialize;
use serde_json::{json, Value};
use std::collections::HashMap;
use tokio::sync::broadcast;
use tracing::log::error;

use super::{ExecutableNode, ExecutionContext, ExecutionResult};

#[derive(Deserialize, Debug, Clone)]
#[serde(rename_all = "camelCase")]
struct SetVariableNodeData {
    variable: String,
    variable_type: Option<String>,
}

pub struct SetVariableNode {
    data: SetVariableNodeData,
}

impl SetVariableNode {
    pub fn new(node_data: &Value) -> Result<Self> {
        let data: SetVariableNodeData = serde_json::from_value(node_data.clone())?;
        Ok(Self { data })
    }
}

#[async_trait]
impl ExecutableNode for SetVariableNode {
    async fn execute(
        &self,
        context: &mut ExecutionContext,
        _inputs: HashMap<String, Value>,
    ) -> Result<ExecutionResult> {
        let mut outputs = HashMap::new();

        let value = match self.data.variable_type.as_deref() {
            Some("number") => {
                if let Ok(num) = self.data.variable.parse::<i64>() {
                    json!(num)
                } else if let Ok(num) = self.data.variable.parse::<f64>() {
                    json!(num)
                } else {
                    let error_message =
                        format!("Failed to parse '{}' as a number.", self.data.variable);
                    let ws_message = json!({
                        "type": "log_message",
                        "payload": error_message.clone()
                    });
                    if let Ok(payload_str) = serde_json::to_string(&ws_message) {
                        if context.get_broadcast().send(payload_str).is_err() {
                            error!("Failed to send websocket log message.");
                        }
                    }

                    return Err(anyhow!(error_message));
                }
            }
            Some("boolean") => match self.data.variable.parse::<bool>() {
                Ok(b) => json!(b),
                Err(_) => {
                    let error_message =
                        format!("Failed to parse '{}' as a boolean.", self.data.variable);
                    let ws_message = json!({
                        "type": "log_message",
                        "payload": error_message.clone(),
                    });
                    if let Ok(payload_str) = serde_json::to_string(&ws_message) {
                        if context.get_broadcast().send(payload_str).is_err() {
                            error!("Failed to send websocket log message.");
                        }
                    }
                    return Err(anyhow!(error_message));
                }
            },
            Some("string") => {
                json!(self.data.variable)
            }
            Some("json") | _ => match serde_json::from_str::<Value>(&self.data.variable) {
                Ok(json_value) => json_value,
                Err(_) => {
                    let error_message =
                        format!("Failed to parse '{}' as JSON.", self.data.variable);
                    let ws_message = json!({
                        "type": "log_message",
                        "payload": error_message.clone(),
                    });
                    if let Ok(payload_str) = serde_json::to_string(&ws_message) {
                        if context.get_broadcast().send(payload_str).is_err() {
                            error!("Failed to send websocket log message.");
                        }
                    }
                    return Err(anyhow!(error_message));
                }
            },
        };

        outputs.insert("out".to_string(), value);

        Ok(ExecutionResult {
            outputs,
            ..Default::default()
        })
    }
}


================================================
FILE: apps/server/src/flow/nodes/set_variable_with_exec.rs
================================================
use anyhow::{anyhow, Result};
use async_trait::async_trait;
use serde::Deserialize;
use serde_json::{json, Value};
use std::collections::HashMap;
use tokio::sync::broadcast;
use tracing::log::error;

use super::{ExecutableNode, ExecutionContext, ExecutionResult};

#[derive(Deserialize, Debug, Clone)]
#[serde(rename_all = "camelCase")]
struct SetVariableNodeData {
    variable: String,
    variable_type: Option<String>,
}

pub struct SetVariableWithExecNode {
    data: SetVariableNodeData,
}

impl SetVariableWithExecNode {
    pub fn new(node_data: &Value) -> Result<Self> {
        let data: SetVariableNodeData = serde_json::from_value(node_data.clone())?;
        Ok(Self { data })
    }
}

#[async_trait]
impl ExecutableNode for SetVariableWithExecNode {
    async fn execute(
        &self,
        context: &mut ExecutionContext,
        inputs: HashMap<String, Value>,
    ) -> Result<ExecutionResult> {
        let Some(execution) = inputs.get("exec") else {
            if let Ok(payload_str) = serde_json::to_string(&json!({
                "type": "log_message",
                "payload": "'execution' input is missing for WEBSOCKET_SEND node"
            })) {
                if context.get_broadcast().send(payload_str).is_err() {
                    error!("Failed to send health check response.");
                }
            }

            return Err(anyhow!("'exec' input is missing for WEBSOCKET_SEND node"));
        };

        let mut outputs = HashMap::new();

        let value = match self.data.variable_type.as_deref() {
            Some("number") => {
                if let Ok(num) = self.data.variable.parse::<i64>() {
                    json!(num)
                } else if let Ok(num) = self.data.variable.parse::<f64>() {
                    json!(num)
                } else {
                    let error_message =
                        format!("Failed to parse '{}' as a number.", self.data.variable);
                    let ws_message = json!({
                        "type": "log_message",
                        "payload": error_message.clone()
                    });
                    if let Ok(payload_str) = serde_json::to_string(&ws_message) {
                        if context.get_broadcast().send(payload_str).is_err() {
                            error!("Failed to send websocket log message.");
                        }
                    }

                    return Err(anyhow!(error_message));
                }
            }
            Some("boolean") => match self.data.variable.parse::<bool>() {
                Ok(b) => json!(b),
                Err(_) => {
                    let error_message =
                        format!("Failed to parse '{}' as a boolean.", self.data.variable);
                    let ws_message = json!({
                        "type": "log_message",
                        "payload": error_message.clone(),
                    });
                    if let Ok(payload_str) = serde_json::to_string(&ws_message) {
                        if context.get_broadcast().send(payload_str).is_err() {
                            error!("Failed to send websocket log message.");
                        }
                    }
                    return Err(anyhow!(error_message));
                }
            },
            Some("string") => {
                json!(self.data.variable)
            }
            Some("json") | _ => match serde_json::from_str::<Value>(&self.data.variable) {
                Ok(json_value) => json_value,
                Err(_) => {
                    let error_message =
                        format!("Failed to parse '{}' as JSON.", self.data.variable);
                    let ws_message = json!({
                        "type": "log_message",
                        "payload": error_message.clone(),
                    });
                    if let Ok(payload_str) = serde_json::to_string(&ws_message) {
                        if context.get_broadcast().send(payload_str).is_err() {
                            error!("Failed to send websocket log message.");
                        }
                    }
                    return Err(anyhow!(error_message));
                }
            },
        };

        outputs.insert("out".to_string(), value);

        Ok(ExecutionResult {
            outputs,
            ..Default::default()
        })
    }
}


================================================
FILE: apps/server/src/flow/nodes/show_toast.rs
================================================
use crate::flow::engine::ExecutionContext;
use anyhow::{anyhow, Result};
use async_trait::async_trait;
use serde::Deserialize;
use serde_json::{json, Value};
use std::collections::HashMap;

use super::{ExecutableNode, ExecutionResult};

#[derive(Deserialize, Debug, Clone)]
#[serde(rename_all = "camelCase")]
struct ShowToastData {
    #[serde(default = "default_level")]
    level: String,
    title: Option<String>,
    message: String,
    #[serde(default = "default_duration_ms")]
    duration_ms: u64,
}

fn default_level() -> String {
    "info".to_string()
}

fn default_duration_ms() -> u64 {
    4000
}

pub struct ShowToastNode {
    data: ShowToastData,
    node_id: String,
}

impl ShowToastNode {
    pub fn new(node_data: &Value, node_id: String) -> Result<Self> {
        let data: ShowToastData = serde_json::from_value(node_data.clone())?;
        Ok(Self { data, node_id })
    }
}

#[async_trait]
impl ExecutableNode for ShowToastNode {
    async fn execute(
        &self,
        context: &mut ExecutionContext,
        inputs: HashMap<String, Value>,
    ) -> Result<ExecutionResult> {
        let Some(exec_val) = inputs.get("exec") else {
            return Err(anyhow!("'exec' input is missing for SHOW_TOAST node"));
        };

        let level_lc = self.data.level.to_lowercase();
        let level = match level_lc.as_str() {
            "info" | "success" | "warning" | "error" => level_lc,
            _ => "info".to_string(),
        };

        let event_data = json!({
            "level": level,
            "title": self.data.title,
            "message": self.data.message,
            "duration_ms": self.data.duration_ms,
        });
        context.emit_flow_ui_event(&self.node_id, "SHOW_TOAST", "toast", event_data);

        let mut outputs = HashMap::new();
        outputs.insert("out".to_string(), exec_val.clone());

        Ok(ExecutionResult {
            outputs,
            ..Default::default()
        })
    }
}


================================================
FILE: apps/server/src/flow/nodes/start.rs
================================================
use super::{ExecutableNode, ExecutionContext, ExecutionResult};
use anyhow::Result;
use async_trait::async_trait;
use serde_json::Value;
use std::collections::HashMap;
use tokio::sync::broadcast;

pub struct StartNode;

#[async_trait]
impl ExecutableNode for StartNode {
    async fn execute(
        &self,
        _context: &mut ExecutionContext,
        _inputs: HashMap<String, Value>,
    ) -> Result<ExecutionResult> {
        let mut outputs = HashMap::new();
        outputs.insert("out".to_string(), Value::Null);
        Ok(ExecutionResult {
            outputs,
            ..Default::default()
        })
    }
}


================================================
FILE: apps/server/src/flow/nodes/type_converter.rs
================================================
use super::{ExecutableNode, ExecutionResult};
use crate::flow::engine::ExecutionContext;
use anyhow::{anyhow, Result};
use async_trait::async_trait;
use serde::Deserialize;
use serde_json::{Number, Value};
use std::collections::HashMap;
use tokio::sync::broadcast;

#[derive(Deserialize, Debug, Clone)]
#[serde(rename_all = "camelCase")]
struct TypeConverterNodeData {
    target_type: String,
}

pub struct TypeConverterNode {
    data: TypeConverterNodeData,
}

impl TypeConverterNode {
    pub fn new(node_data: &Value) -> Result<Self> {
        let data: TypeConverterNodeData = serde_json::from_value(node_data.clone())?;
        Ok(Self { data })
    }
}

#[async_trait]
impl ExecutableNode for TypeConverterNode {
    async fn execute(
        &self,
        _context: &mut ExecutionContext,
        inputs: HashMap<String, Value>,
    ) -> Result<ExecutionResult> {
        let input_value = inputs
            .get("in")
            .ok_or_else(|| anyhow!("'in' input is missing for TypeConverterNode"))?;

        let converted_value = match self.data.target_type.as_str() {
            "string" => {
                let s = match input_value {
                    Value::String(s) => s.clone(),
                    Value::Number(n) => n.to_string(),
                    Value::Bool(b) => b.to_string(),
                    Value::Null => "null".to_string(),
                    _ => serde_json::to_string(input_value)?,
                };
                Value::String(s.replace('\"', ""))
            }
            "number" => {
                let num = match input_value {
                    Value::Number(n) => n.as_f64().unwrap_or(0.0),
                    Value::String(s) => s
                        .parse::<f64>()
                        .map_err(|_| anyhow!("Failed to parse string '{}' to number", s))?,
                    Value::Bool(b) => {
                        if *b {
                            1.0
                        } else {
                            0.0
                        }
                    }
                    _ => return Err(anyhow!("Cannot convert type to a number")),
                };
                Value::Number(
                    Number::from_f64(num)
                        .ok_or_else(|| anyhow!("Invalid f64 value for conversion"))?,
                )
            }
            "boolean" => {
                let b = match input_value {
                    Value::Bool(b) => *b,
                    Value::String(s) => s.to_lowercase() == "true",
                    Value::Number(n) => n.as_f64().unwrap_or(0.0) != 0.0,
                    _ => false,
                };
                Value::Bool(b)
            }
            _ => {
                return Err(anyhow!(
                    "Unsupported target type: {}",
                    self.data.target_type
                ))
            }
        };

        let mut outputs = HashMap::new();
        outputs.insert("out".to_string(), converted_value);
        Ok(ExecutionResult {
            outputs,
            ..Default::default()
        })
    }
}


================================================
FILE: apps/server/src/flow/nodes/websocket_on.rs
================================================
use anyhow::{anyhow, Result};
use async_trait::async_trait;
use futures_util::stream::StreamExt;
use serde::Deserialize;
use serde_json::Value;
use std::collections::HashMap;
use tokio::{
    net::TcpStream,
    sync::mpsc,
    task::JoinHandle,
    time::{sleep, Duration},
};
use tokio_tungstenite::{
    connect_async, tungstenite::protocol::Message, MaybeTlsStream, WebSocketStream,
};
use tracing::{error, info, warn};
use url::Url;

use super::ExecutableNode;
use crate::{
    db::models::SystemConfiguration,
    flow::{
        engine::{ExecutionContext, TriggerCommand},
        types::ExecutionResult,
    },
    utils::system_configs::replace_config_placeholders,
};

#[derive(Deserialize, Debug, Clone)]
#[serde(rename_all = "camelCase")]
pub struct WebSocketOnNodeData {
    pub url: String,
}

pub struct WebSocketOnNode {
    data: WebSocketOnNodeData,
    system_configs: Vec<SystemConfiguration>,
}

impl WebSocketOnNode {
    pub fn new(node_data: &Value, system_configs: Vec<SystemConfiguration>) -> Result<Self> {
        let data: WebSocketOnNodeData = serde_json::from_value(node_data.clone())?;
        Ok(Self {
            data,
            system_configs,
        })
    }
}

async fn handle_connection(
    mut ws_stream: WebSocketStream<MaybeTlsStream<TcpStream>>,
    trigger_tx: &mpsc::Sender<TriggerCommand>,
    node_id: &str,
) {
    while let Some(msg) = ws_stream.next().await {
        println!("rsv");

        match msg {
            Ok(Message::Text(text)) => {
                let payload_value = match serde_json::from_str(&text) {
                    Ok(p) => p,
                    Err(_) => Value::String(text.to_string()),
                };
                let mut inputs = HashMap::new();
                inputs.insert("payload".to_string(), payload_value);
                let cmd = TriggerCommand {
                    node_id: node_id.to_string(),
                    inputs,
                };
                if trigger_tx.send(cmd).await.is_err() {
                    error!("Trigger channel closed. Stopping WebSocket listener.");
                    break;
                }
            }
            Ok(Message::Binary(_)) => {
                warn!("Received binary message, which is not currently supported. Ignoring.");
            }
            Ok(Message::Ping(_)) => {}
            Ok(Message::Pong(_)) => {}
            Ok(Message::Close(_)) => {
                info!("WebSocket connection closed by peer.");
                break;
            }
            Ok(Message::Frame(_)) => {
                warn!("Received raw frame, which is not currently supported. Ignoring.");
            }
            Err(e) => {
                error!("Error reading from WebSocket: {}", e);
                break;
            }
        }
    }
}

#[async_trait]
impl ExecutableNode for WebSocketOnNode {
    async fn execute(
        &self,
        _context: &mut ExecutionContext,
        inputs: HashMap<String, Value>,
    ) -> Result<ExecutionResult> {
        let mut outputs = HashMap::new();
        if let Some(payload) = inputs.get("payload") {
            outputs.insert("payload".to_string(), payload.clone());
        }
        Ok(ExecutionResult {
            outputs,
            ..Default::default()
        })
    }

    fn is_trigger(&self) -> bool {
        true
    }

    fn start_trigger(
        &self,
        node_id: String,
        trigger_tx: mpsc::Sender<TriggerCommand>,
    ) -> Result<JoinHandle<()>> {
        let url_str: String = self.data.url.clone();
        let result_url: String = replace_config_placeholders(&url_str, &self.system_configs);

        let handle = tokio::spawn(async move {
            loop {
                if let Err(e) = Url::parse(&result_url) {
                    error!(
                        "Invalid WebSocket URL '{}': {}. Aborting trigger.",
                        result_url, e
                    );
                    break;
                }

                info!("Connecting to WebSocket at {}", result_url);
                match connect_async(&result_url).await {
                    Ok((ws_stream, _)) => {
                        info!("Successfully connected to WebSocket: {}", result_url);
                        handle_connection(ws_stream, &trigger_tx, &node_id).await;
                        warn!("WebSocket connection lost. Reconnecting in 5 seconds...");
                    }
                    Err(e) => {
                        error!(
                            "Failed to connect to WebSocket '{}': {}. Retrying in 5 seconds...",
                            result_url, e
                        );
                    }
                }
                sleep(Duration::from_secs(5)).await;
            }
        });

        Ok(handle)
    }
}


================================================
FILE: apps/server/src/flow/nodes/websocket_send.rs
================================================
use anyhow::{anyhow, Result};
use async_trait::async_trait;
use futures_util::{SinkExt, StreamExt};
use serde::Deserialize;
use serde_json::{json, to_string, Value};
use std::collections::HashMap;
use tokio_tungstenite::{connect_async, tungstenite::protocol::Message};
use tracing::{error, info};

use super::ExecutableNode;
use crate::{
    db::models::SystemConfiguration,
    flow::{engine::ExecutionContext, types::ExecutionResult},
    utils::system_configs::replace_config_placeholders,
};

#[derive(Deserialize, Debug, Clone)]
#[serde(rename_all = "camelCase")]
struct WebSocketSendNodeData {
    url: String,
}

pub struct WebSocketSendNode {
    data: WebSocketSendNodeData,
    system_configs: Vec<SystemConfiguration>,
}

impl WebSocketSendNode {
    pub fn new(node_data: &Value, system_configs: Vec<SystemConfiguration>) -> Result<Self> {
        let data: WebSocketSendNodeData = serde_json::from_value(node_data.clone())?;
        Ok(Self {
            data,
            system_configs,
        })
    }
}

#[async_trait]
impl ExecutableNode for WebSocketSendNode {
    async fn execute(
        &self,
        context: &mut ExecutionContext,
        inputs: HashMap<String, Value>,
    ) -> Result<ExecutionResult> {
        let url_str = &self.data.url;
        let result_url = replace_config_placeholders(url_str, &self.system_configs);

        let Some(payload) = inputs.get("payload") else {
            if let Ok(payload_str) = serde_json::to_string(&json!({
                "type": "log_message",
                "payload": "'payload' input is missing for WEBSOCKET_SEND node"
            })) {
                if context.get_broadcast().send(payload_str).is_err() {
                    error!("Failed to send health check response.");
                }
            }

            return Err(anyhow!(
                "'payload' input is missing for WEBSOCKET_SEND node"
            ));
        };

        let payload_str = match payload {
            Value::String(s) => s.clone(),
            _ => to_string(payload)?,
        };

        info!(
            "Connecting to WebSocket at {} to send message",
            result_url.clone()
        );
        let (ws_stream, _) = connect_async(result_url)
            .await
            .map_err(|e| anyhow!("Failed to connect to WebSocket: {}", e))?;

        let (mut write, _) = ws_stream.split();

        info!("Sending message to WebSocket");
        write
            .send(Message::Text(payload_str.into()))
            .await
            .map_err(|e| anyhow!("Failed to send message via WebSocket: {}", e))?;

        info!("Message sent, closing WebSocket connection.");
        write
            .close()
            .await
            .map_err(|e| anyhow!("Failed to close WebSocket connection: {}", e))?;

        Ok(ExecutionResult::default())
    }
}


================================================
FILE: apps/server/src/flow/nodes/yolo_detect.rs
================================================
use anyhow::{anyhow, Result};
use async_trait::async_trait;
use image::{imageops, RgbImage};
use serde::Deserialize;
use serde_json::{json, Value};
use std::collections::HashMap;
use std::fs::File;
use std::io::Read;
use tract_ndarray::s;
use tract_onnx::{prelude::*, tract_core::downcast_rs::Downcast};
use uuid::Uuid;

use super::{ExecutableNode, ExecutionResult};
use crate::flow::{engine::ExecutionContext, BinaryStore};

type Model = TypedRunnableModel<Graph<TypedFact, Box<dyn TypedOp>>>;

#[derive(Deserialize, Debug, Clone)]
struct YoloDetectData {
    model_path: String,
    labels_path: String,
    confidence_threshold: f32,
    nms_threshold: f32,
    input_size: u32,
}

#[derive(Debug, Clone)]
struct BBox {
    x1: f32,
    y1: f32,
    x2: f32,
    y2: f32,
    confidence: f32,
    class_id: usize,
}

pub struct YoloDetectNode {
    data: YoloDetectData,
    model: Model,
    labels: Vec<String>,
    binary_store: BinaryStore,
}

fn nms(boxes: &mut Vec<BBox>, threshold: f32) {
    if boxes.is_empty() {
        return;
    }
    boxes.sort_by(|a, b| b.confidence.partial_cmp(&a.confidence).unwrap());
    let mut i = 0;
    while i < boxes.len() {
        let mut j = i + 1;
        while j < boxes.len() {
            let area_i = (boxes[i].x2 - boxes[i].x1) * (boxes[i].y2 - boxes[i].y1);
            let area_j = (boxes[j].x2 - boxes[j].x1) * (boxes[j].y2 - boxes[j].y1);
            let inter_x1 = boxes[i].x1.max(boxes[j].x1);
            let inter_y1 = boxes[i].y1.max(boxes[j].y1);
            let inter_x2 = boxes[i].x2.min(boxes[j].x2);
            let inter_y2 = boxes[i].y2.min(boxes[j].y2);
            let inter_w = (inter_x2 - inter_x1).max(0.0);
            let inter_h = (inter_y2 - inter_y1).max(0.0);
            let intersection = inter_w * inter_h;
            let union = area_i + area_j - intersection;
            let iou = intersection / union;
            if iou > threshold {
                boxes.remove(j);
            } else {
                j += 1;
            }
        }
        i += 1;
    }
}

impl YoloDetectNode {
    pub fn new(node_data: &Value, binary_store: BinaryStore) -> Result<Self> {
        let data: YoloDetectData = serde_json::from_value(node_data.clone())?;
        let model_input_size = data.input_size as i64;
        let model = tract_onnx::onnx()
            .model_for_path(&data.model_path)?
            .with_input_fact(
                0,
                InferenceFact::dt_shape(
                    f32::datum_type(),
                    tvec!(1, 3, model_input_size, model_input_size),
                ),
            )?
            .into_optimized()?
            .into_runnable()?;
        let mut labels_file = File::open(&data.labels_path)?;
        let mut labels_content = String::new();
        labels_file.read_to_string(&mut labels_content)?;
        let labels: Vec<String> = labels_content.lines().map(String::from).collect();
        Ok(Self {
            data,
            model,
            labels,
            binary_store,
        })
    }
}

#[async_trait]
impl ExecutableNode for YoloDetectNode {
    async fn execute(
        &self,
        _: &mut ExecutionContext,
        inputs: HashMap<String, Value>,
    ) -> Result<ExecutionResult> {
        let frame_value = inputs
            .get("frame")
            .ok_or_else(|| anyhow!("'frame' input missing"))?;
        if frame_value.get("type").and_then(|v| v.as_str()) != Some("binary_pointer") {
            return Err(anyhow!("Expected 'binary_pointer' but got something else"));
        }

        let frame_id_str = frame_value
            .get("id")
            .and_then(|v| v.as_str())
            .ok_or_else(|| anyhow!("'id' missing in binary_pointer"))?;
        let frame_id = Uuid::parse_str(frame_id_str)?;
        let width = frame_value
            .get("width")
            .and_then(|v| v.as_u64())
            .ok_or_else(|| anyhow!("'width' missing"))? as u32;
        let height = frame_value
            .get("height")
            .and_then(|v| v.as_u64())
            .ok_or_else(|| anyhow!("'height' missing"))? as u32;
        let rgb_data = self
            .binary_store
            .remove(&frame_id)
            .ok_or_else(|| anyhow!("Frame with id '{}' not found or already consumed", frame_id))?;

        let img = RgbImage::from_raw(width, height, rgb_data)
            .ok_or_else(|| anyhow!("Failed to create RgbImage from raw data"))?;

        let input_size = self.data.input_size;
        let resized_img =
            imageops::resize(&img, input_size, input_size, imageops::FilterType::Triangle);
        let tensor: Tensor = tract_ndarray::Array4::from_shape_fn(
            (1, 3, input_size as usize, input_size as usize),
            |(_, c, y, x)| resized_img.get_pixel(x as u32, y as u32)[c] as f32 / 255.0,
        )
        .into();

        let result = self.model.run(tvec!(tensor.into()))?;
        let output = result[0].to_array_view::<f32>()?;
        let mut bboxes = Vec::new();
        let outputs = output.slice(s![0, .., ..]).permuted_axes([1, 0]);

        for row in outputs.rows() {
            let (class_id, confidence) = row.slice(s![4..]).iter().enumerate().fold(
                (0, 0.0),
                |(idx_max, val_max), (idx, &val)| {
                    if val > val_max {
                        (idx, val)
                    } else {
                        (idx_max, val_max)
                    }
                },
            );
            if confidence < self.data.confidence_threshold {
                continue;
            }
            let xc = row[0];
            let yc = row[1];
            let w = row[2];
            let h = row[3];
            let x1 = (xc - w / 2.0) / input_size as f32 * width as f32;
            let y1 = (yc - h / 2.0) / input_size as f32 * height as f32;
            let x2 = (xc + w / 2.0) / input_size as f32 * width as f32;
            let y2 = (yc + h / 2.0) / input_size as f32 * height as f32;
            bboxes.push(BBox {
                x1,
                y1,
                x2,
                y2,
                confidence,
                class_id,
            });
        }
        nms(&mut bboxes, self.data.nms_threshold);
        let detections: Vec<Value> = bboxes.into_iter().map(|b| { json!({ "class": self.labels.get(b.class_id).map_or("unknown", |s| s.as_str()), "confidence": b.confidence, "box": { "x1": b.x1, "y1": b.y1, "x2": b.x2, "y2": b.y2 } }) }).collect();

        let mut outputs_map = HashMap::new();
        outputs_map.insert("detections".to_string(), json!(detections));
        Ok(ExecutionResult {
            outputs: outputs_map,
            ..Default::default()
        })
    }
}


================================================
FILE: apps/server/src/flow/types.rs
================================================
use serde::{Deserialize, Serialize};
use serde_json::Value;
use std::collections::HashMap;

/// Identifies the browser tab / client session that started a flow run (WebSocket UX targeting).
#[derive(Debug, Clone)]
pub struct FlowRunContext {
    pub session_id: String,
}

#[derive(Debug, Clone, Serialize, Deserialize)]
pub struct Trigger {
    pub node_id: String,
    pub inputs: HashMap<String, Value>,
}

#[derive(Debug, Clone, Serialize, Deserialize, Default)]
pub struct ExecutionResult {
    pub outputs: HashMap<String, Value>,
    #[serde(default)]
    pub triggers: Vec<Trigger>,
}

#[derive(Debug, Clone, Deserialize)]
pub struct Graph {
    pub nodes: Vec<Node>,
    pub edges: Vec<Edge>,
}

#[derive(Debug, Clone, Deserialize)]
#[serde(rename_all = "camelCase")]
pub struct Node {
    pub id: String,
    pub node_type: String,
    #[serde(default)]
    pub data: Value,
    #[serde(default)]
    pub connectors: Vec<Connector>,
}

#[derive(Debug, Clone, Deserialize)]
pub struct Edge {
    pub source: String,
    pub target: String,
}

#[derive(Debug, Clone, Serialize, Deserialize, PartialEq)]
pub enum ConnectorKind {
    #[serde(rename = "in")]
    In,
    #[serde(rename = "out")]
    Out,
}
#[derive(Debug, Clone, Deserialize, Serialize)]
pub struct Connector {
    pub id: String,
    pub name: String,
    #[serde(rename = "type")]
    pub kind: ConnectorKind,
}


================================================
FILE: apps/server/src/handler/auth.rs
================================================
use anyhow::anyhow;
use async_trait::async_trait;
use axum::{
    extract::{FromRef, FromRequestParts, State},
    http::{request::Parts, StatusCode},
    response::{IntoResponse, Response},
    Json, RequestPartsExt,
};
use axum_extra::{
    headers::{authorization::Bearer, Authorization},
    TypedHeader,
};
use jsonwebtoken::{decode, DecodingKey, Validation};
use serde::{Deserialize, Serialize};
use serde_json::json;
use std::sync::Arc;
use tracing::info;

use crate::{
    db::{
        self,
        models::{Device, User},
        repository::get_user_by_name,
    },
    error::AppError,
    utils::hash::verify_password,
    AppState,
};

#[derive(Debug, Serialize)]
pub struct ErrorResponse {
    pub status: &'static str,
    pub message: String,
}

#[derive(Deserialize)]
pub struct AuthPayload {
    id: String,
    password: String,
}

#[derive(Debug)]
pub enum AuthError {
    WrongCredentials,
    MissingCredentials,
    TokenCreation,
    InvalidToken,
    UserNotFound,
}

impl IntoResponse for AuthError {
    fn into_response(self) -> Response {
        let (status, error_message) = match self {
            AuthError::WrongCredentials => (StatusCode::UNAUTHORIZED, "Wrong credentials"),
            AuthError::MissingCredentials => (StatusCode::BAD_REQUEST, "Missing credentials"),
            AuthError::TokenCreation => (StatusCode::INTERNAL_SERVER_ERROR, "Token creation error"),
            AuthError::InvalidToken => (StatusCode::UNAUTHORIZED, "Invalid token"),
            AuthError::UserNotFound => (StatusCode::UNAUTHORIZED, "User not found"),
        };
        let body = Json(json!({
            "status": "error",
            "message": error_message,
        }));
        (status, body).into_response()
    }
}

#[derive(Debug, Serialize, Deserialize)]
pub struct Claims {
    pub sub: String,
    pub exp: usize,
}

pub struct JwtAuth(pub Claims);

#[async_trait]
impl<S> FromRequestParts<S> for JwtAuth
where
    S: Send + Sync,
    Arc<AppState>: FromRef<S>,
{
    type Rejection = AuthError;

    async fn from_request_parts(parts: &mut Parts, state: &S) -> Result<Self, Self::Rejection> {
        let state = Arc::<AppState>::from_ref(state);

        let token = if let Some(token) = get_token_from_header(parts).await {
            token
        } else {
            get_token_from_query(parts)
                .await
                .ok_or(AuthError::MissingCredentials)?
        };

        let decoding_key = DecodingKey::from_secret(state.jwt_secret.as_ref());
        let validation = Validation::default();

        let decoded = decode::<Claims>(&token, &decoding_key, &validation)
            .map_err(|_| AuthError::InvalidToken)?;

        Ok(JwtAuth(decoded.claims))
    }
}

pub struct AuthUser(pub User);

#[async_trait]
impl<S> FromRequestParts<S> for AuthUser
where
    S: Send + Sync,
    Arc<AppState>: FromRef<S>,
{
    type Rejection = AuthError;

    async fn from_request_parts(parts: &mut Parts, state: &S) -> Result<Self, Self::Rejection> {
        let claims = JwtAuth::from_request_parts(parts, state).await?.0;

        let state = Arc::<AppState>::from_ref(state);

        let user =
            get_user_by_name(&state.pool, &claims.sub).map_err(|_| AuthError::UserNotFound)?;

        Ok(AuthUser(user))
    }
}

async fn get_token_from_header(parts: &mut Parts) -> Option<String> {
    parts
        .extract::<TypedHeader<Authorization<Bearer>>>()
        .await
        .map(|TypedHeader(Authorization(bearer))| bearer.token().to_string())
        .ok()
}

async fn get_token_from_query(parts: &mut Parts) -> Option<String> {
    #[derive(Deserialize)]
    struct QueryParams {
        token: String,
    }

    parts
        .extract::<axum::extract::Query<QueryParams>>()
        .await
        .map(|query| query.0.token)
        .ok()
}

pub async fn auth_with_password(
    State(state): State<Arc<AppState>>,
    Json(payload): Json<AuthPayload>,
) -> Result<Json<serde_json::Value>, AuthError> {
    match get_user_by_name(&state.pool, &payload.id) {
        Ok(user) => {
            let login_attempt_password = &payload.password.clone();
            let stored_hash = &user.password_hash;
            info!("auth_with_password");

            match verify_password(login_attempt_password, stored_hash) {
                Ok(is_valid) => {
                    if is_valid {
                        let claims = Claims {
                            sub: payload.id,
                            exp: (chrono::Utc::now() + chrono::Duration::hours(1)).timestamp()
                                as usize,
                        };

                        let token = jsonwebtoken::encode(
                            &jsonwebtoken::Header::default(),
                            &claims,
                            &jsonwebtoken::EncodingKey::from_secret(state.jwt_secret.as_ref()),
                        )
                        .map_err(|_| AuthError::TokenCreation)?;

                        info!("Auth Success {}", claims.sub);

                        Ok(Json(json!({ "token": token })))
                    } else {
                        Err(AuthError::WrongCredentials)
                    }
                }
                Err(_) => Err(AuthError::WrongCredentials),
            }
        }
        Err(_) => Err(AuthError::UserNotFound),
    }
}

pub struct DeviceTokenAuth {
    pub device: Device,
}

#[async_trait]
impl FromRequestParts<Arc<AppState>> for DeviceTokenAuth {
    type Rejection = AppError;

    async fn from_request_parts(
        parts: &mut Parts,
        state: &Arc<AppState>,
    ) -> Result<Self, Self::Rejection> {
        let TypedHeader(Authorization(bearer)) =
            TypedHeader::<Authorization<Bearer>>::from_request_parts(parts, state)
                .await
                .map_err(|_| anyhow!("Missing or invalid authorization header"))?;

        let device_id_header = parts
            .headers
            .get("X-Device-Id")
            .and_then(|value| value.to_str().ok())
            .ok_or_else(|| anyhow!("Missing X-Device-Id header"))?;

        let pool = state.pool.clone();
        let device_id_clone = device_id_header.to_string();
        let token_clone = bearer.token().to_string();

        let device = tokio::task::spawn_blocking(move || {
            let device = db::repository::get_device_by_device_id(&pool, &device_id_clone)?;

            let token_info = db::repository::get_token_info_for_device(&pool, device.id)?
                .ok_or_else(|| anyhow!("No active token for this device"))?;

            let token_valid = verify_password(&token_clone, &token_info.token_hash)?;

            if token_valid {
                Ok(device)
            } else {
                Err(anyhow!("Invalid token"))
            }
        })
        .await
        .map_err(|e| anyhow!("Task execution error: {}", e))??;

        Ok(DeviceTokenAuth { device })
    }
}


================================================
FILE: apps/server/src/handler/configurations.rs
================================================
use crate::{
    db::{
        self,
        models::{NewSystemConfiguration, SystemConfiguration},
    },
    error::AppError,
    handler::auth::AuthUser,
    state::AppState,
};
use axum::{
    extract::{Path, State},
    Json,
};
use serde::Deserialize;
use serde_json::{json, Value};
use std::sync::Arc;

#[derive(Deserialize)]
pub struct SystemConfigPayload {
    pub key: String,
    pub value: String,
    pub enabled: Option<i32>,
    pub description: Option<String>,
}

pub async fn create_config(
    State(state): State<Arc<AppState>>,
    AuthUser(_user): AuthUser,
    Json(payload): Json<SystemConfigPayload>,
) -> Result<Json<SystemConfiguration>, AppError> {
    let new_config = NewSystemConfiguration {
        key: &payload.key,
        value: &payload.value,
        enabled: payload.enabled,
        description: payload.description.as_deref(),
    };
    let config = db::repository::create_system_config(&state.pool, new_config)?;
    Ok(Json(config))
}

pub async fn get_configs(
    State(state): State<Arc<AppState>>,
    AuthUser(_user): AuthUser,
) -> Result<Json<Vec<SystemConfiguration>>, AppError> {
    let configs = db::repository::get_all_system_configs(&state.pool)?;
    Ok(Json(configs))
}

pub async fn update_config(
    State(state): State<Arc<AppState>>,
    Path(id): Path<i32>,
    AuthUser(_user): AuthUser,
    Json(payload): Json<SystemConfigPayload>,
) -> Result<Json<SystemConfiguration>, AppError> {
    let updated_config = NewSystemConfiguration {
        key: &payload.key,
        value: &payload.value,
        enabled: payload.enabled,
        description: payload.description.as_deref(),
    };
    let config = db::repository::update_system_config(&state.pool, id, &updated_config)?;
    Ok(Json(config))
}

pub async fn delete_config(
    State(state): State<Arc<AppState>>,
    AuthUser(_user): AuthUser,
    Path(id): Path<i32>,
) -> Result<Json<Value>, AppError> {
    db::repository::delete_system_config(&state.pool, id)?;
    Ok(Json(
        json!({ "status": "success", "message": "System configuration deleted" }),
    ))
}


================================================
FILE: apps/server/src/handler/custom_nodes.rs
================================================
use crate::{
    db::{
        self,
        models::{CustomNodeResult, NewCustomNode, UpdateCustomNode},
    },
    error::AppError,
    state::AppState,
};
use axum::{
    extract::{Path, State},
    http::StatusCode,
    Json,
};
use serde::Deserialize;
use serde_json::Value;
use std::sync::Arc;

#[derive(Deserialize)]
pub struct CreateCustomNodePayload {
    pub node_type: String,
    pub data: Option<Value>,
}

pub async fn create_custom_node_handler(
    State(state): State<Arc<AppState>>,
    Json(payload): Json<CreateCustomNodePayload>,
) -> Result<(StatusCode, Json<db::models::CustomNode>), AppError> {
    let data_str = payload
        .data
        .map(|v| {
            if v.is_null() || v.as_object().map_or(false, |m| m.is_empty()) {
                String::new()
            } else {
                serde_json::to_string(&v).unwrap_or_default()
            }
        })
        .unwrap_or_default();

    let new_node = NewCustomNode {
        node_type: &payload.node_type,
        data: &data_str,
    };

    let node = db::repository::create_custom_node(&state.pool, &new_node)?;
    Ok((StatusCode::CREATED, Json(node)))
}

pub async fn get_all_custom_nodes_handler(
    State(state): State<Arc<AppState>>,
) -> Result<Json<Vec<CustomNodeResult>>, AppError> {
    let nodes = db::repository::get_all_custom_nodes(&state.pool)?;
    Ok(Json(nodes))
}

pub async fn get_custom_node_handler(
    State(state): State<Arc<AppState>>,
    Path(node_type): Path<String>,
) -> Result<Json<db::models::CustomNode>, AppError> {
    let node = db::repository::get_custom_node(&state.pool, &node_type)?;
    Ok(Json(node))
}

#[derive(Deserialize)]
pub struct UpdateCustomNodePayload {
    pub data: Option<Value>,
}

pub async fn update_custom_node_handler(
    State(state): State<Arc<AppState>>,
    Path(node_type): Path<String>,
    Json(payload): Json<UpdateCustomNodePayload>,
) -> Result<Json<CustomNodeResult>, AppError> {
    let data_str = payload
        .data
        .map(|v| {
            if v.is_null() || v.as_object().map_or(false, |m| m.is_empty()) {
                String::new()
            } else {
                v.to_string()
            }
        })
        .unwrap_or_default();

    let update_data = UpdateCustomNode {
        data: Some(data_str),
    };

    let updated_node = db::repository::update_custom_node(&state.pool, &node_type, &update_data)?;
    Ok(Json(updated_node))
}

pub async fn delete_custom_node_handler(
    State(state): State<Arc<AppState>>,
    Path(node_type): Path<String>,
) -> Result<StatusCode, AppError> {
    db::repository::delete_custom_node(&state.pool, &node_type)?;
    Ok(StatusCode::NO_CONTENT)
}


================================================
FILE: apps/server/src/handler/dashboards.rs
================================================
use std::sync::Arc;

use axum::{
    extract::{Path, State},
    http::StatusCode,
    response::IntoResponse,
    Json,
};
use serde::{Deserialize, Serialize};
use serde_json::Value;

use crate::{db, error::AppError, state::AppState};

#[derive(Serialize)]
pub struct DynamicDashboardResponse {
    pub id: String,
    pub name: String,
    pub layout: Value,
    pub created_at: String,
    pub updated_at: String,
}

impl From<db::models::DynamicDashboard> for DynamicDashboardResponse {
    fn from(model: db::models::DynamicDashboard) -> Self {
        let layout_value: Value =
            serde_json::from_str(&model.layout).unwrap_or_else(|_| Value::Null);

        DynamicDashboardResponse {
            id: model.id,
            name: model.name,
            layout: layout_value,
            created_at: model.created_at.to_string(),
            updated_at: model.updated_at.to_string(),
        }
    }
}

#[derive(Deserialize)]
pub struct CreateDashboardPayload {
    pub name: String,
    pub layout: Value,
}

#[derive(Deserialize)]
pub struct UpdateDashboardPayload {
    pub name: Option<String>,
    pub layout: Option<Value>,
}

pub async fn list_dashboards(
    State(state): State<Arc<AppState>>,
) -> Result<Json<Vec<DynamicDashboardResponse>>, AppError> {
    let dashboards = db::repository::dashboards::list_dynamic_dashboards(&state.pool)?
        .into_iter()
        .map(DynamicDashboardResponse::from)
        .collect();

    Ok(Json(dashboards))
}

pub async fn create_dashboard(
    State(state): State<Arc<AppState>>,
    Json(payload): Json<CreateDashboardPayload>,
) -> Result<(StatusCode, Json<DynamicDashboardResponse>), AppError> {
    let dashboard = db::repository::dashboards::create_dynamic_dashboard(
        &state.pool,
        &payload.name,
        &payload.layout,
    )?;

    Ok((StatusCode::CREATED, Json(dashboard.into())))
}

pub async fn get_dashboard(
    State(state): State<Arc<AppState>>,
    Path(id): Path<String>,
) -> Result<impl IntoResponse, AppError> {
    let dashboard = db::repository::dashboards::get_dynamic_dashboard(&state.pool, &id)?;

    match dashboard {
        Some(d) => Ok(Json(DynamicDashboardResponse::from(d)).into_response()),
        None => Ok((StatusCode::NOT_FOUND, "Dashboard not found").into_response()),
    }
}

pub async fn update_dashboard(
    State(state): State<Arc<AppState>>,
    Path(id): Path<String>,
    Json(payload): Json<UpdateDashboardPayload>,
) -> Result<impl IntoResponse, AppError> {
    let dashboard = db::repository::dashboards::update_dynamic_dashboard(
        &state.pool,
        &id,
        payload.name.as_deref(),
        payload.layout.as_ref(),
    )?;

    match dashboard {
        Some(d) => Ok(Json(DynamicDashboardResponse::from(d)).into_response()),
        None => Ok((StatusCode::NOT_FOUND, "Dashboard not found").into_response()),
    }
}

pub async fn delete_dashboard(
    State(state): State<Arc<AppState>>,
    Path(id): Path<String>,
) -> Result<impl IntoResponse, AppError> {
    let deleted = db::repository::dashboards::delete_dynamic_dashboard(&state.pool, &id)?;

    if deleted == 0 {
        return Ok((StatusCode::NOT_FOUND, "Dashboard not found").into_response());
    }

    Ok(StatusCode::NO_CONTENT.into_response())
}


================================================
FILE: apps/server/src/handler/device_tokens.rs
================================================
use crate::{db, error::AppError, handler::auth::AuthUser, utils::hash, state::AppState};
use axum::{
    extract::{Path, State},
    Json,
};
use base64::{engine::general_purpose, Engine as _};
use rand::RngCore;
use serde_json::{json, Value};
use std::sync::Arc;

fn generate_api_key() -> String {
    let mut key = [0u8; 32];
    rand::rng().fill_bytes(&mut key);
    general_purpose::URL_SAFE_NO_PAD.encode(key)
}

pub async fn issue_token(
    State(state): State<Arc<AppState>>,
    AuthUser(_user): AuthUser,
    Path(id): Path<i32>,
) -> Result<Json<Value>, AppError> {
    let raw_token = generate_api_key();

    let token_hash = hash::hash_password(&raw_token)?;

    db::repository::create_or_replace_device_token(&state.pool, id, &token_hash)?;

    Ok(Json(json!({
        "message": "New device token generated successfully. Store this token securely, it will not be shown again.",
        "token": raw_token
    })))
}

pub async fn get_token_info(
    State(state): State<Arc<AppState>>,
    AuthUser(_user): AuthUser,
    Path(id): Path<i32>,
) -> Result<Json<Value>, AppError> {
    let token_info = db::repository::get_token_info_for_device(&state.pool, id)?;

    match token_info {
        Some(info) => Ok(Json(serde_json::to_value(info)?)),
        None => Ok(Json(
            json!({ "message": "No token found for this device." }),
        )),
    }
}

pub async fn revoke_token(
    State(state): State<Arc<AppState>>,
    AuthUser(_user): AuthUser,
    Path(id): Path<i32>,
) -> Result<Json<Value>, AppError> {
    db::repository::delete_token_for_device(&state.pool, id)?;
    Ok(Json(
        json!({ "status": "success", "message": "Device token has been revoked." }),
    ))
}


================================================
FILE: apps/server/src/handler/devices.rs
================================================
use crate::{
    db::{
        self,
        models::{Device, Entity, EntityWithStateAndConfig, NewDevice},
    },
    error::AppError,
    handler::auth::AuthUser,
    state::AppState,
};
use axum::{
    extract::{Path, State},
    Json,
};
use serde::{Deserialize, Serialize};
use serde_json::{json, Value};
use std::sync::Arc;

#[derive(Deserialize)]
pub struct DevicePayload {
    pub device_id: String,
    pub name: Option<String>,
    pub manufacturer: Option<String>,
    pub model: Option<String>,
}

#[derive(Serialize)]
pub struct DeviceWithEntities {
    #[serde(flatten)]
    device: Device,
    entities: Vec<EntityWithStateAndConfig>,
}

pub async fn create_device(
    State(state): State<Arc<AppState>>,
    AuthUser(_user): AuthUser,
    Json(payload): Json<DevicePayload>,
) -> Result<Json<crate::db::models::Device>, AppError> {
    let new_device = NewDevice {
        device_id: &payload.device_id,
        name: payload.name.as_deref(),
        manufacturer: payload.manufacturer.as_deref(),
        model: payload.model.as_deref(),
    };
    let device = db::repository::create_device(&state.pool, new_device)?;
    Ok(Json(device))
}

pub async fn get_devices(
    State(state): State<Arc<AppState>>,
    AuthUser(_user): AuthUser,
) -> Result<Json<Vec<crate::db::models::Device>>, AppError> {
    let devices = db::repository::get_all_devices(&state.pool)?;
    Ok(Json(devices))
}

pub async fn get_device(
    State(state): State<Arc<AppState>>,
    AuthUser(_user): AuthUser,
    Path(device_pk_id): Path<i32>,
) -> Result<Json<DeviceWithEntities>, AppError> {
    let device = db::repository::get_device_by_id(&state.pool, device_pk_id)?;
    let entities = db::repository::get_entities_by_device_id(&state.pool, device.id)?;

    let response = DeviceWithEntities { device, entities };

    Ok(Json(response))
}

pub async fn update_device(
    State(state): State<Arc<AppState>>,
    Path(id): Path<i32>,
    AuthUser(_user): AuthUser,
    Json(payload): Json<DevicePayload>,
) -> Result<Json<crate::db::models::Device>, AppError> {
    let updated_device = NewDevice {
        device_id: &payload.device_id,
        name: payload.name.as_deref(),
        manufacturer: payload.manufacturer.as_deref(),
        model: payload.model.as_deref(),
    };
    let device = db::repository::update_device(&state.pool, id, &updated_device)?;
    Ok(Json(device))
}

pub async fn delete_device(
    State(state): State<Arc<AppState>>,
    AuthUser(_user): AuthUser,
    Path(id): Path<i32>,
) -> Result<Json<Value>, AppError> {
    db::repository::delete_device(&state.pool, id)?;
    Ok(Json(
        json!({ "status": "success", "message": "Device deleted" }),
    ))
}


================================================
FILE: apps/server/src/handler/entities.rs
================================================
use crate::{
    db::{
        self,
        models::{EntityWithConfig, EntityWithStateAndConfig, NewEntity, State as EntityState},
    },
    error::AppError,
    handler::auth::AuthUser,
    utils::entity_map::remap_topics,
    state::AppState,
};
use axum::{
    extract::{Path, Query, State},
    Json,
};
use serde::Deserialize;
use serde_json::{json, Value};
use std::sync::Arc;

#[derive(Deserialize)]
pub struct EntityPayload {
    pub entity_id: String,
    pub device_id: Option<i32>,
    pub friendly_name: Option<String>,
    pub platform: Option<String>,
    pub entity_type: Option<String>,
    pub configuration: Option<Value>,
}

#[derive(Deserialize)]
pub struct GetEntitiesParams {
    pub entity_type: Option<String>,
}

pub async fn create_entity(
    State(state): State<Arc<AppState>>,
    AuthUser(_user): AuthUser,
    Json(payload): Json<EntityPayload>,
) -> Result<Json<EntityWithConfig>, AppError> {
    let new_entity = NewEntity {
        entity_id: &payload.entity_id,
        device_id: payload.device_id,
        friendly_name: payload.friendly_name.as_deref(),
        platform: payload.platform.as_deref(),
        entity_type: payload.entity_type.as_deref(),
    };

    let config_str = payload
        .configuration
        .map(|v| {
            if v.is_null() || v.as_object().map_or(false, |m| m.is_empty()) {
                String::new()
            } else {
                v.to_string()
            }
        })
        .unwrap_or_default();

    let (entity, config_opt) =
        db::repository::create_entity_with_config(&state.pool, new_entity, &config_str)?;

    let response = EntityWithConfig {
        entity,
        configuration: config_opt
            .map(|c| serde_json::from_str(&c.configuration).unwrap_or_default()),
    };

    remap_topics(State(state)).await?;

    Ok(Json(response))
}

pub async fn get_entities(
    State(state): State<Arc<AppState>>,
    AuthUser(_user): AuthUser,
    Query(params): Query<GetEntitiesParams>,
) -> Result<Json<Vec<EntityWithConfig>>, AppError> {
    let entities =
        db::repository::get_all_entities_with_configs_filter(&state.pool, params.entity_type)?;
    Ok(Json(entities))
}

pub async fn get_entities_with_states(
    State(state): State<Arc<AppState>>,
    AuthUser(_user): AuthUser,
    Query(params): Query<GetEntitiesParams>,
) -> Result<Json<Vec<EntityWithStateAndConfig>>, AppError> {
    let entities = db::repository::get_all_entities_with_states_and_configs_filter(
        &state.pool,
        params.entity_type,
    )?;
    Ok(Json(entities))
}

pub async fn update_entity(
    State(state): State<Arc<AppState>>,
    Path(id): Path<i32>,
    AuthUser(_user): AuthUser,
    Json(payload): Json<EntityPayload>,
) -> Result<Json<EntityWithConfig>, AppError> {
    let updated_entity = NewEntity {
        entity_id: &payload.entity_id,
        device_id: payload.device_id,
        friendly_name: payload.friendly_name.as_deref(),
        platform: payload.platform.as_deref(),
        entity_type: payload.entity_type.as_deref(),
    };

    let config_str = payload
        .configuration
        .map(|v| {
            if v.is_null() || v.as_object().map_or(false, |m| m.is_empty()) {
                String::new()
            } else {
                v.to_string()
            }
        })
        .unwrap_or_default();

    let (entity, config_opt) =
        db::repository::update_entity_with_config(&state.pool, id, &updated_entity, &config_str)?;

    let response = EntityWithConfig {
        entity,
        configuration: config_opt
            .map(|c| serde_json::from_str(&c.configuration).unwrap_or_default()),
    };

    remap_topics(State(state)).await?;

    Ok(Json(response))
}

pub async fn delete_entity(
    State(state): State<Arc<AppState>>,
    AuthUser(_user): AuthUser,
    Path(id): Path<i32>,
) -> Result<Json<Value>, AppError> {
    db::repository::delete_entity(&state.pool, id)?;
    remap_topics(State(state)).await?;

    Ok(Json(
        json!({ "status": "success", "message": "Entity deleted" }),
    ))
}

pub async fn get_entity_history(
    State(state): State<Arc<AppState>>,
    AuthUser(_user): AuthUser,
    Path(entity_id): Path<String>,
) -> Result<Json<Vec<EntityState>>, AppError> {
    let history = db::repository::get_entity_state_history(&state.pool, &entity_id)?;
    Ok(Json(history))
}


================================================
FILE: apps/server/src/handler/flows.rs
================================================
use crate::{
    db::{
        self,
        models::{Flow, FlowVersion, NewFlow, NewFlowVersion},
    },
    error::AppError,
    handler::auth::AuthUser,
    state::AppState,
};
use axum::{
    extract::{Path, State},
    Json,
};
use serde::Deserialize;
use serde_json::{json, Value};
use std::sync::Arc;

#[derive(Deserialize)]
pub struct FlowPayload {
    pub name: String,
    pub description: Option<String>,
    pub enabled: Option<i32>,
}

#[derive(Deserialize)]
pub struct FlowVersionPayload {
    pub graph_json: String,
    pub comment: Option<String>,
}

pub async fn get_all_flows(
    State(state): State<Arc<AppState>>,
    AuthUser(_user): AuthUser,
) -> Result<Json<Vec<Flow>>, AppError> {
    let flows = db::repository::get_all_flows(&state.pool)?;
    Ok(Json(flows))
}

pub async fn create_flow(
    State(state): State<Arc<AppState>>,
    AuthUser(_user): AuthUser,
    Json(payload): Json<FlowPayload>,
) -> Result<Json<Flow>, AppError> {
    let new_flow = NewFlow {
        name: &payload.name,
        description: payload.description.as_deref(),
        enabled: payload.enabled,
    };
    let flow = db::repository::create_flow(&state.pool, new_flow)?;
    Ok(Json(flow))
}

pub async fn update_flow(
    State(state): State<Arc<AppState>>,
    Path(id): Path<i32>,
    AuthUser(_user): AuthUser,
    Json(payload): Json<FlowPayload>,
) -> Result<Json<Value>, AppError> {
    let updated_flow = NewFlow {
        name: &payload.name,
        description: payload.description.as_deref(),
        enabled: payload.enabled,
    };
    db::repository::update_flow(&state.pool, id, &updated_flow)?;
    Ok(Json(
        json!({ "status": "success", "message": "Flow updated successfully" }),
    ))
}

pub async fn delete_flow(
    State(state): State<Arc<AppState>>,
    Path(id): Path<i32>,
    AuthUser(_user): AuthUser,
) -> Result<Json<Value>, AppError> {
    db::repository::delete_flow(&state.pool, id)?;
    Ok(Json(
        json!({ "status": "success", "message": "Flow deleted" }),
    ))
}

pub async fn create_flow_version(
    State(state): State<Arc<AppState>>,
    AuthUser(_user): AuthUser,
    Path(flow_id): Path<i32>,
    Json(payload): Json<FlowVersionPayload>,
) -> Result<Json<FlowVersion>, AppError> {
    let new_version_data = NewFlowVersion {
        flow_id,
        version: 1,
        graph_json: &payload.graph_json,
        comment: payload.comment.as_deref(),
    };

    let version = db::repository::overwrite_flow_version(&state.pool, flow_id, new_version_data)?;
    Ok(Json(version))
}
pub async fn get_flow_versions(
    State(state): State<Arc<AppState>>,
    AuthUser(_user): AuthUser,
    Path(flow_id): Path<i32>,
) -> Result<Json<Vec<FlowVersion>>, AppError> {
    let versions = db::repository::get_versions_for_flow(&state.pool, flow_id)?;
    Ok(Json(versions))
}


================================================
FILE: apps/server/src/handler/ha.rs
================================================
use anyhow::anyhow;
use axum::{
    extract::{Path, State},
    Json,
};
use reqwest::header;
use serde::{Deserialize, Serialize};
use serde_json::{json, Value};
use std::sync::Arc;

use crate::{db, error::AppError, handler::auth::AuthUser, state::{AppState, DbPool}};

#[derive(Serialize, Deserialize, Debug)]
pub struct HaState {
    pub entity_id: String,
    pub state: String,
    pub attributes: Value,
    pub last_changed: String,
    pub last_updated: String,
    pub context: Value,
}

fn get_ha_credentials(pool: &DbPool) -> Result<(String, String), anyhow::Error> {
    let entity_with_config =
        db::repository::get_entity_with_config_by_entity_id(pool, "home_assistant.bridge")?
            .ok_or_else(|| anyhow!("Home Assistant is not configured. Please register the integration first."))?;

    let config = entity_with_config
        .configuration
        .ok_or_else(|| anyhow!("Home Assistant bridge entity has no configuration."))?;

    let url = config
        .get("url")
        .and_then(|v| v.as_str())
        .ok_or_else(|| anyhow!("Home Assistant URL is not configured."))?;
    let token = config
        .get("token")
        .and_then(|v| v.as_str())
        .ok_or_else(|| anyhow!("Home Assistant Token is not configured."))?;

    Ok((url.to_string(), token.to_string()))
}

pub async fn get_all_states(
    State(state): State<Arc<AppState>>,
    AuthUser(_user): AuthUser,
) -> Result<Json<Vec<HaState>>, AppError> {
    let (ha_url, ha_token) = get_ha_credentials(&state.pool)?;

    let api_url = format!("{}/api/states", ha_url.trim_end_matches('/'));

    let client = reqwest::Client::new();
    let response = client
        .get(&api_url)
        .header(header::AUTHORIZATION, format!("Bearer {}", ha_token))
        .header(header::CONTENT_TYPE, "application/json")
        .send()
        .await?;

    let status = response.status();

    if status.is_success() {
        let states = response.json::<Vec<HaState>>().await?;
        Ok(Json(states))
    } else {
        let error_text = response
            .text()
            .await
            .unwrap_or_else(|_| "Could not read error body".to_string());

        let err = anyhow!(
            "Home Assistant returned an error. Status: {}, Body: {}",
            status,
            error_text
        );

        return Err(err.into());
    }
}

#[derive(Serialize, Deserialize, Debug)]
pub struct HaStateUpdatePayload {
    pub state: String,
    pub attributes: Option<Value>,
}

pub async fn post_state(
    State(state): State<Arc<AppState>>,
    AuthUser(_user): AuthUser,
    Path(entity_id): Path<String>,
    Json(payload): Json<HaStateUpdatePayload>,
) -> Result<Json<HaState>, AppError> {
    let (ha_url, ha_token) = get_ha_credentials(&state.pool)?;

    let api_url = format!("{}/api/states/{}", ha_url.trim_end_matches('/'), entity_id);

    let mut ha_body = json!({ "state": payload.state });
    if let Some(attributes) = payload.attributes {
        if let Some(obj) = ha_body.as_object_mut() {
            obj.insert("attributes".to_string(), attributes);
        }
    }

    let client = reqwest::Client::new();
    let response = client
        .post(&api_url)
        .header(header::AUTHORIZATION, format!("Bearer {}", ha_token))
        .header(header::CONTENT_TYPE, "application/json")
        .json(&ha_body)
        .send()
        .await?;

    let status = response.status();

    if status.is_success() {
        let new_state = response.json::<HaState>().await?;
        Ok(Json(new_state))
    } else {
        let error_text = response
            .text()
            .await
            .unwrap_or_else(|_| "Could not read error body".to_string());

        let err = anyhow!(
            "Home Assistant returned an error. Status: {}, Body: {}",
            status,
            error_text
        );

        return Err(err.into());
    }
}


================================================
FILE: apps/server/src/handler/integration.rs
================================================
use anyhow::anyhow;
use axum::{
    extract::{Path, State},
    Json,
};
use serde::Deserialize;
use serde_json::{json, Value};
use std::sync::Arc;

use crate::{
    db,
    error::AppError,
    handler::auth::AuthUser,
    state::AppState,
};

#[derive(Deserialize)]
pub struct IntegrationRegisterPayload {
    pub integration_id: String,
    pub config: Value,
}

pub async fn register_integration(
    State(state): State<Arc<AppState>>,
    AuthUser(_user): AuthUser,
    Json(payload): Json<IntegrationRegisterPayload>,
) -> Result<Json<Value>, AppError> {
    match payload.integration_id.as_str() {
        "home_assistant" => {
            let url = payload
                .config
                .get("url")
                .and_then(|v| v.as_str())
                .ok_or_else(|| anyhow!("Missing 'url' in config"))?;
            let token = payload
                .config
                .get("token")
                .and_then(|v| v.as_str())
                .ok_or_else(|| anyhow!("Missing 'token' in config"))?;

            let device =
                db::repository::upsert_device(&state.pool, "home_assistant", Some("Home Assistant"), Some("Home Assistant"), None)?;

            db::repository::upsert_entity_with_config(
                &state.pool,
                "home_assistant.bridge",
                Some(device.id),
                Some("Home Assistant Bridge"),
                Some("home_assistant"),
                Some("bridge"),
                &json!({ "url": url, "token": token }).to_string(),
            )?;

            Ok(Json(json!({ "status": "success", "integration_id": "home_assistant" })))
        }
        "ros2" => {
            let ws_url = payload
                .config
                .get("websocket_url")
                .and_then(|v| v.as_str())
                .ok_or_else(|| anyhow!("Missing 'websocket_url' in config"))?;

            let device =
                db::repository::upsert_device(&state.pool, "ros2_bridge", Some("ROS2 Bridge"), Some("Open Robotics"), None)?;

            db::repository::upsert_entity_with_config(
                &state.pool,
                "ros2.bridge",
                Some(device.id),
                Some("ROS2 WebSocket Bridge"),
                Some("ros2"),
                Some("bridge"),
                &json!({ "websocket_url": ws_url }).to_string(),
            )?;

            Ok(Json(json!({ "status": "success", "integration_id": "ros2" })))
        }
        "sdr" => {
            let host = payload
                .config
                .get("host")
                .and_then(|v| v.as_str())
                .ok_or_else(|| anyhow!("Missing 'host' in config"))?;
            let port = payload
                .config
                .get("port")
                .and_then(|v| v.as_str())
                .ok_or_else(|| anyhow!("Missing 'port' in config"))?;

            let device =
                db::repository::upsert_device(&state.pool, "sdr_server", Some("RTL-SDR"), Some("RTL-SDR"), None)?;

            db::repository::upsert_entity_with_config(
                &state.pool,
                "sdr.server",
                Some(device.id),
                Some("RTL-SDR (rtl_tcp)"),
                Some("sdr"),
                Some("server"),
                &json!({ "host": host, "port": port }).to_string(),
            )?;

            Ok(Json(json!({ "status": "success", "integration_id": "sdr" })))
        }
        other => Err(anyhow!("Unknown integration_id: {}", other).into()),
    }
}

pub async fn get_integration_status(
    State(state): State<Arc<AppState>>,
    AuthUser(_user): AuthUser,
) -> Result<Json<Value>, AppError> {
    let ha = db::repository::get_entity_with_config_by_entity_id(
        &state.pool,
        "home_assistant.bridge",
    )?;
    let ros2 = db::repository::get_entity_with_config_by_entity_id(
        &state.pool,
        "ros2.bridge",
    )?;

    let sdr = db::repository::get_entity_with_config_by_entity_id(
        &state.pool,
        "sdr.server",
    )?;

    let ha_connected = ha.is_some();
    let ros2_connected = ros2.is_some();
    let sdr_connected = sdr.is_some();

    Ok(Json(json!({
        "home_assistant": { "connected": ha_connected },
        "ros2": { "connected": ros2_connected },
        "sdr": { "connected": sdr_connected }
    })))
}

pub async fn delete_integration(
    State(state): State<Arc<AppState>>,
    AuthUser(_user): AuthUser,
    Path(integration_id): Path<String>,
) -> Result<Json<Value>, AppError> {
    match integration_id.as_str() {
        "home_assistant" => {
            db::repository::delete_device_by_device_id(&state.pool, "home_assistant")?;
            Ok(Json(json!({ "status": "success", "message": "Home Assistant integration removed" })))
        }
        "ros2" => {
            db::repository::delete_device_by_device_id(&state.pool, "ros2_bridge")?;
            Ok(Json(json!({ "status": "success", "message": "ROS2 integration removed" })))
        }
        "sdr" => {
            db::repository::delete_device_by_device_id(&state.pool, "sdr_server")?;
            Ok(Json(json!({ "status": "success", "message": "RTL-SDR integration removed" })))
        }
        other => Err(anyhow!("Unknown integration_id: {}", other).into()),
    }
}


================================================
FILE: apps/server/src/handler/log.rs
================================================
use axum::{
    extract::Path,
    http::StatusCode,
    response::{IntoResponse, Response},
    Json,
};
use serde::Serialize;
use std::{fs, io, path::PathBuf};

use crate::handler::auth::AuthUser;

const LOG_DIR: &str = "log";

#[derive(Serialize)]
struct LogContentResponse {
    filename: String,
    logs: String,
}

#[derive(Serialize)]
struct LogFileListResponse {
    files: Vec<String>,
}

#[derive(Serialize)]
struct ErrorResponse {
    error: String,
}

fn get_log_files() -> io::Result<Vec<String>> {
    let mut files = fs::read_dir(LOG_DIR)?
        .filter_map(|entry| {
            let entry = entry.ok()?;
            let path = entry.path();
            if path.is_file() {
                path.file_name()?.to_str().map(String::from)
            } else {
                None
            }
        })
        .collect::<Vec<String>>();

    files.sort_by(|a, b| b.cmp(a));
    Ok(files)
}

fn read_log_file_content(filename: &str) -> Result<String, io::Error> {
    if filename.contains('/') || filename.contains("..") {
        return Err(io::Error::new(
            io::ErrorKind::InvalidInput,
            "Invalid filename provided.",
        ));
    }

    const MAX_LINES: usize = 3000;

    let path = PathBuf::from(LOG_DIR).join(filename);
    let contents = fs::read_to_string(path)?;
    Ok(contents
        .lines()
        .rev()
        .take(MAX_LINES)
        .collect::<Vec<&str>>()
        .join("\n"))
}

pub async fn get_latest_log_handler(AuthUser(_user): AuthUser) -> Response {
    match get_log_files() {
        Ok(files) => {
            if let Some(latest_file) = files.first() {
                get_log_by_filename_handler(AuthUser(_user), Path(latest_file.clone())).await
            } else {
                let error_response = ErrorResponse {
                    error: "No log files found.".to_string(),
                };
                (StatusCode::NOT_FOUND, Json(error_response)).into_response()
            }
        }
        Err(e) => {
            let error_response = ErrorResponse {
                error: format!("Could not read log directory: {}", e),
            };
            (StatusCode::INTERNAL_SERVER_ERROR, Json(error_response)).into_response()
        }
    }
}

pub async fn list_log_files_handler(AuthUser(_user): AuthUser) -> Response {
    match get_log_files() {
        Ok(files) => {
            let response = LogFileListResponse { files };
            (StatusCode::OK, Json(response)).into_response()
        }
        Err(e) => {
            let error_response = ErrorResponse {
                error: format!("Could not read log directory: {}", e),
            };
            (StatusCode::INTERNAL_SERVER_ERROR, Json(error_response)).into_response()
        }
    }
}

pub async fn get_log_by_filename_handler(
    AuthUser(_user): AuthUser,
    Path(filename): Path<String>,
) -> Response {
    match read_log_file_content(&filename) {
        Ok(logs) => {
            let response = LogContentResponse { filename, logs };
            (StatusCode::OK, Json(response)).into_response()
        }
        Err(e) => {
            let (status, error_message) = match e.kind() {
                io::ErrorKind::NotFound => (
                    StatusCode::NOT_FOUND,
                    format!("Log file '{}' not found.", filename),
                ),
                io::ErrorKind::InvalidInput => (StatusCode::BAD_REQUEST, e.to_string()),
                _ => (
                    StatusCode::INTERNAL_SERVER_ERROR,
                    format!("Could not read log file '{}': {}", filename, e),
                ),
            };
            let error_response = ErrorResponse {
                error: error_message,
            };
            (status, Json(error_response)).into_response()
        }
    }
}


================================================
FILE: apps/server/src/handler/map.rs
================================================
use crate::db::models::{
    FeatureWithVertices, LayerWithFeatures, MapFeature, MapLayer, NewMapFeature, NewMapLayer,
    NewMapVertex, UpdateMapFeature, UpdateMapLayer,
};
use crate::{db, error::AppError, handler::auth::AuthUser, state::AppState};
use axum::{
    extract::{Path, State},
    Json,
};
use serde::Deserialize;
use serde_json::{json, Value};
use std::sync::Arc;

#[derive(Deserialize)]
pub struct LayerPayload {
    pub name: String,
    pub description: Option<String>,
    pub is_visible: Option<bool>,
}

#[derive(Deserialize, Clone)]
pub struct VertexPayload {
    pub latitude: f32,
    pub longitude: f32,
    pub altitude: Option<f32>,
}

#[derive(Deserialize)]
pub struct FeaturePayload {
    pub layer_id: i32,
    pub feature_type: String,
    pub name: Option<String>,
    pub style_properties: Option<String>,
    pub vertices: Vec<VertexPayload>,
}

#[derive(Deserialize)]
pub struct UpdateFeaturePayload {
    pub name: Option<String>,
    pub style_properties: Option<String>,
    pub vertices: Option<Vec<VertexPayload>>,
}

pub async fn create_layer(
    State(state): State<Arc<AppState>>,
    AuthUser(user): AuthUser,
    Json(payload): Json<LayerPayload>,
) -> Result<Json<MapLayer>, AppError> {
    let new_layer = NewMapLayer {
        name: &payload.name,
        description: payload.description.as_deref(),
        owner_user_id: user.id,
        is_visible: Some(payload.is_visible.unwrap_or(true) as i32),
    };
    let layer = db::repository::create_map_layer(&state.pool, new_layer)?;
    Ok(Json(layer))
}

pub async fn get_layers(
    State(state): State<Arc<AppState>>,
    AuthUser(_user): AuthUser,
) -> Result<Json<Vec<MapLayer>>, AppError> {
    let layers = db::repository::get_all_map_layers(&state.pool)?;
    Ok(Json(layers))
}

pub async fn get_layer(
    State(state): State<Arc<AppState>>,
    AuthUser(_user): AuthUser,
    Path(id): Path<i32>,
) -> Result<Json<LayerWithFeatures>, AppError> {
    let layer_with_features = db::repository::get_map_layer_with_features(&state.pool, id)?;
    Ok(Json(layer_with_features))
}

pub async fn update_layer(
    State(state): State<Arc<AppState>>,
    AuthUser(_user): AuthUser,
    Path(id): Path<i32>,
    Json(payload): Json<LayerPayload>,
) -> Result<Json<MapLayer>, AppError> {
    let update_data = UpdateMapLayer {
        name: Some(payload.name),
        description: payload.description,
        is_visible: Some(payload.is_visible.unwrap_or(true) as i32),
    };
    let layer = db::repository::update_map_layer(&state.pool, id, &update_data)?;
    Ok(Json(layer))
}

pub async fn delete_layer(
    State(state): State<Arc<AppState>>,
    AuthUser(_user): AuthUser,
    Path(id): Path<i32>,
) -> Result<Json<Value>, AppError> {
    db::repository::delete_map_layer(&state.pool, id)?;
    Ok(Json(
        json!({ "status": "success", "message": "Layer deleted" }),
    ))
}

pub async fn create_feature(
    State(state): State<Arc<AppState>>,
    AuthUser(user): AuthUser,
    Json(payload): Json<FeaturePayload>,
) -> Result<Json<MapFeature>, AppError> {
    let new_feature = NewMapFeature {
        layer_id: payload.layer_id,
        feature_type: &payload.feature_type,
        name: payload.name.as_deref(),
        style_properties: payload.style_properties.as_deref(),
        created_by_user_id: user.id,
    };

    let new_vertices = payload
        .vertices
        .into_iter()
        .enumerate()
        .map(|(i, v)| NewMapVertex {
            feature_id: 0,
            latitude: v.latitude,
            longitude: v.longitude,
            altitude: v.altitude,
            sequence: i as i32,
        })
        .collect();

    let feature = db::repository::create_map_feature(&state.pool, new_feature, new_vertices)?;
    Ok(Json(feature))
}

pub async fn get_feature(
    State(state): State<Arc<AppState>>,
    Path(id): Path<i32>,
    AuthUser(_user): AuthUser,
) -> Result<Json<FeatureWithVertices>, AppError> {
    let feature = db::repository::get_map_feature_with_vertices(&state.pool, id)?;
    Ok(Json(feature))
}

pub async fn update_feature(
    State(state): State<Arc<AppState>>,
    AuthUser(_user): AuthUser,
    Path(id): Path<i32>,
    Json(payload): Json<UpdateFeaturePayload>,
) -> Result<Json<MapFeature>, AppError> {
    let update_data = UpdateMapFeature {
        name: payload.name,
        style_properties: payload.style_properties,
    };

    let new_vertices = payload.vertices.map(|vertices| {
        vertices
            .into_iter()
            .enumerate()
            .map(|(i, v)| NewMapVertex {
                feature_id: 0,
                latitude: v.latitude,
                longitude: v.longitude,
                altitude: v.altitude,
                sequence: i as i32,
            })
            .collect()
    });

    let feature = db::repository::update_map_feature(&state.pool, id, &update_data, new_vertices)?;
    Ok(Json(feature))
}

pub async fn delete_feature(
    State(state): State<Arc<AppState>>,
    AuthUser(_user): AuthUser,
    Path(id): Path<i32>,
) -> Result<Json<Value>, AppError> {
    db::repository::delete_map_feature(&state.pool, id)?;
    Ok(Json(
        json!({ "status": "success", "message": "Feature deleted" }),
    ))
}


================================================
FILE: apps/server/src/handler/mod.rs
================================================
pub mod auth;
pub mod configurations;
pub mod custom_nodes;
pub mod dashboards;
pub mod device_tokens;
pub mod devices;
pub mod entities;
pub mod flows;
pub mod ha;
pub mod integration;
pub mod log;
pub mod sdr;
pub mod map;
pub mod permissions;
pub mod recordings;
pub mod roles;
pub mod stat;
pub mod state;
pub mod storage;
pub mod streams;
pub mod tunnel;
pub mod users;
pub mod ws;


================================================
FILE: apps/server/src/handler/permissions.rs
================================================
use axum::{extract::State, http::StatusCode, Json};
use serde::Deserialize;
use std::sync::Arc;

use crate::{
    db::{
        self,
        models::{NewPermission, Permission},
    },
    error::AppError,
    handler::auth::AuthUser,
    state::AppState,
};

#[derive(Deserialize)]
pub struct PermissionPayload {
    name: String,
    description: Option<String>,
}

pub async fn create_permission(
    State(state): State<Arc<AppState>>,
    AuthUser(_user): AuthUser,
    Json(payload): Json<PermissionPayload>,
) -> Result<(StatusCode, Json<Permission>), AppError> {
    let new_permission = NewPermission {
        name: &payload.name,
        description: payload.description.as_deref(),
    };
    let permission = db::repository::rbac::create_permission(&state.pool, new_permission)?;
    Ok((StatusCode::CREATED, Json(permission)))
}

pub async fn get_permissions(
    State(state): State<Arc<AppState>>,
    AuthUser(_user): AuthUser,
) -> Result<Json<Vec<Permission>>, AppError> {
    let permissions = db::repository::rbac::get_all_permissions(&state.pool)?;
    Ok(Json(permissions))
}


================================================
FILE: apps/server/src/handler/recordings.rs
================================================
use axum::{
    body::Body,
    extract::{Path, Query, State},
    http::{header, HeaderMap, StatusCode},
    response::{IntoResponse, Response},
    Json,
};
use serde::{Deserialize, Serialize};
use std::sync::Arc;
use tokio::fs::File;
use tokio::io::{AsyncReadExt, AsyncSeekExt};
use tokio_util::io::ReaderStream;
use tracing::{error, info, warn};

use crate::db::models::Recording;
use crate::db::repository::recordings as recordings_repo;
use crate::handler::auth::AuthUser;
use crate::state::AppState;

#[derive(Deserialize)]
pub struct StartRecordingRequest {
    pub topic: String,
}

#[derive(Serialize)]
pub struct StartRecordingResponse {
    pub id: i32,
    pub topic: String,
    pub status: String,
}

#[derive(Deserialize)]
pub struct ListRecordingsQuery {
    pub topic: Option<String>,
    pub status: Option<String>,
    pub limit: Option<i32>,
    pub offset: Option<i32>,
}

#[derive(Serialize)]
pub struct RecordingResponse {
    pub id: i32,
    pub stream_ssrc: i32,
    pub topic: String,
    pub device_id: String,
    pub media_type: String,
    pub filename: String,
    pub file_path: String,
    pub file_size: i32,
    pub duration_ms: i32,
    pub status: String,
    pub started_at: String,
    pub ended_at: Option<String>,
    pub created_by_user_id: Option<i32>,
}

impl From<Recording> for RecordingResponse {
    fn from(r: Recording) -> Self {
        RecordingResponse {
            id: r.id,
            stream_ssrc: r.stream_ssrc,
            topic: r.topic,
            device_id: r.device_id,
            media_type: r.media_type,
            filename: r.filename,
            file_path: r.file_path,
            file_size: r.file_size,
            duration_ms: r.duration_ms,
            status: r.status,
            started_at: r.started_at.to_string(),
            ended_at: r.ended_at.map(|dt| dt.to_string()),
            created_by_user_id: r.created_by_user_id,
        }
    }
}

#[derive(Serialize)]
struct ErrorResponse {
    error: String,
}

#[derive(Serialize)]
struct ActiveRecordingInfo {
    topic: String,
    recording_id: i32,
}

pub async fn start_recording(
    State(state): State<Arc<AppState>>,
    AuthUser(user): AuthUser,
    Json(payload): Json<StartRecordingRequest>,
) -> impl IntoResponse {
    info!("Starting recording for topic: {}", payload.topic);

    match state
        .recording_manager
        .start_recording(&payload.topic, Some(user.id))
    {
        Ok(recording_id) => {
            info!(
                "Recording started successfully: id={}, topic={}",
                recording_id, payload.topic
            );
            (
                StatusCode::CREATED,
                Json(StartRecordingResponse {
                    id: recording_id,
                    topic: payload.topic,
                    status: "recording".to_string(),
                }),
            )
                .into_response()
        }
        Err(e) => {
            error!("Failed to start recording: {}", e);
            (
                StatusCode::BAD_REQUEST,
                Json(ErrorResponse {
                    error: e.to_string(),
                }),
            )
                .into_response()
        }
    }
}

pub async fn stop_recording(
    State(state): State<Arc<AppState>>,
    AuthUser(_user): AuthUser,
    Path(id): Path<i32>,
) -> impl IntoResponse {
    info!("Stopping recording: id={}", id);

    match state.recording_manager.stop_recording(id) {
        Ok(()) => {
            info!("Recording stopped successfully: id={}", id);
            (
                StatusCode::OK,
                Json(serde_json::json!({"message": "Recording stopped"})),
            )
                .into_response()
        }
        Err(e) => {
            error!("Failed to stop recording: {}", e);
            (
                StatusCode::BAD_REQUEST,
                Json(ErrorResponse {
                    error: e.to_string(),
                }),
            )
                .into_response()
        }
    }
}

pub async fn list_recordings(
    State(state): State<Arc<AppState>>,
    AuthUser(_user): AuthUser,
    Query(query): Query<ListRecordingsQuery>,
) -> impl IntoResponse {
    let recordings = if let Some(topic) = &query.topic {
        recordings_repo::get_recordings_by_topic(&state.pool, topic)
    } else if let Some(status) = &query.status {
        recordings_repo::get_recordings_by_status(&state.pool, status)
    } else {
        recordings_repo::get_all_recordings(&state.pool)
    };

    match recordings {
        Ok(recs) => {
            let response: Vec<RecordingResponse> = recs.into_iter().map(Into::into).collect();
            (StatusCode::OK, Json(response)).into_response()
        }
        Err(e) => {
            error!("Failed to list recordings: {}", e);
            (
                StatusCode::INTERNAL_SERVER_ERROR,
                Json(ErrorResponse {
                    error: e.to_string(),
                }),
            )
                .into_response()
        }
    }
}

pub async fn get_recording(
    State(state): State<Arc<AppState>>,
    AuthUser(_user): AuthUser,
    Path(id): Path<i32>,
) -> impl IntoResponse {
    match recordings_repo::get_recording_by_id(&state.pool, id) {
        Ok(recording) => {
            let response: RecordingResponse = recording.into();
            (StatusCode::OK, Json(response)).into_response()
        }
        Err(e) => {
            error!("Failed to get recording {}: {}", id, e);
            (
                StatusCode::NOT_FOUND,
                Json(ErrorResponse {
                    error: format!("Recording not found: {}", id),
                }),
            )
                .into_response()
        }
    }
}

pub async fn delete_recording(
    State(state): State<Arc<AppState>>,
    AuthUser(_user): AuthUser,
    Path(id): Path<i32>,
) -> impl IntoResponse {
    // Get recording to find file path
    let recording = match recordings_repo::get_recording_by_id(&state.pool, id) {
        Ok(r) => r,
        Err(e) => {
            error!("Failed to get recording for deletion {}: {}", id, e);
            return (
                StatusCode::NOT_FOUND,
                Json(ErrorResponse {
                    error: format!("Recording not found: {}", id),
                }),
            )
                .into_response();
        }
    };

    // Store file path before DB deletion
    let file_path = recording.file_path.clone();

    // Delete from database FIRST (prevents orphan records if file deletion fails)
    // An orphan file is preferable to an orphan DB record
    match recordings_repo::delete_recording(&state.pool, id) {
        Ok(_) => {
            info!("Recording deleted from database: id={}", id);

            // Delete file if exists (after DB deletion succeeded)
            if std::path::Path::new(&file_path).exists() {
                if let Err(e) = std::fs::remove_file(&file_path) {
                    // Log warning but don't fail - DB record is already gone
                    // Orphan file may remain but that's better than orphan record
                    warn!(
                        "Failed to delete recording file (orphan file left): path={}, error={}",
                        file_path, e
                    );
                }
            }

            (
                StatusCode::OK,
                Json(serde_json::json!({"message": "Recording deleted"})),
            )
                .into_response()
        }
        Err(e) => {
            error!("Failed to delete recording from database: {}", e);
            (
                StatusCode::INTERNAL_SERVER_ERROR,
                Json(ErrorResponse {
                    error: e.to_string(),
                }),
            )
                .into_response()
        }
    }
}

pub async fn stream_recording(
    State(state): State<Arc<AppState>>,
    AuthUser(_user): AuthUser,
    Path(id): Path<i32>,
    headers: HeaderMap,
) -> Response {
    // Get recording metadata
    let recording = match recordings_repo::get_recording_by_id(&state.pool, id) {
        Ok(r) => r,
        Err(e) => {
            error!("Failed to get recording for streaming {}: {}", id, e);
            return (
                StatusCode::NOT_FOUND,
                Json(ErrorResponse {
                    error: format!("Recording not found: {}", id),
                }),
            )
                .into_response();
        }
    };

    // Check if file exists
    let file_path = std::path::Path::new(&recording.file_path);
    if !file_path.exists() {
        return (
            StatusCode::NOT_FOUND,
            Json(ErrorResponse {
                error: "Recording file not found".to_string(),
            }),
        )
            .into_response();
    }

    // Get file metadata
    let metadata = match std::fs::metadata(file_path) {
        Ok(m) => m,
        Err(e) => {
            error!("Failed to get file metadata: {}", e);
            return (
                StatusCode::INTERNAL_SERVER_ERROR,
                Json(ErrorResponse {
                    error: "Failed to read file".to_string(),
                }),
            )
                .into_response();
        }
    };

    let file_size = metadata.len();

    // Parse Range header for seeking support
    let range = headers
        .get(header::RANGE)
        .and_then(|v| v.to_str().ok())
        .and_then(|s| parse_range_header(s, file_size));

    let content_type = "video/x-matroska";

    match range {
        Some((start, end)) => {
            // Partial content response
            let mut file = match File::open(file_path).await {
                Ok(f) => f,
                Err(e) => {
                    error!("Failed to open file: {}", e);
                    return (
                        StatusCode::INTERNAL_SERVER_ERROR,
                        Json(ErrorResponse {
                            error: "Failed to open file".to_string(),
                        }),
                    )
                        .into_response();
                }
            };

            if let Err(e) = file.seek(std::io::SeekFrom::Start(start)).await {
                error!("Failed to seek in file: {}", e);
                return (
                    StatusCode::INTERNAL_SERVER_ERROR,
                    Json(ErrorResponse {
                        error: "Failed to seek in file".to_string(),
                    }),
                )
                    .into_response();
            }

            let chunk_size = end - start + 1;
            let limited_file = AsyncReadExt::take(file, chunk_size);
            let stream = ReaderStream::new(limited_file);
            let body = Body::from_stream(stream);

            Response::builder()
                .status(StatusCode::PARTIAL_CONTENT)
                .header(header::CONTENT_TYPE, content_type)
                .header(header::CONTENT_LENGTH, chunk_size)
                .header(
                    header::CONTENT_RANGE,
                    format!("bytes {}-{}/{}", start, end, file_size),
                )
                .header(header::ACCEPT_RANGES, "bytes")
                .body(body)
                .unwrap()
        }
        None => {
            // Full content response
            let file = match File::open(file_path).await {
                Ok(f) => f,
                Err(e) => {
                    error!("Failed to open file: {}", e);
                    return (
                        StatusCode::INTERNAL_SERVER_ERROR,
                        Json(ErrorResponse {
                            error: "Failed to open file".to_string(),
                        }),
                    )
                        .into_response();
                }
            };

            let stream = ReaderStream::new(file);
            let body = Body::from_stream(stream);

            Response::builder()
                .status(StatusCode::OK)
                .header(header::CONTENT_TYPE, content_type)
                .header(header::CONTENT_LENGTH, file_size)
                .header(header::ACCEPT_RANGES, "bytes")
                .body(body)
                .unwrap()
        }
    }
}

fn parse_range_header(range: &str, file_size: u64) -> Option<(u64, u64)> {
    if !range.starts_with("bytes=") {
        return None;
    }

    let range = &range[6..];
    let parts: Vec<&str> = range.split('-').collect();

    if parts.len() != 2 {
        return None;
    }

    let start: u64 = parts[0].parse().ok()?;
    let end: u64 = if parts[1].is_empty() {
        file_size - 1
    } else {
        parts[1].parse().ok()?
    };

    if start > end || end >= file_size {
        return None;
    }

    Some((start, end))
}

pub async fn get_active_recordings(
    State(state): State<Arc<AppState>>,
    AuthUser(_user): AuthUser,
) -> impl IntoResponse {
    let active = state.recording_manager.get_all_active_recordings();
    let response: Vec<ActiveRecordingInfo> = active
        .into_iter()
        .map(|(topic, recording_id)| ActiveRecordingInfo {
            topic,
            recording_id,
        })
        .collect();

    (StatusCode::OK, Json(response)).into_response()
}

pub async fn is_topic_recording(
    State(state): State<Arc<AppState>>,
    AuthUser(_user): AuthUser,
    Path(topic): Path<String>,
) -> impl IntoResponse {
    let is_recording = state.recording_manager.is_recording(&topic);
    let recording_id = state.recording_manager.get_active_recording_id(&topic);

    (
        StatusCode::OK,
        Json(serde_json::json!({
            "is_recording": is_recording,
            "recording_id": recording_id
        })),
    )
        .into_response()
}


================================================
FILE: apps/server/src/handler/roles.rs
================================================
use crate::{
    db::{
        self,
        models::{NewRole, Permission, Role},
        repository::rbac,
    },
    error::AppError,
    handler::auth::AuthUser,
    state::AppState,
};
use axum::{
    extract::{Path, State},
    http::StatusCode,
    Json,
};
use serde::Deserialize;
use std::sync::Arc;

#[derive(Deserialize)]
pub struct RolePayload {
    name: String,
    description: Option<String>,
    permission_ids: Vec<i32>,
}

#[derive(Deserialize)]
pub struct PermissionAssignmentPayload {
    permission_id: i32,
}

pub async fn create_role(
    State(state): State<Arc<AppState>>,
    AuthUser(_user): AuthUser,
    Json(payload): Json<RolePayload>,
) -> Result<(StatusCode, Json<Role>), AppError> {
    let role = rbac::create_role_with_permissions(
        &state.pool,
        &payload.name,
        payload.description.as_deref(),
        &payload.permission_ids,
    )?;
    Ok((StatusCode::CREATED, Json(role)))
}

pub async fn get_roles(
    State(state): State<Arc<AppState>>,
    AuthUser(_user): AuthUser,
) -> Result<Json<Vec<crate::db::models::RoleWithPermissions>>, AppError> {
    let roles = rbac::get_all_roles_with_permissions(&state.pool)?;
    Ok(Json(roles))
}

pub async fn update_role(
    State(state): State<Arc<AppState>>,
    AuthUser(_user): AuthUser,
    Path(role_id): Path<i32>,
    Json(payload): Json<RolePayload>,
) -> Result<Json<Role>, AppError> {
    let updated_role = rbac::update_role_with_permissions(
        &state.pool,
        role_id,
        &payload.name,
        payload.description.as_deref(),
        &payload.permission_ids,
    )?;
    Ok(Json(updated_role))
}

pub async fn delete_role(
    State(state): State<Arc<AppState>>,
    AuthUser(_user): AuthUser,
    Path(role_id): Path<i32>,
) -> Result<StatusCode, AppError> {
    db::repository::rbac::delete_role(&state.pool, role_id)?;
    Ok(StatusCode::NO_CONTENT)
}

pub async fn grant_permission_to_role(
    State(state): State<Arc<AppState>>,
    AuthUser(_user): AuthUser,
    Path(role_id): Path<i32>,
    Json(payload): Json<PermissionAssignmentPayload>,
) -> Result<StatusCode, AppError> {
    db::repository::rbac::grant_permission_to_role(&state.pool, role_id, payload.permission_id)?;
    Ok(StatusCode::CREATED)
}

pub async fn revoke_permission_from_role(
    State(state): State<Arc<AppState>>,
    AuthUser(_user): AuthUser,
    Path((role_id, permission_id)): Path<(i32, i32)>,
) -> Result<StatusCode, AppError> {
    db::repository::rbac::revoke_permission_from_role(&state.pool, role_id, permission_id)?;
    Ok(StatusCode::NO_CONTENT)
}

pub async fn get_role_permissions(
    State(state): State<Arc<AppState>>,
    AuthUser(_user): AuthUser,
    Path(role_id): Path<i32>,
) -> Result<Json<Vec<Permission>>, AppError> {
    let permissions = db::repository::rbac::get_role_permissions(&state.pool, role_id)?;
    Ok(Json(permissions))
}


================================================
FILE: apps/server/src/handler/sdr.rs
================================================
use anyhow::anyhow;
use axum::{
    extract::{ws::{Message, WebSocket, WebSocketUpgrade}, State},
    response::IntoResponse,
    Json,
};
use serde::Deserialize;
use serde_json::{json, Value};
use std::sync::Arc;
use tokio::io::{AsyncReadExt, AsyncWriteExt};
use tokio::net::TcpStream;
use tokio::time::{timeout, Duration};
use tracing::{error, info, warn};

use crate::{db, error::AppError, handler::auth::AuthUser, state::{AppState, DbPool}};

// rtl_tcp command IDs
const RTL_TCP_SET_FREQ: u8 = 0x01;
const RTL_TCP_SET_SAMPLERATE: u8 = 0x02;
const RTL_TCP_SET_GAIN_MODE: u8 = 0x03;
const RTL_TCP_SET_AGC: u8 = 0x08;

const DEFAULT_SAMPLERATE: u32 = 2_048_000;
const AUDIO_SAMPLE_RATE: u32 = 48000;
const CONNECT_TIMEOUT: Duration = Duration::from_secs(5);

fn get_sdr_address(pool: &DbPool) -> Result<(String, u16), anyhow::Error> {
    let entity_with_config =
        db::repository::get_entity_with_config_by_entity_id(pool, "sdr.server")?
            .ok_or_else(|| anyhow!("RTL-SDR is not configured. Please register the integration first."))?;

    let config = entity_with_config
        .configuration
        .ok_or_else(|| anyhow!("RTL-SDR entity has no configuration."))?;

    let host = config
        .get("host")
        .and_then(|v| v.as_str())
        .ok_or_else(|| anyhow!("RTL-SDR host is not configured."))?;
    let port_str = config
        .get("port")
        .and_then(|v| v.as_str())
        .ok_or_else(|| anyhow!("RTL-SDR port is not configured."))?;
    let port: u16 = port_str
        .parse()
        .map_err(|_| anyhow!("Invalid RTL-SDR port: {}", port_str))?;

    Ok((host.to_string(), port))
}

// ─── rtl_tcp Protocol ───

/// Send a 5-byte rtl_tcp command: [cmd: u8, value: u32 BE]
async fn rtl_tcp_command(stream: &mut TcpStream, cmd: u8, value: u32) -> Result<(), anyhow::Error> {
    let mut buf = [0u8; 5];
    buf[0] = cmd;
    buf[1..5].copy_from_slice(&value.to_be_bytes());
    stream.write_all(&buf).await?;
    Ok(())
}

/// Read the 12-byte rtl_tcp dongle info header.
/// Returns (tuner_type, gain_count).
async fn read_rtl_tcp_header(stream: &mut TcpStream) -> Result<(u32, u32), anyhow::Error> {
    let mut header = [0u8; 12];
    timeout(CONNECT_TIMEOUT, stream.read_exact(&mut header))
        .await
        .map_err(|_| anyhow!("Timeout reading rtl_tcp header"))??;

    let magic = &header[0..4];
    if magic != b"RTL0" {
        return Err(anyhow!("Invalid rtl_tcp header magic: {:?}", magic));
    }

    let tuner_type = u32::from_be_bytes(header[4..8].try_into()?);
    let gain_count = u32::from_be_bytes(header[8..12].try_into()?);

    Ok((tuner_type, gain_count))
}

// ─── DSP Pipeline ───

/// State maintained across packets for phase-continuous FM demodulation
struct FmDemodState {
    prev_i: f32,
    prev_q: f32,
    lpf_state: f32,
}

impl FmDemodState {
    fn new() -> Self {
        Self { prev_i: 0.0, prev_q: 0.0, lpf_state: 0.0 }
    }
}

/// Convert unsigned 8-bit IQ bytes to float32 IQ samples in [-1.0, 1.0].
fn u8_iq_to_float(data: &[u8]) -> Vec<f32> {
    data.iter().map(|&b| (b as f32 - 127.5) / 127.5).collect()
}

/// FM demodulation with state for phase continuity across packet boundaries.
fn fm_demodulate(iq_samples: &[f32], state: &mut FmDemodState, lpf_alpha: f32) -> Vec<f32> {
    if iq_samples.len() < 2 {
        return Vec::new();
    }
    let num_iq = iq_samples.len() / 2;
    let mut audio = Vec::with_capacity(num_iq);

    for i in 0..num_iq {
        let idx = i * 2;
        let i_curr = iq_samples[idx];
        let q_curr = iq_samples[idx + 1];

        // Phase difference: arg(conj(prev) * curr)
        let real = i_curr * state.prev_i + q_curr * state.prev_q;
        let imag = q_curr * state.prev_i - i_curr * state.prev_q;
        let demod = imag.atan2(real);

        // Single-pole IIR low-pass filter
        state.lpf_state = lpf_alpha * demod + (1.0 - lpf_alpha) * state.lpf_state;
        audio.push(state.lpf_state);

        state.prev_i = i_curr;
        state.prev_q = q_curr;
    }
    audio
}

/// Downsample audio using block averaging (anti-aliasing) and convert to int16 PCM.
fn downsample_to_i16(samples: &[f32], src_rate: u32, dst_rate: u32) -> Vec<u8> {
    if src_rate == 0 || dst_rate == 0 || samples.is_empty() {
        return Vec::new();
    }
    let ratio = src_rate as usize / dst_rate.max(1) as usize;
    if ratio == 0 {
        return Vec::new();
    }
    let out_len = samples.len() / ratio;
    let mut output = Vec::with_capacity(out_len * 2);

    for i in 0..out_len {
        let start = i * ratio;
        let end = (start + ratio).min(samples.len());
        let count = (end - start) as f32;
        let sum: f32 = samples[start..end].iter().sum();
        let avg = sum / count;
        let sample = (avg * 24000.0).clamp(-32768.0, 32767.0) as i16;
        output.extend_from_slice(&sample.to_le_bytes());
    }
    output
}

// ─── REST API Handlers ───

#[derive(Deserialize)]
pub struct SetFrequencyPayload {
    pub frequency: u64,
}

pub async fn set_frequency(
    State(state): State<Arc<AppState>>,
    AuthUser(_user): AuthUser,
    Json(payload): Json<SetFrequencyPayload>,
) -> Result<Json<Value>, AppError> {
    let (host, port) = get_sdr_address(&state.pool)?;
    let addr = format!("{}:{}", host, port);

    let mut stream = timeout(CONNECT_TIMEOUT, TcpStream::connect(&addr))
        .await
        .map_err(|_| anyhow!("Connection to rtl_tcp timed out"))?
        .map_err(|e| anyhow!("Failed to connect to rtl_tcp at {}: {}", addr, e))?;

    // Read header (required before sending commands)
    read_rtl_tcp_header(&mut stream).await?;

    // Set frequency
    rtl_tcp_command(&mut stream, RTL_TCP_SET_FREQ, payload.frequency as u32).await?;

    Ok(Json(json!({ "status": "success", "frequency": payload.frequency })))
}

pub async fn get_samplerate(
    State(_state): State<Arc<AppState>>,
    AuthUser(_user): AuthUser,
) -> Result<Json<Value>, AppError> {
    Ok(Json(json!({ "samplerate": DEFAULT_SAMPLERATE })))
}

pub async fn start_stream(
    State(_state): State<Arc<AppState>>,
    AuthUser(_user): AuthUser,
) -> Result<Json<Value>, AppError> {
    Ok(Json(json!({ "status": "streaming", "note": "Use WebSocket /sdr/audio endpoint" })))
}

pub async fn stop_stream(
    State(_state): State<Arc<AppState>>,
    AuthUser(_user): AuthUser,
) -> Result<Json<Value>, AppError> {
    Ok(Json(json!({ "status": "stopped" })))
}

// ─── WebSocket Audio Streaming Handler ───

pub async fn sdr_audio_ws(
    ws: WebSocketUpgrade,
    State(state): State<Arc<AppState>>,
) -> impl IntoResponse {
    ws.on_upgrade(move |socket| handle_sdr_audio(socket, state))
}

async fn handle_sdr_audio(mut ws: WebSocket, state: Arc<AppState>) {
    let (host, port) = match get_sdr_address(&state.pool) {
        Ok(addr) => addr,
        Err(e) => {
            let _ = ws.send(Message::Text(json!({"error": e.to_string()}).to_string().into())).await;
            return;
        }
    };

    let addr = format!("{}:{}", host, port);
    let mut tcp_stream = match timeout(CONNECT_TIMEOUT, TcpStream::connect(&addr)).await {
        Ok(Ok(s)) => s,
        Ok(Err(e)) => {
            error!("Failed to connect to rtl_tcp: {}", e);
            let _ = ws.send(Message::Text(json!({"error": format!("Connection failed: {}", e)}).to_string().into())).await;
            return;
        }
        Err(_) => {
            error!("Connection to rtl_tcp timed out");
            let _ = ws.send(Message::Text(json!({"error": "Connection timed out"}).to_string().into())).await;
            return;
        }
    };

    if let Err(e) = tcp_stream.set_nodelay(true) {
        warn!("Failed to set TCP_NODELAY: {}", e);
    }

    info!("Connected to rtl_tcp at {}", addr);

    // Read 12-byte dongle info header
    let (tuner_type, gain_count) = match read_rtl_tcp_header(&mut tcp_stream).await {
        Ok(h) => h,
        Err(e) => {
            error!("Failed to read rtl_tcp header: {}", e);
            let _ = ws.send(Message::Text(json!({"error": format!("Header read failed: {}", e)}).to_string().into())).await;
            return;
        }
    };
    info!("rtl_tcp dongle: tuner_type={}, gain_count={}", tuner_type, gain_count);

    // Configure device
    let sdr_samplerate = DEFAULT_SAMPLERATE;

    if let Err(e) = rtl_tcp_command(&mut tcp_stream, RTL_TCP_SET_SAMPLERATE, sdr_samplerate).await {
        warn!("Failed to set sample rate: {}", e);
    }
    if let Err(e) = rtl_tcp_command(&mut tcp_stream, RTL_TCP_SET_GAIN_MODE, 0).await {
        warn!("Failed to set gain mode: {}", e);
    }
    if let Err(e) = rtl_tcp_command(&mut tcp_stream, RTL_TCP_SET_AGC, 1).await {
        warn!("Failed to enable AGC: {}", e);
    }

    // Send info to frontend
    let _ = ws.send(Message::Text(
        json!({"type": "info", "samplerate": sdr_samplerate, "audio_rate": AUDIO_SAMPLE_RATE}).to_string().into()
    )).await;

    info!("rtl_tcp streaming started (sample rate: {} Hz)", sdr_samplerate);

    // LPF alpha: ~15kHz cutoff, adjusted to actual sample rate
    let lpf_alpha = (2.0 * std::f32::consts::PI * 15000.0 / sdr_samplerate as f32)
        .clamp(0.01, 1.0);

    let mut demod_state = FmDemodState::new();
    let mut first_packet = true;

    // Read buffer for IQ data (16K samples = 32K bytes at uint8 IQ)
    let mut iq_buf = vec![0u8; 32768];

    // Main loop: read IQ data from rtl_tcp and handle WebSocket messages
    loop {
        tokio::select! {
            // Read from WebSocket (client control messages)
            ws_msg = ws.recv() => {
                match ws_msg {
                    Some(Ok(Message::Text(text))) => {
                        if let Ok(parsed) = serde_json::from_str::<Value>(&text) {
                            if parsed.get("type").and_then(|t| t.as_str()) == Some("set_frequency") {
                                if let Some(freq) = parsed.get("value").and_then(|v| v.as_f64()) {
                                    let _ = rtl_tcp_command(&mut tcp_stream, RTL_TCP_SET_FREQ, freq as u32).await;
                                }
                            } else if parsed.get("type").and_then(|t| t.as_str()) == Some("stop") {
                                break;
                            }
                        }
                    }
                    Some(Ok(Message::Close(_))) | None => break,
                    _ => {}
                }
            }
            // Read IQ data from rtl_tcp (continuous stream, no packet headers)
            tcp_result = tcp_stream.read(&mut iq_buf) => {
                let n = match tcp_result {
                    Ok(0) => break,   // Connection closed
                    Ok(n) => n,
                    Err(_) => {
                        warn!("TCP read error from rtl_tcp");
                        break;
                    }
                };

                // Ensure even number of bytes (IQ pairs)
                let n = n & !1;
                if n < 2 {
                    continue;
                }

                // Log first packet for debugging
                if first_packet {
                    first_packet = false;
                    info!("rtl_tcp first data: {} bytes, first 8 bytes: {:?}",
                        n, &iq_buf[..8.min(n)]);
                }

                // Convert uint8 IQ to float32
                let iq_samples = u8_iq_to_float(&iq_buf[..n]);

                // FM demodulate
                let audio = fm_demodulate(&iq_samples, &mut demod_state, lpf_alpha);
                if audio.is_empty() {
                    continue;
                }

                // Downsample to 48kHz and convert to int16
                let pcm_bytes = downsample_to_i16(&audio, sdr_samplerate, AUDIO_SAMPLE_RATE);
                if pcm_bytes.is_empty() {
                    continue;
                }

                // Send as binary WebSocket frame
                if ws.send(Message::Binary(pcm_bytes.into())).await.is_err() {
                    break;
                }
            }
        }
    }

    info!("rtl_tcp audio streaming ended");
}


================================================
FILE: apps/server/src/handler/stat.rs
================================================
use crate::{
    db::{self},
    error::AppError,
    handler::auth::AuthUser,
    utils::entity_map::remap_topics,
    state::AppState,
};
use axum::{extract::State, Json};
use serde_json::json;
use std::sync::Arc;

pub async fn get_stats(
    AuthUser(_user): AuthUser,
    State(state): State<Arc<AppState>>,
) -> Result<Json<serde_json::Value>, AppError> {
    let entities = db::repository::get_all_entities(&state.pool)?;
    let devices = db::repository::get_all_devices(&state.pool)?;

    remap_topics(State(state)).await?;

    Ok(Json(json!({
        "count": {
            "entities": entities.len(),
            "devices": devices.len()
        },
    })))
}


================================================
FILE: apps/server/src/handler/state.rs
================================================
use axum::{
    extract::{Path, State},
    http::StatusCode,
    response::IntoResponse,
    Json,
};
use serde::{Deserialize, Serialize};
use serde_json::json;
use std::sync::Arc;
use tracing::error;

use crate::{
    db::repository::set_entity_state,
    handler::auth::DeviceTokenAuth,
    state::{AppState, Protocol},
};

#[derive(Deserialize)]
pub struct StateRequest {
    pub state: String,
}

#[derive(Serialize)]
pub struct StateResponse {
    status: String,
}

pub async fn set_state(
    State(state): State<Arc<AppState>>,
    Path(topic): Path<String>,
    DeviceTokenAuth { device: auth }: DeviceTokenAuth,
    Json(payload): Json<StateRequest>,
) -> impl IntoResponse {
    let topic_map = state.topic_map.read().await;
    let matched = topic_map
        .iter()
        .find(|m| m.protocol == Protocol::Http && m.topic == topic);

    if let Some(mapping) = matched {
        if let Ok(s) = set_entity_state(&state.pool, &mapping.entity_id, &payload.state, None) {
            let ws_message = json!({
                "type": "change_state",
                "payload": {
                    "entity_id": mapping.entity_id,
                    "state": s.clone()
                }
            });
            if let Ok(payload_str) = serde_json::to_string(&ws_message) {
                if state.broadcast_tx.send(payload_str).is_err() {
                    error!("Failed to broadcast state change.");
                }
            }
        } else {
            error!("Failed to set entity state for '{}'", mapping.entity_id);
        }
    }

    (
        StatusCode::OK,
        Json(StateResponse {
            status: "true".to_string(),
        }),
    )
}


================================================
FILE: apps/server/src/handler/storage.rs
================================================
// src/handler/storage_handler.rs

use axum::{
    extract::{Path, State},
    http::StatusCode,
    response::{IntoResponse, Response},
    Json,
};
use serde::{Deserialize, Serialize};
use std::{
    fs, io,
    path::{Path as StdPath, PathBuf},
    sync::Arc,
};

use crate::db::repository;
use crate::handler::auth::AuthUser;
use crate::state::{AppState, DbPool};

#[derive(Serialize)]
struct ErrorResponse {
    error: String,
}

#[derive(Serialize)]
struct SuccessResponse {
    message: String,
}

#[derive(Deserialize)]
pub struct UpdateContentRequest {
    content: String,
}

#[derive(Deserialize)]
pub struct RenameRequest {
    to: String,
}

#[derive(Serialize, Debug)]
#[serde(rename_all = "camelCase")]
pub struct DirEntry {
    name: String,
    is_dir: bool,
}

#[derive(Serialize)]
pub struct ListResponse {
    path: String,
    entries: Vec<DirEntry>,
}

fn get_storage_root() -> io::Result<PathBuf> {
    let storage_path = std::env::current_dir()?.join("storage");
    fs::create_dir_all(&storage_path)?;
    Ok(storage_path)
}

fn get_safe_path(root: &StdPath, user_path: &str) -> Result<PathBuf, io::Error> {
    let path = user_path.trim_start_matches('/');
    let safe_path = root.join(path);

    if safe_path.ancestors().any(|a| a == StdPath::new("..")) || !safe_path.starts_with(root) {
        return Err(io::Error::new(
            io::ErrorKind::InvalidInput,
            "Path traversal attempt detected",
        ));
    }
    Ok(safe_path)
}

fn map_io_error(e: io::Error, path_str: &str) -> Response {
    let (status, msg) = match e.kind() {
        io::ErrorKind::NotFound => (
            StatusCode::NOT_FOUND,
            format!("Path not found: {}", path_str),
        ),
        io::ErrorKind::PermissionDenied => (
            StatusCode::FORBIDDEN,
            format!("Permission denied for: {}", path_str),
        ),
        io::ErrorKind::InvalidInput => (StatusCode::BAD_REQUEST, e.to_string()),
        _ => (
            StatusCode::INTERNAL_SERVER_ERROR,
            format!("Internal server error for: {}. Details: {}", path_str, e),
        ),
    };
    (status, Json(ErrorResponse { error: msg })).into_response()
}

fn guard_code_service(pool: &DbPool) -> Result<(), Response> {
    match repository::is_code_service_enabled(pool) {
        Ok(true) => Ok(()),
        Ok(false) => Err((
            StatusCode::FORBIDDEN,
            Json(ErrorResponse {
                error: "Code workspace is disabled".to_string(),
            }),
        )
            .into_response()),
        Err(e) => {
            tracing::error!("code service enabled check failed: {e}");
            Err((
                StatusCode::INTERNAL_SERVER_ERROR,
                Json(ErrorResponse {
                    error: "Failed to read configuration".to_string(),
                }),
            )
                .into_response())
        }
    }
}

pub async fn read_handler(
    State(state): State<Arc<AppState>>,
    AuthUser(_user): AuthUser,
    path: Option<Path<String>>,
) -> Response {
    if let Err(resp) = guard_code_service(&state.pool) {
        return resp;
    }
    let path_str = path.map_or(String::new(), |p| p.0);

    let storage_root = match get_storage_root() {
        Ok(r) => r,
        Err(e) => return map_io_error(e, &path_str),
    };
    let safe_path = match get_safe_path(&storage_root, &path_str) {
        Ok(p) => p,
        Err(e) => return map_io_error(e, &path_str),
    };

    if safe_path.is_dir() {
        list_dir_contents(&safe_path, &path_str).await
    } else {
        read_file_content(&safe_path, &path_str).await
    }
}

async fn list_dir_contents(path: &PathBuf, user_path: &str) -> Response {
    match fs::read_dir(path) {
        Ok(entries) => {
            let mut dir_entries = Vec::new();
            for entry in entries {
                if let Ok(entry) = entry {
                    dir_entries.push(DirEntry {
                        name: entry.file_name().to_string_lossy().to_string(),
                        is_dir: entry.path().is_dir(),
                    });
                }
            }
            (
                StatusCode::OK,
                Json(ListResponse {
                    path: user_path.to_string(),
                    entries: dir_entries,
                }),
            )
                .into_response()
        }
        Err(e) => map_io_error(e, user_path),
    }
}

async fn read_file_content(path: &PathBuf, user_path: &str) -> Response {
    match fs::read_to_string(path) {
        Ok(content) => (StatusCode::OK, content).into_response(),
        Err(e) => map_io_error(e, user_path),
    }
}

pub async fn create_or_update_file_handler(
    State(state): State<Arc<AppState>>,
    AuthUser(_user): AuthUser,
    Path(path): Path<String>,
    Json(payload): Json<UpdateContentRequest>,
) -> Response {
    if let Err(resp) = guard_code_service(&state.pool) {
        return resp;
    }
    let storage_root = match get_storage_root() {
        Ok(r) => r,
        Err(e) => return map_io_error(e, &path),
    };
    let safe_path = match get_safe_path(&storage_root, &path) {
        Ok(p) => p,
        Err(e) => return map_io_error(e, &path),
    };

    if let Some(parent) = safe_path.parent() {
        if let Err(e) = fs::create_dir_all(parent) {
            return map_io_error(e, &path);
        }
    }

    match fs::write(&safe_path, payload.content) {
        Ok(_) => {
            let message = if safe_path.exists() {
                "File updated successfully"
            } else {
                "File created successfully"
            };
            (
                StatusCode::OK,
                Json(SuccessResponse {
                    message: message.to_string(),
                }),
            )
                .into_response()
        }
        Err(e) => map_io_error(e, &path),
    }
}

pub async fn create_dir_handler(
    State(state): State<Arc<AppState>>,
    AuthUser(_user): AuthUser,
    Path(path): Path<String>,
) -> Response {
    if let Err(resp) = guard_code_service(&state.pool) {
        return resp;
    }
    let storage_root = match get_storage_root() {
        Ok(r) => r,
        Err(e) => return map_io_error(e, &path),
    };
    let safe_path = match get_safe_path(&storage_root, &path) {
        Ok(p) => p,
        Err(e) => return map_io_error(e, &path),
    };

    match fs::create_dir_all(&safe_path) {
        Ok(_) => (
            StatusCode::CREATED,
            Json(SuccessResponse {
                message: "Directory created successfully".to_string(),
            }),
        )
            .into_response(),
        Err(e) => map_io_error(e, &path),
    }
}

pub async fn delete_handler(
    State(state): State<Arc<AppState>>,
    AuthUser(_user): AuthUser,
    Path(path): Path<String>,
) -> Response {
    if let Err(resp) = guard_code_service(&state.pool) {
        return resp;
    }
    let storage_root = match get_storage_root() {
        Ok(r) => r,
        Err(e) => return map_io_error(e, &path),
    };
    let safe_path = match get_safe_path(&storage_root, &path) {
        Ok(p) => p,
        Err(e) => return map_io_error(e, &path),
    };

    let result = if safe_path.is_dir() {
        fs::remove_dir_all(&safe_path)
    } else {
        fs::remove_file(&safe_path)
    };

    match result {
        Ok(_) => (
            StatusCode::OK,
            Json(SuccessResponse {
                message: "Item deleted successfully".to_string(),
            }),
        )
            .into_response(),
        Err(e) => map_io_error(e, &path),
    }
}

pub async fn rename_handler(
    State(state): State<Arc<AppState>>,
    AuthUser(_user): AuthUser,
    Path(from_path): Path<String>,
    Json(payload): Json<RenameRequest>,
) -> Response {
    if let Err(resp) = guard_code_service(&state.pool) {
        return resp;
    }
    let storage_root = match get_storage_root() {
        Ok(r) => r,
        Err(e) => return map_io_error(e, &from_path),
    };
    let safe_from_path = match get_safe_path(&storage_root, &from_path) {
        Ok(p) => p,
        Err(e) => return map_io_error(e, &from_path),
    };
    let safe_to_path = match get_safe_path(&storage_root, &payload.to) {
        Ok(p) => p,
        Err(e) => return map_io_error(e, &payload.to),
    };

    if !safe_from_path.exists() {
        return map_io_error(
            io::Error::new(io::ErrorKind::NotFound, "Source path does not exist"),
            &from_path,
        );
    }

    match fs::rename(&safe_from_path, &safe_to_path) {
        Ok(_) => (
            StatusCode::OK,
            Json(SuccessResponse {
                message: "Item renamed successfully".to_string(),
            }),
        )
            .into_response(),
        Err(e) => map_io_error(e, &from_path),
    }
}


================================================
FILE: apps/server/src/handler/streams.rs
================================================
use axum::{extract::State, http::StatusCode, response::IntoResponse, Json};
use rand::Rng;
use serde::{Deserialize, Serialize};
use std::sync::Arc;
use tracing::info;

use crate::{
    db::{self, models::NewStream},
    handler::auth::DeviceTokenAuth,
    state::{AppState, MediaType, Protocol, StreamDescriptor},
};

#[derive(Deserialize)]
pub struct RegisterStreamRequest {
    pub topic: String,
    pub media_type: MediaType,
}

#[derive(Serialize)]
pub struct RegisterStreamResponse {
    ssrc: u32,
    rtp_port: u16,
}

pub async fn register_stream(
    State(state): State<Arc<AppState>>,
    DeviceTokenAuth { device: auth }: DeviceTokenAuth,
    Json(payload): Json<RegisterStreamRequest>,
) -> impl IntoResponse {
    let ssrc = rand::rngs::ThreadRng::default().random_range(0..=i32::MAX) as u32;

    let media_type_str = match payload.media_type {
        MediaType::Audio => "audio",
        MediaType::Video => "video",
    };

    let new_stream_db = NewStream {
        ssrc: ssrc as i32,
        topic: &payload.topic,
        device_id: &auth.device_id,
        media_type: media_type_str,
    };

    let _db_stream = match db::repository::streams::upsert_stream(&state.pool, &new_stream_db) {
        Ok(stream) => stream,
        Err(e) => {
            tracing::error!("Failed to upsert stream to database: {}", e);
            return (StatusCode::INTERNAL_SERVER_ERROR).into_response();
        }
    };

    let descriptor = StreamDescriptor {
        id: ssrc,
        topic: payload.topic.clone(),
        user_id: auth.device_id,
        media_type: payload.media_type,
        protocol: Protocol::Udp,
    };

    state.streams.register(descriptor);

    info!(
        "[API] SSRC {} for topic '{}' inserted. Manager size: {}",
        ssrc,
        payload.topic,
        state.streams.len()
    );

    info!(
        "New stream registered. Topic: '{}', SSRC: {}, Port: 5004",
        payload.topic, ssrc
    );

    let configs = match db::repository::get_all_system_configs(&state.pool) {
        Ok(configs) => configs,
        Err(e) => {
            tracing::error!("Failed to get system configs: {}", e);
            return (StatusCode::INTERNAL_SERVER_ERROR).into_response();
        }
    };

    let rtp_port = configs
        .iter()
        .find(|c| c.key == "rtp_broker_port")
        .and_then(|c| c.value.parse::<u16>().ok())
        .unwrap_or(5004);

    (
        StatusCode::OK,
        Json(RegisterStreamResponse { ssrc, rtp_port }),
    )
        .into_response()
}


================================================
FILE: apps/server/src/handler/tunnel.rs
================================================
use std::sync::Arc;

use axum::{extract::State, http::StatusCode, Json};
use serde::{Deserialize, Serialize};

use crate::{state::AppState, tunnel_control::TunnelManager};

#[derive(Deserialize)]
pub struct StartRequest {
    pub server: String,
    pub target: String,
    pub access_token: Option<String>,
}

#[derive(Serialize)]
pub struct StartResponse {
    pub session_id: String,
}

#[derive(Serialize)]
pub struct StatusResponse {
    pub active: bool,
    pub session_id: Option<String>,
    pub server: Option<String>,
    pub target: Option<String>,
}

pub async fn start_tunnel(
    State(state): State<Arc<AppState>>,
    Json(payload): Json<StartRequest>,
) -> Result<Json<StartResponse>, StatusCode> {
    let session_id = state
        .tunnel_manager
        .start(payload.server, payload.target, payload.access_token)
        .await
        .map_err(|_| StatusCode::BAD_GATEWAY)?;
    Ok(Json(StartResponse { session_id }))
}

pub async fn stop_tunnel(State(state): State<Arc<AppState>>) -> Result<StatusCode, StatusCode> {
    state
        .tunnel_manager
        .stop()
        .await
        .map_err(|_| StatusCode::BAD_GATEWAY)?;
    Ok(StatusCode::NO_CONTENT)
}

pub async fn status_tunnel(State(state): State<Arc<AppState>>) -> Json<StatusResponse> {
    let status = state.tunnel_manager.status().await;
    Json(StatusResponse {
        active: status.active,
        session_id: status.session_id,
        server: status.server,
        target: status.target,
    })
}


================================================
FILE: apps/server/src/handler/users.rs
================================================
use crate::utils::hash::hash_password;
use crate::{
    db::{
        self,
        models::{NewUser, Role, UpdateUser},
        repository,
    },
    error::AppError,
    handler::auth::AuthUser,
    state::AppState,
};

use axum::{
    extract::{Path, State},
    http::StatusCode,
    Json,
};
use serde::Deserialize;
use std::sync::Arc;

#[derive(Deserialize)]
pub struct CreateUserPayload {
    pub username: String,
    pub email: String,
    pub password: String,
}

pub async fn get_users_list(
    State(state): State<Arc<AppState>>,
    AuthUser(_user): AuthUser,
) -> Result<Json<Vec<crate::db::models::UserWithRoles>>, AppError> {
    let users = db::repository::get_all_users(&state.pool)?;
    Ok(Json(users))
}

pub async fn create_user(
    State(state): State<Arc<AppState>>,
    Json(payload): Json<CreateUserPayload>,
) -> Result<(StatusCode, Json<crate::db::models::User>), AppError> {
    let hashed_password = hash_password(&payload.password)?;

    let new_user = NewUser {
        username: &payload.username,
        email: &payload.email,
        password_hash: &hashed_password,
    };

    let user = repository::create_user(&state.pool, new_user)?;

    Ok((StatusCode::CREATED, Json(user)))
}

pub async fn get_user(
    State(state): State<Arc<AppState>>,
    AuthUser(_user): AuthUser,
    Path(user_id): Path<i32>,
) -> Result<Json<crate::db::models::User>, AppError> {
    let user = repository::get_user_by_id(&state.pool, user_id)?;
    Ok(Json(user))
}

#[derive(Deserialize, Default)]
pub struct UpdateUserPayload {
    pub username: Option<String>,
    pub email: Option<String>,
    pub password: Option<String>,
}

pub async fn update_user(
    State(state): State<Arc<AppState>>,
    AuthUser(_user): AuthUser,
    Path(user_id): Path<i32>,
    Json(payload): Json<UpdateUserPayload>,
) -> Result<Json<crate::db::models::User>, AppError> {
    let password_hash = if let Some(password) = payload.password {
        Some(hash_password(&password)?)
    } else {
        None
    };

    let user_data = UpdateUser {
        username: payload.username,
        email: payload.email,
        password_hash,
    };

    let updated_user = repository::update_user(&state.pool, user_id, &user_data)?;
    Ok(Json(updated_user))
}

pub async fn delete_user(
    State(state): State<Arc<AppState>>,
    AuthUser(_user): AuthUser,
    Path(user_id): Path<i32>,
) -> Result<StatusCode, AppError> {
    repository::delete_user(&state.pool, user_id)?;
    Ok(StatusCode::NO_CONTENT)
}

#[derive(Deserialize)]
pub struct RoleAssignmentPayload {
    pub role_id: i32,
}

pub async fn assign_role_to_user(
    State(state): State<Arc<AppState>>,
    AuthUser(_user): AuthUser,
    Path(user_id): Path<i32>,
    Json(payload): Json<RoleAssignmentPayload>,
) -> Result<StatusCode, AppError> {
    db::repository::rbac::assign_role_to_user(&state.pool, user_id, payload.role_id)?;
    Ok(StatusCode::CREATED)
}

pub async fn remove_role_from_user(
    State(state): State<Arc<AppState>>,
    AuthUser(_user): AuthUser,
    Path((user_id, role_id)): Path<(i32, i32)>,
) -> Result<StatusCode, AppError> {
    db::repository::rbac::remove_role_from_user(&state.pool, user_id, role_id)?;
    Ok(StatusCode::NO_CONTENT)
}

pub async fn get_user_roles(
    State(state): State<Arc<AppState>>,
    AuthUser(_user): AuthUser,
    Path(user_id): Path<i32>,
) -> Result<Json<Vec<Role>>, AppError> {
    let roles = db::repository::rbac::get_user_roles(&state.pool, user_id)?;
    Ok(Json(roles))
}


================================================
FILE: apps/server/src/handler/ws/dashboard_component_event.rs
================================================
//! WebSocket `dashboard_component_event`: dashboard widgets → `dashboard_ui` broadcast.

use crate::state::{AppState, DashboardUiEvent};
use serde::Deserialize;
use serde_json::Value;
use std::collections::HashMap;
use std::time::{Duration, Instant};
use tracing::{info, warn};

const SERVER_MIN_COOLDOWN_MS: u64 = 100;
const MAX_LISTENER_ID_LEN: usize = 128;

#[derive(Debug, Deserialize)]
struct DashboardComponentEventV2 {
    pub event_version: u32,
    pub event_id: String,
    pub listener_id: String,
    #[serde(default)]
    pub occurred_at: Option<String>,
    #[serde(default)]
    pub dashboard_id: Option<String>,
    #[serde(default)]
    pub group_id: Option<String>,
    #[serde(default)]
    pub item_id: Option<String>,
    pub component_type: String,
    pub action: String,
    #[serde(default)]
    pub value: Option<Value>,
    pub source_session_id: String,
    #[serde(default)]
    pub cooldown_ms: Option<u64>,
}

fn rate_limit_key(ev: &DashboardComponentEventV2) -> String {
    format!(
        "{}|{}|{}|{}",
        ev.source_session_id,
        ev.listener_id,
        ev.item_id.as_deref().unwrap_or("-"),
        ev.action
    )
}

fn cooldown_ms(ev: &DashboardComponentEventV2) -> u64 {
    SERVER_MIN_COOLDOWN_MS.max(ev.cooldown_ms.unwrap_or(320))
}

fn validate_listener_id(id: &str) -> bool {
    let t = id.trim();
    if t.is_empty() || t.len() > MAX_LISTENER_ID_LEN {
        return false;
    }
    t.chars()
        .all(|c| c.is_ascii_alphanumeric() || c == '_' || c == '-')
}

/// Validates and publishes to `AppState::dashboard_ui_tx`. Updates `rate` when accepted.
pub(crate) fn apply_dashboard_component_event(
    raw: serde_json::Value,
    state: &AppState,
    rate: &mut HashMap<String, Instant>,
) {
    let ev: DashboardComponentEventV2 = match serde_json::from_value(raw) {
        Ok(v) => v,
        Err(e) => {
            warn!("dashboard_component_event: invalid payload: {}", e);
            return;
        }
    };

    if ev.event_version != 2 {
        warn!(
            "dashboard_component_event: unsupported event_version {} (need 2)",
            ev.event_version
        );
        return;
    }

    if ev.source_session_id.trim().is_empty() {
        warn!("dashboard_component_event: missing source_session_id");
        return;
    }

    let lid = ev.listener_id.trim();
    if !validate_listener_id(lid) {
        warn!(
            "dashboard_component_event: invalid listener_id (empty, too long, or bad chars)"
        );
        return;
    }

    let key = rate_limit_key(&ev);
    let cooldown = Duration::from_millis(cooldown_ms(&ev));
    let now = Instant::now();
    if let Some(last) = rate.get(&key) {
        if now.duration_since(*last) < cooldown {
            info!(
                "dashboard_component_event: rate limited event_id={}",
                ev.event_id
            );
            return;
        }
    }
    rate.insert(key, now);

    let out = DashboardUiEvent {
        listener_id: lid.to_string(),
        event_id: ev.event_id.clone(),
        occurred_at: ev.occurred_at.clone(),
        dashboard_id: ev.dashboard_id.clone(),
        group_id: ev.group_id.clone(),
        item_id: ev.item_id.clone(),
        component_type: ev.component_type.clone(),
        action: ev.action.clone(),
        value: ev.value.clone(),
        source_session_id: ev.source_session_id.clone(),
    };

    info!(
        event_id = %out.event_id,
        listener_id = %out.listener_id,
        component = %out.component_type,
        action = %out.action,
        "dashboard_component_event published",
    );

    if state.dashboard_ui_tx.send(out).is_err() {
        warn!("dashboard_component_event: no subscribers (dashboard_ui_tx closed)");
    }
}

#[cfg(test)]
mod tests {
    use super::*;

    #[test]
    fn deserializes_v2() {
        let json = serde_json::json!({
            "event_version": 2,
            "event_id": "e1",
            "listener_id": "my-btn",
            "dashboard_id": "d1",
            "group_id": "g1",
            "item_id": "i1",
            "component_type": "button",
            "action": "click",
            "source_session_id": "sess",
        });
        let ev: DashboardComponentEventV2 = serde_json::from_value(json).unwrap();
        assert_eq!(ev.listener_id, "my-btn");
        assert_eq!(ev.event_version, 2);
    }

    #[test]
    fn listener_id_validation() {
        assert!(validate_listener_id("ok-1"));
        assert!(!validate_listener_id(""));
        assert!(!validate_listener_id("bad id"));
    }
}


================================================
FILE: apps/server/src/handler/ws/handlers.rs
================================================
use anyhow::{anyhow, Result};
use axum::extract::ws::{Message, WebSocket};
use futures_util::{future::join_all, stream::SplitSink, FutureExt, SinkExt, StreamExt};
use serde::{Deserialize, Serialize};
use std::{collections::HashMap, sync::Arc, time::Instant};
use sysinfo::System;
use tokio::sync::{mpsc, oneshot, Mutex};
use tracing::{error, info, warn};
use webrtc::{
    api::media_engine::{MIME_TYPE_H264, MIME_TYPE_OPUS},
    ice_transport::{
        ice_candidate::RTCIceCandidateInit,
        ice_connection_state::RTCIceConnectionState,
    },
    peer_connection::{
        offer_answer_options::RTCOfferOptions,
        sdp::session_description::RTCSessionDescription,
        RTCPeerConnection,
    },
    rtp_transceiver::rtp_codec::RTCRtpCodecCapability,
    track::track_local::{
        track_local_static_rtp::TrackLocalStaticRTP,
        TrackLocal, TrackLocalWriter,
    },
};

use crate::handler::ws::WsMessageOut;

use crate::{
    db,
    flow::{
        manager_state::FlowManagerCommand,
        types::FlowRunContext,
    },
    handler::ws::dashboard_component_event,
    handler::ws::webrtc::create_peer_connection,
    state::{AppState, MediaType},
};

#[derive(Deserialize)]
struct WsMessageIn {
    #[serde(rename = "type")]
    msg_type: String,
    payload: serde_json::Value,
}

#[derive(Serialize)]
struct ServerStats {
    cpu_usage: f32,
    memory_usage: f32,
}

#[derive(Serialize)]
struct StreamState {
    topic: String,
    is_online: bool,
}

#[derive(Deserialize)]
struct SubscribeStreamPayload {
    topic: String,
}

#[derive(Deserialize)]
struct FlowPayload {
    flow_id: i32,
}

#[derive(Serialize)]
struct FlowStatus {
    id: i32,
    name: String,
    is_running: bool,
}

enum ActorCommand {
    SetRemoteOffer {
        offer: RTCSessionDescription,
        responder: oneshot::Sender<Result<RTCSessionDescription>>,
    },
    SetRemoteAnswer {
        answer: RTCSessionDescription,
    },
    AddIceCandidate {
        candidate: RTCIceCandidateInit,
    },
    HealthCheck {
        payload: serde_json::Value,
    },
    ComputeFlow {
        payload: serde_json::Value,
    },
    GetAllStreamState {
        payload: serde_json::Value,
    },
    StopFlow {
        flow_id: i32,
    },
    GetAllFlows {
        responder: oneshot::Sender<Result<Vec<FlowStatus>>>,
    },
    SubscribeToTopic {
        topic: String,
    },
    Ping {
        payload: serde_json::Value,
    },
    GetServer {
        responder: oneshot::Sender<Result<ServerStats>>,
    },
    /// Dynamic dashboard widget → flow (see `dashboard_component_event` WS type).
    DashboardComponentEvent {
        payload: serde_json::Value,
    },
    Hangup,
}

struct WSActor {
    pc: Arc<RTCPeerConnection>,
    ws_sender: Arc<Mutex<SplitSink<WebSocket, Message>>>,
    receiver: mpsc::Receiver<ActorCommand>,
    state: Arc<AppState>,
    active_tracks: HashMap<String, Arc<dyn TrackLocal + Send + Sync>>,
    /// Per-connection rate limit for `dashboard_component_event` keys.
    dashboard_event_rate: HashMap<String, Instant>,
}

impl WSActor {
    async fn run(mut self) {
        info!("WebRTC Actor started.");
        while let Some(cmd) = self.receiver.recv().await {
            match cmd {
                ActorCommand::SetRemoteOffer { offer, responder } => {
                    let pc_clone = Arc::clone(&self.pc);
                    let res = Self::handle_offer(pc_clone, offer).await;
                    if responder.send(res).is_err() {
                        error!("Failed to send answer back to handler.");
                    }
                }
                ActorCommand::SetRemoteAnswer { answer } => {
                    if let Err(e) = self.pc.set_remote_description(answer).await {
                        error!("Failed to set remote answer for renegotiation: {}", e);
                    } else {
                        info!("Renegotiation successful: Remote answer set.");
                    }
                }
                ActorCommand::AddIceCandidate { candidate } => {
                    info!("Adding ICE candidate to PC: {}", candidate.candidate);
                    if let Err(e) = self.pc.add_ice_candidate(candidate).await {
                        error!("Actor failed to add ICE candidate: {}", e);
                    }
                }
                ActorCommand::HealthCheck { payload } => {
                    self.handle_health_check(payload).await;
                }
                ActorCommand::ComputeFlow { payload } => {
                    self.handle_compute_flow(payload).await;
                }
                ActorCommand::DashboardComponentEvent { payload } => {
                    dashboard_component_event::apply_dashboard_component_event(
                        payload,
                        &self.state,
                        &mut self.dashboard_event_rate,
                    );
                }
                ActorCommand::StopFlow { flow_id } => {
                    self.handle_stop_flow(flow_id).await;
                }
                ActorCommand::GetAllStreamState { payload } => {
                    self.handle_get_all_stream_state(payload).await;
                }
                ActorCommand::GetAllFlows { responder } => {
                    self.handle_get_all_flows(responder).await;
                }
                ActorCommand::SubscribeToTopic { topic } => {
                    self.handle_subscribe(topic).await;
                }
                ActorCommand::Ping { payload } => {
                    self.handle_ping(payload).await;
                }
                ActorCommand::GetServer { responder } => {
                    let res = self.handle_get_server().await;
                    if responder.send(res).is_err() {
                        error!("Failed to send server stats back to handler.");
                    }
                }
                ActorCommand::Hangup => {
                    info!("Received Hangup. Resetting PeerConnection.");
                    if let Err(e) = self.pc.close().await {
                        error!("Failed to close peer connection: {}", e);
                    }
                    self.active_tracks.clear();

                    match create_peer_connection(Arc::clone(&self.ws_sender), &self.state.pool).await {
                        Ok(new_pc) => {
                            self.pc = new_pc;
                            info!("PeerConnection has been successfully reset.");
                        }
                        Err(e) => {
                            error!("Failed to create a new peer connection after hangup: {}", e);
                            break;
                        }
                    }
                }
            }
        }
        info!("WebRTC Actor finished.");
    }

    async fn handle_get_all_flows(&self, responder: oneshot::Sender<Result<Vec<FlowStatus>>>) {
        let (manager_responder_tx, manager_responder_rx) = tokio::sync::oneshot::channel();
        let cmd = FlowManagerCommand::GetAllFlows {
            responder: manager_responder_tx,
            pool: self.state.pool.clone(),
        };

        if self.state.flow_manager_tx.send(cmd).await.is_err() {
            let _ = responder.send(Err(anyhow!("Failed to communicate with FlowManager")));
            return;
        }

        if let Ok(status_tuples) = manager_responder_rx.await {
            let all_db_flows = db::repository::get_all_flows(&self.state.pool).unwrap_or_default();
            let status_map: HashMap<i32, bool> = status_tuples.into_iter().collect();

            let result: Vec<FlowStatus> = all_db_flows
                .into_iter()
                .map(|f| FlowStatus {
                    id: f.id,
                    name: f.name,
                    is_running: *status_map.get(&f.id).unwrap_or(&false),
                })
                .collect();

            let _ = responder.send(Ok(result));
        } else {
            let _ = responder.send(Err(anyhow!("Failed to receive response from FlowManager")));
        }
    }

    async fn handle_get_server(&self) -> Result<ServerStats> {
        tokio::task::spawn_blocking(|| {
            let mut sys = System::new();
            sys.refresh_cpu_all();
            let cpu_usage =
                sys.cpus().iter().map(|cpu| cpu.cpu_usage()).sum::<f32>() / sys.cpus().len() as f32;
            sys.refresh_memory();
            let memory_usage = (sys.used_memory() as f32 / sys.total_memory() as f32) * 100.0;
            Ok(ServerStats {
                cpu_usage,
                memory_usage,
            })
        })
        .await?
    }

    async fn handle_get_all_stream_state(&self, payload: serde_json::Value) {
        let stream_futures = self.state.streams.iter().map(|entry| async move {
            let stream = entry.value();
            StreamState {
                topic: stream.descriptor.topic.clone(),
                is_online: *stream.is_online.read().unwrap(),
            }
        });

        let collected_streams: Vec<StreamState> = join_all(stream_futures).await;

        let ws_message = WsMessageOut {
            msg_type: "stream_state",
            payload: collected_streams,
        };

        if let Ok(payload_str) = serde_json::to_string(&ws_message) {
            if self
                .ws_sender
                .lock()
                .await
                .send(Message::Text(payload_str))
                .await
                .is_err()
            {
                error!("Failed to send health check response.");
            }
        }
    }

    async fn handle_offer(
        pc: Arc<RTCPeerConnection>,
        offer: RTCSessionDescription,
    ) -> Result<RTCSessionDescription> {
        info!("[handle_offer] Setting remote description...");
        pc.set_remote_description(offer).await?;
        info!("[handle_offer] Creating answer...");
        let answer = pc.create_answer(None).await?;
        info!("[handle_offer] Setting local description (triggers ICE gathering)...");
        pc.set_local_description(answer).await?;
        info!("[handle_offer] Local description set successfully.");
        pc.local_description()
            .await
            .ok_or_else(|| anyhow!("Failed to get local description"))
    }

    async fn handle_health_check(&self, payload: serde_json::Value) {
        #[derive(Serialize)]
        struct HealthStatus<'a> {
            status: &'a str,
            echo: serde_json::Value,
        }
        let response_payload = HealthStatus {
            status: "ok",
            echo: payload,
        };
        let ws_message = WsMessageOut {
            msg_type: "health_check_response",
            payload: response_payload,
        };
        if let Ok(payload_str) = serde_json::to_string(&ws_message) {
            if self
                .ws_sender
                .lock()
                .await
                .send(Message::Text(payload_str))
                .await
                .is_err()
            {
                error!("Failed to send health check response.");
            }
        }
    }

    async fn handle_ping(&self, payload: serde_json::Value) {
        let ws_message = WsMessageOut {
            msg_type: "pong",
            payload,
        };
        if let Ok(payload_str) = serde_json::to_string(&ws_message) {
            if self
                .ws_sender
                .lock()
                .await
                .send(Message::Text(payload_str))
                .await
                .is_err()
            {
                error!("Failed to send pong response.");
            }
        }
    }

    async fn handle_compute_flow(&self, payload: serde_json::Value) {
        let Some(value) = payload.get("flow_id") else {
            error!("Missing flow_id in payload: {:?}", payload);
            return;
        };

        if !value.is_number() {
            error!("Invalid flow_id in payload: {:?}", payload);
            return;
        }

        let flow_id: i32 = value.as_i64().unwrap_or_default() as i32;

        let versions =
            db::repository::get_versions_for_flow(&self.state.pool, flow_id as i32).expect("msg");
        if versions.is_empty() {
            return;
        }

        let latest_version = versions[0].clone();
        let graph = match serde_json::from_str(&latest_version.graph_json) {
            Ok(g) => g,
            Err(e) => {
                error!("Failed to parse graph JSON for flow_id {}: {}", flow_id, e);
                return;
            }
        };

        println!("Start Flow");

        let run_context = payload
            .get("run_context")
            .and_then(|rc| rc.get("session_id"))
            .and_then(|v| v.as_str())
            .filter(|s| !s.is_empty())
            .map(|s| FlowRunContext {
                session_id: s.to_string(),
            });

        let cmd = FlowManagerCommand::StartFlow {
            flow_id,
            graph,
            broadcast_tx: self.state.broadcast_tx.clone(),
            run_context,
        };

        if self.state.flow_manager_tx.send(cmd).await.is_err() {
            error!("Failed to send StartFlow command to FlowManager.");
        }
    }

    async fn handle_stop_flow(&self, flow_id: i32) {
        let cmd = FlowManagerCommand::StopFlow { flow_id };
        if self.state.flow_manager_tx.send(cmd).await.is_err() {
            error!("Failed to send StopFlow command to FlowManager.");
        }
    }

    fn extract_ice_credentials(sdp: &str) -> Option<(String, String)> {
        let mut ufrag = None;
        let mut pwd = None;
        for line in sdp.lines() {
            if line.starts_with("a=ice-ufrag:") {
                ufrag = Some(line["a=ice-ufrag:".len()..].to_string());
            } else if line.starts_with("a=ice-pwd:") {
                pwd = Some(line["a=ice-pwd:".len()..].to_string());
            }
            if ufrag.is_some() && pwd.is_some() {
                break;
            }
        }
        ufrag.zip(pwd)
    }

    fn patch_ice_credentials(sdp: &str, ufrag: &str, pwd: &str) -> String {
        let mut result = String::with_capacity(sdp.len());
        for line in sdp.lines() {
            if line.starts_with("a=ice-ufrag:") {
                result.push_str(&format!("a=ice-ufrag:{}", ufrag));
            } else if line.starts_with("a=ice-pwd:") {
                result.push_str(&format!("a=ice-pwd:{}", pwd));
            } else {
                result.push_str(line);
            }
            result.push_str("\r\n");
        }
        result
    }

    /// H.264 RTP 패킷이 키프레임(IDR)을 포함하는지 감지.
    /// NAL 유닛 타입을 검사: Single NAL(5=IDR, 7=SPS), STAP-A(24), FU-A(28).
    fn is_h264_keyframe(pkt: &webrtc::rtp::packet::Packet) -> bool {
        if pkt.payload.is_empty() {
            return false;
        }
        let nal_type = pkt.payload[0] & 0x1F;
        match nal_type {
            5 | 7 => true, // IDR slice or SPS
            24 => {
                // STAP-A: 내부 NAL 중 IDR(5) 또는 SPS(7) 포함 여부
                let mut offset = 1;
                while offset + 2 < pkt.payload.len() {
                    let nalu_size =
                        ((pkt.payload[offset] as usize) << 8) | (pkt.payload[offset + 1] as usize);
                    offset += 2;
                    if offset < pkt.payload.len() {
                        let inner_nal_type = pkt.payload[offset] & 0x1F;
                        if inner_nal_type == 5 || inner_nal_type == 7 {
                            return true;
                        }
                    }
                    offset += nalu_size;
                }
                false
            }
            28 => {
                // FU-A: fragmented NAL — start bit + IDR type
                if pkt.payload.len() > 1 {
                    let fu_header = pkt.payload[1];
                    let start_bit = fu_header & 0x80 != 0;
                    let fu_nal_type = fu_header & 0x1F;
                    start_bit && (fu_nal_type == 5 || fu_nal_type == 7)
                } else {
                    false
                }
            }
            _ => false,
        }
    }

    async fn handle_subscribe(&mut self, topic: String) {
        let mut subscribed = false;

        if self.active_tracks.contains_key(&topic) {
            warn!("Topic '{}' is already subscribed.", topic);
            return;
        }

        let audio_stream_info = self
            .state
            .streams
            .iter()
            .find(|entry| {
                entry.value().descriptor.topic == topic
                    && entry.value().descriptor.media_type == MediaType::Audio
            })
            .map(|entry| (*entry.key(), entry.value().clone()));

        let video_stream_info = self
            .state
            .streams
            .iter()
            .find(|entry| {
                entry.value().descriptor.topic == topic
                    && entry.value().descriptor.media_type == MediaType::Video
            })
            .map(|entry| (*entry.key(), entry.value().clone()));

        if let Some((ssrc, info)) = audio_stream_info {
            subscribed = true;
            info!(
                "[Audio] Subscribing to topic '{}' with SSRC {}",
                topic, ssrc
            );

            let new_audio_track = Arc::new(TrackLocalStaticRTP::new(
                RTCRtpCodecCapability {
                    mime_type: MIME_TYPE_OPUS.to_owned(),
                    ..Default::default()
                },
                format!("audio-{}", &topic),
                format!("webrtc-stream-audio-{}", &topic),
            ));

            let rtp_sender = self
                .pc
                .add_track(Arc::clone(&new_audio_track) as Arc<dyn TrackLocal + Send + Sync>)
                .await
                .unwrap();

            self.active_tracks.insert(
                topic.clone(),
                new_audio_track.clone() as Arc<dyn TrackLocal + Send + Sync>,
            );

            tokio::spawn(async move {
                let mut rtcp_buf = vec![0u8; 1500];
                while rtp_sender.read(&mut rtcp_buf).await.is_ok() {}
            });

            let mut rx = info.packet_tx.subscribe();

            let audio_sender = self.pc
                .get_senders()
                .await
                .into_iter()
                .find(|s| {
                    if let Some(track) = s.track().now_or_never().and_then(|t| t) {
                        track.id() == new_audio_track.id()
                    } else {
                        false
                    }
                })
                .expect("Audio sender not found for the specific track");

            let parameters = audio_sender.get_parameters().await;
            let negotiated_pt = parameters
                .rtp_parameters
                .codecs
                .get(0)
                .unwrap()
                .payload_type;
            let negotiated_ssrc = parameters.encodings.get(0).unwrap().ssrc;

            info!(
                "[Audio] RTP forwarding ready. Negotiated PT: {}, SSRC: {}",
                negotiated_pt, negotiated_ssrc
            );

            tokio::spawn(async move {
                let mut lag_count: u64 = 0;
                loop {
                    match rx.recv().await {
                        Ok(mut pkt) => {
                            pkt.header.payload_type = negotiated_pt;
                            pkt.header.ssrc = negotiated_ssrc;

                            if let Err(e) = new_audio_track.write_rtp(&pkt).await {
                                warn!(
                                    "[Audio] write_rtp failed for SSRC {}: {}. Stopping.",
                                    ssrc, e
                                );
                                break;
                            }
                        }
                        Err(tokio::sync::broadcast::error::RecvError::Lagged(n)) => {
                            lag_count += n;
                            warn!(
                                "[Audio] Broadcast receiver lagged {} packets (total: {}) for SSRC {}",
                                n, lag_count, ssrc
                            );
                            continue;
                        }
                        Err(tokio::sync::broadcast::error::RecvError::Closed) => {
                            info!("[Audio] Broadcast channel closed for SSRC {}", ssrc);
                            break;
                        }
                    }
                }
                info!("[Audio] RTP packet forwarding stopped for SSRC: {} (total lagged: {})", ssrc, lag_count);
            });
        }

        if let Some((ssrc, info)) = video_stream_info {
            subscribed = true;
            info!(
                "[Video-UDP] Subscribing to topic '{}' with SSRC {}",
                topic, ssrc
            );

            let new_udp_video_track = Arc::new(TrackLocalStaticRTP::new(
                RTCRtpCodecCapability {
                    mime_type: MIME_TYPE_H264.to_owned(),
                    ..Default::default()
                },
                format!("video-udp-{}", &topic),
                format!("webrtc-stream-udp-{}", &topic),
            ));

            let rtp_sender = self
                .pc
                .add_track(Arc::clone(&new_udp_video_track) as Arc<dyn TrackLocal + Send + Sync>)
                .await
                .unwrap();

            self.active_tracks.insert(
                topic.clone(),
                new_udp_video_track.clone() as Arc<dyn TrackLocal + Send + Sync>,
            );

            tokio::spawn(async move {
                let mut rtcp_buf = vec![0u8; 1500];
                while rtp_sender.read(&mut rtcp_buf).await.is_ok() {}
            });

            let mut rx = info.packet_tx.subscribe();

            let video_sender = self.pc
                .get_senders()
                .await
                .into_iter()
                .find(|s| {
                    if let Some(track) = s.track().now_or_never().and_then(|t| t) {
                        track.id() == new_udp_video_track.id()
                    } else {
                        false
                    }
                })
                .expect("Video sender not found for the specific UDP track");

            let parameters = video_sender.get_parameters().await;
            let negotiated_pt = parameters
                .rtp_parameters
                .codecs
                .get(0)
                .unwrap()
                .payload_type;
            let negotiated_ssrc = parameters.encodings.get(0).unwrap().ssrc;

            info!(
                "[Video-UDP] RTP forwarding ready. Negotiated PT: {}, SSRC: {}",
                negotiated_pt, negotiated_ssrc
            );

            tokio::spawn(async move {
                let mut lag_count: u64 = 0;
                // 새 구독자는 키프레임(IDR)을 받을 때까지 대기
                let mut waiting_for_keyframe = true;
                info!("[Video-UDP] Waiting for keyframe before forwarding SSRC {}", ssrc);
                loop {
                    match rx.recv().await {
                        Ok(mut pkt) => {
                            if waiting_for_keyframe {
                                if WSActor::is_h264_keyframe(&pkt) {
                                    waiting_for_keyframe = false;
                                    info!("[Video-UDP] Keyframe detected, starting forwarding for SSRC {}", ssrc);
                                } else {
                                    continue; // 키프레임이 아니면 스킵
                                }
                            }

                            pkt.header.payload_type = negotiated_pt;
                            pkt.header.ssrc = negotiated_ssrc;

                            if let Err(e) = new_udp_video_track.write_rtp(&pkt).await {
                                warn!(
                                    "[Video-UDP] write_rtp failed for SSRC {}: {}. Stopping.",
                                    ssrc, e
                                );
                                break;
                            }
                        }
                        Err(tokio::sync::broadcast::error::RecvError::Lagged(n)) => {
                            lag_count += n;
                            waiting_for_keyframe = true; // 패킷 드롭 후 키프레임 대기
                            warn!(
                                "[Video-UDP] Broadcast receiver lagged {} packets (total: {}) for SSRC {}, waiting for keyframe",
                                n, lag_count, ssrc
                            );
                            continue;
                        }
                        Err(tokio::sync::broadcast::error::RecvError::Closed) => {
                            info!("[Video-UDP] Broadcast channel closed for SSRC {}", ssrc);
                            break;
                        }
                    }
                }
                info!(
                    "[Video-UDP] RTP packet forwarding stopped for SSRC: {} (total lagged: {})",
                    ssrc, lag_count
                );
            });
        }

        if subscribed {
            let ice_state = self.pc.ice_connection_state();
            let ice_restart = matches!(
                ice_state,
                RTCIceConnectionState::Failed | RTCIceConnectionState::Disconnected
            );
            let offer_options = if ice_restart {
                info!("ICE is {:?}, triggering ICE restart in renegotiation offer", ice_state);
                Some(RTCOfferOptions {
                    ice_restart: true,
                    ..Default::default()
                })
            } else {
                None
            };

            // webrtc-rs 버그 워크어라운드: set_local_description()이 ICE agent의 local credentials를
            // 업데이트하지 않으므로, ICE restart가 아닌 renegotiation에서는 기존 credentials를 보존해야 함.
            // ICE restart 시에는 ICE agent가 새 credentials로 restart되므로 패칭하지 않음.
            let current_creds = if !ice_restart {
                self.pc.local_description().await
                    .and_then(|desc| Self::extract_ice_credentials(&desc.sdp))
            } else {
                None
            };

            info!("Track added. Starting renegotiation (ice_restart={})...", ice_restart);
            match self.pc.create_offer(offer_options).await {
                Ok(offer) => {
                    let final_offer = if let Some((ref ufrag, ref pwd)) = current_creds {
                        let patched_sdp = Self::patch_ice_credentials(&offer.sdp, ufrag, pwd);
                        info!("Patched renegotiation offer with existing ICE credentials (ufrag={})", ufrag);
                        RTCSessionDescription::offer(patched_sdp).unwrap()
                    } else {
                        offer
                    };

                    if self.pc.set_local_description(final_offer).await.is_ok() {
                        if let Some(local_desc) = self.pc.local_description().await {
                            let send_desc = if let Some((ref ufrag, ref pwd)) = current_creds {
                                let patched_sdp = Self::patch_ice_credentials(&local_desc.sdp, ufrag, pwd);
                                RTCSessionDescription::offer(patched_sdp).unwrap()
                            } else {
                                local_desc
                            };
                            let msg = WsMessageOut {
                                msg_type: "offer",
                                payload: send_desc,
                            };
                            if let Ok(payload_str) = serde_json::to_string(&msg) {
                                if self
                                    .ws_sender
                                    .lock()
                                    .await
                                    .send(Message::Text(payload_str))
                                    .await
                                    .is_err()
                                {
                                    error!("Failed to send renegotiation offer to client.");
                                } else {
                                    info!("Renegotiation offer sent to client.");
                                }
                            }
                        }
                    }
                }
                Err(e) => error!("Failed to create renegotiation offer: {}", e),
            }
        } else {
            warn!(
                "Could not find any stream to subscribe for topic: {}",
                topic
            );
        }
    }
}

pub async fn handle_socket(socket: WebSocket, state: Arc<AppState>) {
    let (ws_sender, mut ws_receiver) = socket.split();
    let ws_sender = Arc::new(Mutex::new(ws_sender));

    let mut mqtt_rx = state.mqtt_tx.subscribe();
    let ws_sender_for_mqtt = Arc::clone(&ws_sender);
    tokio::spawn(async move {
        while let Ok(msg) = mqtt_rx.recv().await {
            let ws_message = WsMessageOut {
                msg_type: "mqtt_message",
                payload: &msg,
            };
            if let Ok(payload_str) = serde_json::to_string(&ws_message) {
                if ws_sender_for_mqtt
                    .lock()
                    .await
                    .send(Message::Text(payload_str))
                    .await
                    .is_err()
                {
                    break;
                }
            }
        }
    });

    let mut broadcast_rx = state.broadcast_tx.subscribe();
    let ws_sender_broadcast = Arc::clone(&ws_sender);
    tokio::spawn(async move {
        while let Ok(msg) = broadcast_rx.recv().await {
            if ws_sender_broadcast
                .lock()
                .await
                .send(Message::Text(msg))
                .await
                .is_err()
            {
                break;
            }
        }
    });

    let (cmd_tx, cmd_rx) = mpsc::channel(10);

    let initial_pc = match create_peer_connection(Arc::clone(&ws_sender), &state.pool).await {
        Ok(pc) => pc,
        Err(e) => {
            error!("Failed to create initial peer connection: {}", e);
            return;
        }
    };

    tokio::spawn({
        let state = Arc::clone(&state);
        let ws_sender = Arc::clone(&ws_sender);

        async move {
            let actor = WSActor {
                pc: initial_pc,
                ws_sender,
                receiver: cmd_rx,
                state: Arc::clone(&state),
                active_tracks: HashMap::new(),
                dashboard_event_rate: HashMap::new(),
            };
            actor.run().await;
        }
    });

    while let Some(Ok(msg)) = ws_receiver.next().await {
        if let Message::Text(text) = msg {
            let ws_msg: WsMessageIn = match serde_json::from_str(&text) {
                Ok(json) => json,
                Err(e) => {
                    error!("Failed to parse incoming message: {}", e);
                    continue;
                }
            };

            match ws_msg.msg_type.as_str() {
                "offer" => {
                    if let Ok(offer) = serde_json::from_value(ws_msg.payload) {
                        let (responder_tx, responder_rx) = oneshot::channel();
                        let cmd = ActorCommand::SetRemoteOffer {
                            offer,
                            responder: responder_tx,
                        };
                        if cmd_tx.send(cmd).await.is_err() {
                            break;
                        }
                        // Spawn response handling so the WS loop can immediately
                        // continue reading messages (critical for ICE candidates).
                        let ws_sender_clone = Arc::clone(&ws_sender);
                        tokio::spawn(async move {
                            if let Ok(Ok(answer)) = responder_rx.await {
                                let ws_answer = WsMessageOut {
                                    msg_type: "answer",
                                    payload: &answer,
                                };
                                if let Ok(payload_str) = serde_json::to_string(&ws_answer) {
                                    let _ = ws_sender_clone
                                        .lock()
                                        .await
                                        .send(Message::Text(payload_str))
                                        .await;
                                }
                            }
                        });
                    }
                }
                "answer" => {
                    if let Ok(answer) = serde_json::from_value(ws_msg.payload) {
                        let cmd = ActorCommand::SetRemoteAnswer { answer };
                        if cmd_tx.send(cmd).await.is_err() {
                            break;
                        }
                    }
                }
                "candidate" => {
                    match serde_json::from_value::<RTCIceCandidateInit>(ws_msg.payload.clone()) {
                        Ok(candidate) => {
                            info!("Received ICE candidate from client: {}", candidate.candidate);
                            let cmd = ActorCommand::AddIceCandidate { candidate };
                            if cmd_tx.send(cmd).await.is_err() {
                                break;
                            }
                        }
                        Err(e) => {
                            error!("Failed to deserialize ICE candidate: {}. Payload: {}", e, ws_msg.payload);
                        }
                    }
                }
                "health_check" => {
                    let cmd = ActorCommand::HealthCheck {
                        payload: ws_msg.payload,
                    };
                    if cmd_tx.send(cmd).await.is_err() {
                        break;
                    }
                }
                "get_all_stream_state" => {
                    let cmd = ActorCommand::GetAllStreamState {
                        payload: ws_msg.payload,
                    };
                    if cmd_tx.send(cmd).await.is_err() {
                        break;
                    }
                }
                "compute_flow" => {
                    let cmd = ActorCommand::ComputeFlow {
                        payload: ws_msg.payload,
                    };
                    if cmd_tx.send(cmd).await.is_err() {
                        break;
                    }
                }
                "dashboard_component_event" => {
                    let cmd = ActorCommand::DashboardComponentEvent {
                        payload: ws_msg.payload,
                    };
                    if cmd_tx.send(cmd).await.is_err() {
                        break;
                    }
                }
                "stop_flow" => {
                    if let Ok(payload) = serde_json::from_value::<FlowPayload>(ws_msg.payload) {
                        let cmd = ActorCommand::StopFlow {
                            flow_id: payload.flow_id,
                        };
                        if cmd_tx.send(cmd).await.is_err() {
                            break;
                        }
                    }
                }
                "get_all_flows" => {
                    let (responder_tx, responder_rx) = oneshot::channel();
                    let cmd = ActorCommand::GetAllFlows {
                        responder: responder_tx,
                    };
                    if cmd_tx.send(cmd).await.is_err() {
                        break;
                    }
                    let ws_sender_clone = Arc::clone(&ws_sender);
                    tokio::spawn(async move {
                        if let Ok(Ok(flows)) = responder_rx.await {
                            let ws_response = WsMessageOut {
                                msg_type: "get_all_flows_response",
                                payload: &flows,
                            };
                            if let Ok(payload_str) = serde_json::to_string(&ws_response) {
                                let _ = ws_sender_clone
                                    .lock()
                                    .await
                                    .send(Message::Text(payload_str))
                                    .await;
                            }
                        }
                    });
                }
                "ping" => {
                    let cmd = ActorCommand::Ping {
                        payload: ws_msg.payload,
                    };
                    if cmd_tx.send(cmd).await.is_err() {
                        break;
                    }
                }
                "subscribe_stream" => {
                    if let Ok(payload) =
                        serde_json::from_value::<SubscribeStreamPayload>(ws_msg.payload)
                    {
                        info!("Received subscribe request for topic: {}", payload.topic);
                        let cmd = ActorCommand::SubscribeToTopic {
                            topic: payload.topic,
                        };
                        if cmd_tx.send(cmd).await.is_err() {
                            break;
                        }
                    }
                }
                "get_server" => {
                    let (responder_tx, responder_rx) = oneshot::channel();
                    let cmd = ActorCommand::GetServer {
                        responder: responder_tx,
                    };
                    if cmd_tx.send(cmd).await.is_err() {
                        break;
                    }
                    let ws_sender_clone = Arc::clone(&ws_sender);
                    tokio::spawn(async move {
                        if let Ok(Ok(stats)) = responder_rx.await {
                            let ws_response = WsMessageOut {
                                msg_type: "get_server",
                                payload: &stats,
                            };
                            if let Ok(payload_str) = serde_json::to_string(&ws_response) {
                                let _ = ws_sender_clone
                                    .lock()
                                    .await
                                    .send(Message::Text(payload_str))
                                    .await;
                            }
                        }
                    });
                }
                "hangup" => {
                    info!("Received hangup message from client.");
                    let cmd = ActorCommand::Hangup;
                    if cmd_tx.send(cmd).await.is_err() {
                        break;
                    }
                }
                _ => {
                    error!("Unknown message type: {}", ws_msg.msg_type);
                }
            }
        }
    }
    info!("WebSocket connection closed. Handler finished.");
}


================================================
FILE: apps/server/src/handler/ws/mod.rs
================================================
use axum::{
    extract::{ws::WebSocketUpgrade, State},
    response::Response,
};
use std::sync::Arc;
use tracing::info;

use crate::{
    handler::{auth::JwtAuth, ws::handlers::handle_socket},
    state::AppState,
};

use serde::{Deserialize, Serialize};
use serde_json::json;

pub mod handlers;
pub mod dashboard_component_event;
pub mod webrtc;

pub async fn ws_handler(
    JwtAuth(claims): JwtAuth,
    ws: WebSocketUpgrade,
    State(state): State<Arc<AppState>>,
) -> Response {
    ws.on_upgrade(move |socket| {
        info!("'{}' authenticated and connected.", claims.sub);
        handle_socket(socket, state)
    })
}

#[derive(Serialize)]
pub struct WsMessageOut<'a, T: Serialize> {
    #[serde(rename = "type")]
    msg_type: &'a str,
    payload: T,
}


================================================
FILE: apps/server/src/handler/ws/webrtc.rs
================================================
use anyhow::Result;
use axum::extract::ws::{Message, WebSocket};
use chrono::Utc;
use futures_util::{stream::SplitSink, SinkExt};
use std::sync::Arc;
use tokio::sync::Mutex;
use tracing::{info, warn};
use interceptor::registry::Registry;
use webrtc::{
    api::{
        interceptor_registry::register_default_interceptors,
        media_engine::{MediaEngine, MIME_TYPE_H264, MIME_TYPE_OPUS},
        APIBuilder,
    },
    ice_transport::{
        ice_candidate::RTCIceCandidate,
        ice_connection_state::RTCIceConnectionState,
        ice_gatherer_state::RTCIceGathererState,
        ice_server::RTCIceServer,
    },
    peer_connection::{
        configuration::RTCConfiguration,
        peer_connection_state::RTCPeerConnectionState,
        RTCPeerConnection,
    },
    rtp_transceiver::rtp_codec::{RTCRtpCodecCapability, RTCRtpCodecParameters, RTPCodecType},
};

use crate::db;
use crate::handler::ws::WsMessageOut;
use crate::state::DbPool;

/// Filter TURN URLs for webrtc-rs compatibility.
/// webrtc-rs does not support `turns:` (TURN over TLS), so drop those.
/// Keep `turn:` with both UDP and TCP transports.
fn filter_ice_url(url: &str) -> Option<String> {
    if url.starts_with("turns:") {
        warn!("Dropping unsupported turns: URL (webrtc-rs has no TLS TURN): {}", url);
        return None;
    }
    if url.contains("transport=tcp") {
        warn!("Dropping TCP TURN URL (webrtc-rs only supports UDP TURN): {}", url);
        return None;
    }
    Some(url.to_owned())
}

fn build_ice_servers(pool: &DbPool) -> Vec<RTCIceServer> {
    let default_stun = RTCIceServer {
        urls: vec!["stun:stun.l.google.com:19302".to_owned()],
        ..Default::default()
    };

    let configs = match db::repository::get_all_system_configs(pool) {
        Ok(c) => c,
        Err(e) => {
            warn!("Failed to read system configs for TURN: {}", e);
            return vec![default_stun];
        }
    };

    let turn_entry = match configs
        .iter()
        .find(|c| c.key == "turn_server_config" && c.enabled == 1)
    {
        Some(entry) => entry,
        None => return vec![default_stun],
    };

    let parsed: serde_json::Value = match serde_json::from_str(&turn_entry.value) {
        Ok(v) => v,
        Err(e) => {
            warn!("Failed to parse turn_server_config JSON: {}", e);
            return vec![default_stun];
        }
    };

    if let Some(expires_at) = parsed.get("expiresAt").and_then(|v| v.as_str()) {
        if let Ok(exp) = chrono::DateTime::parse_from_rfc3339(expires_at) {
            if exp < Utc::now() {
                warn!("TURN credentials expired at {}", expires_at);
                return vec![default_stun];
            }
        }
    }

    let ice_servers_arr = match parsed.get("iceServers").and_then(|v| v.as_array()) {
        Some(arr) => arr,
        None => return vec![default_stun],
    };

    let mut servers = vec![default_stun];

    for entry in ice_servers_arr {
        let raw_urls: Vec<String> = if let Some(url_str) = entry.get("urls").and_then(|v| v.as_str()) {
            vec![url_str.to_owned()]
        } else if let Some(url_arr) = entry.get("urls").and_then(|v| v.as_array()) {
            url_arr
                .iter()
                .filter_map(|u| u.as_str().map(String::from))
                .collect()
        } else {
            continue;
        };

        let urls: Vec<String> = raw_urls
            .into_iter()
            .filter_map(|u| filter_ice_url(&u))
            .collect();

        if urls.is_empty() {
            continue;
        }

        let username = entry
            .get("username")
            .and_then(|v| v.as_str())
            .unwrap_or("")
            .to_owned();
        let credential = entry
            .get("credential")
            .and_then(|v| v.as_str())
            .unwrap_or("")
            .to_owned();

        servers.push(RTCIceServer {
            urls,
            username,
            credential,
            ..Default::default()
        });
    }

    for s in &servers {
        info!(
            "  ICE server: urls={:?}, has_credentials={}",
            s.urls,
            !s.username.is_empty()
        );
    }
    info!("Built {} ICE server(s) total", servers.len());
    servers
}

pub async fn create_peer_connection(
    ws_sender: Arc<Mutex<SplitSink<WebSocket, Message>>>,
    pool: &DbPool,
) -> Result<Arc<RTCPeerConnection>> {
    info!(">>> create_peer_connection v2 (no SettingEngine restriction) <<<");
    let mut m = MediaEngine::default();
    m.register_codec(
        RTCRtpCodecParameters {
            capability: RTCRtpCodecCapability {
                mime_type: MIME_TYPE_OPUS.to_owned(),
                clock_rate: 48000,
                channels: 1,
                sdp_fmtp_line: "minptime=10;useinbandfec=1".to_owned(),
                ..Default::default()
            },
            ..Default::default()
        },
        RTPCodecType::Audio,
    )?;

    m.register_codec(
        RTCRtpCodecParameters {
            capability: RTCRtpCodecCapability {
                mime_type: MIME_TYPE_H264.to_owned(),
                clock_rate: 90000,
                channels: 0,
                sdp_fmtp_line:
                    "level-asymmetry-allowed=1;packetization-mode=1;profile-level-id=42e01f"
                        .to_owned(),
                ..Default::default()
            },
            ..Default::default()
        },
        RTPCodecType::Video,
    )?;

    let mut registry = Registry::new();
    registry = register_default_interceptors(registry, &mut m)?;

    let api = APIBuilder::new()
        .with_media_engine(m)
        .with_interceptor_registry(registry)
        .build();

    let config = RTCConfiguration {
        ice_servers: build_ice_servers(pool),
        ..Default::default()
    };
    let pc = Arc::new(api.new_peer_connection(config).await?);

    pc.on_ice_connection_state_change(Box::new(move |state: RTCIceConnectionState| {
        Box::pin(async move {
            info!("ICE connection state changed: {:?}", state);
        })
    }));

    pc.on_peer_connection_state_change(Box::new(move |state: RTCPeerConnectionState| {
        Box::pin(async move {
            info!("Peer connection state changed: {:?}", state);
        })
    }));

    pc.on_ice_candidate(Box::new(move |c: Option<RTCIceCandidate>| {
        let ws_sender_clone = Arc::clone(&ws_sender);
        Box::pin(async move {
            if let Some(c) = c {
                let cand_str = c.to_string();
                let cand_type = if cand_str.contains("relay") {
                    "RELAY"
                } else if cand_str.contains("srflx") {
                    "SRFLX"
                } else {
                    "HOST"
                };
                info!("Server ICE candidate [{}]: {}", cand_type, cand_str);
                if let Ok(candidate) = c.to_json() {
                    let msg = WsMessageOut {
                        msg_type: "candidate",
                        payload: candidate,
                    };
                    if let Ok(payload_str) = serde_json::to_string(&msg) {
                        if ws_sender_clone
                            .lock()
                            .await
                            .send(Message::Text(payload_str))
                            .await
                            .is_err()
                        {
                            warn!("Failed to send ICE candidate, WebSocket closed.");
                        }
                    }
                }
            } else {
                info!("ICE candidate gathering complete (null candidate).");
            }
        })
    }));

    pc.on_ice_gathering_state_change(Box::new(move |state: RTCIceGathererState| {
        Box::pin(async move {
            info!("ICE gathering state changed: {:?}", state);
        })
    }));

    Ok(pc)
}


================================================
FILE: apps/server/src/init/db_record.rs
================================================
use diesel::{
    ExpressionMethods, OptionalExtension, QueryDsl, RunQueryDsl, SelectableHelper, SqliteConnection,
};
use tracing::info;

use crate::db::models::{NewPermission, Permission, User};
use crate::db::models::{NewSystemConfiguration, NewUser, SystemConfiguration};
use crate::utils::hash::hash_password;
use crate::state::DbPool;

pub fn create_initial_admin(conn: &mut SqliteConnection) {
    use crate::db::schema::users::dsl::*;

    let admin_username = "admin";

    let admin_exists = users
        .filter(username.eq(admin_username))
        .select(User::as_select())
        .first::<User>(conn)
        .optional()
        .expect("Error checking for admin user");

    if admin_exists.is_none() {
        let password = "admin";

        info!("Admin user not found. Creating...");

        match hash_password(password) {
            Ok(hashed_password) => {
                let new_admin = NewUser {
                    username: admin_username,
                    email: "admin@example.com",
                    password_hash: &hashed_password,
                };

                diesel::insert_into(users)
                    .values(&new_admin)
                    .execute(conn)
                    .expect("Error creating admin user");

                info!("Admin user '{}' created.", admin_username);
            }
            Err(e) => eprintln!("error: {}", e),
        }
    } else {
        info!("Admin user already exists. Skipping creation.");
    }
}

pub fn create_initial_configurations(conn: &mut SqliteConnection) {
    use crate::db::schema::system_configurations::dsl::{key, system_configurations};

    let default_configs = vec![
        (
            "mqtt_broker_url",
            "localhost:1883",
            "Default MQTT Broker URL. Format: host:port",
        ),
        ("rtp_broker_port", "0.0.0.0:5004", "RTP port"),
        (
            "turn_server_config",
            r#"{ "urls": "turn:turn.example.com:3478", "username": "user", "credential": "pass" }"#,
            "Default WebRTC TURN Server configuration (JSON format)",
        ),
        (
            "code_service_enabled",
            "1",
            "Enable the Code workspace (file browser and editor). Toggle via Settings or set enabled to 1.",
        ),
    ];

    for (k, v, d) in default_configs {
        let config_exists = system_configurations
            .filter(key.eq(k))
            .select(SystemConfiguration::as_select())
            .first::<SystemConfiguration>(conn)
            .optional()
            .expect("Error checking for system configuration");

        if config_exists.is_none() {
            info!("Configuration '{}' not found. Creating...", k);
            let new_config = NewSystemConfiguration {
                key: k,
                value: v,
                enabled: Some(0),
                description: Some(d),
            };

            diesel::insert_into(system_configurations)
                .values(&new_config)
                .execute(conn)
                .expect("Error creating system configuration");

            info!("Configuration '{}' created.", k);
        } else {
            info!("Configuration '{}' already exists. Skipping creation.", k);
        }
    }
}

pub fn seed_initial_permissions(conn: &mut SqliteConnection) {
    use crate::db::schema::permissions::dsl::{name, permissions};

    let initial_permissions = vec![
        ("users:create", "Allows creating new users"),
        ("users:read", "Allows viewing user list and details"),
        ("users:update", "Allows updating user information"),
        ("users:delete", "Allows deleting users"),
        ("users:assign_roles", "Allows assigning roles to users"),
        ("roles:create", "Allows creating new roles"),
        ("roles:read", "Allows viewing roles and their permissions"),
        (
            "roles:update",
            "Allows updating roles and their assigned permissions",
        ),
        ("roles:delete", "Allows deleting roles"),
        ("devices:create", "Allows creating new devices"),
        ("devices:read", "Allows viewing devices"),
        ("devices:update", "Allows updating device information"),
        ("devices:delete", "Allows deleting devices"),
        ("entities:create", "Allows creating new entities"),
        ("entities:read", "Allows viewing entities"),
        ("entities:update", "Allows updating entity information"),
        ("entities:delete", "Allows deleting entities"),
        ("flows:create", "Allows creating new flows"),
        ("flows:read", "Allows viewing flows"),
        ("flows:update", "Allows updating flows"),
        ("flows:delete", "Allows deleting flows"),
    ];

    info!("Seeding initial permissions...");

    for (perm_name, perm_desc) in initial_permissions {
        let permission_exists = permissions
            .filter(name.eq(perm_name))
            .select(Permission::as_select())
            .first::<Permission>(conn)
            .optional()
            .expect("Error checking for permission");

        if permission_exists.is_none() {
            info!("Permission '{}' not found. Creating...", perm_name);
            let new_permission = NewPermission {
                name: perm_name,
                description: Some(perm_desc),
            };

            diesel::insert_into(permissions)
                .values(&new_permission)
                .execute(conn)
                .expect("Error creating permission");

            info!("Permission '{}' created.", perm_name);
        } else {
            info!(
                "Permission '{}' already exists. Skipping creation.",
                perm_name
            );
        }
    }
    info!("Permission seeding complete.");
}


================================================
FILE: apps/server/src/init/mod.rs
================================================
pub mod db_record;
pub mod streams;


================================================
FILE: apps/server/src/init/streams.rs
================================================
use tokio::sync::broadcast;
use tracing::{error, info, warn};
use webrtc::rtp::packet::Packet;

use crate::db::repository;
use crate::state::{DbPool, MediaType, Protocol, StreamDescriptor, StreamManager};

pub fn create_hydrate_streams(pool: &DbPool, streams: &StreamManager) {
    info!("Hydrating streams from database...");
    match repository::streams::get_all_streams(&pool) {
        Ok(db_streams) => {
            for stream in db_streams {
                let (packet_tx, _) = broadcast::channel::<Packet>(8192);
                let media_type = match stream.media_type.as_str() {
                    "audio" => MediaType::Audio,
                    "video" => MediaType::Video,
                    _ => {
                        warn!(
                            "Unknown media type '{}' for SSRC {}",
                            stream.media_type, stream.ssrc
                        );
                        continue;
                    }
                };

                let descriptor = StreamDescriptor {
                    id: stream.ssrc as u32,
                    topic: stream.topic,
                    user_id: stream.device_id,
                    media_type,
                    protocol: Protocol::Udp,
                };

                streams.insert_with_sender(descriptor, packet_tx);
            }
            info!("Hydrated {} streams into memory.", streams.len());
        }
        Err(e) => {
            error!("Failed to hydrate streams from database: {}", e);
        }
    }
}


================================================
FILE: apps/server/src/lib.rs
================================================
// Library crate for external access (tests, etc.)

pub mod db;
pub mod error;
pub mod flow;
pub mod logo;
pub mod media;
pub mod recording;
pub mod state;
pub mod tunnel_control;
pub mod utils;

// Re-export commonly used types for convenience
pub use state::{DbPool, MediaType, Protocol, StreamDescriptor, StreamHandle, StreamRegistry};


================================================
FILE: apps/server/src/logo.rs
================================================
use local_ip_address::local_ip;
use std::error::Error;

use colored::*;

const LOGO: &str = r#"
 __      __                _ 
 \ \    / /               | |
  \ \  / /__  ___ ___  ___| |
   \ \/ / _ \/ __/ __|/ _ \ |
    \  /  __/\__ \__ \  __/ |
     \/ \___||___/___/\___|_|
                             
"#;

pub fn print_header() {
    println!("{}", LOGO.truecolor(0, 150, 255).bold());
    println!("{}", "------------------------------------".yellow());
}

pub fn print_footer() {
    println!("{}", "------------------------------------".yellow());
}

pub fn print_local_ip_info(ip: &str, port: &str) {
    println!(
        "{} {}:{}",
        "Local IP:".green().bold(),
        ip.cyan(),
        port.cyan()
    );
}

pub fn print_error(message: &str) {
    println!("{} {}", "❌ Error:".red().bold(), message.red());
}

pub fn get_local_ip_address() -> Result<String, Box<dyn Error>> {
    let ip = local_ip()?.to_string();
    Ok(ip)
}

pub fn print_logo() {
    print_header();

    match get_local_ip_address() {
        Ok(ip) => print_local_ip_info(&ip, &"6174".to_string()),
        Err(e) => print_error(&format!("Could not fetch local IP: {}", e)),
    }

    print_footer();
}


================================================
FILE: apps/server/src/main.rs
================================================
use anyhow::Result;
use diesel_migrations::{embed_migrations, EmbeddedMigrations, MigrationHarness};
use rumqttc::{AsyncClient, MqttOptions};
use std::{env, sync::Arc};
use tokio::{
    sync::{broadcast, mpsc, watch, RwLock},
    task::JoinSet,
};
use tracing::{error, info, warn};
use tracing_subscriber::{fmt, layer::SubscriberExt, util::SubscriberInitExt, EnvFilter};

const LOG_FILE_PATH: &str = "log/app.log";

use crate::{
    db::conn::establish_connection,
    flow::manager_state::FlowManagerActor,
    init::db_record::{
        create_initial_admin, create_initial_configurations, seed_initial_permissions,
    },
    init::streams::create_hydrate_streams,
    utils::{entity_map::remap_topics, stream_checker::stream_status_checker},
    logo::print_logo,
    media::{MediaAdapter, RtpPushAdapter, RtspPullAdapter},
    routes::web_server,
    state::{AppState, MqttMessage, StreamManager, StreamRegistry},
    tunnel_control::TunnelManager,
};

mod broker_mqtt;
mod config;
mod handler;
mod init;
mod routes;
mod state;
mod tunnel_control;

pub mod db;
pub mod error;
pub mod flow;
pub mod utils;
pub mod logo;
pub mod media;
pub mod recording;

pub const MIGRATIONS: EmbeddedMigrations = embed_migrations!("./migrations");

fn run_migrations(connection: &mut impl MigrationHarness<diesel::sqlite::Sqlite>) -> Result<()> {
    connection
        .run_pending_migrations(MIGRATIONS)
        .map_err(|e| anyhow::anyhow!(e))?;
    Ok(())
}

#[tokio::main]
async fn main() -> Result<()> {
    let settings = config::Settings::new().expect("Failed to load configuration");

    let is_debug_mode = env::args().any(|arg| arg == "--debug");

    let file_appender = tracing_appender::rolling::daily("log", "app.log");
    let (non_blocking_writer, _guard) = tracing_appender::non_blocking(file_appender);

    let file_layer = fmt::layer()
        .with_writer(non_blocking_writer)
        .with_ansi(false);

    let console_layer = fmt::layer();

    tracing_subscriber::registry()
        .with(EnvFilter::try_from_default_env().unwrap_or_else(|_| "info".into()))
        .with(file_layer)
        .with(console_layer)
        .init();

    if is_debug_mode {
        warn!("APPLICATION IS RUNNING IN DEBUG MODE. ONLY THE WEB SERVER WILL BE ACTIVATED.");
    }

    let streams: StreamManager = Arc::new(StreamRegistry::new());

    let pool = establish_connection(&settings.database_url);

    {
        let mut conn = pool
            .get()
            .expect("Failed to get a connection from the pool");
        info!("Running database migrations...");
        run_migrations(&mut conn)?;
        info!("Migrations completed successfully.");

        create_initial_admin(&mut conn);
        create_initial_configurations(&mut conn);
        seed_initial_permissions(&mut conn);
        create_hydrate_streams(&pool, &streams);
    }

    let (mqtt_tx, _) = broadcast::channel::<MqttMessage>(1024);
    let (flow_manager_tx, flow_manager_rx) = mpsc::channel(100);
    let (broadcast_tx, _) = broadcast::channel(1024);
    let (dashboard_ui_tx, _) = broadcast::channel::<crate::state::DashboardUiEvent>(1024);
    let (shutdown_tx, shutdown_rx) = watch::channel(());
    let (topic_map_notify_tx, topic_map_notify_rx) = watch::channel(());
    let tunnel_manager = Arc::new(TunnelManager::new());

    let jwt_secret = settings.jwt_secret.clone();
    let configs = db::repository::get_all_system_configs(&pool)?;

    let recording_manager = Arc::new(recording::RecordingManager::new(
        streams.clone(),
        pool.clone(),
    ));

    let app_state = Arc::new(AppState {
        streams: streams.clone(),
        mqtt_tx: mqtt_tx.clone(),
        jwt_secret: jwt_secret,
        pool: pool.clone(),
        topic_map: Arc::new(RwLock::new(Vec::new())),
        topic_map_notify: topic_map_notify_tx,
        flow_manager_tx,
        dashboard_ui_tx: dashboard_ui_tx.clone(),
        broadcast_tx,
        system_configs: configs.clone(),
        tunnel_manager: tunnel_manager.clone(),
        recording_manager,
    });

    let mut set = JoinSet::new();

    remap_topics(axum::extract::State(app_state.clone())).await;

    let server_task = tokio::spawn(web_server(
        settings.listen_address,
        app_state.clone(),
        shutdown_rx.clone(),
    ));

    print_logo();

    let mut mqtt_client_for_flow: Option<AsyncClient> = None;

    if !is_debug_mode {
        if let Some(rtp_config) = configs.iter().find(|c| c.key == "rtp_broker_port") {
            if rtp_config.enabled == 1 {
                info!(
                    "RTP Receiver is enabled. Starting on {}.",
                    &rtp_config.value
                );
                let rtp_listen_address = rtp_config.value.clone();
                let rtp_adapter =
                    Arc::new(RtpPushAdapter::new(rtp_listen_address, streams.clone()));
                let shutdown_rx_clone = shutdown_rx.clone();
                let rtp_task = rtp_adapter.clone();
                set.spawn(async move { rtp_task.start(shutdown_rx_clone).await });
            } else {
                warn!("RTP Receiver is disabled by configuration.");
            }
        } else {
            warn!("RTP Receiver configuration ('rtp_broker_port') not found.");
        }

        if let Some(mqtt_config) = configs.iter().find(|c| c.key == "mqtt_broker_url") {
            if mqtt_config.enabled == 1 {
                info!(
                    "MQTT Broker is enabled. Connecting to {}.",
                    &mqtt_config.value
                );
                let mqtt_broker_url = mqtt_config.value.clone();
                let parts: Vec<&str> = mqtt_broker_url.split(':').collect();
                if parts.len() != 2 {
                    return Err(anyhow::anyhow!(
                        "Invalid broker address format. Expected 'host:port', got '{}'",
                        mqtt_broker_url
                    ));
                }
                let host = parts[0];
                let port: u16 = parts[1].parse()?;

                let mut mqttoptions = MqttOptions::new("rust-internal-client", host, port);
                mqttoptions.set_keep_alive(std::time::Duration::from_secs(5));

                let (client, eventloop) = AsyncClient::new(mqttoptions, 10);

                mqtt_client_for_flow = Some(client.clone());
                let mqtt_tx_clone = mqtt_tx.clone();

                set.spawn(broker_mqtt::start_event_loop(
                    client,
                    eventloop,
                    mqtt_tx_clone,
                    app_state.clone(),
                ));
            } else {
                warn!("MQTT Broker is disabled by configuration.");
            }
        } else {
            warn!("MQTT Broker configuration ('mqtt_broker_url') not found.");
        }

        let app_state_for_checker = app_state.clone();
        set.spawn(stream_status_checker(
            app_state_for_checker,
            shutdown_rx.clone(),
        ));

        let rtsp_adapter = Arc::new(RtspPullAdapter::new(
            streams.clone(),
            app_state.topic_map.clone(),
            topic_map_notify_rx,
        ));
        let shutdown_rx_clone = shutdown_rx.clone();
        let rtsp_task = rtsp_adapter.clone();
        set.spawn(async move { rtsp_task.start(shutdown_rx_clone).await });
    }

    let mut flow_manager = FlowManagerActor::new(
        flow_manager_rx,
        mqtt_client_for_flow,
        mqtt_tx.clone(),
        dashboard_ui_tx,
        streams.clone(),
        configs.clone(),
        pool.clone(),
    );
    tokio::spawn(async move {
        flow_manager.run().await;
    });

    info!("Server starting, press Ctrl-C to stop.");

    tokio::select! {
        _ = tokio::signal::ctrl_c() => {
            info!("Ctrl-C received, initiating shutdown...");
        }
        Some(res) = set.join_next() => {
             match res {
                Ok(Ok(())) => info!("A background task finished gracefully."),
                Ok(Err(e)) => error!("A background task finished with an error: {}", e),
                Ok(Err(e)) => error!("A background task failed to join: {}", e),
                Err(e) => error!("A background task panicked: {}", e),
            }
        }
    }

    tokio::select! {
        res = set.join_next(), if !set.is_empty() => {
            if let Some(Ok(Err(e))) = res {
                error!("A task exited with an error: {}", e);
            }
        }
        _ = tokio::signal::ctrl_c() => {
            info!("Ctrl-C received, shutting down.");
        }
    }

    set.abort_all();
    shutdown_tx.send(()).ok();

    info!("Waiting for all tasks to complete...");
    while let Some(res) = set.join_next().await {
        match res {
            Ok(Ok(())) => {}
            Ok(Err(e)) => error!("A task shut down with an error: {}", e),
            Ok(Err(e)) => error!("A task failed to join during shutdown: {}", e),
            Err(e) => error!("A task panicked during shutdown: {}", e),
        }
    }
    info!("All tasks have been shut down.");

    Ok(())
}


================================================
FILE: apps/server/src/media/adapter.rs
================================================
use anyhow::Result;
use async_trait::async_trait;
use tokio::sync::watch;

use crate::state::Protocol;

#[async_trait]
pub trait MediaAdapter: Send + Sync {
    fn protocol(&self) -> Protocol;
    async fn start(&self, shutdown: watch::Receiver<()>) -> Result<()>;
}


================================================
FILE: apps/server/src/media/mod.rs
================================================
pub mod adapter;
pub mod rtp_push;
pub mod rtsp_pull;

pub use adapter::MediaAdapter;
pub use rtp_push::RtpPushAdapter;
pub use rtsp_pull::RtspPullAdapter;


================================================
FILE: apps/server/src/media/rtp_push.rs
================================================
use anyhow::Result;
use async_trait::async_trait;
use tokio::{net::UdpSocket, sync::watch, time::Instant};
use tracing::{info, warn};
use webrtc::{rtp::packet::Packet, util::Unmarshal};

use crate::media::adapter::MediaAdapter;
use crate::state::{Protocol, StreamManager};

pub struct RtpPushAdapter {
    addr: String,
    streams: StreamManager,
}

impl RtpPushAdapter {
    pub fn new(addr: String, streams: StreamManager) -> Self {
        Self { addr, streams }
    }

    async fn run(&self, mut shutdown_rx: watch::Receiver<()>) -> Result<()> {
        let sock = UdpSocket::bind(&self.addr).await?;
        let mut buf = vec![0u8; 65535];

        loop {
            tokio::select! {
                _ = shutdown_rx.changed() => {
                    info!("RTP Push Adapter received shutdown signal.");
                    break;
                }
                result = sock.recv_from(&mut buf) => {
                    let (n, from) = match result {
                        Ok(res) => res,
                        Err(e) => {
                            warn!("UDP recv_from failed: {}", e);
                            continue;
                        }
                    };

                    match Packet::unmarshal(&mut &buf[..n]) {
                        Ok(packet) => {
                            let ssrc = packet.header.ssrc;

                            if let Some(handle) = self.streams.get_by_ssrc(ssrc) {
                                let mut is_online_guard = handle.is_online.write().unwrap();
                                let was_offline = !*is_online_guard;
                                *is_online_guard = true;
                                drop(is_online_guard);

                                let mut last_seen_guard = handle.last_seen.write().unwrap();
                                *last_seen_guard = Instant::now();
                                drop(last_seen_guard);

                                if was_offline {
                                    info!(
                                        "Topic '{}' (SSRC: {}) is now ONLINE.",
                                        handle.descriptor.topic, ssrc
                                    );
                                }

                                let _ = handle.packet_tx.send(packet);
                            }
                        }
                        Err(e) => {
                            warn!("Failed to unmarshal RTP packet from {}: {}", from, e);
                        }
                    }
                }
            }
        }

        Ok(())
    }
}

#[async_trait]
impl MediaAdapter for RtpPushAdapter {
    fn protocol(&self) -> Protocol {
        Protocol::Udp
    }

    async fn start(&self, shutdown: watch::Receiver<()>) -> Result<()> {
        self.run(shutdown).await
    }
}


================================================
FILE: apps/server/src/media/rtsp_pull.rs
================================================
use anyhow::{anyhow, Error, Result};
use async_trait::async_trait;
use dashmap::DashMap;
use futures_util::StreamExt;
use gstreamer::prelude::*;
use gstreamer_app::{AppSink, AppSinkCallbacks};
use std::sync::{
    atomic::{AtomicBool, Ordering},
    Arc,
};
use tokio::sync::{broadcast, watch, RwLock};
use tokio::time::Instant;
use tracing::{error, info, warn};
use webrtc::rtp::packet::Packet;
use webrtc::util::Unmarshal;

use crate::media::adapter::MediaAdapter;
use crate::state::{MediaType, Protocol, StreamDescriptor, StreamManager, TopicMapping};

pub struct RtspPullAdapter {
    streams: StreamManager,
    topic_map: Arc<RwLock<Vec<TopicMapping>>>,
    topic_map_notify: watch::Receiver<()>,
}

impl RtspPullAdapter {
    pub fn new(
        streams: StreamManager,
        topic_map: Arc<RwLock<Vec<TopicMapping>>>,
        topic_map_notify: watch::Receiver<()>,
    ) -> Self {
        Self {
            streams,
            topic_map,
            topic_map_notify,
        }
    }

    async fn start_pipelines(&self, mut shutdown_rx: watch::Receiver<()>) -> Result<()> {
        if let Err(e) = gstreamer::init() {
            error!("Failed to initialize GStreamer: {}", e);
            return Ok(());
        }

        // Track running pipelines: topic -> (shutdown_tx, JoinHandle)
        let running_pipelines: Arc<DashMap<String, watch::Sender<()>>> = Arc::new(DashMap::new());
        let mut topic_map_notify = self.topic_map_notify.clone();

        // Initial pipeline spawn
        self.spawn_new_pipelines(&running_pipelines, shutdown_rx.clone())
            .await;

        // Supervision loop: watch for topic_map changes and spawn new pipelines
        loop {
            tokio::select! {
                _ = shutdown_rx.changed() => {
                    info!("Shutdown signal received, stopping all RTSP pipelines");
                    // Send shutdown signal to all running pipelines
                    for entry in running_pipelines.iter() {
                        let _ = entry.value().send(());
                    }
                    break;
                }
                _ = topic_map_notify.changed() => {
                    info!("Topic map changed, checking for new RTSP streams");
                    self.spawn_new_pipelines(&running_pipelines, shutdown_rx.clone()).await;
                }
            }
        }

        // Wait for all pipelines to finish
        tokio::time::sleep(tokio::time::Duration::from_millis(500)).await;
        info!("All RTSP pipelines have shut down.");
        Ok(())
    }

    async fn spawn_new_pipelines(
        &self,
        running_pipelines: &Arc<DashMap<String, watch::Sender<()>>>,
        shutdown_rx: watch::Receiver<()>,
    ) {
        let topic_map = self.topic_map.read().await;
        let rtsp_mappings: Vec<_> = topic_map
            .iter()
            .filter(|mapping| mapping.protocol == Protocol::RTSP)
            .cloned()
            .collect();
        drop(topic_map);

        for mapping in rtsp_mappings {
            let topic = mapping.topic.clone();

            // Skip if already running
            if running_pipelines.contains_key(&topic) {
                continue;
            }

            info!("Spawning new RTSP pipeline for: {}", topic);

            let user_id = mapping.entity_id.clone();
            let streams = self.streams.clone();
            let (pipeline_shutdown_tx, pipeline_shutdown_rx) = watch::channel(());
            let (packet_tx, _) = broadcast::channel(1024);

            // Store shutdown sender for this pipeline
            running_pipelines.insert(topic.clone(), pipeline_shutdown_tx);

            // Clone for the spawned task
            let running_pipelines_clone = running_pipelines.clone();
            let topic_clone = topic.clone();
            let mut main_shutdown_rx = shutdown_rx.clone();

            tokio::spawn(async move {
                let mut pipeline_shutdown_rx = pipeline_shutdown_rx;

                loop {
                    let mut shutdown_rx_clone = pipeline_shutdown_rx.clone();
                    let pipeline_future = run_pipeline(
                        &topic_clone,
                        &user_id,
                        packet_tx.clone(),
                        streams.clone(),
                        &mut shutdown_rx_clone,
                    );

                    tokio::select! {
                        _ = main_shutdown_rx.changed() => {
                            info!("Main shutdown signal received, stopping pipeline for {}", topic_clone);
                            break;
                        }
                        _ = pipeline_shutdown_rx.changed() => {
                            info!("Pipeline shutdown signal received for {}", topic_clone);
                            break;
                        }
                        pipeline_result = pipeline_future => {
                            match pipeline_result {
                                Ok(_) => {
                                    info!("Pipeline for {} finished gracefully.", topic_clone);
                                    break;
                                }
                                Err(e) => {
                                    error!("Error in pipeline for {}. Restarting in 5s: {}", topic_clone, e);
                                    tokio::time::sleep(tokio::time::Duration::from_secs(5)).await;
                                }
                            }
                        }
                    }
                }

                // Remove from running pipelines when done
                running_pipelines_clone.remove(&topic_clone);
                info!("Pipeline for {} removed from running list", topic_clone);
            });
        }
    }
}

#[async_trait]
impl MediaAdapter for RtspPullAdapter {
    fn protocol(&self) -> Protocol {
        Protocol::RTSP
    }

    async fn start(&self, shutdown: watch::Receiver<()>) -> Result<()> {
        self.start_pipelines(shutdown).await
    }
}

async fn run_pipeline(
    rtsp_url: &str,
    user_id: &str,
    packet_tx: broadcast::Sender<Packet>,
    streams: StreamManager,
    shutdown_rx: &mut watch::Receiver<()>,
) -> Result<(), Error> {
    let pipeline_str = format!(
        "rtspsrc location={} latency=0 ! application/x-rtp,media=video,encoding-name=H264 ! appsink name=sink emit-signals=true",
        rtsp_url
    );

    let pipeline = gstreamer::parse::launch(&pipeline_str)?;
    let pipeline_bin = pipeline
        .downcast::<gstreamer::Bin>()
        .map_err(|_| anyhow!("Pipeline element is not a Bin"))?;
    let appsink = pipeline_bin
        .by_name("sink")
        .ok_or_else(|| anyhow!("Failed to get sink element"))?
        .downcast::<AppSink>()
        .map_err(|_| anyhow!("Sink element is not an AppSink"))?;

    let is_registered = Arc::new(AtomicBool::new(false));
    let rtsp_url_clone = rtsp_url.to_string();
    let user_id_clone = user_id.to_string();
    let streams_for_cb = streams.clone();
    let packet_tx_for_cb = packet_tx.clone();

    appsink.set_callbacks(
        AppSinkCallbacks::builder()
            .new_sample(move |sink| {
                let sample = sink.pull_sample().map_err(|_| gstreamer::FlowError::Eos)?;
                let buffer = sample.buffer().ok_or(gstreamer::FlowError::Error)?;
                let map = buffer
                    .map_readable()
                    .map_err(|_| gstreamer::FlowError::Error)?;

                match Packet::unmarshal(&mut map.as_slice()) {
                    Ok(packet) => {
                        let ssrc: u32 = packet.header.ssrc;

                        if !is_registered.load(Ordering::SeqCst) {
                            info!(
                                "RTSP stream {} registered with SSRC: {}",
                                rtsp_url_clone, ssrc
                            );

                            let descriptor = StreamDescriptor {
                                id: ssrc,
                                topic: rtsp_url_clone.clone(),
                                user_id: user_id_clone.clone(),
                                media_type: MediaType::Video,
                                protocol: Protocol::RTSP,
                            };
                            streams_for_cb.insert_with_sender(descriptor, packet_tx_for_cb.clone());
                            streams_for_cb.mark_online(ssrc);
                            is_registered.store(true, Ordering::SeqCst);
                        }

                        if let Some(stream_handle) = streams_for_cb.get_by_ssrc(ssrc) {
                            *stream_handle.last_seen.write().unwrap() = Instant::now();
                        }

                        if packet_tx_for_cb.send(packet).is_err() {
                            // Receiver is gone, maybe log this.
                        }
                    }
                    Err(e) => {
                        warn!("Failed to unmarshal RTP packet from GStreamer: {}", e);
                    }
                }
                Ok(gstreamer::FlowSuccess::Ok)
            })
            .build(),
    );

    pipeline_bin.set_state(gstreamer::State::Playing)?;
    let bus = pipeline_bin.bus().unwrap();
    let mut bus_stream = bus.stream();

    loop {
        tokio::select! {
            _ = shutdown_rx.changed() => {
                info!("Shutdown signal received in run_pipeline for {}. Sending EOS.", rtsp_url);
                if !pipeline_bin.send_event(gstreamer::event::Eos::new()) {
                    warn!("Failed to send EOS to pipeline {}", rtsp_url);
                }
                break;
            }
            maybe_msg = bus_stream.next() => {
                match maybe_msg {
                    Some(msg) => {
                        use gstreamer::MessageView;
                        match msg.view() {
                            MessageView::Error(err) => {
                                error!("Error from pipeline {}: {} ({})", rtsp_url, err.error(), err.debug().unwrap_or_default());
                                pipeline_bin.set_state(gstreamer::State::Null)?;
                                return Err(anyhow!("Pipeline error: {}", err.error()));
                            }
                            MessageView::Eos(_) => {
                                info!("End of stream for {}", rtsp_url);
                                break;
                            }
                            _ => (),
                        }
                    }
                    None => {
                        info!("Bus stream ended for {}", rtsp_url);
                        break;
                    }
                }
            }
        }
    }

    pipeline_bin.set_state(gstreamer::State::Null)?;
    info!("Pipeline for {} has been set to NULL state.", rtsp_url);
    Ok(())
}


================================================
FILE: apps/server/src/recording/manager.rs
================================================
use anyhow::{anyhow, Result};
use chrono::Utc;
use dashmap::mapref::entry::Entry;
use dashmap::DashMap;
use std::path::PathBuf;
use std::sync::Arc;
use tokio::sync::watch;
use tracing::{error, info, warn};

use crate::db::models::{NewRecording, UpdateRecording};
use crate::db::repository::recordings as recordings_repo;
use crate::recording::service::RecordingService;
use crate::state::{DbPool, MediaType, StreamManager};

pub struct ActiveRecording {
    pub recording_id: i32,
    pub topic: String,
    pub shutdown_tx: watch::Sender<()>,
}

pub struct RecordingManager {
    active_recordings: Arc<DashMap<String, ActiveRecording>>,
    streams: StreamManager,
    pool: DbPool,
    recordings_dir: PathBuf,
}

impl RecordingManager {
    pub fn new(streams: StreamManager, pool: DbPool) -> Self {
        let recordings_dir = PathBuf::from("recordings");

        // Create recordings directory if it doesn't exist
        if let Err(e) = std::fs::create_dir_all(&recordings_dir) {
            error!("Failed to create recordings directory: {}", e);
        }

        // Cleanup orphaned recordings from previous crashes
        Self::cleanup_orphaned_recordings(&pool);

        Self {
            active_recordings: Arc::new(DashMap::new()),
            streams,
            pool,
            recordings_dir,
        }
    }

    /// Mark any recordings still in "recording" status as "abandoned"
    /// This handles cases where the server crashed while recording
    fn cleanup_orphaned_recordings(pool: &DbPool) {
        match recordings_repo::mark_orphaned_as_abandoned(pool) {
            Ok(count) if count > 0 => {
                warn!(
                    "Cleaned up {} orphaned recording(s) from previous session",
                    count
                );
            }
            Ok(_) => {
                info!("No orphaned recordings found");
            }
            Err(e) => {
                error!("Failed to cleanup orphaned recordings: {}", e);
            }
        }
    }

    pub fn start_recording(&self, topic: &str, user_id: Option<i32>) -> Result<i32> {
        // Atomic check-then-insert using DashMap::entry()
        // This prevents race conditions where two threads could both pass the
        // contains_key check and try to start recordings for the same topic
        match self.active_recordings.entry(topic.to_string()) {
            Entry::Occupied(_) => {
                return Err(anyhow!(
                    "Recording already in progress for topic: {}",
                    topic
                ));
            }
            Entry::Vacant(entry) => {
                // Get stream handle
                let stream_handle = self
                    .streams
                    .get_by_topic(topic)
                    .ok_or_else(|| anyhow!("Stream not found for topic: {}", topic))?;

                let media_type = stream_handle.descriptor.media_type;
                let device_id = stream_handle.descriptor.user_id.clone();

                // Generate filename with date hierarchy
                let now = Utc::now();
                let date_path = self
                    .recordings_dir
                    .join(now.format("%Y").to_string())
                    .join(now.format("%m").to_string())
                    .join(now.format("%d").to_string());

                // Create date directory
                std::fs::create_dir_all(&date_path)?;

                // Sanitize topic for filename (replace problematic characters)
                let safe_topic = topic
                    .replace(['/', '\\', ':', '*', '?', '"', '<', '>', '|'], "_")
                    .chars()
                    .take(50)
                    .collect::<String>();

                let filename = format!("recording_{}_{}.mkv", safe_topic, now.format("%H%M%S"));
                let file_path = date_path.join(&filename);

                // Create database record
                let new_recording = NewRecording {
                    stream_ssrc: stream_handle.descriptor.id as i32,
                    topic,
                    device_id: &device_id,
                    media_type: match media_type {
                        MediaType::Video => "video",
                        MediaType::Audio => "audio",
                    },
                    filename: &filename,
                    file_path: file_path.to_str().unwrap(),
                    status: "recording",
                    created_by_user_id: user_id,
                };

                let recording = recordings_repo::create_recording(&self.pool, new_recording)?;
                let recording_id = recording.id;

                // Create shutdown channel
                let (shutdown_tx, shutdown_rx) = watch::channel(());

                // Start recording service in a new task with automatic cleanup
                let service = RecordingService::new(
                    recording_id,
                    stream_handle.clone(),
                    file_path,
                    self.pool.clone(),
                    media_type,
                );

                // Clone references for the spawned task
                let topic_clone = topic.to_string();
                let pool_clone = self.pool.clone();
                let active_recordings_clone = self.active_recordings.clone();

                tokio::spawn(async move {
                    let result = service.run(shutdown_rx).await;

                    // Automatic cleanup: remove from active recordings when task completes
                    active_recordings_clone.remove(&topic_clone);

                    // Update DB status on failure
                    if let Err(e) = result {
                        error!("Recording service error for id={}: {}", recording_id, e);
                        let update = UpdateRecording {
                            status: Some("failed".to_string()),
                            ended_at: Some(Utc::now().naive_utc()),
                            ..Default::default()
                        };
                        if let Err(db_err) =
                            recordings_repo::update_recording(&pool_clone, recording_id, &update)
                        {
                            error!(
                                "Failed to update recording status to failed: {}",
                                db_err
                            );
                        }
                    }
                });

                // Insert into active recordings (atomic with the entry check)
                entry.insert(ActiveRecording {
                    recording_id,
                    topic: topic.to_string(),
                    shutdown_tx,
                });

                info!("Started recording: id={}, topic={}", recording_id, topic);
                Ok(recording_id)
            }
        }
    }

    pub fn stop_recording(&self, recording_id: i32) -> Result<()> {
        // Find the active recording by ID
        let topic = self
            .active_recordings
            .iter()
            .find(|entry| entry.value().recording_id == recording_id)
            .map(|entry| entry.key().clone());

        if let Some(topic) = topic {
            self.stop_recording_by_topic(&topic)
        } else {
            Err(anyhow!("Recording not found with id: {}", recording_id))
        }
    }

    pub fn stop_recording_by_topic(&self, topic: &str) -> Result<()> {
        if let Some((_, active_recording)) = self.active_recordings.remove(topic) {
            info!(
                "Stopping recording: id={}, topic={}",
                active_recording.recording_id, topic
            );
            // Send shutdown signal
            active_recording.shutdown_tx.send(()).ok();
            Ok(())
        } else {
            Err(anyhow!("No active recording found for topic: {}", topic))
        }
    }

    pub fn is_recording(&self, topic: &str) -> bool {
        self.active_recordings.contains_key(topic)
    }

    pub fn get_active_recording_id(&self, topic: &str) -> Option<i32> {
        self.active_recordings
            .get(topic)
            .map(|entry| entry.value().recording_id)
    }

    pub fn get_all_active_recordings(&self) -> Vec<(String, i32)> {
        self.active_recordings
            .iter()
            .map(|entry| (entry.key().clone(), entry.value().recording_id))
            .collect()
    }
}


================================================
FILE: apps/server/src/recording/mod.rs
================================================
pub mod manager;
pub mod muxer;
pub mod service;

pub use manager::RecordingManager;
pub use service::RecordingService;


================================================
FILE: apps/server/src/recording/muxer.rs
================================================
use anyhow::{anyhow, Result};
use gstreamer::prelude::*;
use gstreamer_app::AppSrc;
use std::sync::Arc;
use tokio::sync::Mutex;
use tracing::{error, info, warn};
use webrtc::rtp::packet::Packet;
use webrtc::util::Marshal;

use crate::state::MediaType;

pub struct GstMuxer {
    pipeline: gstreamer::Pipeline,
    appsrc: AppSrc,
    media_type: MediaType,
    output_path: String,
    bytes_written: Arc<Mutex<u64>>,
}

impl GstMuxer {
    pub fn new(output_path: &str, media_type: MediaType, payload_type: u8) -> Result<Self> {
        gstreamer::init()?;

        let pipeline_str = match media_type {
            MediaType::Video => format!(
                "appsrc name=src format=3 is-live=true do-timestamp=true ! \
                 application/x-rtp,media=video,encoding-name=H264,clock-rate=90000,payload={} ! \
                 rtph264depay ! h264parse ! \
                 matroskamux ! filesink location={}",
                payload_type, output_path
            ),
            MediaType::Audio => format!(
                "appsrc name=src format=3 is-live=true do-timestamp=true ! \
                 application/x-rtp,media=audio,encoding-name=OPUS,clock-rate=48000,payload={} ! \
                 rtpopusdepay ! opusparse ! \
                 matroskamux ! filesink location={}",
                payload_type, output_path
            ),
        };

        let pipeline = gstreamer::parse::launch(&pipeline_str)?
            .downcast::<gstreamer::Pipeline>()
            .map_err(|_| anyhow!("Pipeline is not a Pipeline element"))?;

        let appsrc = pipeline
            .by_name("src")
            .ok_or_else(|| anyhow!("Failed to get appsrc element"))?
            .downcast::<AppSrc>()
            .map_err(|_| anyhow!("Element is not an AppSrc"))?;

        // Set appsrc properties
        appsrc.set_property("format", gstreamer::Format::Time);
        appsrc.set_property("is-live", true);

        Ok(Self {
            pipeline,
            appsrc,
            media_type,
            output_path: output_path.to_string(),
            bytes_written: Arc::new(Mutex::new(0)),
        })
    }

    pub fn start(&self) -> Result<()> {
        self.pipeline.set_state(gstreamer::State::Playing)?;
        info!("Recording pipeline started for {}", self.output_path);
        Ok(())
    }

    pub fn write_packet(&self, packet: &Packet) -> Result<()> {
        let data = packet.marshal()?;
        let mut buffer = gstreamer::Buffer::with_size(data.len())?;

        {
            let buffer_ref = buffer.get_mut().unwrap();
            let mut map = buffer_ref.map_writable()?;
            map.copy_from_slice(&data);
        }

        match self.appsrc.push_buffer(buffer) {
            Ok(_) => {
                // Track bytes written
                let bytes_written = self.bytes_written.clone();
                let data_len = data.len() as u64;
                tokio::spawn(async move {
                    let mut bw = bytes_written.lock().await;
                    *bw += data_len;
                });
                Ok(())
            }
            Err(e) => {
                warn!("Failed to push buffer to appsrc: {:?}", e);
                Err(anyhow!("Failed to push buffer: {:?}", e))
            }
        }
    }

    pub async fn get_bytes_written(&self) -> u64 {
        *self.bytes_written.lock().await
    }

    pub fn finalize(&self) -> Result<()> {
        info!("Finalizing recording for {}", self.output_path);

        // Send EOS to gracefully close the file
        self.appsrc.end_of_stream()?;

        // Wait for EOS to propagate
        let bus = self.pipeline.bus().unwrap();
        let timeout = gstreamer::ClockTime::from_seconds(5);

        for msg in bus.iter_timed(timeout) {
            use gstreamer::MessageView;
            match msg.view() {
                MessageView::Eos(_) => {
                    info!("EOS received, recording finalized: {}", self.output_path);
                    break;
                }
                MessageView::Error(err) => {
                    error!(
                        "Error while finalizing recording: {} ({:?})",
                        err.error(),
                        err.debug()
                    );
                    break;
                }
                _ => {}
            }
        }

        self.pipeline.set_state(gstreamer::State::Null)?;
        info!("Recording pipeline stopped for {}", self.output_path);
        Ok(())
    }

    pub fn output_path(&self) -> &str {
        &self.output_path
    }

    pub fn media_type(&self) -> MediaType {
        self.media_type
    }
}

impl Drop for GstMuxer {
    fn drop(&mut self) {
        if let Err(e) = self.pipeline.set_state(gstreamer::State::Null) {
            error!("Failed to set pipeline to Null state: {}", e);
        }
    }
}


================================================
FILE: apps/server/src/recording/service.rs
================================================
use anyhow::Result;
use chrono::Utc;
use std::path::PathBuf;
use std::time::Instant;
use tokio::sync::{broadcast, watch};
use tracing::{error, info, warn};
use webrtc::rtp::packet::Packet;

use crate::db::models::UpdateRecording;
use crate::db::repository::recordings as recordings_repo;
use crate::recording::muxer::GstMuxer;
use crate::state::{DbPool, MediaType, StreamHandle};

pub struct RecordingService {
    recording_id: i32,
    stream_handle: StreamHandle,
    output_path: PathBuf,
    pool: DbPool,
    media_type: MediaType,
}

impl RecordingService {
    pub fn new(
        recording_id: i32,
        stream_handle: StreamHandle,
        output_path: PathBuf,
        pool: DbPool,
        media_type: MediaType,
    ) -> Self {
        Self {
            recording_id,
            stream_handle,
            output_path,
            pool,
            media_type,
        }
    }

    pub async fn run(&self, mut shutdown_rx: watch::Receiver<()>) -> Result<()> {
        info!(
            "Starting recording service for recording_id={}, topic={}",
            self.recording_id, self.stream_handle.descriptor.topic
        );

        // Subscribe to stream's broadcast channel
        let mut packet_rx = self.stream_handle.packet_tx.subscribe();

        // Wait for first packet to extract payload type
        let first_packet: Packet;
        loop {
            tokio::select! {
                _ = shutdown_rx.changed() => {
                    info!("Shutdown signal received before first packet for recording_id={}", self.recording_id);
                    self.update_recording_failed("Shutdown before receiving any packets")?;
                    return Ok(());
                }
                result = packet_rx.recv() => {
                    match result {
                        Ok(packet) => {
                            first_packet = packet;
                            break;
                        }
                        Err(broadcast::error::RecvError::Lagged(n)) => {
                            warn!("Recording lagged {} packets while waiting for first packet", n);
                        }
                        Err(broadcast::error::RecvError::Closed) => {
                            info!("Broadcast channel closed before first packet for recording_id={}", self.recording_id);
                            self.update_recording_failed("Stream closed before receiving any packets")?;
                            return Ok(());
                        }
                    }
                }
            }
        }

        // Extract payload type from first packet
        let payload_type = first_packet.header.payload_type;
        info!(
            "First packet received for recording_id={}, payload_type={}",
            self.recording_id, payload_type
        );

        // Initialize GStreamer muxer with correct payload type
        let muxer = match GstMuxer::new(
            self.output_path.to_str().unwrap(),
            self.media_type,
            payload_type,
        ) {
            Ok(m) => m,
            Err(e) => {
                error!("Failed to initialize muxer: {}", e);
                self.update_recording_failed(&format!("Muxer init failed: {}", e))?;
                return Err(e);
            }
        };

        if let Err(e) = muxer.start() {
            error!("Failed to start muxer: {}", e);
            self.update_recording_failed(&format!("Muxer start failed: {}", e))?;
            return Err(e);
        }

        // Write the first packet
        let start_time = Instant::now();
        let mut packet_count: u64 = 0;
        let mut last_log_time = Instant::now();

        if let Err(e) = muxer.write_packet(&first_packet) {
            warn!("Failed to write first packet: {}", e);
        } else {
            packet_count += 1;
        }

        loop {
            tokio::select! {
                _ = shutdown_rx.changed() => {
                    info!("Shutdown signal received for recording_id={}", self.recording_id);
                    break;
                }
                result = packet_rx.recv() => {
                    match result {
                        Ok(packet) => {
                            if let Err(e) = muxer.write_packet(&packet) {
                                warn!("Failed to write packet: {}", e);
                            } else {
                                packet_count += 1;
                            }

                            // Log progress every 30 seconds
                            if last_log_time.elapsed().as_secs() >= 30 {
                                info!(
                                    "Recording in progress: id={}, packets={}, duration={}s",
                                    self.recording_id,
                                    packet_count,
                                    start_time.elapsed().as_secs()
                                );
                                last_log_time = Instant::now();
                            }
                        }
                        Err(broadcast::error::RecvError::Lagged(n)) => {
                            warn!("Recording lagged {} packets for recording_id={}", n, self.recording_id);
                        }
                        Err(broadcast::error::RecvError::Closed) => {
                            info!("Broadcast channel closed for recording_id={}", self.recording_id);
                            break;
                        }
                    }
                }
            }
        }

        // Finalize recording
        info!("Finalizing recording_id={}", self.recording_id);
        if let Err(e) = muxer.finalize() {
            error!("Failed to finalize muxer: {}", e);
        }

        // Calculate duration and file size
        let duration_ms = start_time.elapsed().as_millis() as i32;
        let file_size = std::fs::metadata(&self.output_path)
            .map(|m| m.len() as i32)
            .unwrap_or(0);

        // Update recording in database
        self.update_recording_completed(duration_ms, file_size)?;

        info!(
            "Recording completed: id={}, duration={}ms, size={} bytes, packets={}",
            self.recording_id, duration_ms, file_size, packet_count
        );

        Ok(())
    }

    fn update_recording_completed(&self, duration_ms: i32, file_size: i32) -> Result<()> {
        let update = UpdateRecording {
            status: Some("completed".to_string()),
            ended_at: Some(Utc::now().naive_utc()),
            duration_ms: Some(duration_ms),
            file_size: Some(file_size),
        };

        recordings_repo::update_recording(&self.pool, self.recording_id, &update)?;
        Ok(())
    }

    fn update_recording_failed(&self, error_msg: &str) -> Result<()> {
        let update = UpdateRecording {
            status: Some("failed".to_string()),
            ended_at: Some(Utc::now().naive_utc()),
            ..Default::default()
        };

        recordings_repo::update_recording(&self.pool, self.recording_id, &update)?;
        error!(
            "Recording failed: id={}, error={}",
            self.recording_id, error_msg
        );
        Ok(())
    }
}


================================================
FILE: apps/server/src/routes.rs
================================================
use std::sync::Arc;

use anyhow::Result;
use axum::{
    http::{header, Method, StatusCode, Uri},
    response::IntoResponse,
    routing::{delete, get, post, put},
    Json, Router,
};
use serde_json::json;
use tokio::sync::watch;
use tower_http::cors::{Any, CorsLayer};
use tracing::info;

use crate::{
    handler::{
        auth::auth_with_password, configurations, custom_nodes, dashboards, device_tokens, devices,
        entities, flows, ha, integration, log, map, permissions, recordings, roles, sdr, stat,
        state, storage, streams, tunnel, users, ws::ws_handler,
    },
    state::AppState,
};
use rust_embed::Embed;

async fn get_server_info() -> Json<serde_json::Value> {
    Json(json!({
        "id": "vessel-server",
        "status": "success",
        "code": 200,
    }))
}

#[derive(Embed)]
#[folder = "../../apps/client/dist/"]
struct ClientAsset;

async fn static_handler(uri: Uri) -> impl IntoResponse {
    let mut path = uri.path().trim_start_matches('/').to_string();

    if path.is_empty() {
        path = "index.html".to_string();
    }

    match ClientAsset::get(&path) {
        Some(content) => {
            let mime = mime_guess::from_path(path).first_or_octet_stream();
            ([(header::CONTENT_TYPE, mime.as_ref())], content.data).into_response()
        }
        None => match ClientAsset::get("index.html") {
            Some(content) => {
                let mime = mime_guess::from_path("index.html").first_or_octet_stream();
                ([(header::CONTENT_TYPE, mime.as_ref())], content.data).into_response()
            }
            None => (StatusCode::NOT_FOUND, "404 Not Found").into_response(),
        },
    }
}

pub async fn web_server(
    addr: String,
    app_state: Arc<AppState>,
    mut shutdown_rx: watch::Receiver<()>,
) -> Result<()> {
    let cors = CorsLayer::new()
        .allow_origin(Any)
        .allow_methods([Method::GET, Method::POST, Method::PUT, Method::DELETE])
        .allow_headers([header::AUTHORIZATION, header::CONTENT_TYPE]);

    let api_routes = Router::new()
        .route("/auth", post(auth_with_password))
        .route(
            "/users",
            get(users::get_users_list).post(users::create_user),
        )
        .route(
            "/users/:id",
            get(users::get_user)
                .put(users::update_user)
                .delete(users::delete_user),
        )
        .route(
            "/users/:id/roles",
            get(users::get_user_roles).post(users::assign_role_to_user),
        )
        .route(
            "/users/:id/roles/:role_id",
            delete(users::remove_role_from_user),
        )
        .route("/roles", get(roles::get_roles).post(roles::create_role))
        .route(
            "/roles/:id",
            put(roles::update_role).delete(roles::delete_role),
        )
        .route(
            "/roles/:id/permissions",
            get(roles::get_role_permissions).post(roles::grant_permission_to_role),
        )
        .route(
            "/roles/:id/permissions/:permission_id",
            delete(roles::revoke_permission_from_role),
        )
        .route(
            "/permissions",
            get(permissions::get_permissions).post(permissions::create_permission),
        )
        .route(
            "/devices",
            post(devices::create_device).get(devices::get_devices),
        )
        .route(
            "/devices/:id",
            put(devices::update_device).delete(devices::delete_device),
        )
        .route("/devices/id/:device_pk_id", get(devices::get_device))
        .route(
            "/entities",
            get(entities::get_entities).post(entities::create_entity),
        )
        .route("/entities/all", get(entities::get_entities_with_states))
        .route(
            "/entities/:entity_id/history",
            get(entities::get_entity_history),
        )
        .route(
            "/entities/:id",
            put(entities::update_entity).delete(entities::delete_entity),
        )
        .route(
            "/configurations",
            post(configurations::create_config).get(configurations::get_configs),
        )
        .route(
            "/configurations/:id",
            put(configurations::update_config).delete(configurations::delete_config),
        )
        .route("/streams/register", post(streams::register_stream))
        .route(
            "/devices/:id/token",
            post(device_tokens::issue_token)
                .get(device_tokens::get_token_info)
                .delete(device_tokens::revoke_token),
        )
        .route("/flows", post(flows::create_flow).get(flows::get_all_flows))
        .route(
            "/flows/:id",
            put(flows::update_flow).delete(flows::delete_flow),
        )
        .route(
            "/flows/:id/versions",
            post(flows::create_flow_version).get(flows::get_flow_versions),
        )
        .route("/stat", get(stat::get_stats))
        .route("/tunnel/start", post(tunnel::start_tunnel))
        .route("/tunnel/stop", post(tunnel::stop_tunnel))
        .route("/tunnel/status", get(tunnel::status_tunnel))
        .route("/logs", get(log::list_log_files_handler))
        .route("/logs/:filename", get(log::get_log_by_filename_handler))
        .route("/logs/latest", get(log::get_latest_log_handler))
        .route("/map/layers", post(map::create_layer).get(map::get_layers))
        .route(
            "/map/layers/:id",
            get(map::get_layer)
                .put(map::update_layer)
                .delete(map::delete_layer),
        )
        .route("/map/features", post(map::create_feature))
        .route(
            "/map/features/:id",
            get(map::get_feature)
                .put(map::update_feature)
                .delete(map::delete_feature),
        )
        .route("/ha/states", get(ha::get_all_states))
        .route("/ha/states/:entity_id", post(ha::post_state))
        .route("/sdr/frequency", post(sdr::set_frequency))
        .route("/sdr/samplerate", get(sdr::get_samplerate))
        .route("/sdr/start", post(sdr::start_stream))
        .route("/sdr/stop", post(sdr::stop_stream))
        .route("/sdr/audio", get(sdr::sdr_audio_ws))
        .route("/integrations/register", post(integration::register_integration))
        .route("/integrations/status", get(integration::get_integration_status))
        .route("/integrations/:integration_id", delete(integration::delete_integration))
        .route(
            "/custom-nodes",
            post(custom_nodes::create_custom_node_handler)
                .get(custom_nodes::get_all_custom_nodes_handler),
        )
        .route(
            "/custom-nodes/:node_type",
            get(custom_nodes::get_custom_node_handler)
                .put(custom_nodes::update_custom_node_handler)
                .delete(custom_nodes::delete_custom_node_handler),
        )
        .route(
            "/dynamic-dashboards",
            get(dashboards::list_dashboards).post(dashboards::create_dashboard),
        )
        .route(
            "/dynamic-dashboards/:id",
            get(dashboards::get_dashboard)
                .put(dashboards::update_dashboard)
                .delete(dashboards::delete_dashboard),
        )
        .route(
            "/storage/",
            get(storage::read_handler)
                .put(storage::create_or_update_file_handler)
                .delete(storage::delete_handler),
        )
        .route(
            "/storage/*path",
            get(storage::read_handler)
                .put(storage::create_or_update_file_handler)
                .delete(storage::delete_handler),
        )
        .route("/storage/mkdir/*path", post(storage::create_dir_handler))
        .route("/storage/rename/*from_path", post(storage::rename_handler))
        .route("/states/*topic", post(state::set_state))
        .route(
            "/recordings",
            post(recordings::start_recording).get(recordings::list_recordings),
        )
        .route("/recordings/active", get(recordings::get_active_recordings))
        .route(
            "/recordings/active/:topic",
            get(recordings::is_topic_recording),
        )
        .route(
            "/recordings/:id",
            get(recordings::get_recording).delete(recordings::delete_recording),
        )
        .route("/recordings/:id/stop", post(recordings::stop_recording))
        .route("/recordings/:id/stream", get(recordings::stream_recording));

    let app = Router::new()
        .route("/info", get(get_server_info))
        .route("/signal", get(ws_handler))
        .nest("/api", api_routes)
        .with_state(app_state)
        .layer(cors)
        .fallback(static_handler);
    info!("Signal server listening on {}", addr);
    let listener = tokio::net::TcpListener::bind(addr).await?;

    axum::serve(listener, app.into_make_service())
        .with_graceful_shutdown(async move {
            shutdown_rx.changed().await.ok();
            info!("Shutting down web server...");
        })
        .await?;
    Ok(())
}


================================================
FILE: apps/server/src/state.rs
================================================
use bytes::Bytes;
use serde::{Deserialize, Serialize};
use serde_json::Value;
use std::sync::Arc;
use tokio::sync::{broadcast, mpsc, watch, RwLock};
use tokio::time::Instant;
use webrtc::rtp::packet::Packet;

use diesel::r2d2::{self, ConnectionManager};
use diesel::sqlite::SqliteConnection;

pub type DbPool = r2d2::Pool<ConnectionManager<SqliteConnection>>;

use dashmap::DashMap;

use crate::flow::manager_state::FlowManagerCommand;
use crate::recording::RecordingManager;
use crate::{db::models::SystemConfiguration, tunnel_control::TunnelManager};

#[derive(Serialize, Deserialize, Clone, Copy, Debug, PartialEq, Eq)]
#[serde(rename_all = "lowercase")]
pub enum MediaType {
    Audio,
    Video,
}

#[derive(Serialize, Clone, Debug, PartialEq, Eq)]
pub enum Protocol {
    MQTT,
    Udp,
    Lora,
    RTSP,
    Http,
    HomeAssistant,
    Ros2,
    Sdrpp,
}

#[derive(Clone, Debug)]
pub struct StreamDescriptor {
    pub id: u32,
    pub topic: String,
    pub user_id: String,
    pub media_type: MediaType,
    pub protocol: Protocol,
}

#[derive(Clone, Debug)]
pub struct StreamHandle {
    pub descriptor: StreamDescriptor,
    pub packet_tx: broadcast::Sender<Packet>,
    pub last_seen: Arc<std::sync::RwLock<Instant>>,
    pub is_online: Arc<std::sync::RwLock<bool>>,
}

#[derive(Default)]
pub struct StreamRegistry {
    streams: DashMap<u32, StreamHandle>,
    topic_index: DashMap<String, u32>,
}

impl StreamRegistry {
    pub fn new() -> Self {
        Self::default()
    }

    pub fn register(&self, descriptor: StreamDescriptor) -> StreamHandle {
        let (packet_tx, _) = broadcast::channel::<Packet>(8192);
        self.insert_with_sender(descriptor, packet_tx)
    }

    pub fn insert_with_sender(
        &self,
        descriptor: StreamDescriptor,
        packet_tx: broadcast::Sender<Packet>,
    ) -> StreamHandle {
        let handle = StreamHandle {
            descriptor: descriptor.clone(),
            packet_tx,
            last_seen: Arc::new(std::sync::RwLock::new(Instant::now())),
            is_online: Arc::new(std::sync::RwLock::new(false)),
        };

        self.topic_index
            .insert(descriptor.topic.clone(), descriptor.id);
        self.streams.insert(descriptor.id, handle.clone());
        handle
    }

    pub fn get_by_ssrc(&self, ssrc: u32) -> Option<StreamHandle> {
        self.streams.get(&ssrc).map(|h| h.clone())
    }

    pub fn get_by_topic(&self, topic: &str) -> Option<StreamHandle> {
        self.topic_index
            .get(topic)
            .and_then(|entry| self.get_by_ssrc(*entry.value()))
    }

    pub fn mark_online(&self, ssrc: u32) {
        if let Some(handle) = self.streams.get(&ssrc) {
            if let Ok(mut is_online) = handle.is_online.write() {
                *is_online = true;
            }
            if let Ok(mut last_seen) = handle.last_seen.write() {
                *last_seen = Instant::now();
            }
        }
    }

    pub fn update_last_seen(&self, ssrc: u32) {
        if let Some(handle) = self.streams.get(&ssrc) {
            if let Ok(mut last_seen) = handle.last_seen.write() {
                *last_seen = Instant::now();
            }
        }
    }

    pub fn iter(&self) -> dashmap::iter::Iter<'_, u32, StreamHandle> {
        self.streams.iter()
    }

    pub fn remove(&self, ssrc: &u32) -> Option<(u32, StreamHandle)> {
        if let Some((key, handle)) = self.streams.remove(ssrc) {
            self.topic_index.remove(&handle.descriptor.topic);
            Some((key, handle))
        } else {
            None
        }
    }

    pub fn len(&self) -> usize {
        self.streams.len()
    }
}

pub type StreamManager = Arc<StreamRegistry>;

#[derive(Serialize, Clone, Debug)]
pub struct MqttMessage {
    pub topic: String,
    pub bytes: Bytes,
}

#[derive(Serialize, Clone, Debug)]
pub struct TopicMapping {
    pub protocol: Protocol,
    pub topic: String,
    pub entity_id: String,
}

/// Dynamic dashboard widgets → running flows (via `DASHBOARD_EVENT_LISTENER` nodes).
#[derive(Clone, Debug, Serialize, Deserialize)]
pub struct DashboardUiEvent {
    pub listener_id: String,
    pub event_id: String,
    #[serde(default)]
    pub occurred_at: Option<String>,
    #[serde(default)]
    pub dashboard_id: Option<String>,
    #[serde(default)]
    pub group_id: Option<String>,
    #[serde(default)]
    pub item_id: Option<String>,
    pub component_type: String,
    pub action: String,
    #[serde(default)]
    pub value: Option<Value>,
    pub source_session_id: String,
}

pub struct AppState {
    pub streams: StreamManager,
    pub mqtt_tx: broadcast::Sender<MqttMessage>,
    pub jwt_secret: String,
    pub pool: DbPool,
    pub topic_map: Arc<RwLock<Vec<TopicMapping>>>,
    /// Notifies subscribers when topic_map has been updated
    pub topic_map_notify: watch::Sender<()>,
    pub flow_manager_tx: mpsc::Sender<FlowManagerCommand>,
    pub dashboard_ui_tx: broadcast::Sender<DashboardUiEvent>,
    pub broadcast_tx: broadcast::Sender<String>,
    pub system_configs: Vec<SystemConfiguration>,
    pub tunnel_manager: Arc<TunnelManager>,
    pub recording_manager: Arc<RecordingManager>,
}


================================================
FILE: apps/server/src/tunnel_control.rs
================================================
use std::{
    collections::HashMap,
    sync::Arc,
};

use anyhow::{anyhow, Context, Result};
use bytes::Bytes;
use futures_util::{SinkExt, StreamExt};
use httparse;
use tokio::{
    io::{AsyncReadExt, AsyncWriteExt},
    net::TcpStream,
    sync::{mpsc, Mutex, oneshot},
};
use tokio_tungstenite::tungstenite;
use url::Url;

const BINARY_PREFIX: usize = 8;
const MAX_HEADER_BYTES: usize = 64 * 1024;

#[derive(Debug, Clone)]
pub struct TunnelStatus {
    pub active: bool,
    pub session_id: Option<String>,
    pub server: Option<String>,
    pub target: Option<String>,
}

pub struct TunnelManager {
    inner: Mutex<Inner>,
}

struct Inner {
    handle: Option<tokio::task::JoinHandle<()>>,
    cancel: Option<oneshot::Sender<()>>,
    session_id: Option<String>,
    server: Option<String>,
    target: Option<String>,
}

impl TunnelManager {
    pub fn new() -> Self {
        Self {
            inner: Mutex::new(Inner {
                handle: None,
                cancel: None,
                session_id: None,
                server: None,
                target: None,
            }),
        }
    }

    pub async fn start(&self, server: String, target: String, access_token: Option<String>) -> Result<String> {
        let mut guard = self.inner.lock().await;
        if let Some(session) = guard.session_id.clone() {
            return Ok(session);
        }

        let (cancel_tx, cancel_rx) = oneshot::channel();
        let (session_tx, session_rx) = oneshot::channel();
        let server_clone = server.clone();
        let target_clone = target.clone();

        let handle = tokio::spawn(async move {
            if let Err(err) = run_agent(server_clone, target_clone, access_token, session_tx, cancel_rx).await {
                tracing::warn!("tunnel agent stopped: {err:#}");
            }
        });

        let session_id = session_rx
            .await
            .map_err(|_| anyhow!("agent failed to report session id"))?;

        guard.handle = Some(handle);
        guard.cancel = Some(cancel_tx);
        guard.session_id = Some(session_id.clone());
        guard.server = Some(server);
        guard.target = Some(target);

        Ok(session_id)
    }

    pub async fn stop(&self) -> Result<()> {
        let mut guard = self.inner.lock().await;
        if let Some(cancel) = guard.cancel.take() {
            let _ = cancel.send(());
        }
        if let Some(handle) = guard.handle.take() {
            let _ = handle.await;
        }
        guard.session_id = None;
        guard.server = None;
        guard.target = None;
        Ok(())
    }

    pub async fn status(&self) -> TunnelStatus {
        let guard = self.inner.lock().await;
        TunnelStatus {
            active: guard.session_id.is_some(),
            session_id: guard.session_id.clone(),
            server: guard.server.clone(),
            target: guard.target.clone(),
        }
    }
}

#[derive(Debug, serde::Serialize, serde::Deserialize)]
#[serde(tag = "kind", rename_all = "snake_case")]
enum AgentToServer {
    Register { target: String },
    ResponseHead {
        stream_id: u64,
        status: u16,
        headers: Vec<(String, String)>,
    },
    ResponseFinished { stream_id: u64 },
    Error {
        stream_id: Option<u64>,
        message: String,
    },
}

#[derive(Debug, serde::Serialize, serde::Deserialize)]
#[serde(tag = "kind", rename_all = "snake_case")]
enum ServerToAgent {
    Registered { session_id: String },
    Open {
        stream_id: u64,
        method: String,
        path: String,
        headers: Vec<(String, String)>,
        body_len: usize,
    },
    BodyFinished { stream_id: u64 },
    Close {
        stream_id: u64,
        reason: Option<String>,
    },
}

struct AgentState {
    target: TargetInfo,
    pending: Mutex<HashMap<u64, PendingRequest>>,
    outbound: mpsc::Sender<AgentOutbound>,
}

struct PendingRequest {
    method: String,
    path: String,
    headers: Vec<(String, String)>,
    body: Vec<u8>,
    body_finished: bool,
    tx: mpsc::Sender<Bytes>,
    rx: Option<mpsc::Receiver<Bytes>>,
    upgrade: bool,
}

enum AgentOutbound {
    Control(AgentToServer),
    Body { stream_id: u64, chunk: Bytes },
}

#[derive(Clone)]
struct TargetInfo {
    raw: String,
    host: String,
    port: u16,
}

impl TargetInfo {
    fn parse(raw: &str) -> Result<Self> {
        let url =
            Url::parse(raw).context("target must be a full URL, e.g. http://127.0.0.1:3000")?;
        let host = url
            .host_str()
            .ok_or_else(|| anyhow!("target host missing"))?
            .to_string();
        let port = url
            .port_or_known_default()
            .ok_or_else(|| anyhow!("target port missing"))?;
        Ok(Self {
            raw: raw.to_string(),
            host,
            port,
        })
    }

    fn host_header(&self) -> String {
        format!("{}:{}", self.host, self.port)
    }
}

async fn run_agent(
    server: String,
    target: String,
    access_token: Option<String>,
    session_tx: oneshot::Sender<String>,
    mut cancel: oneshot::Receiver<()>,
) -> Result<()> {
    let target_info = TargetInfo::parse(&target)?;

    // Parse the server URL to extract host for the Host header
    let server_url = Url::parse(&server).context("invalid tunnel server URL")?;
    let server_host = server_url
        .host_str()
        .ok_or_else(|| anyhow!("tunnel server URL has no host"))?;
    let host_header = match server_url.port() {
        Some(port) => format!("{}:{}", server_host, port),
        None => server_host.to_string(),
    };

    // Build WebSocket request with optional Authorization header
    let mut request = http::Request::builder()
        .uri(&server)
        .header("Host", &host_header)
        .header("Connection", "Upgrade")
        .header("Upgrade", "websocket")
        .header("Sec-WebSocket-Version", "13")
        .header("Sec-WebSocket-Key", tungstenite::handshake::client::generate_key());

    if let Some(token) = &access_token {
        request = request.header("Authorization", format!("Bearer {}", token));
    }

    let request = request.body(()).context("failed to build websocket request")?;
    let (ws_stream, _) = tokio_tungstenite::connect_async(request)
        .await
        .context("failed to connect to tunnel server")?;
    let (mut ws_tx, mut ws_rx) = ws_stream.split();

    let register = AgentToServer::Register {
        target: target.clone(),
    };
    ws_tx
        .send(tungstenite::Message::Text(
            serde_json::to_string(&register)?.into(),
        ))
        .await?;

    let session_id = wait_for_registration(&mut ws_rx).await?;
    let _ = session_tx.send(session_id.clone());
    tracing::info!(%session_id, target = %target_info.raw, "tunnel agent connected");

    let (out_tx, mut out_rx) = mpsc::channel::<AgentOutbound>(64);
    let writer = tokio::spawn(async move {
        while let Some(msg) = out_rx.recv().await {
            match msg {
                AgentOutbound::Control(ctrl) => {
                    let txt = serde_json::to_string(&ctrl)?;
                    ws_tx.send(tungstenite::Message::Text(txt.into())).await?;
                }
                AgentOutbound::Body { stream_id, chunk } => {
                    let mut data = Vec::with_capacity(BINARY_PREFIX + chunk.len());
                    data.extend_from_slice(&stream_id.to_be_bytes());
                    data.extend_from_slice(&chunk);
                    ws_tx
                        .send(tungstenite::Message::Binary(data.into()))
                        .await?;
                }
            }
        }
        Result::<_, anyhow::Error>::Ok(())
    });

    let agent = Arc::new(AgentState {
        target: target_info,
        pending: Mutex::new(HashMap::new()),
        outbound: out_tx.clone(),
    });

    let reader_agent = agent.clone();
    let reader = tokio::spawn(async move {
        while let Some(msg) = ws_rx.next().await {
            match msg {
                Ok(tungstenite::Message::Text(txt)) => {
                    let ctrl: ServerToAgent = serde_json::from_str(txt.as_ref())?;
                    handle_server_control(reader_agent.clone(), ctrl).await?;
                }
                Ok(tungstenite::Message::Binary(data)) => {
                    handle_server_body(reader_agent.clone(), data).await?;
                }
                Ok(tungstenite::Message::Close(_)) | Err(_) => break,
                _ => {}
            }
        }
        Result::<_, anyhow::Error>::Ok(())
    });

    tokio::select! {
        res = writer => { res??; }
        res = reader => { res??; }
        _ = &mut cancel => {
            tracing::info!("tunnel agent stop requested");
        }
    };

    Ok(())
}

async fn wait_for_registration(
    ws_rx: &mut (impl StreamExt<Item = Result<tungstenite::Message, tungstenite::Error>> + Unpin),
) -> Result<String> {
    while let Some(msg) = ws_rx.next().await {
        let msg = msg?;
        if let tungstenite::Message::Text(txt) = msg {
            if let Ok(ServerToAgent::Registered { session_id }) = serde_json::from_str(txt.as_ref())
            {
                return Ok(session_id);
            }
        }
    }
    Err(anyhow!("server closed before registration ack"))
}

async fn handle_server_control(agent: Arc<AgentState>, msg: ServerToAgent) -> Result<()> {
    match msg {
        ServerToAgent::Open {
            stream_id,
            method,
            path,
            headers,
            body_len: _,
        } => {
            let mut pending = agent.pending.lock().await;
            let headers_clone = headers.clone();
            let (tx, rx) = mpsc::channel(64);
            pending.insert(
                stream_id,
                PendingRequest {
                    method,
                    path,
                    headers,
                    body: Vec::new(),
                    body_finished: false,
                    tx,
                    rx: Some(rx),
                    upgrade: is_upgrade(&headers_clone),
                },
            );
        }
        ServerToAgent::BodyFinished { stream_id } => {
            if let Some(pending) = agent.pending.lock().await.get_mut(&stream_id) {
                pending.body_finished = true;
                let agent_clone = agent.clone();
                if let Some(rx) = pending.rx.take() {
                    let req = PendingRequest {
                        method: pending.method.clone(),
                        path: pending.path.clone(),
                        headers: pending.headers.clone(),
                        body: std::mem::take(&mut pending.body),
                        body_finished: true,
                        tx: pending.tx.clone(),
                        rx: Some(rx),
                        upgrade: pending.upgrade,
                    };
                    tokio::spawn(async move {
                        if let Err(err) = forward_request(agent_clone.clone(), stream_id, req).await
                        {
                            let _ = agent_clone
                                .outbound
                                .send(AgentOutbound::Control(AgentToServer::Error {
                                    stream_id: Some(stream_id),
                                    message: err.to_string(),
                                }))
                                .await;
                            tracing::warn!("stream {stream_id} failed: {err:#}");
                        }
                    });
                }
            }
        }
        ServerToAgent::Close { stream_id, reason } => {
            agent.pending.lock().await.remove(&stream_id);
            if let Some(reason) = reason {
                tracing::info!(stream_id, "server closed stream: {reason}");
            }
        }
        ServerToAgent::Registered { .. } => {
            // handled in wait_for_registration
        }
    }
    Ok(())
}

async fn handle_server_body(agent: Arc<AgentState>, data: Bytes) -> Result<()> {
    if data.len() < BINARY_PREFIX {
        return Err(anyhow!("binary frame too short"));
    }
    let stream_id = u64::from_be_bytes(data[..BINARY_PREFIX].try_into()?);
    let payload = &data[BINARY_PREFIX..];
    let mut guard = agent.pending.lock().await;
    if let Some(entry) = guard.get_mut(&stream_id) {
        if entry.body_finished {
            let _ = entry.tx.send(Bytes::copy_from_slice(payload)).await;
        } else {
            entry.body.extend_from_slice(payload);
        }
    }
    Ok(())
}

async fn forward_request(
    agent: Arc<AgentState>,
    stream_id: u64,
    req: PendingRequest,
) -> Result<()> {
    let addr = format!("{}:{}", agent.target.host, agent.target.port);
    let mut stream = TcpStream::connect(addr)
        .await
        .context("failed to reach target")?;

    let mut request = Vec::new();
    use std::io::Write as _;
    write!(&mut request, "{} {} HTTP/1.1\r\n", req.method, req.path)?;

    let mut has_host = false;
    let mut has_length = false;
    for (name, value) in req.headers.iter() {
        if name.eq_ignore_ascii_case("host") {
            has_host = true;
            continue;
        }
        if name.eq_ignore_ascii_case("content-length") {
            has_length = true;
        }
        write!(&mut request, "{}: {}\r\n", name, value)?;
    }
    if !has_host {
        write!(&mut request, "Host: {}\r\n", agent.target.host_header())?;
    }
    if !has_length && !req.body.is_empty() {
        write!(&mut request, "Content-Length: {}\r\n", req.body.len())?;
    }
    request.extend_from_slice(b"\r\n");
    request.extend_from_slice(&req.body);

    stream.write_all(&request).await?;

    // Parse response head
    let mut buffer = Vec::new();
    let mut header_buf = [0u8; 4096];
    let header_len = loop {
        let n = stream.read(&mut header_buf).await?;
        if n == 0 {
            return Err(anyhow!("target closed before sending response"));
        }
        buffer.extend_from_slice(&header_buf[..n]);
        if let Some(pos) = find_header_split(&buffer) {
            break pos;
        }
        if buffer.len() > MAX_HEADER_BYTES {
            return Err(anyhow!("response headers too large"));
        }
    };

    let (header_bytes, body_start) = buffer.split_at(header_len);
    let mut headers = [httparse::EMPTY_HEADER; 64];
    let mut resp = httparse::Response::new(&mut headers);
    resp.parse(header_bytes)
        .map_err(|e| anyhow!("failed to parse response headers: {e:?}"))?;
    let status = resp.code.unwrap_or(502) as u16;
    let header_pairs: Vec<(String, String)> = resp
        .headers
        .iter()
        .filter(|h| !h.name.is_empty())
        .map(|h| {
            (
                h.name.to_string(),
                String::from_utf8_lossy(h.value).to_string(),
            )
        })
        .collect();

    agent
        .outbound
        .send(AgentOutbound::Control(AgentToServer::ResponseHead {
            stream_id,
            status,
            headers: header_pairs,
        }))
        .await
        .ok();

    if req.upgrade {
        let (mut target_reader, mut target_writer) = stream.into_split();
        if !body_start.is_empty() {
            agent
                .outbound
                .send(AgentOutbound::Body {
                    stream_id,
                    chunk: Bytes::copy_from_slice(body_start),
                })
                .await
                .ok();
        }

        let mut rx = req.rx.unwrap_or_else(|| {
            let (_tx, rx) = mpsc::channel(1);
            rx
        });
        let outbound = agent.outbound.clone();
        let reader_task = tokio::spawn(async move {
            let mut buf = [0u8; 16 * 1024];
            loop {
                let n = target_reader.read(&mut buf).await?;
                if n == 0 {
                    break;
                }
                outbound
                    .send(AgentOutbound::Body {
                        stream_id,
                        chunk: Bytes::copy_from_slice(&buf[..n]),
                    })
                    .await
                    .ok();
            }
            outbound
                .send(AgentOutbound::Control(AgentToServer::ResponseFinished {
                    stream_id,
                }))
                .await
                .ok();
            Ok::<_, anyhow::Error>(())
        });

        while let Some(chunk) = rx.recv().await {
            if target_writer.write_all(&chunk).await.is_err() {
                break;
            }
        }
        let _ = reader_task.await;
    } else {
        if !body_start.is_empty() {
            agent
                .outbound
                .send(AgentOutbound::Body {
                    stream_id,
                    chunk: Bytes::copy_from_slice(body_start),
                })
                .await
                .ok();
        }

        let mut buf = [0u8; 16 * 1024];
        loop {
            let n = stream.read(&mut buf).await?;
            if n == 0 {
                break;
            }
            agent
                .outbound
                .send(AgentOutbound::Body {
                    stream_id,
                    chunk: Bytes::copy_from_slice(&buf[..n]),
                })
                .await
                .ok();
        }

        agent
            .outbound
            .send(AgentOutbound::Control(AgentToServer::ResponseFinished {
                stream_id,
            }))
            .await
            .ok();
    }

    Ok(())
}

fn find_header_split(buf: &[u8]) -> Option<usize> {
    buf.windows(4)
        .position(|w| w == b"\r\n\r\n")
        .map(|pos| pos + 4)
}

fn is_upgrade(headers: &[(String, String)]) -> bool {
    let mut connection = String::new();
    let mut upgrade = String::new();
    for (k, v) in headers {
        if k.eq_ignore_ascii_case("connection") {
            connection = v.to_ascii_lowercase();
        }
        if k.eq_ignore_ascii_case("upgrade") {
            upgrade = v.to_ascii_lowercase();
        }
    }
    connection.contains("upgrade") || !upgrade.is_empty()
}


================================================
FILE: apps/server/src/utils/entity_map.rs
================================================
use crate::{
    db::{self},
    error::AppError,
    state::{AppState, Protocol, TopicMapping},
};
use axum::extract::State;
use std::sync::Arc;
use tracing::info;

pub async fn remap_topics(State(state): State<Arc<AppState>>) -> Result<usize, AppError> {
    let entities = db::repository::get_all_entities_with_configs(&state.pool)?;

    let mut new_mappings = Vec::new();

    for entity_with_config in &entities {
        if let Some(platform) = &entity_with_config.entity.platform {
            let protocol = match platform.as_str() {
                "MQTT" => Some(Protocol::MQTT),
                "udp" => Some(Protocol::Udp),
                "lora" => Some(Protocol::Lora),
                "RTSP" => Some(Protocol::RTSP),
                "HTTP" => Some(Protocol::Http),
                "home_assistant" => Some(Protocol::HomeAssistant),
                "ros2" => Some(Protocol::Ros2),
                _ => None,
            };

            if let (Some(proto), Some(config)) = (protocol, &entity_with_config.configuration) {
                if let Some(topic) = config.get("state_topic").and_then(|v| v.as_str()) {
                    new_mappings.push(TopicMapping {
                        protocol: proto.clone(),
                        topic: topic.to_string(),
                        entity_id: entity_with_config.entity.entity_id.clone(),
                    });
                }

                if let Some(topic) = config.get("rtsp_url").and_then(|v| v.as_str()) {
                    new_mappings.push(TopicMapping {
                        protocol: proto.clone(),
                        topic: topic.to_string(),
                        entity_id: entity_with_config.entity.entity_id.clone(),
                    });
                }

                if let Some(topic) = config.get("command_topic").and_then(|v| v.as_str()) {
                    new_mappings.push(TopicMapping {
                        protocol: proto.clone(),
                        topic: topic.to_string(),
                        entity_id: entity_with_config.entity.entity_id.clone(),
                    });
                }
            }
        }
    }

    info!("Mapping state");
    info!("{:?}", new_mappings);

    let num_mappings = new_mappings.len();

    let mut map = state.topic_map.write().await;
    *map = new_mappings;
    drop(map);

    // Notify subscribers that topic_map has changed
    if let Err(e) = state.topic_map_notify.send(()) {
        // This only fails if all receivers are dropped, which is expected during shutdown
        tracing::debug!("Failed to send topic_map_notify signal: {}", e);
    } else {
        info!("Topic map updated, notified subscribers");
    }

    Ok(num_mappings)
}


================================================
FILE: apps/server/src/utils/hash.rs
================================================
pub fn hash_password(password: &str) -> Result<String, bcrypt::BcryptError> {
    let cost = 12;
    bcrypt::hash(password, cost)
}

pub fn verify_password(password: &str, hashed_password: &str) -> Result<bool, bcrypt::BcryptError> {
    bcrypt::verify(password, hashed_password)
}


================================================
FILE: apps/server/src/utils/mod.rs
================================================
pub mod entity_map;
pub mod hash;
pub mod stream_checker;
pub mod system_configs;


================================================
FILE: apps/server/src/utils/stream_checker.rs
================================================
use anyhow::Result;
use std::sync::Arc;
use std::time::Duration;
use tokio::sync::watch;
use tracing::info;

use crate::state::AppState;

const STREAM_TIMEOUT: Duration = Duration::from_secs(10);

pub async fn stream_status_checker(
    app_state: Arc<AppState>,
    mut shutdown_rx: watch::Receiver<()>,
) -> Result<()> {
    let mut interval = tokio::time::interval(Duration::from_secs(5));

    loop {
        tokio::select! {
            biased;

            _ = shutdown_rx.changed() => {
                info!("Stream status checker: Shutdown signal received, exiting.");
                break;
            }

            _ = interval.tick() => {
                let mut offline_ssrcs = Vec::new();

                for entry in app_state.streams.iter() {
                    let ssrc = *entry.key();
                    let stream_info = entry.value();

                    let _is_online = *stream_info.is_online.read().unwrap();
                    let last_seen = *stream_info.last_seen.read().unwrap();

                    if last_seen.elapsed() > STREAM_TIMEOUT {
                        let mut is_online_guard = stream_info.is_online.write().unwrap();
                        *is_online_guard = false;
                        info!(
                            "Topic '{}' (SSRC: {}) is now OFFLINE due to timeout.",
                            &stream_info.descriptor.topic, ssrc
                        );
                        offline_ssrcs.push(ssrc);
                    }
                }

                for ssrc in offline_ssrcs {
                    if let Some((_, removed_stream)) = app_state.streams.remove(&ssrc) {
                        // db::repository::streams::delete_stream(&app_state.pool, ssrc.try_into().unwrap());
                        info!(
                            "Removed timed-out stream for topic '{}' (SSRC: {})",
                            removed_stream.descriptor.topic, ssrc
                        );
                    }
                }
            }
        }
    }

    Ok(())
}


================================================
FILE: apps/server/src/utils/system_configs.rs
================================================
use crate::db::models::SystemConfiguration;

pub fn replace_config_placeholders(template: &str, configs: &[SystemConfiguration]) -> String {
    let mut result = String::with_capacity(template.len());
    let mut last_end = 0;

    while let Some(start) = template[last_end..].find("{:") {
        let absolute_start = last_end + start;
        result.push_str(&template[last_end..absolute_start]);

        let search_area = &template[absolute_start + 2..];
        if let Some(end) = search_area.find('}') {
            let absolute_end = absolute_start + 2 + end;
            let key = &template[absolute_start + 2..absolute_end];

            let value = configs
                .iter()
                .find(|config| config.key == key)
                .map(|config| config.value.as_str());

            if let Some(v) = value {
                result.push_str(v);
            } else {
                result.push_str(&template[absolute_start..absolute_end + 1]);
            }

            last_end = absolute_end + 1;
        } else {
            result.push_str(&template[absolute_start..absolute_start + 2]);
            last_end = absolute_start + 2;
        }
    }

    result.push_str(&template[last_end..]);
    result
}


================================================
FILE: apps/server/tests/common/mod.rs
================================================
use diesel::r2d2::{self, ConnectionManager};
use diesel::sqlite::SqliteConnection;
use diesel_migrations::{embed_migrations, EmbeddedMigrations, MigrationHarness};
use server::state::DbPool;

pub const MIGRATIONS: EmbeddedMigrations = embed_migrations!("migrations");

/// Create an in-memory SQLite pool for testing
pub fn setup_test_pool() -> DbPool {
    let manager = ConnectionManager::<SqliteConnection>::new(":memory:");
    let pool = r2d2::Pool::builder()
        .max_size(1)
        .build(manager)
        .expect("Failed to create pool");

    // Run migrations
    let mut conn = pool.get().expect("Failed to get connection");
    conn.run_pending_migrations(MIGRATIONS)
        .expect("Failed to run migrations");

    pool
}


================================================
FILE: apps/server/tests/recording_manager_tests.rs
================================================
mod common;

use server::recording::RecordingManager;
use server::state::{MediaType, Protocol, StreamDescriptor, StreamRegistry};
use std::sync::Arc;
use tokio::sync::broadcast;
use webrtc::rtp::packet::Packet;

fn setup_test_streams() -> Arc<StreamRegistry> {
    let registry = StreamRegistry::new();
    let (tx, _) = broadcast::channel::<Packet>(1024);

    let descriptor = StreamDescriptor {
        id: 12345,
        topic: "test/stream/topic".to_string(),
        user_id: "device_001".to_string(),
        media_type: MediaType::Video,
        protocol: Protocol::RTSP,
    };

    registry.insert_with_sender(descriptor, tx);
    Arc::new(registry)
}

#[test]
fn test_is_recording_false_initially() {
    let pool = common::setup_test_pool();
    let streams = setup_test_streams();
    let manager = RecordingManager::new(streams, pool);

    assert!(!manager.is_recording("test/stream/topic"));
}

#[test]
fn test_get_active_recording_id_none() {
    let pool = common::setup_test_pool();
    let streams = setup_test_streams();
    let manager = RecordingManager::new(streams, pool);

    assert!(manager.get_active_recording_id("any").is_none());
}

#[test]
fn test_get_all_active_recordings_empty() {
    let pool = common::setup_test_pool();
    let streams = setup_test_streams();
    let manager = RecordingManager::new(streams, pool);

    assert!(manager.get_all_active_recordings().is_empty());
}

#[test]
fn test_start_recording_stream_not_found() {
    let pool = common::setup_test_pool();
    let streams = Arc::new(StreamRegistry::new());
    let manager = RecordingManager::new(streams, pool);

    let result = manager.start_recording("nonexistent", None);
    assert!(result.is_err());
    assert!(result.unwrap_err().to_string().contains("Stream not found"));
}

#[test]
fn test_stop_recording_not_found() {
    let pool = common::setup_test_pool();
    let streams = setup_test_streams();
    let manager = RecordingManager::new(streams, pool);

    let result = manager.stop_recording(99999);
    assert!(result.is_err());
    assert!(result.unwrap_err().to_string().contains("Recording not found"));
}

#[test]
fn test_stop_recording_by_topic_not_found() {
    let pool = common::setup_test_pool();
    let streams = setup_test_streams();
    let manager = RecordingManager::new(streams, pool);

    let result = manager.stop_recording_by_topic("nonexistent");
    assert!(result.is_err());
    assert!(result.unwrap_err().to_string().contains("No active recording"));
}


================================================
FILE: apps/server/tests/recordings_repository_tests.rs
================================================
mod common;

use server::db::models::{NewRecording, UpdateRecording};
use server::db::repository::recordings::*;

fn create_test_recording<'a>() -> NewRecording<'a> {
    NewRecording {
        stream_ssrc: 12345,
        topic: "test/topic",
        device_id: "device_001",
        media_type: "video",
        filename: "test.mkv",
        file_path: "/tmp/test.mkv",
        status: "recording",
        created_by_user_id: Some(1),
    }
}

#[test]
fn test_create_recording() {
    let pool = common::setup_test_pool();
    let result = create_recording(&pool, create_test_recording());

    assert!(result.is_ok());
    assert_eq!(result.unwrap().topic, "test/topic");
}

#[test]
fn test_get_recording_by_id() {
    let pool = common::setup_test_pool();
    let created = create_recording(&pool, create_test_recording()).unwrap();

    let result = get_recording_by_id(&pool, created.id);
    assert!(result.is_ok());
}

#[test]
fn test_get_recording_by_id_not_found() {
    let pool = common::setup_test_pool();
    assert!(get_recording_by_id(&pool, 99999).is_err());
}

#[test]
fn test_get_all_recordings() {
    let pool = common::setup_test_pool();
    create_recording(&pool, create_test_recording()).unwrap();
    create_recording(&pool, create_test_recording()).unwrap();

    let result = get_all_recordings(&pool).unwrap();
    assert_eq!(result.len(), 2);
}

#[test]
fn test_get_recordings_by_status() {
    let pool = common::setup_test_pool();

    // Create one recording with "recording" status
    create_recording(&pool, create_test_recording()).unwrap();

    // Create one recording with "completed" status
    let mut completed = create_test_recording();
    completed.status = "completed";
    create_recording(&pool, completed).unwrap();

    let recording_status = get_recordings_by_status(&pool, "recording").unwrap();
    let completed_status = get_recordings_by_status(&pool, "completed").unwrap();

    assert_eq!(recording_status.len(), 1);
    assert_eq!(completed_status.len(), 1);
}

#[test]
fn test_update_recording() {
    let pool = common::setup_test_pool();
    let created = create_recording(&pool, create_test_recording()).unwrap();

    let update = UpdateRecording {
        status: Some("completed".to_string()),
        file_size: Some(1024),
        ..Default::default()
    };

    let updated = update_recording(&pool, created.id, &update).unwrap();
    assert_eq!(updated.status, "completed");
    assert_eq!(updated.file_size, 1024);
}

#[test]
fn test_delete_recording() {
    let pool = common::setup_test_pool();
    let created = create_recording(&pool, create_test_recording()).unwrap();

    assert_eq!(delete_recording(&pool, created.id).unwrap(), 1);
    assert!(get_recording_by_id(&pool, created.id).is_err());
}

#[test]
fn test_mark_orphaned_as_abandoned() {
    let pool = common::setup_test_pool();

    // Create two recordings with "recording" status
    create_recording(&pool, create_test_recording()).unwrap();
    create_recording(&pool, create_test_recording()).unwrap();

    // Create one recording with "completed" status
    let mut completed = create_test_recording();
    completed.status = "completed";
    create_recording(&pool, completed).unwrap();

    let count = mark_orphaned_as_abandoned(&pool).unwrap();
    assert_eq!(count, 2);

    // No recordings should have "recording" status anymore
    let still_recording = get_recordings_by_status(&pool, "recording").unwrap();
    assert_eq!(still_recording.len(), 0);

    // Two should be abandoned
    let abandoned = get_recordings_by_status(&pool, "abandoned").unwrap();
    assert_eq!(abandoned.len(), 2);
}


================================================
FILE: apps/server/tests/state_tests.rs
================================================
use server::state::{MediaType, Protocol, StreamDescriptor, StreamRegistry};
use tokio::sync::broadcast;
use webrtc::rtp::packet::Packet;

fn create_test_descriptor(id: u32, topic: &str) -> StreamDescriptor {
    StreamDescriptor {
        id,
        topic: topic.to_string(),
        user_id: "test_user".to_string(),
        media_type: MediaType::Video,
        protocol: Protocol::RTSP,
    }
}

#[test]
fn test_register_stream() {
    let registry = StreamRegistry::new();
    let descriptor = create_test_descriptor(1, "rtsp://test/stream1");

    let handle = registry.register(descriptor);

    assert_eq!(handle.descriptor.id, 1);
    assert_eq!(registry.len(), 1);
}

#[test]
fn test_get_by_ssrc() {
    let registry = StreamRegistry::new();
    registry.register(create_test_descriptor(42, "test_topic"));

    assert!(registry.get_by_ssrc(42).is_some());
    assert!(registry.get_by_ssrc(999).is_none());
}

#[test]
fn test_get_by_topic() {
    let registry = StreamRegistry::new();
    registry.register(create_test_descriptor(1, "unique/topic/path"));

    assert!(registry.get_by_topic("unique/topic/path").is_some());
    assert!(registry.get_by_topic("nonexistent").is_none());
}

#[test]
fn test_mark_online() {
    let registry = StreamRegistry::new();
    let handle = registry.register(create_test_descriptor(1, "test"));

    assert!(!*handle.is_online.read().unwrap());
    registry.mark_online(1);
    assert!(*handle.is_online.read().unwrap());
}

#[test]
fn test_remove() {
    let registry = StreamRegistry::new();
    registry.register(create_test_descriptor(1, "topic1"));
    registry.register(create_test_descriptor(2, "topic2"));

    assert_eq!(registry.len(), 2);
    registry.remove(&1);
    assert_eq!(registry.len(), 1);
    assert!(registry.get_by_topic("topic1").is_none());
}

#[test]
fn test_insert_with_sender() {
    let registry = StreamRegistry::new();
    let (tx, _) = broadcast::channel::<Packet>(16);
    let descriptor = create_test_descriptor(100, "custom");

    registry.insert_with_sender(descriptor, tx);
    assert!(registry.get_by_ssrc(100).is_some());
}

#[test]
fn test_iter() {
    let registry = StreamRegistry::new();
    registry.register(create_test_descriptor(1, "t1"));
    registry.register(create_test_descriptor(2, "t2"));

    let ids: Vec<u32> = registry.iter().map(|e| *e.key()).collect();
    assert_eq!(ids.len(), 2);
}


================================================
FILE: configs/projects.json
================================================


================================================
FILE: docs/.vitepress/config.mts
================================================
import { defineConfig } from "vitepress";

// https://vitepress.dev/reference/site-config
export default defineConfig({
  title: "Vessel",
  description: "Physical Device Orchestration Platform",
  base: "/docs/",
  outDir: "../apps/landing/dist/docs",
  themeConfig: {
    // https://vitepress.dev/reference/default-theme-config
    nav: [
      { text: "Home", link: "/" },
      { text: "Features", link: "/features" },
      { text: "Installation", link: "/installation" },
    ],

    sidebar: [
      {
        text: "Getting Started",
        items: [
          { text: "Introduction", link: "/introduction" },
          { text: "Installation", link: "/installation" },
          { text: "Concept", link: "/concepts" },
          { text: "Troubleshooting", link: "/troubleshooting" },
        ],
      },
      {
        text: "Core Features",
        items: [
          { text: "Overview", link: "/features" },
          { text: "Flow", link: "/flow" },
          { text: "Map", link: "/map" },
          { text: "Dashboard", link: "/dashboard" },
        ],
      },
    ],

    socialLinks: [
      { icon: "github", link: "https://github.com/cartesiancs/vessel" },
    ],
  },
});


================================================
FILE: docs/concepts.md
================================================
# Concept

Vessel is an open-source orchestration platform for physical security and automation, designed to function as a Civilian Command & Control (C2) system.

The project's ultimate goal is to provide a powerful, customizable, and independent alternative to proprietary systems, giving individuals direct control over their personal assets.

## Flow

Utilizes a flow based UI to build automation workflows by visually connecting nodes: Sensor (Input) → Logic (Process) → Device (Action). This allows for complex, code-free rule creation.

## Device-Server-Client Architecture

Edge devices: (e.g., Raspberry Pi) that gather data from various sensors (audio, video, GPS, etc.).

Server: A central Rust-based backend that manages devices, processes data streams, and executes flows.

Client: A web application that serves as the main dashboard for monitoring, device management, and flow creation.

## Open & Extensible Stack

Core Tech: React, TypeScript, Rust, MQTT, WebRTC, and UDP.

Philosophy: Built on open-source principles to ensure high customizability and prevent platform lock-in, allowing for the integration of any sensor or external API.


================================================
FILE: docs/dashboard.md
================================================
# Dashboard

Dashboard is Vessel's operator-facing workspace. It combines fixed overview panels with customizable dynamic dashboards that can host maps, flow controls, entity cards, and action buttons.

## What Dashboard Is For

Use Dashboard when you need to:

- assemble a task-focused operational screen
- monitor entities and system state in one place
- expose the most important map and flow controls to users
- trigger running automations from a UI button

## Core Concepts

### Main dashboard

The dashboard area includes a main overview surface for system and entity visibility.

### Dynamic dashboard

A dynamic dashboard is a saved, user-configurable canvas. It is arranged as a grid and persisted on the server.

### Widget

Widgets are the building blocks placed on the grid. Current dashboard widgets include:

- entity cards
- buttons
- map panels
- flow panels

### Edit mode

Edit mode is where users add, move, resize, and configure widgets. It separates layout work from operational use.

### Listener id

A listener id connects dashboard button clicks to a matching flow listener. This is the bridge between the operator UI and the automation runtime.

## User Flow

The current workflow is:

1. Open the dashboard area.
2. Move between views using the swipe layout.
3. Create a dynamic dashboard.
4. Enter edit mode.
5. Add widgets and arrange them on the grid.
6. Configure widget-specific settings such as a map layer, a flow, or a button listener id.
7. Leave edit mode and use the dashboard operationally.

## How To Use Dashboard

### 1. Create a dynamic dashboard

Add a new dashboard from the dashboard area. Each dashboard is stored as a reusable layout.

### 2. Enter edit mode

Edit mode unlocks layout controls so you can drag, resize, and delete items without triggering operational actions.

### 3. Add widgets

Use the add-item menu to place widgets on the canvas. Common combinations are:

- entity cards for live monitoring
- map panels for location context
- flow panels for run controls
- buttons for manual triggers

### 4. Configure buttons for automation

To make a button trigger a flow:

1. assign a listener id to the button
2. run a flow that includes a matching dashboard event listener
3. click the button outside edit mode

### 5. Let autosave persist layout changes

Dashboard layout changes are saved automatically after edits. This keeps the experience fast and reduces manual save steps.

## Core Design

Dashboard is designed as an operations layer on top of Vessel's existing systems:

- routing and swipe navigation control which dashboard is visible
- dashboard layout is stored as structured JSON on the server
- map and flow widgets reuse the corresponding product features instead of duplicating them
- button events are published over WebSocket and can be consumed by running flows

This gives Dashboard a clear role: it is the place where monitoring, control, and automation meet.

## Dashboard and Flow Integration

Dashboard buttons do not execute automation by themselves. Instead, they emit validated UI events that a running flow can listen for.

This makes the integration explicit:

- Dashboard provides the operator action
- Flow provides the automation logic

## Practical Notes

- Button actions are intentionally disabled while edit mode is active.
- Button-triggered automation depends on an active WebSocket connection and a running matching flow listener.
- Layout changes are autosaved.
- The current UI focuses on a single visible canvas per dynamic dashboard.


================================================
FILE: docs/features.md
================================================
# Core Features

Vessel is built around three product surfaces that work together:

- **Flow** turns device signals and user input into automation logic.
- **Map** gives that logic a geographic context through layers and features.
- **Dashboard** packages controls and situational views for operators.

These areas are connected by a shared runtime model:

- Data and configuration are created in the client.
- Persistent state is stored on the server.
- Real-time control, logs, and UI events move over WebSocket.

## How They Fit Together

### Flow for automation

Use Flow when you need to define what should happen: listen to inputs, process data, and trigger actions.

[Go to Flow](/flow)

### Map for spatial context

Use Map when location matters: define layers, draw operational features, and inspect entities with GPS-derived positions.

[Go to Map](/map)

### Dashboard for operations

Use Dashboard when you want a task-focused workspace: combine entity cards, map slices, flow controls, and action buttons into one screen.

[Go to Dashboard](/dashboard)

## Recommended Starting Point

1. Model your automation in **Flow**.
2. Organize places and areas of interest in **Map**.
3. Publish the controls and views you need in **Dashboard**.

This sequence matches the current product design: logic first, context second, operator workflow third.


================================================
FILE: docs/flow.md
================================================
# Flow

Flow is Vessel's visual automation system. It lets you design logic as a graph of nodes and connections, save that graph as a reusable flow, and run it on the server.

## What Flow Is For

Use Flow when you need to:

- connect sensor or system inputs to downstream actions
- express logic visually instead of writing backend code
- run long-lived or event-driven automations
- monitor execution through logs and UI feedback

## Core Concepts

### Flow

A flow is a saved automation document. In practice, it is a graph made of nodes and edges.

### Node

A node performs one job. Depending on the node type, that job may be:

- receiving an input
- transforming or routing data
- calling an external system
- triggering an action

### Edge

An edge connects outputs from one node to inputs on another node. Edges define how data moves through the graph.

### Trigger node

Some nodes act as event sources. They wait for an external signal such as a timer, a message, or a UI event and then push data into the flow.

### Run context

When a flow starts, Vessel attaches runtime context to that execution. This is how logs, targeted UI events, and session-scoped behavior are coordinated.

## User Flow

The current product flow is:

1. Create or select a flow from the sidebar.
2. Build the graph in the canvas by adding and connecting nodes.
3. Save the graph.
4. Run the flow.
5. Watch logs and UI feedback while it executes.
6. Stop the flow or iterate on the graph and save again.

## How To Use Flow

### 1. Create a flow

Open the Flow page and create a new flow from the sidebar. Each flow is a separate saved automation.

### 2. Build the graph

Add the nodes you need and connect them into a data path. A common mental model is:

`input -> logic -> action`

### 3. Save before running

The server runs the latest saved graph, not unsaved local edits. Saving is part of the normal run workflow and should be treated as the source of truth.

### 4. Run and observe

Start the flow from the header controls. Execution logs are shown in the flow UI, and flow-driven UI events can be sent back to the client.

### 5. Refine and repeat

Adjust nodes, connectors, or values, save again, and rerun until the behavior matches your intended automation.

## Core Design

Flow is intentionally split into two layers:

- **Client editor** for creating and editing the graph
- **Server runtime** for executing the latest saved graph

This separation supports a clear operating model:

- REST is used for flow CRUD and persistence.
- WebSocket is used for run control, logs, and runtime UI events.
- The server treats a saved graph snapshot as the executable version.

## Flow and Dashboard Integration

Flows can also react to dashboard interactions. A dashboard button can emit a UI event, and a matching flow listener can consume that event as a trigger.

This makes Flow the automation backbone behind operational dashboards.

## Practical Notes

- Unsaved graph changes are not part of a run until they are saved.
- The system currently assumes one active run per flow id.
- The flow page guards against accidental navigation when there are unsaved changes.
- Flow execution is real-time oriented, so logs are part of the normal operating experience, not just debugging.


================================================
FILE: docs/index.md
================================================
---
# https://vitepress.dev/reference/default-theme-home-page
layout: home

hero:
  name: "Vessel"
  text: "The open-source alternative of Anduril"
  tagline: Physical Device Orchestration Platform
  actions:
    - theme: brand
      text: Introduction
      link: /introduction
    - theme: alt
      text: Core Features
      link: /features
---

## Core Features

Vessel combines visual automation, map-based situational context, and operator-facing dashboards into one system.

### Flow

Build logic visually, connect sensors and actions, and run automations on the server.

[Read the Flow guide](/flow)

### Map

Create layers, draw geographic features, inspect live positions, and embed map views in dashboards.

[Read the Map guide](/map)

### Dashboard

Create dynamic dashboards with entity cards, map panels, flow controls, and action buttons.

[Read the Dashboard guide](/dashboard)


================================================
FILE: docs/installation.md
================================================
# Installation

This guide will walk you through setting up and running Vessel in your local environment.

Please refer to README in the repository below.

[https://github.com/cartesiancs/vessel](https://github.com/cartesiancs/vessel)


================================================
FILE: docs/introduction.md
================================================
# Vessel

### Self-defense system powered by physical device orchestration and automation.

<div style="text-align:center;align-items: center;justify-content: center;display: flex; padding-bottom: 50px;">

<img src="/icon.png" alt="My Image" width="300">
</div>

The open-source alternative to Anduril for **home protection**.

Vessel is an open-source platform that allows you to connect, orchestrate, and automate multiple physical sensors for proactive security and asset management. We aim to bring the power of a command and control (C2) system, traditionally used in military applications, to your home, farm, or small factory.

Our goal is to empower individuals to build their own intelligent security systems, moving from passive monitoring to active, automated response.

## Vision

We believe in a future where you are not dependent on large corporations for your physical security. Vessel provides the tools to build a truly independent and customizable security platform.

## Key Features

- **Visual Flow Editor**: Easily design complex automation workflows using a drag-and-drop interface powered by React Flow. Connect sensors to processors and actions to create custom logic (e.g., "If the microphone detects a sound louder than 80dB, turn on the porch light via Home Assistant").
  <img src="/images/flow.png" alt="My Image">

- **Map**
  <img src="/images/map.png" alt="My Image">

- **Device Management**: Register and manage your sensor devices. Monitor real-time data streams from each device.
  <img src="/images/dashboard.png" alt="My Image">

- **Broad Sensor Compatibility**: Vessel is designed to support a wide range of sensors, from simple temperature and motion detectors to complex devices like GPS, IMU, cameras, and microphones.
- **Real-time Communication**: Utilizes UDP, SRTP, MQTT, and WebRTC for low-latency communication between Devices, the server, and the client.
- **Extensible Architecture**: Built with a modular structure, allowing for the future integration of new devices (like drones and LoRaWAN), AI analysis servers, and custom actions.

## Target Audience

Vessel is for the **proactive problem-solver** who is comfortable with DIY projects and wants to take control of their personal security. Our ideal user is:

- A homeowner in a rural area.
- Tech-savvy and interested in home automation.
- Desires a sense of control and immediate feedback from their security system.
- May also be a small business owner managing assets like a small factory or farm.

### Communication Protocols

- **Devices <-> Server**: UDP, SRTP (for secure real-time audio/video), mTLS, MQTT
- **Server <-> Client**: HTTP, WebSocket, WebRTC

## Roadmap

We are currently in the Proof of Concept (POC) phase and have completed the core flow engine, device management, and real-time data transfer.

Check out our roadmap page.

[vessel.cartesiancs.com/roadmap](https://vessel.cartesiancs.com/roadmap)


================================================
FILE: docs/map.md
================================================
# Map

Map is Vessel's geographic workspace. It combines editable map layers, vector features, and live entity positions into one operational view.

## What Map Is For

Use Map when you need to:

- organize places, routes, and areas of interest
- draw operational geometry directly on a map
- inspect GPS-backed entities in geographic context
- reuse saved layers inside dashboards

## Core Concepts

### Layer

A layer is a named collection of map features. It is the main container users work with when editing spatial data.

### Feature

A feature is a spatial object that belongs to a layer. The current feature types are:

- point
- line
- polygon

### Vertex

Vertices define the shape of a line or polygon and the position of a point.

### Active layer

The main editing experience works against one selected layer at a time. Drawing and feature editing apply to the currently active layer.

### Entity overlay

The map also displays entity positions separately from drawn features. This is useful when you want to see operational objects on top of user-defined geometry.

## User Flow

The typical workflow is:

1. Open the Map page.
2. Create a layer or select an existing layer.
3. Choose a drawing mode.
4. Add points on the map to create a point, line, or polygon.
5. Confirm the shape.
6. Inspect or edit the resulting feature.
7. Switch layers or reuse the layer in a dashboard panel.

## How To Use Map

### 1. Select a layer

Layers are the starting point for map editing. If no layer is selected, drawing tools stay unavailable.

### 2. Choose a drawing mode

The toolbar lets you switch between:

- point drawing
- line drawing
- polygon drawing

### 3. Draw and confirm

For lines and polygons, add vertices on the map and confirm the result from the toolbar. You can also cancel an in-progress shape.

### 4. Inspect details

Click a feature to open its detail panel. From there you can inspect geometry-related information and update feature properties.

### 5. Switch the base map

Map currently supports multiple base map styles, including dark and satellite views, so you can choose the context that best fits the task.

## Core Design

Map separates spatial editing into three concerns:

- **server-backed spatial data** such as layers, features, and vertices
- **client-side interaction state** such as drawing mode and selected feature
- **entity overlays** sourced from device or entity state

This design keeps the product flexible:

- persistent geometry lives on the server
- short-lived interaction state lives in the client
- geographic context can be embedded into other surfaces such as dashboards

## Map and Dashboard Integration

Saved layers can be embedded into dashboard map panels. This makes the map system more than a standalone page: it becomes a reusable spatial component across the product.

## Practical Notes

- The main map currently focuses on one active layer at a time.
- The client remembers the last viewed map position and zoom locally.
- Base maps depend on external tile providers.
- Initial positioning prefers the last stored view, then browser geolocation, then a fallback default.


================================================
FILE: docs/setup.md
================================================
## .env

## Run program

## Update server config

## Add device and entity

## MQTT

## RTSP

## RTP


================================================
FILE: docs/troubleshooting.md
================================================
# Troubleshooting

## Python dylib Loading Issue

```bash
dyld[59248]: Library not loaded: @rpath/libpython3.12.dylib

...
```

This problem occurs because PyO3 cannot dynamically link to Python. To resolve this, you can specify the library path before execution using the RUSTFLAGS environment variable.

Set it like this:

```bash
RUSTFLAGS='-C link-arg=-Wl,-rpath,<path_to_lib_folder_containing_dylib>' npm run server
```

For example:

```bash
RUSTFLAGS='-C link-arg=-Wl,-rpath,/opt/homebrew/Cellar/python@3.12/3.12.11/Frameworks/Python.framework/Versions/3.12/lib' npm run server
```


================================================
FILE: example/golang/.gitignore
================================================
audio-file/sample.mp3
video-sample/sample.mp4
video2-sample/sample.mp4

================================================
FILE: example/golang/audio-file/audio.go
================================================
package main

import (
	"bytes"
	"encoding/json"
	"fmt"
	"net/http"
	"os/exec"
)

type RegisterRequest struct {
	Topic string `json:"topic"`
    MediaType string `json:"media_type"`
}

type RegisterResponse struct {
	Ssrc   uint32 `json:"ssrc"`
	RtpPort uint16 `json:"rtp_port"`
}

func main() {
    deviceId := "audio"
    deviceToken := "FnhXd7dNy8iCPbu5N5jS2v_NaOYCiI9AqPO4FQQed7E"

    serverURL := "http://127.0.0.1:6174/api/streams/register"
    topic := "go_stream_2"
	mediaType := "audio"

    if deviceId == "" || deviceToken == "" {
        fmt.Println("Error: Please set the deviceId and deviceToken variables.")
        return
    }

    reqBody := RegisterRequest{Topic: topic, MediaType: mediaType}
    jsonBody, err := json.Marshal(reqBody)
    if err != nil {
        fmt.Printf("Error marshalling request body: %v\n", err)
        return
    }

    req, err := http.NewRequest("POST", serverURL, bytes.NewBuffer(jsonBody))
    if err != nil {
        fmt.Printf("Error creating request: %v\n", err)
        return
    }

    req.Header.Set("Content-Type", "application/json")
    req.Header.Set("X-Device-Id", deviceId)            
    req.Header.Set("Authorization", "Bearer "+deviceToken) 

    client := &http.Client{}
    resp, err := client.Do(req)
    if err != nil {
        fmt.Printf("Error making request to server: %v\n", err)
        return
    }
    defer resp.Body.Close()

    if resp.StatusCode != http.StatusOK {
        fmt.Printf("Server returned non-OK status: %s\n", resp.Status)
        body := new(bytes.Buffer)
        body.ReadFrom(resp.Body)
        fmt.Printf("Response body: %s\n", body.String())
        return
    }

    var regResponse RegisterResponse
    if err := json.NewDecoder(resp.Body).Decode(&regResponse); err != nil {
        fmt.Printf("Error decoding response body: %v\n", err)
        return
    }

    fmt.Printf("Successfully registered stream. Topic: %s, SSRC: %d\n", topic, regResponse.Ssrc)

    rtpURL := fmt.Sprintf("rtp://127.0.0.1:%d?ssrc=%d", regResponse.RtpPort, regResponse.Ssrc)
    fmt.Printf("Starting ffmpeg stream to: %s\n", rtpURL)

	cmd := exec.Command(
		"ffmpeg",
		"-re",
        "-stream_loop", "-1",
		"-i", "./sample.mp3",
		"-vn",
		"-map", "0:a:0",
		"-c:a", "libopus",
		"-b:a", "64k",
		"-vbr", "on",
		"-compression_level", "10",
		"-payload_type", "96",
		"-fflags", "nobuffer",
		"-flags", "low_delay",
		"-flush_packets", "1",
		"-muxdelay", "0",
		"-ssrc",  fmt.Sprintf("%d", int32(regResponse.Ssrc)),
		"-f", "rtp",
		rtpURL,
	)

	out, err := cmd.CombinedOutput()
	fmt.Printf("ffmpeg output:\n%s\n", out)
	if err != nil {
		fmt.Printf("ffmpeg error: %v\n", err)
	}
}

================================================
FILE: example/golang/audio-file/audio.sdp
================================================
v=0
o=- 0 0 IN IP4 127.0.0.1
s=No Name
c=IN IP4 127.0.0.1
t=0 0
a=tool:libavformat 61.7.100
m=audio 5004 RTP/AVP 96
b=AS:64
a=rtpmap:96 opus/48000/2
a=fmtp:96 sprop-stereo=1


================================================
FILE: example/golang/audio-mic/audio.go
================================================
package main

import (
	"bytes"
	"encoding/json"
	"fmt"
	"log"
	"net/http"
	"os/exec"

	"github.com/gordonklaus/portaudio"
)

type RegisterRequest struct {
	Topic     string `json:"topic"`
	MediaType string `json:"media_type"`
}

type RegisterResponse struct {
	Ssrc    uint32 `json:"ssrc"`
	RtpPort uint16 `json:"rtp_port"`
}

func main() {
	deviceId := "audio"
	deviceToken := "FnhXd7dNy8iCPbu5N5jS2v_NaOYCiI9AqPO4FQQed7E"

	serverURL := "http://127.0.0.1:6174/api/streams/register"
	topic := "go_stream_1"
	mediaType := "audio"

	if deviceId == "" || deviceToken == "" {
		log.Fatal("Error: Please set the deviceId and deviceToken variables.")
	}

	reqBody := RegisterRequest{Topic: topic, MediaType: mediaType}
	jsonBody, err := json.Marshal(reqBody)
	if err != nil {
		log.Fatalf("Error marshalling request body: %v\n", err)
	}

	req, err := http.NewRequest("POST", serverURL, bytes.NewBuffer(jsonBody))
	if err != nil {
		log.Fatalf("Error creating request: %v\n", err)
	}

	req.Header.Set("Content-Type", "application/json")
	req.Header.Set("X-Device-Id", deviceId)
	req.Header.Set("Authorization", "Bearer "+deviceToken)

	client := &http.Client{}
	resp, err := client.Do(req)
	if err != nil {
		log.Fatalf("Error making request to server: %v\n", err)
	}
	defer resp.Body.Close()

	if resp.StatusCode != http.StatusOK {
		body := new(bytes.Buffer)
		body.ReadFrom(resp.Body)
		log.Fatalf("Server returned non-OK status: %s\nResponse body: %s\n", resp.Status, body.String())
	}

	var regResponse RegisterResponse
	if err := json.NewDecoder(resp.Body).Decode(&regResponse); err != nil {
		log.Fatalf("Error decoding response body: %v\n", err)
	}

	fmt.Printf("Successfully registered stream. Topic: %s, SSRC: %d, Port: %d\n", topic, regResponse.Ssrc, regResponse.RtpPort)

	rtpURL := fmt.Sprintf("rtp://127.0.0.1:%d", regResponse.RtpPort)
	fmt.Printf("Starting real-time audio stream to: %s\n", rtpURL)

	portaudio.Initialize()
	defer portaudio.Terminate()

	host, err := portaudio.DefaultHostApi()
	if err != nil {
		log.Fatal("Host API fail:", err)
	}
	dev := host.DefaultInputDevice
	sampleRate := float64(dev.DefaultSampleRate)
	log.Printf("Using input device %q, sample rate: %.0f Hz", dev.Name, sampleRate)

	framesPerBuffer := int(sampleRate / 50) 
	in := make([]int16, framesPerBuffer)
	stream, err := portaudio.OpenDefaultStream(1, 0, sampleRate, len(in), &in)
	if err != nil {
		log.Fatal(err)
	}
	if err := stream.Start(); err != nil {
		log.Fatal(err)
	}
	defer stream.Stop()

	cmd := exec.Command(
		"ffmpeg",
		"-f", "s16le",
		"-ar", fmt.Sprintf("%d", int(sampleRate)),
		"-ac", "1",
		"-i", "pipe:0",
		"-vn",
		"-c:a", "libopus",
		"-b:a", "64k",
		"-vbr", "on",
		"-compression_level", "10",
		"-payload_type", "96",
		"-ssrc", fmt.Sprintf("%d", int32(regResponse.Ssrc)),
		"-f", "rtp",
		rtpURL,
	)

	stdin, err := cmd.StdinPipe()
	if err != nil {
		log.Fatal(err)
	}
	cmd.Stderr = log.Writer()

	if err := cmd.Start(); err != nil {
		log.Fatal(err)
	}
	defer cmd.Process.Kill()

	buf := make([]byte, framesPerBuffer*2)
	fmt.Println("Streaming... Press Ctrl+C to stop.")
	for {
		if err := stream.Read(); err != nil {
			if err == portaudio.InputOverflowed {
				continue
			}
			log.Println("stream read error:", err)
			break
		}
		for i, v := range in {
			buf[2*i] = byte(v)
			buf[2*i+1] = byte(v >> 8)
		}
		if _, err := stdin.Write(buf); err != nil {
			log.Println("stdin write error:", err)
			break
		}
	}

	if err := cmd.Wait(); err != nil {
		log.Printf("ffmpeg command finished with error: %v", err)
	}
}


================================================
FILE: example/golang/go.mod
================================================
module vessel/sentinel

go 1.24.3

require (
	github.com/gordonklaus/portaudio v0.0.0-20250206071425-98a94950218b
	github.com/pion/rtp v1.8.18
)

require (
	github.com/davecgh/go-spew v1.1.1 // indirect
	github.com/google/uuid v1.3.1 // indirect
	github.com/pion/datachannel v1.5.8 // indirect
	github.com/pion/dtls/v2 v2.2.12 // indirect
	github.com/pion/ice/v2 v2.3.36 // indirect
	github.com/pion/interceptor v0.1.29 // indirect
	github.com/pion/logging v0.2.2 // indirect
	github.com/pion/mdns v0.0.12 // indirect
	github.com/pion/rtcp v1.2.14 // indirect
	github.com/pion/sctp v1.8.19 // indirect
	github.com/pion/sdp/v3 v3.0.9 // indirect
	github.com/pion/srtp/v2 v2.0.20 // indirect
	github.com/pion/stun v0.6.1 // indirect
	github.com/pion/transport/v2 v2.2.10 // indirect
	github.com/pion/turn/v2 v2.1.6 // indirect
	github.com/pmezard/go-difflib v1.0.0 // indirect
	github.com/stretchr/testify v1.10.0 // indirect
	github.com/wlynxg/anet v0.0.3 // indirect
	golang.org/x/crypto v0.21.0 // indirect
	golang.org/x/net v0.22.0 // indirect
	golang.org/x/sys v0.18.0 // indirect
	gopkg.in/yaml.v3 v3.0.1 // indirect
)

require (
	github.com/pion/opus v0.0.0-20250423145807-4aaa26789cff
	github.com/pion/randutil v0.1.0 // indirect
	github.com/pion/webrtc/v3 v3.3.5
	github.com/zaf/g711 v1.4.0
	gopkg.in/hraban/opus.v2 v2.0.0-20230925203106-0188a62cb302
)


================================================
FILE: example/golang/go.sum
================================================
github.com/davecgh/go-spew v1.1.0/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
github.com/davecgh/go-spew v1.1.1 h1:vj9j/u1bqnvCEfJOwUhtlOARqs3+rkHYY13jYWTU97c=
github.com/davecgh/go-spew v1.1.1/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
github.com/google/uuid v1.3.1 h1:KjJaJ9iWZ3jOFZIf1Lqf4laDRCasjl0BCmnEGxkdLb4=
github.com/google/uuid v1.3.1/go.mod h1:TIyPZe4MgqvfeYDBFedMoGGpEw/LqOeaOT+nhxU+yHo=
github.com/gordonklaus/portaudio v0.0.0-20250206071425-98a94950218b h1:WEuQWBxelOGHA6z9lABqaMLMrfwVyMdN3UgRLT+YUPo=
github.com/gordonklaus/portaudio v0.0.0-20250206071425-98a94950218b/go.mod h1:esZFQEUwqC+l76f2R8bIWSwXMaPbp79PppwZ1eJhFco=
github.com/kr/pretty v0.1.0/go.mod h1:dAy3ld7l9f0ibDNOQOHHMYYIIbhfbHSm3C4ZsoJORNo=
github.com/kr/pty v1.1.1/go.mod h1:pFQYn66WHrOpPYNljwOMqo10TkYh1fy3cYio2l3bCsQ=
github.com/kr/text v0.1.0/go.mod h1:4Jbv+DJW3UT/LiOwJeYQe1efqtUx/iVham/4vfdArNI=
github.com/pion/datachannel v1.5.8 h1:ph1P1NsGkazkjrvyMfhRBUAWMxugJjq2HfQifaOoSNo=
github.com/pion/datachannel v1.5.8/go.mod h1:PgmdpoaNBLX9HNzNClmdki4DYW5JtI7Yibu8QzbL3tI=
github.com/pion/dtls/v2 v2.2.7/go.mod h1:8WiMkebSHFD0T+dIU+UeBaoV7kDhOW5oDCzZ7WZ/F9s=
github.com/pion/dtls/v2 v2.2.12 h1:KP7H5/c1EiVAAKUmXyCzPiQe5+bCJrpOeKg/L05dunk=
github.com/pion/dtls/v2 v2.2.12/go.mod h1:d9SYc9fch0CqK90mRk1dC7AkzzpwJj6u2GU3u+9pqFE=
github.com/pion/ice/v2 v2.3.36 h1:SopeXiVbbcooUg2EIR8sq4b13RQ8gzrkkldOVg+bBsc=
github.com/pion/ice/v2 v2.3.36/go.mod h1:mBF7lnigdqgtB+YHkaY/Y6s6tsyRyo4u4rPGRuOjUBQ=
github.com/pion/interceptor v0.1.29 h1:39fsnlP1U8gw2JzOFWdfCU82vHvhW9o0rZnZF56wF+M=
github.com/pion/interceptor v0.1.29/go.mod h1:ri+LGNjRUc5xUNtDEPzfdkmSqISixVTBF/z/Zms/6T4=
github.com/pion/logging v0.2.2 h1:M9+AIj/+pxNsDfAT64+MAVgJO0rsyLnoJKCqf//DoeY=
github.com/pion/logging v0.2.2/go.mod h1:k0/tDVsRCX2Mb2ZEmTqNa7CWsQPc+YYCB7Q+5pahoms=
github.com/pion/mdns v0.0.12 h1:CiMYlY+O0azojWDmxdNr7ADGrnZ+V6Ilfner+6mSVK8=
github.com/pion/mdns v0.0.12/go.mod h1:VExJjv8to/6Wqm1FXK+Ii/Z9tsVk/F5sD/N70cnYFbk=
github.com/pion/opus v0.0.0-20250423145807-4aaa26789cff h1:09dkuUpQF8/8YfotuU8hg/yYVBJBA6KrmhLIUq3N6W0=
github.com/pion/opus v0.0.0-20250423145807-4aaa26789cff/go.mod h1:MF0ECGlX1vw71XHaPvRqZoeFED6QTwvFL71vbsd29yY=
github.com/pion/randutil v0.1.0 h1:CFG1UdESneORglEsnimhUjf33Rwjubwj6xfiOXBa3mA=
github.com/pion/randutil v0.1.0/go.mod h1:XcJrSMMbbMRhASFVOlj/5hQial/Y8oH/HVo7TBZq+j8=
github.com/pion/rtcp v1.2.12/go.mod h1:sn6qjxvnwyAkkPzPULIbVqSKI5Dv54Rv7VG0kNxh9L4=
github.com/pion/rtcp v1.2.14 h1:KCkGV3vJ+4DAJmvP0vaQShsb0xkRfWkO540Gy102KyE=
github.com/pion/rtcp v1.2.14/go.mod h1:sn6qjxvnwyAkkPzPULIbVqSKI5Dv54Rv7VG0kNxh9L4=
github.com/pion/rtp v1.8.3/go.mod h1:pBGHaFt/yW7bf1jjWAoUjpSNoDnw98KTMg+jWWvziqU=
github.com/pion/rtp v1.8.18 h1:yEAb4+4a8nkPCecWzQB6V/uEU18X1lQCGAQCjP+pyvU=
github.com/pion/rtp v1.8.18/go.mod h1:bAu2UFKScgzyFqvUKmbvzSdPr+NGbZtv6UB2hesqXBk=
github.com/pion/sctp v1.8.19 h1:2CYuw+SQ5vkQ9t0HdOPccsCz1GQMDuVy5PglLgKVBW8=
github.com/pion/sctp v1.8.19/go.mod h1:P6PbDVA++OJMrVNg2AL3XtYHV4uD6dvfyOovCgMs0PE=
github.com/pion/sdp/v3 v3.0.9 h1:pX++dCHoHUwq43kuwf3PyJfHlwIj4hXA7Vrifiq0IJY=
github.com/pion/sdp/v3 v3.0.9/go.mod h1:B5xmvENq5IXJimIO4zfp6LAe1fD9N+kFv+V/1lOdz8M=
github.com/pion/srtp/v2 v2.0.20 h1:HNNny4s+OUmG280ETrCdgFndp4ufx3/uy85EawYEhTk=
github.com/pion/srtp/v2 v2.0.20/go.mod h1:0KJQjA99A6/a0DOVTu1PhDSw0CXF2jTkqOoMg3ODqdA=
github.com/pion/stun v0.6.1 h1:8lp6YejULeHBF8NmV8e2787BogQhduZugh5PdhDyyN4=
github.com/pion/stun v0.6.1/go.mod h1:/hO7APkX4hZKu/D0f2lHzNyvdkTGtIy3NDmLR7kSz/8=
github.com/pion/transport/v2 v2.2.1/go.mod h1:cXXWavvCnFF6McHTft3DWS9iic2Mftcz1Aq29pGcU5g=
github.com/pion/transport/v2 v2.2.3/go.mod h1:q2U/tf9FEfnSBGSW6w5Qp5PFWRLRj3NjLhCCgpRK4p0=
github.com/pion/transport/v2 v2.2.4/go.mod h1:q2U/tf9FEfnSBGSW6w5Qp5PFWRLRj3NjLhCCgpRK4p0=
github.com/pion/transport/v2 v2.2.10 h1:ucLBLE8nuxiHfvkFKnkDQRYWYfp8ejf4YBOPfaQpw6Q=
github.com/pion/transport/v2 v2.2.10/go.mod h1:sq1kSLWs+cHW9E+2fJP95QudkzbK7wscs8yYgQToO5E=
github.com/pion/transport/v3 v3.0.1/go.mod h1:UY7kiITrlMv7/IKgd5eTUcaahZx5oUN3l9SzK5f5xE0=
github.com/pion/turn/v2 v2.1.3/go.mod h1:huEpByKKHix2/b9kmTAM3YoX6MKP+/D//0ClgUYR2fY=
github.com/pion/turn/v2 v2.1.6 h1:Xr2niVsiPTB0FPtt+yAWKFUkU1eotQbGgpTIld4x1Gc=
github.com/pion/turn/v2 v2.1.6/go.mod h1:huEpByKKHix2/b9kmTAM3YoX6MKP+/D//0ClgUYR2fY=
github.com/pion/webrtc/v3 v3.3.5 h1:ZsSzaMz/i9nblPdiAkZoP+E6Kmjw+jnyq3bEmU3EtRg=
github.com/pion/webrtc/v3 v3.3.5/go.mod h1:liNa+E1iwyzyXqNUwvoMRNQ10x8h8FOeJKL8RkIbamE=
github.com/pmezard/go-difflib v1.0.0 h1:4DBwDE0NGyQoBHbLQYPwSUPoCMWR5BEzIk/f1lZbAQM=
github.com/pmezard/go-difflib v1.0.0/go.mod h1:iKH77koFhYxTK1pcRnkKkqfTogsbg7gZNVY4sRDYZ/4=
github.com/stretchr/objx v0.1.0/go.mod h1:HFkY916IF+rwdDfMAkV7OtwuqBVzrE8GR6GFx+wExME=
github.com/stretchr/objx v0.4.0/go.mod h1:YvHI0jy2hoMjB+UWwv71VJQ9isScKT/TqJzVSSt89Yw=
github.com/stretchr/objx v0.5.0/go.mod h1:Yh+to48EsGEfYuaHDzXPcE3xhTkx73EhmCGUpEOglKo=
github.com/stretchr/objx v0.5.2/go.mod h1:FRsXN1f5AsAjCGJKqEizvkpNtU+EGNCLh3NxZ/8L+MA=
github.com/stretchr/testify v1.7.1/go.mod h1:6Fq8oRcR53rry900zMqJjRRixrwX3KX962/h/Wwjteg=
github.com/stretchr/testify v1.8.0/go.mod h1:yNjHg4UonilssWZ8iaSj1OCr/vHnekPRkoO+kdMU+MU=
github.com/stretchr/testify v1.8.3/go.mod h1:sz/lmYIOXD/1dqDmKjjqLyZ2RngseejIcXlSw2iwfAo=
github.com/stretchr/testify v1.8.4/go.mod h1:sz/lmYIOXD/1dqDmKjjqLyZ2RngseejIcXlSw2iwfAo=
github.com/stretchr/testify v1.9.0/go.mod h1:r2ic/lqez/lEtzL7wO/rwa5dbSLXVDPFyf8C91i36aY=
github.com/stretchr/testify v1.10.0 h1:Xv5erBjTwe/5IxqUQTdXv5kgmIvbHo3QQyRwhJsOfJA=
github.com/stretchr/testify v1.10.0/go.mod h1:r2ic/lqez/lEtzL7wO/rwa5dbSLXVDPFyf8C91i36aY=
github.com/wlynxg/anet v0.0.3 h1:PvR53psxFXstc12jelG6f1Lv4MWqE0tI76/hHGjh9rg=
github.com/wlynxg/anet v0.0.3/go.mod h1:eay5PRQr7fIVAMbTbchTnO9gG65Hg/uYGdc7mguHxoA=
github.com/yuin/goldmark v1.4.13/go.mod h1:6yULJ656Px+3vBD8DxQVa3kxgyrAnzto9xy5taEt/CY=
github.com/zaf/g711 v1.4.0 h1:XZYkjjiAg9QTBnHqEg37m2I9q3IIDv5JRYXs2N8ma7c=
github.com/zaf/g711 v1.4.0/go.mod h1:eCDXt3dSp/kYYAoooba7ukD/Q75jvAaS4WOMr0l1Roo=
golang.org/x/crypto v0.0.0-20190308221718-c2843e01d9a2/go.mod h1:djNgcEr1/C05ACkg1iLfiJU5Ep61QUkGW8qpdssI0+w=
golang.org/x/crypto v0.0.0-20210921155107-089bfa567519/go.mod h1:GvvjBRRGRdwPK5ydBHafDWAxML/pGHZbMvKqRZ5+Abc=
golang.org/x/crypto v0.8.0/go.mod h1:mRqEX+O9/h5TFCrQhkgjo2yKi0yYA+9ecGkdQoHrywE=
golang.org/x/crypto v0.12.0/go.mod h1:NF0Gs7EO5K4qLn+Ylc+fih8BSTeIjAP05siRnAh98yw=
golang.org/x/crypto v0.18.0/go.mod h1:R0j02AL6hcrfOiy9T4ZYp/rcWeMxM3L6QYxlOuEG1mg=
golang.org/x/crypto v0.21.0 h1:X31++rzVUdKhX5sWmSOFZxx8UW/ldWx55cbf08iNAMA=
golang.org/x/crypto v0.21.0/go.mod h1:0BP7YvVV9gBbVKyeTG0Gyn+gZm94bibOW5BjDEYAOMs=
golang.org/x/mod v0.6.0-dev.0.20220419223038-86c51ed26bb4/go.mod h1:jJ57K6gSWd91VN4djpZkiMVwK6gcyfeH4XE8wZrZaV4=
golang.org/x/mod v0.8.0/go.mod h1:iBbtSCu2XBx23ZKBPSOrRkjjQPZFPuis4dIYUhu/chs=
golang.org/x/net v0.0.0-20190620200207-3b0461eec859/go.mod h1:z5CRVTTTmAJ677TzLLGU+0bjPO0LkuOLi4/5GtJWs/s=
golang.org/x/net v0.0.0-20210226172049-e18ecbb05110/go.mod h1:m0MpNAwzfU5UDzcl9v0D8zg8gWTRqZa9RBIspLL5mdg=
golang.org/x/net v0.0.0-20220722155237-a158d28d115b/go.mod h1:XRhObCWvk6IyKnWLug+ECip1KBveYUHfp+8e9klMJ9c=
golang.org/x/net v0.6.0/go.mod h1:2Tu9+aMcznHK/AK1HMvgo6xiTLG5rD5rZLDS+rp2Bjs=
golang.org/x/net v0.9.0/go.mod h1:d48xBJpPfHeWQsugry2m+kC02ZBRGRgulfHnEXEuWns=
golang.org/x/net v0.10.0/go.mod h1:0qNGK6F8kojg2nk9dLZ2mShWaEBan6FAoqfSigmmuDg=
golang.org/x/net v0.14.0/go.mod h1:PpSgVXXLK0OxS0F31C1/tv6XNguvCrnXIDrFMspZIUI=
golang.org/x/net v0.20.0/go.mod h1:z8BVo6PvndSri0LbOE3hAn0apkU+1YvI6E70E9jsnvY=
golang.org/x/net v0.22.0 h1:9sGLhx7iRIHEiX0oAJ3MRZMUCElJgy7Br1nO+AMN3Tc=
golang.org/x/net v0.22.0/go.mod h1:JKghWKKOSdJwpW2GEx0Ja7fmaKnMsbu+MWVZTokSYmg=
golang.org/x/sync v0.0.0-20190423024810-112230192c58/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM=
golang.org/x/sync v0.0.0-20220722155255-886fb9371eb4/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM=
golang.org/x/sync v0.1.0/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM=
golang.org/x/sys v0.0.0-20190215142949-d0b11bdaac8a/go.mod h1:STP8DvDyc/dI5b8T5hshtkjS+E42TnysNCUPdjciGhY=
golang.org/x/sys v0.0.0-20201119102817-f84b799fce68/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
golang.org/x/sys v0.0.0-20210615035016-665e8c7367d1/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
golang.org/x/sys v0.0.0-20220520151302-bc2c85ada10a/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
golang.org/x/sys v0.0.0-20220722155257-8c9f86f7a55f/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
golang.org/x/sys v0.5.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
golang.org/x/sys v0.7.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
golang.org/x/sys v0.8.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
golang.org/x/sys v0.9.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
golang.org/x/sys v0.11.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
golang.org/x/sys v0.16.0/go.mod h1:/VUhepiaJMQUp4+oa/7Zr1D23ma6VTLIYjOOTFZPUcA=
golang.org/x/sys v0.18.0 h1:DBdB3niSjOA/O0blCZBqDefyWNYveAYMNF1Wum0DYQ4=
golang.org/x/sys v0.18.0/go.mod h1:/VUhepiaJMQUp4+oa/7Zr1D23ma6VTLIYjOOTFZPUcA=
golang.org/x/term v0.0.0-20201126162022-7de9c90e9dd1/go.mod h1:bj7SfCRtBDWHUb9snDiAeCFNEtKQo2Wmx5Cou7ajbmo=
golang.org/x/term v0.0.0-20210927222741-03fcf44c2211/go.mod h1:jbD1KX2456YbFQfuXm/mYQcufACuNUgVhRMnK/tPxf8=
golang.org/x/term v0.5.0/go.mod h1:jMB1sMXY+tzblOD4FWmEbocvup2/aLOaQEp7JmGp78k=
golang.org/x/term v0.7.0/go.mod h1:P32HKFT3hSsZrRxla30E9HqToFYAQPCMs/zFMBUFqPY=
golang.org/x/term v0.8.0/go.mod h1:xPskH00ivmX89bAKVGSKKtLOWNx2+17Eiy94tnKShWo=
golang.org/x/term v0.11.0/go.mod h1:zC9APTIj3jG3FdV/Ons+XE1riIZXG4aZ4GTHiPZJPIU=
golang.org/x/term v0.16.0/go.mod h1:yn7UURbUtPyrVJPGPq404EukNFxcm/foM+bV/bfcDsY=
golang.org/x/text v0.3.0/go.mod h1:NqM8EUOU14njkJ3fqMW+pc6Ldnwhi/IjpwHt7yyuwOQ=
golang.org/x/text v0.3.3/go.mod h1:5Zoc/QRtKVWzQhOtBMvqHzDpF6irO9z98xDceosuGiQ=
golang.org/x/text v0.3.7/go.mod h1:u+2+/6zg+i71rQMx5EYifcz6MCKuco9NR6JIITiCfzQ=
golang.org/x/text v0.7.0/go.mod h1:mrYo+phRRbMaCq/xk9113O4dZlRixOauAjOtrjsXDZ8=
golang.org/x/text v0.9.0/go.mod h1:e1OnstbJyHTd6l/uOt8jFFHp6TRDWZR/bV3emEE/zU8=
golang.org/x/text v0.12.0/go.mod h1:TvPlkZtksWOMsz7fbANvkp4WM8x/WCo/om8BMLbz+aE=
golang.org/x/text v0.14.0/go.mod h1:18ZOQIKpY8NJVqYksKHtTdi31H5itFRjB5/qKTNYzSU=
golang.org/x/tools v0.0.0-20180917221912-90fa682c2a6e/go.mod h1:n7NCudcB/nEzxVGmLbDWY5pfWTLqBcC2KZ6jyYvM4mQ=
golang.org/x/tools v0.0.0-20191119224855-298f0cb1881e/go.mod h1:b+2E5dAYhXwXZwtnZ6UAqBI28+e2cm9otk0dWdXHAEo=
golang.org/x/tools v0.1.12/go.mod h1:hNGJHUnrk76NpqgfD5Aqm5Crs+Hm0VOH/i9J2+nxYbc=
golang.org/x/tools v0.6.0/go.mod h1:Xwgl3UAJ/d3gWutnCtw505GrjyAbvKui8lOU390QaIU=
golang.org/x/xerrors v0.0.0-20190717185122-a985d3407aa7/go.mod h1:I/5z698sn9Ka8TeJc9MKroUUfqBBauWjQqLJ2OPfmY0=
gopkg.in/check.v1 v0.0.0-20161208181325-20d25e280405/go.mod h1:Co6ibVJAznAaIkqp8huTwlJQCZ016jof/cbN4VW5Yz0=
gopkg.in/check.v1 v1.0.0-20190902080502-41f04d3bba15/go.mod h1:Co6ibVJAznAaIkqp8huTwlJQCZ016jof/cbN4VW5Yz0=
gopkg.in/hraban/opus.v2 v2.0.0-20230925203106-0188a62cb302 h1:xeVptzkP8BuJhoIjNizd2bRHfq9KB9HfOLZu90T04XM=
gopkg.in/hraban/opus.v2 v2.0.0-20230925203106-0188a62cb302/go.mod h1:/L5E7a21VWl8DeuCPKxQBdVG5cy+L0MRZ08B1wnqt7g=
gopkg.in/yaml.v3 v3.0.0-20200313102051-9f266ea9e77c/go.mod h1:K4uyk7z7BCEPqu6E+C64Yfv1cQ7kz7rIZviUmN+EgEM=
gopkg.in/yaml.v3 v3.0.1 h1:fxVm/GzAzEWqLHuvctI91KS9hhNmmWOoWu0XTYJS7CA=
gopkg.in/yaml.v3 v3.0.1/go.mod h1:K4uyk7z7BCEPqu6E+C64Yfv1cQ7kz7rIZviUmN+EgEM=


================================================
FILE: example/golang/video-sample/video.go
================================================
package main

import (
	"bytes"
	"encoding/json"
	"fmt"
	"net/http"
	"os/exec"
)

type RegisterRequest struct {
	Topic string `json:"topic"`
	MediaType string `json:"media_type"`
}

type RegisterResponse struct {
	Ssrc    uint32 `json:"ssrc"`
	RtpPort uint16 `json:"rtp_port"`
}

func main() {
	deviceId := "audio"
	deviceToken := "FnhXd7dNy8iCPbu5N5jS2v_NaOYCiI9AqPO4FQQed7E"

	serverURL := "http://127.0.0.1:6174/api/streams/register"
	topic := "go_video_stream_1"
	mediaType := "video"

	if deviceId == "" || deviceToken == "" {
		fmt.Println("Error: Please set the deviceId and deviceToken variables.")
		return
	}

	reqBody := RegisterRequest{Topic: topic, MediaType: mediaType}
	jsonBody, err := json.Marshal(reqBody)
	if err != nil {
		fmt.Printf("Error marshalling request body: %v\n", err)
		return
	}

	req, err := http.NewRequest("POST", serverURL, bytes.NewBuffer(jsonBody))
	if err != nil {
		fmt.Printf("Error creating request: %v\n", err)
		return
	}

	req.Header.Set("Content-Type", "application/json")
	req.Header.Set("X-Device-Id", deviceId)
	req.Header.Set("Authorization", "Bearer "+deviceToken)

	client := &http.Client{}
	resp, err := client.Do(req)
	if err != nil {
		fmt.Printf("Error making request to server: %v\n", err)
		return
	}
	defer resp.Body.Close()

	if resp.StatusCode != http.StatusOK {
		fmt.Printf("Server returned non-OK status: %s\n", resp.Status)
		body := new(bytes.Buffer)
		body.ReadFrom(resp.Body)
		fmt.Printf("Response body: %s\n", body.String())
		return
	}

	var regResponse RegisterResponse
	if err := json.NewDecoder(resp.Body).Decode(&regResponse); err != nil {
		fmt.Printf("Error decoding response body: %v\n", err)
		return
	}

	fmt.Printf("Successfully registered stream. Topic: %s, SSRC: %d\n", topic, regResponse.Ssrc)

	rtpURL := fmt.Sprintf("rtp://127.0.0.1:%d", regResponse.RtpPort)
	fmt.Printf("Starting ffmpeg stream to: %s\n", rtpURL)

	cmd := exec.Command(
		"ffmpeg",
		"-re",
		"-stream_loop", "-1",
		"-i", "./sample.mp4",
		"-an",
		"-map", "0:v:0",
		"-vf", "scale=640:480",
		"-c:v", "libx264",
		"-profile:v", "baseline",
		"-pix_fmt", "yuv420p",
		"-preset", "ultrafast",
		"-tune", "zerolatency",
		"-b:v", "300k",
		"-maxrate", "350k",
		"-bufsize", "600k",
		"-g", "30",
		"-payload_type", "102",
		"-ssrc", fmt.Sprintf("%d", regResponse.Ssrc),
		"-f", "rtp",
		rtpURL,
	)

	out, err := cmd.CombinedOutput()
	fmt.Printf("ffmpeg output:\n%s\n", out)
	if err != nil {
		fmt.Printf("ffmpeg error: %v\n", err)
	}
}

================================================
FILE: example/golang/video2-sample/video.go
================================================
package main

import (
	"bytes"
	"encoding/json"
	"fmt"
	"net/http"
	"os/exec"
)

type RegisterRequest struct {
	Topic string `json:"topic"`
	MediaType string `json:"media_type"`
}

type RegisterResponse struct {
	Ssrc    uint32 `json:"ssrc"`
	RtpPort uint16 `json:"rtp_port"`
}

func main() {
	deviceId := "audio"
	deviceToken := "FnhXd7dNy8iCPbu5N5jS2v_NaOYCiI9AqPO4FQQed7E"

	serverURL := "http://127.0.0.1:6174/api/streams/register"
	topic := "go_video_stream_2"
	mediaType := "video"

	if deviceId == "" || deviceToken == "" {
		fmt.Println("Error: Please set the deviceId and deviceToken variables.")
		return
	}

	reqBody := RegisterRequest{Topic: topic, MediaType: mediaType}
	jsonBody, err := json.Marshal(reqBody)
	if err != nil {
		fmt.Printf("Error marshalling request body: %v\n", err)
		return
	}

	req, err := http.NewRequest("POST", serverURL, bytes.NewBuffer(jsonBody))
	if err != nil {
		fmt.Printf("Error creating request: %v\n", err)
		return
	}

	req.Header.Set("Content-Type", "application/json")
	req.Header.Set("X-Device-Id", deviceId)
	req.Header.Set("Authorization", "Bearer "+deviceToken)

	client := &http.Client{}
	resp, err := client.Do(req)
	if err != nil {
		fmt.Printf("Error making request to server: %v\n", err)
		return
	}
	defer resp.Body.Close()

	if resp.StatusCode != http.StatusOK {
		fmt.Printf("Server returned non-OK status: %s\n", resp.Status)
		body := new(bytes.Buffer)
		body.ReadFrom(resp.Body)
		fmt.Printf("Response body: %s\n", body.String())
		return
	}

	var regResponse RegisterResponse
	if err := json.NewDecoder(resp.Body).Decode(&regResponse); err != nil {
		fmt.Printf("Error decoding response body: %v\n", err)
		return
	}

	fmt.Printf("Successfully registered stream. Topic: %s, SSRC: %d\n", topic, regResponse.Ssrc)

	rtpURL := fmt.Sprintf("rtp://127.0.0.1:%d", regResponse.RtpPort)
	fmt.Printf("Starting ffmpeg stream to: %s\n", rtpURL)

	cmd := exec.Command(
		"ffmpeg",
		"-re",
		"-i", "./sample.mp4",
		"-an",
		"-map", "0:v:0",
		"-vf", "scale=640:480",
		"-c:v", "libx264",
		"-profile:v", "baseline",
		"-pix_fmt", "yuv420p",
		"-preset", "ultrafast",
		"-tune", "zerolatency",
		"-b:v", "300k",
		"-maxrate", "350k",
		"-bufsize", "600k",
		"-g", "30",
		"-payload_type", "102",
		"-ssrc", fmt.Sprintf("%d", regResponse.Ssrc),
		"-f", "rtp",
		rtpURL,
	)

	out, err := cmd.CombinedOutput()
	fmt.Printf("ffmpeg output:\n%s\n", out)
	if err != nil {
		fmt.Printf("ffmpeg error: %v\n", err)
	}
}

================================================
FILE: example/golang/video3-sample/video.go
================================================
package main

import (
	"bytes"
	"encoding/json"
	"fmt"
	"net/http"
	"os/exec"
)

type RegisterRequest struct {
	Topic string `json:"topic"`
	MediaType string `json:"media_type"`
}

type RegisterResponse struct {
	Ssrc    uint32 `json:"ssrc"`
	RtpPort uint16 `json:"rtp_port"`
}

func main() {
	deviceId := "audio"
	deviceToken := "FnhXd7dNy8iCPbu5N5jS2v_NaOYCiI9AqPO4FQQed7E"

	serverURL := "http://127.0.0.1:6174/api/streams/register"
	topic := "go_video_stream_3"
	mediaType := "video"

	if deviceId == "" || deviceToken == "" {
		fmt.Println("Error: Please set the deviceId and deviceToken variables.")
		return
	}

	reqBody := RegisterRequest{Topic: topic, MediaType: mediaType}
	jsonBody, err := json.Marshal(reqBody)
	if err != nil {
		fmt.Printf("Error marshalling request body: %v\n", err)
		return
	}

	req, err := http.NewRequest("POST", serverURL, bytes.NewBuffer(jsonBody))
	if err != nil {
		fmt.Printf("Error creating request: %v\n", err)
		return
	}

	req.Header.Set("Content-Type", "application/json")
	req.Header.Set("X-Device-Id", deviceId)
	req.Header.Set("Authorization", "Bearer "+deviceToken)

	client := &http.Client{}
	resp, err := client.Do(req)
	if err != nil {
		fmt.Printf("Error making request to server: %v\n", err)
		return
	}
	defer resp.Body.Close()

	if resp.StatusCode != http.StatusOK {
		fmt.Printf("Server returned non-OK status: %s\n", resp.Status)
		body := new(bytes.Buffer)
		body.ReadFrom(resp.Body)
		fmt.Printf("Response body: %s\n", body.String())
		return
	}

	var regResponse RegisterResponse
	if err := json.NewDecoder(resp.Body).Decode(&regResponse); err != nil {
		fmt.Printf("Error decoding response body: %v\n", err)
		return
	}

	fmt.Printf("Successfully registered stream. Topic: %s, SSRC: %d\n", topic, regResponse.Ssrc)

	rtpURL := fmt.Sprintf("rtp://127.0.0.1:%d", regResponse.RtpPort)
	fmt.Printf("Starting ffmpeg stream to: %s (low bitrate for TURN testing)\n", rtpURL)

	cmd := exec.Command(
		"ffmpeg",
		"-re",
		"-stream_loop", "-1",
		"-i", "../video-sample/sample.mp4",
		"-an",
		"-map", "0:v:0",
		"-vf", "scale=320:240",
		"-c:v", "libx264",
		"-profile:v", "baseline",
		"-pix_fmt", "yuv420p",
		"-preset", "ultrafast",
		"-tune", "zerolatency",
		"-b:v", "200k",
		"-maxrate", "250k",
		"-bufsize", "400k",
		"-g", "30",
		"-payload_type", "102",
		"-ssrc", fmt.Sprintf("%d", regResponse.Ssrc),
		"-f", "rtp",
		rtpURL,
	)

	out, err := cmd.CombinedOutput()
	fmt.Printf("ffmpeg output:\n%s\n", out)
	if err != nil {
		fmt.Printf("ffmpeg error: %v\n", err)
	}
}


================================================
FILE: example/js/index.js
================================================
const http = require("node:http");
const https = require("node:https");
const { randomBytes } = require("node:crypto");

const config = {
  serverUrl: "http://127.0.0.1:6174",
  entityId: "testbasic-http",
  deviceId: "testbasic",
  deviceToken: "OQ_PrBdAapWVulzXCke4n9EbXEINILPLryIpIe_19lM",
  intervalMs: 10_000,
};

if (!config.deviceId || !config.deviceToken) {
  console.error("Error: deviceId and deviceToken must be set.");
  process.exit(1);
}

const targetUrl = new URL(
  `/api/states/${encodeURIComponent(config.entityId)}`,
  config.serverUrl,
);
const httpClient = targetUrl.protocol === "https:" ? https : http;

const makeRandomState = (length = 12) =>
  randomBytes(Math.ceil(length / 2))
    .toString("hex")
    .slice(0, length);

async function postState() {
  const stateValue = makeRandomState();
  const body = JSON.stringify({ state: stateValue });

  const options = {
    method: "POST",
    hostname: targetUrl.hostname,
    port: targetUrl.port || (targetUrl.protocol === "https:" ? 443 : 80),
    path: targetUrl.pathname,
    headers: {
      "Content-Type": "application/json",
      "Content-Length": Buffer.byteLength(body),
      "X-Device-Id": config.deviceId,
      Authorization: `Bearer ${config.deviceToken}`,
    },
  };

  await new Promise((resolve, reject) => {
    const req = httpClient.request(options, (res) => {
      const chunks = [];

      res.on("data", (chunk) => chunks.push(chunk));
      res.on("end", () => {
        const responseBody =
          Buffer.concat(chunks).toString("utf8") || "<empty>";
        const timestamp = new Date().toISOString();

        if (res.statusCode && res.statusCode >= 200 && res.statusCode < 300) {
          console.log(
            `[${timestamp}] Sent state "${stateValue}" -> ${res.statusCode} ${res.statusMessage}`,
          );
        } else {
          console.error(
            `[${timestamp}] Server responded with ${res.statusCode} ${res.statusMessage}: ${responseBody}`,
          );
        }

        resolve();
      });
    });

    req.on("error", (error) => {
      console.error("Failed to send state:", error.message);
      reject(error);
    });

    req.write(body);
    req.end();
  });
}

(async () => {
  try {
    await postState();
  } catch (error) {
    console.error("Initial request failed, continuing with interval:", error);
  }

  const intervalId = setInterval(async () => {
    try {
      await postState();
    } catch (error) {
      console.error("Interval request failed:", error);
    }
  }, config.intervalMs);

  process.on("SIGINT", () => {
    clearInterval(intervalId);
    console.log("\nStopped sending random text states.");
    process.exit(0);
  });
})();


================================================
FILE: jest.config.js
================================================
module.exports = {};


================================================
FILE: package.json
================================================
{
  "name": "vessel",
  "version": "1.0.0",
  "description": "Physical Device Orchestration Platform",
  "directories": {
    "doc": "docs"
  },
  "private": true,
  "scripts": {
    "test": "jest",
    "client": "npm run dev --workspace=client",
    "client:build": "npm run build --workspace=@vessel/capsule-client && npm run build --workspace=client",
    "landing": "npm run dev --workspace=landing",
    "server": "cargo run -p server",
    "server:prod": "cargo run -p server --release",
    "desktop": "npm run dev --workspace=desktop",
    "desktop:build": "npm run tauri build --workspace=desktop",
    "capsule": "cd ./apps/capsule && cargo run -p capsule",
    "build": "cd ./apps/server && cargo build --release",
    "build:landing": "npm run build --workspace=landing && vitepress build docs",
    "docs:dev": "vitepress dev docs",
    "docs:build": "vitepress build docs",
    "docs:preview": "vitepress preview docs"
  },
  "workspaces": [
    "apps/*",
    "packages/*"
  ],
  "overrides": {
    "@docsearch/css": "4.6.2",
    "@docsearch/js": "4.6.2",
    "@docsearch/react": "4.6.2"
  },
  "dependencies": {
    "@tailwindcss/vite": "^4.1.8",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "concurrently": "^9.1.2",
    "lucide-react": "^0.539.0",
    "monaco-editor": "^0.53.0",
    "react": "^19.1.1",
    "react-dom": "^19.1.1",
    "react-error-boundary": "^6.0.0",
    "react-router": "^7.8.1",
    "tailwind-merge": "^3.3.1",
    "tailwindcss": "^4.1.8"
  },
  "devDependencies": {
    "@eslint/js": "^9.33.0",
    "@types/node": "^24.3.0",
    "@types/react": "^19.1.10",
    "@types/react-dom": "^19.1.7",
    "@vitejs/plugin-react": "^5.0.0",
    "eslint": "^9.33.0",
    "eslint-plugin-react-hooks": "^5.2.0",
    "eslint-plugin-react-refresh": "^0.4.20",
    "globals": "^16.3.0",
    "jest": "^30.0.5",
    "supertest": "^7.1.4",
    "tw-animate-css": "^1.3.7",
    "typescript": "~5.8.3",
    "typescript-eslint": "^8.39.1",
    "vite": "^7.1.2",
    "vitepress": "^1.6.3"
  }
}


================================================
FILE: packages/PKG.md
================================================


================================================
FILE: packages/capsule-client/package.json
================================================
{
  "name": "@vessel/capsule-client",
  "version": "0.1.0",
  "description": "Client SDK for Vessel Capsule - Secure image encryption and API client",
  "type": "module",
  "main": "dist/index.js",
  "module": "dist/index.js",
  "types": "dist/index.d.ts",
  "exports": {
    ".": {
      "types": "./dist/index.d.ts",
      "import": "./dist/index.js"
    }
  },
  "files": [
    "dist"
  ],
  "scripts": {
    "build": "tsc",
    "dev": "tsc --watch",
    "clean": "rm -rf dist"
  },
  "dependencies": {
    "@noble/ciphers": "^0.5.0",
    "@noble/curves": "^1.3.0",
    "@noble/hashes": "^1.3.3"
  },
  "devDependencies": {
    "typescript": "^5.3.0"
  },
  "keywords": [
    "encryption",
    "x25519",
    "xchacha20",
    "capsule",
    "secure"
  ],
  "license": "MIT"
}


================================================
FILE: packages/capsule-client/src/client.ts
================================================
import { encryptImage, fileToBytes } from './crypto';
import type {
  AnalyzeImageOptions,
  ChatOptions,
  ChatRequest,
  ChatResponse,
  CapsuleClientOptions,
  PublicKeyResponse,
  StreamCallback,
  ToolCallCallback,
  ToolCallResult,
} from './types';

/**
 * Authentication error
 *
 * Thrown when authentication token is missing or expired
 */
export class CapsuleAuthError extends Error {
  constructor(message: string = 'Authentication required') {
    super(message);
    this.name = 'CapsuleAuthError';
  }
}

/**
 * Rate limit error
 *
 * Thrown when daily usage limit is exceeded
 */
export class CapsuleRateLimitError extends Error {
  constructor(message: string = 'Rate limit exceeded') {
    super(message);
    this.name = 'CapsuleRateLimitError';
  }
}

/**
 * Subscription required error
 *
 * Thrown when a non-subscriber tries to access Pro features
 */
export class CapsuleSubscriptionError extends Error {
  constructor(message: string = 'Pro subscription required') {
    super(message);
    this.name = 'CapsuleSubscriptionError';
  }
}

/**
 * Capsule Client
 *
 * Client SDK for secure image analysis
 *
 * @example
 * ```typescript
 * const client = new CapsuleClient({
 *   baseUrl: 'https://capsule.example.com',
 * });
 *
 * // Analyze image
 * const response = await client.analyzeImage({
 *   image: imageFile,
 *   message: 'Please analyze this image',
 * });
 *
 * console.log(response.response);
 * ```
 */
export class CapsuleClient {
  private baseUrl: string;
  private timeout: number;
  private serverPublicKey: string | null = null;
  private getAccessToken?: () => Promise<string | null>;

  constructor(options: CapsuleClientOptions) {
    this.baseUrl = options.baseUrl.replace(/\/$/, '');
    this.timeout = options.timeout ?? 60000;
    this.getAccessToken = options.getAccessToken;
  }

  /**
   * Fetch server public key
   *
   * Cached - reused once fetched.
   * Requires re-fetching after server restart.
   */
  async getPublicKey(): Promise<string> {
    if (this.serverPublicKey) {
      return this.serverPublicKey;
    }

    const response = await this.fetch<PublicKeyResponse>('/api/public-key', {
      method: 'GET',
    });

    this.serverPublicKey = response.public_key;
    return this.serverPublicKey;
  }

  /**
   * Invalidate cached public key
   *
   * Should be called after server restart.
   */
  clearPublicKeyCache(): void {
    this.serverPublicKey = null;
  }

  /**
   * Change Base URL
   *
   * Automatically clears key cache since a different server has a different key.
   */
  setBaseUrl(url: string): void {
    this.baseUrl = url.replace(/\/$/, '');
    this.serverPublicKey = null;
  }

  /**
   * Text-only chat
   *
   * @param message - User message
   * @param options - Conversation history and system prompt (optional)
   */
  async chat(message: string, options?: ChatOptions): Promise<ChatResponse> {
    const request: ChatRequest = {
      message,
      ...(options?.history && { history: options.history }),
      ...(options?.systemPrompt && { system_prompt: options.systemPrompt }),
      ...(options?.tools && { tools: options.tools }),
      ...(options?.toolChoice && { tool_choice: options.toolChoice }),
    };

    return this.fetch<ChatResponse>('/api/chat', {
      method: 'POST',
      body: JSON.stringify(request),
    });
  }

  /**
   * Image analysis
   *
   * @param options - Analysis options
   * @returns AI response
   *
   * ## Secure data flow
   * 1. Fetch server public key (cached)
   * 2. Encrypt image with public key (X25519 + XChaCha20-Poly1305)
   * 3. Send encrypted image to server
   * 4. Server decrypts and analyzes with AI
   * 5. Receive response
   */
  async analyzeImage(options: AnalyzeImageOptions, chatOptions?: ChatOptions): Promise<ChatResponse> {
    const publicKey = await this.getPublicKey();

    let imageBytes: Uint8Array;
    if (options.image instanceof Uint8Array) {
      imageBytes = options.image;
    } else {
      imageBytes = await fileToBytes(options.image);
    }

    const encryptedImage = await encryptImage(imageBytes, publicKey);

    const request: ChatRequest = {
      message: options.message,
      encrypted_image: encryptedImage,
      ...(chatOptions?.history && { history: chatOptions.history }),
      ...(chatOptions?.systemPrompt && { system_prompt: chatOptions.systemPrompt }),
      ...(chatOptions?.tools && { tools: chatOptions.tools }),
      ...(chatOptions?.toolChoice && { tool_choice: chatOptions.toolChoice }),
    };

    return this.fetch<ChatResponse>('/api/chat', {
      method: 'POST',
      body: JSON.stringify(request),
    });
  }

  /**
   * Streaming chat
   *
   * @param message - User message
   * @param onChunk - Streaming chunk callback
   * @param options - Conversation history and system prompt (optional)
   */
  async chatStream(message: string, onChunk: StreamCallback, options?: ChatOptions): Promise<void> {
    const request: ChatRequest = {
      message,
      ...(options?.history && { history: options.history }),
      ...(options?.systemPrompt && { system_prompt: options.systemPrompt }),
      ...(options?.tools && { tools: options.tools }),
      ...(options?.toolChoice && { tool_choice: options.toolChoice }),
    };

    await this.fetchStream('/api/chat/stream', request, onChunk, options?.onToolCall);
  }

  /**
   * Streaming image analysis
   *
   * @param options - Image analysis options
   * @param onChunk - Streaming chunk callback
   * @param chatOptions - Conversation history and system prompt (optional)
   */
  async analyzeImageStream(
    options: AnalyzeImageOptions,
    onChunk: StreamCallback,
    chatOptions?: ChatOptions,
  ): Promise<void> {
    const publicKey = await this.getPublicKey();

    let imageBytes: Uint8Array;
    if (options.image instanceof Uint8Array) {
      imageBytes = options.image;
    } else {
      imageBytes = await fileToBytes(options.image);
    }

    const encryptedImage = await encryptImage(imageBytes, publicKey);

    const request: ChatRequest = {
      message: options.message,
      encrypted_image: encryptedImage,
      ...(chatOptions?.history && { history: chatOptions.history }),
      ...(chatOptions?.systemPrompt && { system_prompt: chatOptions.systemPrompt }),
      ...(chatOptions?.tools && { tools: chatOptions.tools }),
      ...(chatOptions?.toolChoice && { tool_choice: chatOptions.toolChoice }),
    };

    await this.fetchStream('/api/chat/stream', request, onChunk, chatOptions?.onToolCall);
  }

  /**
   * HTTP request
   */
  private async fetch<T>(path: string, init: RequestInit): Promise<T> {
    const controller = new AbortController();
    const timeoutId = setTimeout(() => controller.abort(), this.timeout);

    try {
      const headers: Record<string, string> = {
        'Content-Type': 'application/json',
        ...(init.headers as Record<string, string>),
      };

      if (this.getAccessToken) {
        const token = await this.getAccessToken();
        if (token) {
          headers['Authorization'] = `Bearer ${token}`;
        }
      }

      const response = await fetch(`${this.baseUrl}${path}`, {
        ...init,
        headers,
        signal: controller.signal,
      });

      if (response.status === 401) {
        throw new CapsuleAuthError('Authentication required. Please sign in.');
      }
      if (response.status === 403) {
        throw new CapsuleSubscriptionError(
          'Pro subscription required. Please upgrade at vessel.land/pricing'
        );
      }
      if (response.status === 429) {
        const errorText = await response.text();
        throw new CapsuleRateLimitError(errorText || 'Rate limit exceeded. Try again later.');
      }

      if (!response.ok) {
        const error = await response.text();
        throw new Error(`Request failed: ${response.status} ${error}`);
      }

      return response.json();
    } finally {
      clearTimeout(timeoutId);
    }
  }

  /**
   * SSE streaming request
   */
  private async fetchStream(
    path: string,
    request: ChatRequest,
    onChunk: StreamCallback,
    onToolCall?: ToolCallCallback,
  ): Promise<void> {
    const controller = new AbortController();
    const timeoutId = setTimeout(() => controller.abort(), this.timeout);

    try {
      const headers: Record<string, string> = {
        'Content-Type': 'application/json',
      };

      if (this.getAccessToken) {
        const token = await this.getAccessToken();
        if (token) {
          headers['Authorization'] = `Bearer ${token}`;
        }
      }

      const response = await fetch(`${this.baseUrl}${path}`, {
        method: 'POST',
        headers,
        body: JSON.stringify(request),
        signal: controller.signal,
      });

      if (response.status === 401) {
        throw new CapsuleAuthError('Authentication required. Please sign in.');
      }
      if (response.status === 403) {
        throw new CapsuleSubscriptionError(
          'Pro subscription required. Please upgrade at vessel.land/pricing'
        );
      }
      if (response.status === 429) {
        const errorText = await response.text();
        throw new CapsuleRateLimitError(errorText || 'Rate limit exceeded. Try again later.');
      }

      if (!response.ok) {
        const error = await response.text();
        throw new Error(`Request failed: ${response.status} ${error}`);
      }

      if (!response.body) {
        throw new Error('No response body');
      }

      const reader = response.body.getReader();
      const decoder = new TextDecoder();
      let buffer = '';

      const processLine = (line: string) => {
        if (!line.startsWith('data: ')) return;
        const data = line.slice(6);

        if (data === '[DONE]') {
          onChunk('', true);
          return;
        }

        if (data.startsWith('[TOOL_CALLS]')) {
          if (onToolCall) {
            try {
              const toolCalls: ToolCallResult[] = JSON.parse(data.slice('[TOOL_CALLS]'.length));
              onToolCall(toolCalls);
            } catch {
              // malformed tool call JSON
            }
          }
          return;
        }

        onChunk(data, false);
      };

      while (true) {
        const { done, value } = await reader.read();

        if (done) {
          if (buffer.trim()) {
            processLine(buffer.trim());
          }
          onChunk('', true);
          break;
        }

        buffer += decoder.decode(value, { stream: true });
        const lines = buffer.split('\n');
        buffer = lines.pop() || '';

        for (const line of lines) {
          const trimmed = line.trim();
          if (trimmed) {
            processLine(trimmed);
          }
        }
      }
    } finally {
      clearTimeout(timeoutId);
    }
  }
}


================================================
FILE: packages/capsule-client/src/conversation.ts
================================================
import type { HistoryMessage, ChatResponse, ChatOptions, StreamCallback } from './types';
import type { CapsuleClient } from './client';

/**
 * 기본 최대 히스토리 메시지 수
 */
const DEFAULT_MAX_HISTORY = 50;

/**
 * 대화 옵션
 */
export interface ConversationOptions {
  /** 시스템 프롬프트 */
  systemPrompt?: string;
  /** 최대 히스토리 메시지 수 (기본값: 50) */
  maxHistory?: number;
}

/**
 * 멀티턴 대화 관리자
 *
 * 대화 히스토리를 자동으로 관리하고 매 요청에 포함시킵니다.
 * 히스토리는 메모리에만 저장되며 서버에 저장되지 않습니다.
 *
 * @example
 * ```typescript
 * const client = new CapsuleClient({ baseUrl: 'https://capsule.example.com' });
 * const conversation = new Conversation(client, {
 *   systemPrompt: 'You are a helpful assistant.',
 *   maxHistory: 20,
 * });
 *
 * const res1 = await conversation.chat('Hello!');
 * console.log(res1.response);
 *
 * const res2 = await conversation.chat('What did I just say?');
 * // AI가 이전 대화를 참조하여 응답
 * ```
 */
export class Conversation {
  private client: CapsuleClient;
  private history: HistoryMessage[] = [];
  private systemPrompt?: string;
  private maxHistory: number;

  constructor(client: CapsuleClient, options?: ConversationOptions) {
    this.client = client;
    this.systemPrompt = options?.systemPrompt;
    this.maxHistory = options?.maxHistory ?? DEFAULT_MAX_HISTORY;
  }

  /**
   * 메시지 전송 및 응답 수신
   *
   * 사용자 메시지와 AI 응답을 자동으로 히스토리에 추가합니다.
   */
  async chat(message: string): Promise<ChatResponse> {
    const chatOptions: ChatOptions = {
      systemPrompt: this.systemPrompt,
      history: this.history.length > 0 ? [...this.history] : undefined,
    };

    const response = await this.client.chat(message, chatOptions);

    this.appendToHistory({ role: 'user', content: message });
    this.appendToHistory({ role: 'assistant', content: response.response });

    return response;
  }

  /**
   * 스트리밍 메시지 전송
   *
   * 스트리밍 완료 후 전체 응답을 히스토리에 추가합니다.
   */
  async chatStream(message: string, onChunk: StreamCallback): Promise<void> {
    const chatOptions: ChatOptions = {
      systemPrompt: this.systemPrompt,
      history: this.history.length > 0 ? [...this.history] : undefined,
    };

    let fullResponse = '';

    await this.client.chatStream(
      message,
      (chunk: string, done: boolean) => {
        if (!done) {
          fullResponse += chunk;
        }
        onChunk(chunk, done);

        if (done) {
          this.appendToHistory({ role: 'user', content: message });
          this.appendToHistory({ role: 'assistant', content: fullResponse });
        }
      },
      chatOptions,
    );
  }

  /**
   * 이미지 분석 결과를 히스토리에 추가
   *
   * 암호화된 이미지는 재전송할 수 없으므로,
   * 이미지 분석 결과를 텍스트로 히스토리에 추가합니다.
   */
  addImageAnalysisToHistory(userMessage: string, assistantResponse: string): void {
    this.appendToHistory({
      role: 'user',
      content: `[Image analysis request] ${userMessage}`,
    });
    this.appendToHistory({
      role: 'assistant',
      content: assistantResponse,
    });
  }

  /**
   * 현재 대화 히스토리 조회 (읽기 전용 복사본)
   */
  getHistory(): ReadonlyArray<HistoryMessage> {
    return [...this.history];
  }

  /**
   * 대화 히스토리 초기화
   */
  clearHistory(): void {
    this.history = [];
  }

  /**
   * 시스템 프롬프트 변경
   */
  setSystemPrompt(prompt: string | undefined): void {
    this.systemPrompt = prompt;
  }

  private appendToHistory(message: HistoryMessage): void {
    this.history.push(message);

    while (this.history.length > this.maxHistory) {
      this.history.shift();
    }
  }
}


================================================
FILE: packages/capsule-client/src/crypto.ts
================================================
import { x25519 } from '@noble/curves/ed25519';
import { xchacha20poly1305 } from '@noble/ciphers/chacha';
import { hkdf } from '@noble/hashes/hkdf';
import { sha256 } from '@noble/hashes/sha256';
import { randomBytes } from '@noble/ciphers/webcrypto';
import type { EncryptedImage } from './types';

/** HKDF salt (서버와 동일해야 함) */
const HKDF_SALT = new TextEncoder().encode('vessel-capsule-v1-salt');
/** HKDF info (서버와 동일해야 함) */
const HKDF_INFO = new TextEncoder().encode('vessel-capsule-v1-key');

/**
 * Base64 encoding (handles large arrays)
 */
function bytesToBase64(bytes: Uint8Array): string {
  // Use chunked approach to avoid stack overflow for large images
  const CHUNK_SIZE = 0x8000; // 32KB chunks
  const chunks: string[] = [];

  for (let i = 0; i < bytes.length; i += CHUNK_SIZE) {
    const chunk = bytes.subarray(i, i + CHUNK_SIZE);
    chunks.push(String.fromCharCode.apply(null, chunk as unknown as number[]));
  }

  return btoa(chunks.join(''));
}

/**
 * Base64 디코딩
 */
function base64ToBytes(base64: string): Uint8Array {
  const binary = atob(base64);
  const bytes = new Uint8Array(binary.length);
  for (let i = 0; i < binary.length; i++) {
    bytes[i] = binary.charCodeAt(i);
  }
  return bytes;
}

/**
 * Uint8Array를 0으로 덮어씀 (메모리 클리어)
 */
function zeroize(arr: Uint8Array): void {
  arr.fill(0);
}

/**
 * 이미지를 서버 공개키로 암호화
 *
 * @param imageData - 암호화할 이미지 데이터
 * @param serverPublicKeyBase64 - 서버 공개키 (base64)
 * @returns 암호화된 이미지 데이터
 *
 * @example
 * ```typescript
 * const encrypted = await encryptImage(imageBytes, serverPublicKey);
 * // encrypted.ephemeral_public_key - 클라이언트 임시 공개키
 * // encrypted.nonce - 24바이트 nonce
 * // encrypted.ciphertext - 암호화된 데이터
 * ```
 *
 * ## 암호화 스킴
 * 1. 클라이언트 임시 키 쌍 생성 (X25519)
 * 2. ECDH로 shared secret 계산
 * 3. HKDF-SHA256으로 대칭키 유도
 * 4. XChaCha20-Poly1305로 암호화 (AEAD)
 *
 * ## 보안
 * - 임시 비밀키는 사용 후 즉시 zeroize
 * - Shared secret도 사용 후 즉시 zeroize
 */
export async function encryptImage(
  imageData: Uint8Array,
  serverPublicKeyBase64: string
): Promise<EncryptedImage> {
  // 1. 서버 공개키 디코딩
  const serverPublicKey = base64ToBytes(serverPublicKeyBase64);

  // 2. 클라이언트 임시 키 쌍 생성
  const ephemeralPrivateKey = randomBytes(32);
  const ephemeralPublicKey = x25519.getPublicKey(ephemeralPrivateKey);

  // 3. Shared secret 계산 (X25519 ECDH)
  const sharedSecret = x25519.getSharedSecret(ephemeralPrivateKey, serverPublicKey);

  // 4. HKDF로 대칭키 유도 (32 bytes for XChaCha20)
  const symmetricKey = hkdf(sha256, sharedSecret, HKDF_SALT, HKDF_INFO, 32);

  // Shared secret 즉시 클리어
  zeroize(sharedSecret);

  // 5. Nonce 생성 (24 bytes for XChaCha20)
  const nonce = randomBytes(24);

  // 6. XChaCha20-Poly1305로 암호화
  const cipher = xchacha20poly1305(symmetricKey, nonce);
  const ciphertext = cipher.encrypt(imageData);

  // 민감 데이터 클리어
  zeroize(ephemeralPrivateKey);
  zeroize(symmetricKey);

  return {
    ephemeral_public_key: bytesToBase64(ephemeralPublicKey),
    nonce: bytesToBase64(nonce),
    ciphertext: bytesToBase64(ciphertext),
  };
}

/**
 * File 또는 Blob을 Uint8Array로 변환
 */
export async function fileToBytes(file: File | Blob): Promise<Uint8Array> {
  const arrayBuffer = await file.arrayBuffer();
  return new Uint8Array(arrayBuffer);
}


================================================
FILE: packages/capsule-client/src/index.ts
================================================
/**
 * @vessel/capsule-client
 *
 * 보안 이미지 분석을 위한 클라이언트 SDK
 *
 * ## 설치
 * ```bash
 * npm install @vessel/capsule-client
 * ```
 *
 * ## 사용법
 * ```typescript
 * import { CapsuleClient } from '@vessel/capsule-client';
 *
 * const client = new CapsuleClient({
 *   baseUrl: 'https://capsule.example.com',
 * });
 *
 * // 이미지 분석
 * const response = await client.analyzeImage({
 *   image: imageFile,  // File, Blob, 또는 Uint8Array
 *   message: '이 이미지를 분석해주세요',
 * });
 *
 * console.log(response.response);
 * ```
 *
 * ## 보안
 * - 이미지는 서버 공개키로 암호화됨 (X25519 + XChaCha20-Poly1305)
 * - 서버에서만 복호화 가능 (Private Key는 서버 메모리에만 존재)
 * - 호스팅 제공자도 이미지에 접근 불가
 *
 * @packageDocumentation
 */

export {
  CapsuleClient,
  CapsuleAuthError,
  CapsuleRateLimitError,
  CapsuleSubscriptionError,
} from './client';
export { Conversation } from './conversation';
export type { ConversationOptions } from './conversation';
export { encryptImage, fileToBytes } from './crypto';
export type {
  EncryptedImage,
  ChatRequest,
  ChatResponse,
  ChatOptions,
  HistoryMessage,
  PublicKeyResponse,
  CapsuleClientOptions,
  AnalyzeImageOptions,
  StreamCallback,
  Tool,
  ToolFunction,
  ToolCallResult,
  ToolCallCallback,
} from './types';


================================================
FILE: packages/capsule-client/src/types.ts
================================================
/**
 * A single message in conversation history
 *
 * Used for multi-turn conversations. The client manages history
 * and includes it in each request.
 */
export interface HistoryMessage {
  /** Message role */
  role: 'user' | 'assistant' | 'system' | 'tool';
  /** Text content */
  content: string;
  /** Tool call ID (required when role is "tool") */
  tool_call_id?: string;
  /** Tool calls (when role is "assistant" and responding with tool calls) */
  tool_calls?: ToolCallResult[];
}

/**
 * OpenAI function calling tool definition
 */
export interface ToolFunction {
  name: string;
  description: string;
  parameters: Record<string, unknown>;
}

/**
 * OpenAI tool definition
 */
export interface Tool {
  type: 'function';
  function: ToolFunction;
}

/**
 * Tool call result returned by the LLM
 */
export interface ToolCallResult {
  id: string;
  type: 'function';
  function: { name: string; arguments: string };
}

/**
 * Tool call received callback
 */
export type ToolCallCallback = (toolCalls: ToolCallResult[]) => void;

/**
 * Conversation history and system prompt options
 */
export interface ChatOptions {
  /** System prompt */
  systemPrompt?: string;
  /** Conversation history (oldest first) */
  history?: HistoryMessage[];
  /** OpenAI tools definition (function calling) */
  tools?: Tool[];
  /** OpenAI tool_choice ("auto" | "required" | "none") */
  toolChoice?: 'auto' | 'required' | 'none';
  /** Tool call received callback */
  onToolCall?: ToolCallCallback;
}

/**
 * Encrypted image data
 */
export interface EncryptedImage {
  /** Client ephemeral public key (base64) */
  ephemeral_public_key: string;
  /** Nonce (base64) */
  nonce: string;
  /** Encrypted data (base64) */
  ciphertext: string;
}

/**
 * Chat request
 */
export interface ChatRequest {
  /** User message */
  message: string;
  /** Encrypted image (optional) */
  encrypted_image?: EncryptedImage;
  /** Conversation history (optional, oldest first) */
  history?: HistoryMessage[];
  /** System prompt (optional) */
  system_prompt?: string;
  /** OpenAI tools definition (optional, function calling) */
  tools?: Tool[];
  /** OpenAI tool_choice (optional) */
  tool_choice?: string;
}

/**
 * Chat response
 */
export interface ChatResponse {
  /** AI response */
  response: string;
}

/**
 * Public Key response
 */
export interface PublicKeyResponse {
  /** Server public key (base64) */
  public_key: string;
}

/**
 * Capsule client options
 */
export interface CapsuleClientOptions {
  /** Capsule server URL */
  baseUrl: string;
  /** Request timeout (ms) */
  timeout?: number;
  /**
   * Access token provider
   *
   * Function that provides Supabase session tokens.
   * Automatically added to the Authorization header for authenticated API calls.
   *
   * @example
   * ```typescript
   * const client = new CapsuleClient({
   *   baseUrl: 'https://capsule.example.com',
   *   getAccessToken: async () => {
   *     const { data: { session } } = await supabase.auth.getSession();
   *     return session?.access_token ?? null;
   *   },
   * });
   * ```
   */
  getAccessToken?: () => Promise<string | null>;
}

/**
 * Image analysis request options
 */
export interface AnalyzeImageOptions {
  /** Image to analyze (File, Blob, or Uint8Array) */
  image: File | Blob | Uint8Array;
  /** Analysis request message */
  message: string;
}

/**
 * Streaming event callback
 */
export type StreamCallback = (chunk: string, done: boolean) => void;


================================================
FILE: packages/capsule-client/tsconfig.json
================================================
{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ESNext",
    "moduleResolution": "bundler",
    "declaration": true,
    "declarationMap": true,
    "sourceMap": true,
    "outDir": "./dist",
    "rootDir": "./src",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist"]
}


================================================
FILE: packages/custom-node-utils/add_number.py
================================================
def main(inputs):
  a = inputs.get("a", 0)
  b = inputs.get("b", 0)


  outputs = {
    "number": a+b
  }

  return outputs

================================================
FILE: packages/custom-node-utils/random.py
================================================
import random

def main(inputs):
  result = random.random()
  outputs = {
    "number": result
  }

  return outputs


================================================
FILE: packages/custom-node-utils/vessel.config.json
================================================
{
  "name": "custom-node",
  "version": "1.0.0",
  "description": "",
  "nodes": [
    {
      "nodeId": "_add_number",
      "data": {
        "connectors": [
          {
            "id": "id",
            "name": "a",
            "type": "in"
          },
          {
            "id": "id",
            "name": "b",
            "type": "in"
          },
          {
            "id": "id",
            "name": "number",
            "type": "out"
          }
        ],
        "nodeType": "_add_number",
        "data": {
          "path": "add_number.py"
        },
        "dataType": {
          "path": "FIXED_STRING"
        }
      }
    },
    {
      "nodeId": "_random_number",
      "data": {
        "connectors": [
          {
            "id": "id",
            "name": "number",
            "type": "out"
          }
        ],
        "nodeType": "_random_number",
        "data": {
          "path": "random.py"
        },
        "dataType": {
          "path": "FIXED_STRING"
        }
      }
    }
  ]
}


================================================
FILE: scripts/bundle-macos-deps.sh
================================================
#!/bin/bash
# bundle-macos-deps.sh
#
# Collects GStreamer, GLib, Python dylibs and GStreamer plugins into a staging
# directory, rewrites all absolute Homebrew install-names to @loader_path /
# @rpath relative references, and re-signs every modified Mach-O binary.
#
# Run from the workspace root (the directory that contains Cargo.toml).
# Prerequisites: Homebrew-installed gstreamer, glib, python@3.12

set -euo pipefail

# ---------------------------------------------------------------------------
# Paths
# ---------------------------------------------------------------------------
ROOT="$(cd "$(dirname "$0")/.." && pwd)"
STAGING="$ROOT/target/bundle-staging"
LIBS_DIR="$STAGING/libs"
GST_PLUGINS_DIR="$STAGING/gstreamer-1.0"
GST_HELPERS_DIR="$STAGING/gstreamer-1.0/helpers"
SERVER_BIN="$ROOT/target/release/server"

ARCH=$(uname -m)
if [ "$ARCH" = "arm64" ]; then
  BREW_PREFIX="/opt/homebrew"
else
  BREW_PREFIX="/usr/local"
fi

echo "==> Architecture: $ARCH"
echo "==> Homebrew prefix: $BREW_PREFIX"
echo "==> Staging directory: $STAGING"

# ---------------------------------------------------------------------------
# Clean & create staging directories
# ---------------------------------------------------------------------------
rm -rf "$STAGING"
mkdir -p "$LIBS_DIR" "$GST_PLUGINS_DIR" "$GST_HELPERS_DIR"

# ---------------------------------------------------------------------------
# Helper: resolve a dylib path through symlinks and copy to LIBS_DIR
# ---------------------------------------------------------------------------
copy_lib() {
  local src="$1"
  local dst_name="${2:-$(basename "$src")}"
  if [ ! -f "$LIBS_DIR/$dst_name" ]; then
    local real
    real=$(python3 -c "import os,sys; print(os.path.realpath(sys.argv[1]))" "$src" 2>/dev/null || readlink -f "$src" 2>/dev/null || echo "$src")
    # Use cat to avoid copying extended attributes
    cat "$real" > "$LIBS_DIR/$dst_name"
    chmod 644 "$LIBS_DIR/$dst_name"
    echo "    copied $dst_name"
  fi
}

# ---------------------------------------------------------------------------
# Helper: recursively collect non-system dylib dependencies
# ---------------------------------------------------------------------------
collect_deps() {
  local binary="$1"
  local deps
  deps=$(otool -L "$binary" 2>/dev/null | tail -n +2 | awk '{print $1}')

  local dep bn
  while IFS= read -r dep; do
    [ -z "$dep" ] && continue
    # Only process Homebrew (non-system) libraries
    if [[ "$dep" == /opt/homebrew/* ]] || [[ "$dep" == /usr/local/Cellar/* ]] || [[ "$dep" == /usr/local/opt/* ]]; then
      bn=$(basename "$dep")
      if [ ! -f "$LIBS_DIR/$bn" ]; then
        copy_lib "$dep" "$bn"
        # Recurse into the newly copied library
        collect_deps "$LIBS_DIR/$bn"
      fi
    fi
  done <<< "$deps"
}

# ---------------------------------------------------------------------------
# 1. Collect GStreamer core libraries
# ---------------------------------------------------------------------------
echo "==> Collecting GStreamer core libraries..."
GST_CORE_LIBS=(
  libgstreamer-1.0.0.dylib
  libgstbase-1.0.0.dylib
  libgstapp-1.0.0.dylib
  libgstvideo-1.0.0.dylib
  libgstaudio-1.0.0.dylib
  libgsttag-1.0.0.dylib
  libgstrtp-1.0.0.dylib
  libgstrtsp-1.0.0.dylib
  libgstsdp-1.0.0.dylib
  libgstnet-1.0.0.dylib
  libgstpbutils-1.0.0.dylib
  libgstcodecparsers-1.0.0.dylib
)

for lib in "${GST_CORE_LIBS[@]}"; do
  src="$BREW_PREFIX/lib/$lib"
  if [ ! -f "$src" ]; then
    # Try the opt path
    src=$(find "$BREW_PREFIX/opt/gstreamer" -name "$lib" -type f 2>/dev/null | head -1)
  fi
  if [ -n "$src" ] && [ -f "$src" ]; then
    copy_lib "$src" "$lib"
  else
    echo "    WARNING: $lib not found, skipping"
  fi
done

# ---------------------------------------------------------------------------
# 2. Collect GLib libraries
# ---------------------------------------------------------------------------
echo "==> Collecting GLib libraries..."
GLIB_LIBS=(libglib-2.0.0.dylib libgobject-2.0.0.dylib libgmodule-2.0.0.dylib libgio-2.0.0.dylib)
for lib in "${GLIB_LIBS[@]}"; do
  src="$BREW_PREFIX/lib/$lib"
  if [ ! -f "$src" ]; then
    src=$(find "$BREW_PREFIX/opt/glib" -name "$lib" -type f 2>/dev/null | head -1)
  fi
  if [ -n "$src" ] && [ -f "$src" ]; then
    copy_lib "$src" "$lib"
  else
    echo "    WARNING: $lib not found, skipping"
  fi
done

# ---------------------------------------------------------------------------
# 3. Collect other shared dependencies
# ---------------------------------------------------------------------------
echo "==> Collecting other shared dependencies..."
OTHER_DEPS=(
  "gettext/lib/libintl.8.dylib"
  "pcre2/lib/libpcre2-8.0.dylib"
  "orc/lib/liborc-0.4.0.dylib"
  "libiconv/lib/libiconv.2.dylib"
)
for rel in "${OTHER_DEPS[@]}"; do
  src="$BREW_PREFIX/opt/$rel"
  bn=$(basename "$rel")
  if [ -f "$src" ]; then
    copy_lib "$src" "$bn"
  else
    echo "    WARNING: $bn not found at $src, skipping"
  fi
done

# ---------------------------------------------------------------------------
# 4. Recursively collect transitive dependencies
# ---------------------------------------------------------------------------
echo "==> Collecting transitive dependencies..."
# Run multiple passes until no new libs are discovered
for _ in 1 2 3 4 5; do
  before=$(ls "$LIBS_DIR" | wc -l)
  for f in "$LIBS_DIR"/*.dylib "$LIBS_DIR"/Python; do
    [ -f "$f" ] && collect_deps "$f"
  done
  after=$(ls "$LIBS_DIR" | wc -l)
  if [ "$before" -eq "$after" ]; then
    break
  fi
done
echo "    Total libs collected: $(ls "$LIBS_DIR" | wc -l)"

# ---------------------------------------------------------------------------
# 6. Collect GStreamer plugins
# ---------------------------------------------------------------------------
echo "==> Collecting GStreamer plugins..."
GST_PLUGINS=(
  libgstcoreelements.dylib
  libgstapp.dylib
  libgstapplemedia.dylib
  libgstrtsp.dylib
  libgstrtp.dylib
  libgstrtpmanager.dylib
  libgstvideoconvertscale.dylib
  libgstvideoparsersbad.dylib
)

GST_PLUGIN_SEARCH="$BREW_PREFIX/lib/gstreamer-1.0"
if [ ! -d "$GST_PLUGIN_SEARCH" ]; then
  GST_PLUGIN_SEARCH=$(find "$BREW_PREFIX/opt/gstreamer" -type d -name "gstreamer-1.0" 2>/dev/null | head -1)
fi

for plugin in "${GST_PLUGINS[@]}"; do
  src="$GST_PLUGIN_SEARCH/$plugin"
  if [ -f "$src" ]; then
    cat "$src" > "$GST_PLUGINS_DIR/$plugin"
    chmod 644 "$GST_PLUGINS_DIR/$plugin"
    echo "    copied plugin $plugin"
  else
    echo "    WARNING: plugin $plugin not found"
  fi
done

# Collect transitive deps of plugins too
echo "==> Collecting plugin transitive dependencies..."
for f in "$GST_PLUGINS_DIR"/*.dylib; do
  [ -f "$f" ] && collect_deps "$f"
done

# ---------------------------------------------------------------------------
# 7. Collect gst-plugin-scanner
# ---------------------------------------------------------------------------
echo "==> Collecting gst-plugin-scanner..."
GST_SCANNER=""
# Try common locations for gst-plugin-scanner
for candidate in \
  "$BREW_PREFIX/libexec/gstreamer-1.0/gst-plugin-scanner" \
  "$BREW_PREFIX/opt/gstreamer/libexec/gstreamer-1.0/gst-plugin-scanner" \
  "$BREW_PREFIX/lib/gstreamer-1.0/gst-plugin-scanner"; do
  if [ -f "$candidate" ]; then
    GST_SCANNER="$candidate"
    break
  fi
done
# Fallback: search broadly
if [ -z "$GST_SCANNER" ]; then
  GST_SCANNER=$(find "$BREW_PREFIX" -name "gst-plugin-scanner" -type f 2>/dev/null | head -1)
fi
if [ -n "$GST_SCANNER" ] && [ -f "$GST_SCANNER" ]; then
  cat "$GST_SCANNER" > "$GST_HELPERS_DIR/gst-plugin-scanner"
  chmod 755 "$GST_HELPERS_DIR/gst-plugin-scanner"
  echo "    copied gst-plugin-scanner from $GST_SCANNER"
else
  echo "    WARNING: gst-plugin-scanner not found anywhere under $BREW_PREFIX"
fi

# ---------------------------------------------------------------------------
# 8. Rewrite install_names
# ---------------------------------------------------------------------------
echo "==> Rewriting install_names for bundled libs..."

rewrite_deps() {
  local binary="$1"
  local target_prefix="$2"

  # Collect deps first to avoid subshell issues with piped while-read
  local deps
  deps=$(otool -L "$binary" 2>/dev/null | tail -n +2 | awk '{print $1}')

  local dep bn
  while IFS= read -r dep; do
    if [[ "$dep" == /opt/homebrew/* ]] || [[ "$dep" == /usr/local/Cellar/* ]] || [[ "$dep" == /usr/local/opt/* ]]; then
      bn=$(basename "$dep")
      install_name_tool -change "$dep" "${target_prefix}/${bn}" "$binary" 2>/dev/null || true
    fi
  done <<< "$deps"
}

# Rewrite each lib in libs/
for f in "$LIBS_DIR"/*.dylib "$LIBS_DIR"/Python; do
  [ -f "$f" ] || continue
  bn=$(basename "$f")
  # Set the library's own id
  install_name_tool -id "@loader_path/$bn" "$f" 2>/dev/null || true
  # Rewrite references to other libs
  rewrite_deps "$f" "@loader_path"
done

# Rewrite each plugin (use rewrite_deps function to avoid 'local' in subshell)
for f in "$GST_PLUGINS_DIR"/*.dylib; do
  [ -f "$f" ] || continue
  bn=$(basename "$f")
  install_name_tool -id "@loader_path/$bn" "$f" 2>/dev/null || true
  # Plugins reference core libs in ../libs/ relative to their location
  rewrite_deps "$f" "@loader_path/../libs"
done

# Rewrite gst-plugin-scanner
GST_SCANNER_BIN="$GST_HELPERS_DIR/gst-plugin-scanner"
if [ -f "$GST_SCANNER_BIN" ]; then
  rewrite_deps "$GST_SCANNER_BIN" "@loader_path/../../libs"
fi

# Rewrite the server binary
echo "==> Rewriting install_names for server binary..."
if [ -f "$SERVER_BIN" ]; then
  # Add rpath pointing to Resources/libs in the app bundle
  # Remove existing rpath first if it exists, then add
  install_name_tool -add_rpath "@executable_path/../Resources/libs" "$SERVER_BIN" 2>/dev/null || true

  # Change absolute Homebrew refs to @rpath
  rewrite_deps "$SERVER_BIN" "@rpath"
fi

# ---------------------------------------------------------------------------
# 10. Re-sign all modified Mach-O binaries (required for arm64)
# ---------------------------------------------------------------------------
# Use APPLE_SIGNING_IDENTITY when set (release builds in CI), ad-hoc otherwise.
SIGN_ID="${APPLE_SIGNING_IDENTITY:--}"
SIGN_ARGS=(--force --sign "$SIGN_ID")
if [ "$SIGN_ID" != "-" ]; then
  SIGN_ARGS+=(--options runtime --timestamp)
  if [ -n "${APPLE_ENTITLEMENTS_PATH:-}" ] && [ -f "${APPLE_ENTITLEMENTS_PATH}" ]; then
    SIGN_ARGS+=(--entitlements "$APPLE_ENTITLEMENTS_PATH")
  fi
  echo "==> Re-signing all binaries with Developer ID: $SIGN_ID"
else
  echo "==> Re-signing all binaries (ad-hoc)"
fi

find "$STAGING" -type f \( -name "*.dylib" -o -name "Python" -o -name "gst-plugin-scanner" \) | while read -r f; do
  codesign "${SIGN_ARGS[@]}" "$f" 2>/dev/null || true
done

if [ -f "$SERVER_BIN" ]; then
  codesign "${SIGN_ARGS[@]}" "$SERVER_BIN" 2>/dev/null || true
fi

# ---------------------------------------------------------------------------
# 11. Fix file permissions (required for Tauri build to copy files)
# ---------------------------------------------------------------------------
echo "==> Fixing file permissions..."
chmod -R u+w "$STAGING"

# ---------------------------------------------------------------------------
# Done
# ---------------------------------------------------------------------------
echo ""
echo "==> Bundle staging complete!"
echo "    Libs:    $(ls "$LIBS_DIR" | wc -l | tr -d ' ') files"
echo "    Plugins: $(ls "$GST_PLUGINS_DIR"/*.dylib 2>/dev/null | wc -l | tr -d ' ') files"
echo "    Staging: $STAGING"


================================================
FILE: tests/TEST.md
================================================
Test with Jest

`npm run test`


================================================
FILE: tests/api.test.js
================================================
const request = require("supertest");

const API_BASE_URL = "http://localhost:6174";

describe("Vessel API E2E Test", () => {
  let authToken;
  let newDeviceId;
  let newEntityId;
  let newLayerId;
  let newFeatureId;

  beforeAll(async () => {
    const response = await request(API_BASE_URL).post("/api/auth").send({
      id: "admin",
      password: "admin",
    });

    expect(response.status).toBe(200);
    expect(response.body).toHaveProperty("token");
    authToken = response.body.token;
  });

  describe("Devices API", () => {
    it("should create a new device successfully", async () => {
      const response = await request(API_BASE_URL)
        .post("/api/devices")
        .set("Authorization", `Bearer ${authToken}`)
        .send({
          device_id: "jest_test_device_01",
          name: "Jest Test Device",
          manufacturer: "Jest",
          model: "Supertest v1",
        });

      expect(response.status).toBe(200);
      expect(response.body).toHaveProperty("id");
      expect(response.body.name).toBe("Jest Test Device");

      newDeviceId = response.body.id;
    });

    it("should get a list of all devices", async () => {
      const response = await request(API_BASE_URL)
        .get("/api/devices")
        .set("Authorization", `Bearer ${authToken}`);

      expect(response.status).toBe(200);
      expect(Array.isArray(response.body)).toBe(true);
      expect(response.body.length).toBeGreaterThan(0);
    });

    it("should update an existing device", async () => {
      const response = await request(API_BASE_URL)
        .put(`/api/devices/${newDeviceId}`)
        .set("Authorization", `Bearer ${authToken}`)
        .send({
          device_id: "jest_test_device_01_updated",
          name: "Updated Jest Device",
          manufacturer: "Jest",
          model: "Supertest v2",
        });

      expect(response.status).toBe(200);
      expect(response.body.id).toBe(newDeviceId);
      expect(response.body.name).toBe("Updated Jest Device");
    });

    it("should delete the created device", async () => {
      const response = await request(API_BASE_URL)
        .delete(`/api/devices/${newDeviceId}`)
        .set("Authorization", `Bearer ${authToken}`);

      expect(response.status).toBe(200);
      expect(response.body.message).toBe("Device deleted");
    });
  });

  describe("Map API", () => {
    it("should create a new map layer", async () => {
      const response = await request(API_BASE_URL)
        .post("/api/map/layers")
        .set("Authorization", `Bearer ${authToken}`)
        .send({
          name: "Test Layer",
          description: "A layer created by Jest",
          is_visible: true,
        });

      expect(response.status).toBe(200);
      expect(response.body).toHaveProperty("id");
      expect(response.body.name).toBe("Test Layer");
      newLayerId = response.body.id;
    });

    it("should get a list of all map layers", async () => {
      const response = await request(API_BASE_URL)
        .get("/api/map/layers")
        .set("Authorization", `Bearer ${authToken}`);

      expect(response.status).toBe(200);
      expect(Array.isArray(response.body)).toBe(true);
      expect(response.body.length).toBeGreaterThan(0);
    });

    it("should get a specific map layer by ID", async () => {
      const response = await request(API_BASE_URL)
        .get(`/api/map/layers/${newLayerId}`)
        .set("Authorization", `Bearer ${authToken}`);

      expect(response.status).toBe(200);
      expect(response.body.id).toBe(newLayerId);
      expect(response.body.features).toEqual([]);
    });

    it("should create a new point feature in the layer", async () => {
      const response = await request(API_BASE_URL)
        .post("/api/map/features")
        .set("Authorization", `Bearer ${authToken}`)
        .send({
          layer_id: newLayerId,
          feature_type: "POINT",
          name: "Test Point 1",
          style_properties: JSON.stringify({ color: "red" }),
          vertices: [{ latitude: 36.635, longitude: 127.456 }],
        });

      expect(response.status).toBe(200);
      expect(response.body).toHaveProperty("id");
      expect(response.body.name).toBe("Test Point 1");
      expect(response.body.feature_type).toBe("POINT");
      newFeatureId = response.body.id;
    });

    it("should get the layer again with the new feature", async () => {
      const response = await request(API_BASE_URL)
        .get(`/api/map/layers/${newLayerId}`)
        .set("Authorization", `Bearer ${authToken}`);

      expect(response.status).toBe(200);
      expect(response.body.features.length).toBe(1);
    });

    it("should get a specific feature by ID", async () => {
      const response = await request(API_BASE_URL)
        .get(`/api/map/features/${newFeatureId}`)
        .set("Authorization", `Bearer ${authToken}`);

      expect(response.status).toBe(200);
      expect(response.body.vertices.length).toBe(1);
      expect(response.body.vertices[0].latitude).toBe(36.635);
    });

    it("should update an existing feature", async () => {
      const response = await request(API_BASE_URL)
        .put(`/api/map/features/${newFeatureId}`)
        .set("Authorization", `Bearer ${authToken}`)
        .send({
          name: "Updated Test Point",
          vertices: [{ latitude: 37.5665, longitude: 126.978 }],
        });

      expect(response.status).toBe(200);
      expect(response.body.name).toBe("Updated Test Point");
    });

    it("should delete the created feature", async () => {
      const response = await request(API_BASE_URL)
        .delete(`/api/map/features/${newFeatureId}`)
        .set("Authorization", `Bearer ${authToken}`);

      expect(response.status).toBe(200);
      expect(response.body.message).toBe("Feature deleted");
    });

    it("should delete the created layer", async () => {
      const response = await request(API_BASE_URL)
        .delete(`/api/map/layers/${newLayerId}`)
        .set("Authorization", `Bearer ${authToken}`);

      expect(response.status).toBe(200);
      expect(response.body.message).toBe("Layer deleted");
    });
  });
});