app/(app)Authenticated routes.
componentsProduct UI components.
Developer guide
¶ Frontend Guide
The frontend lives in apps/web and uses Next.js 14 App Router.
apps/web
Next.js 14 App Router
Checks are manual
Key areas
¶ Where code lives inside apps/web
Routes render components, components read data through hooks, and hooks sit on top of the API client, the socket, and the stores.
hooksData and realtime hooks.
lib/api.tsAxios client and refresh interceptor.
lib/socket.tsSocket.IO client singleton.
storesZustand stores.
Voice transcript & translate client
¶ How audio messages expose AI controls
¶ Audio gets an AI panel
Audio surfaces an AI panel with transcript + translate controls.
The bubble footer's Translate button is hidden when the message body is empty, because a voice note's words live in the transcript panel.
¶ translateWithinLimit
Centralises trimming and error mapping for translate requests.
TRANSLATE_TARGETS on the client must mirror the server allow-list to avoid 400s.¶ On demand from the user
The user asks for a transcript from the UI.
Automatic background enqueue remains PTT-only. See the Backend Guide.
Workspace deep-links
¶ Handle ?report= and ?org= on the client
Pages that list workspace-scoped resources (e.g. bug-reports) should accept ?report= and ?org= query params, then decide what to do based on the user's membership in the named org.
Guard the UX while the current user's membership info is still resolving.
Switch the active workspace so the linked resource is visible. Make the change global: the sidebar and subsequent queries follow.
Do not change the active workspace. Show an explicit no-access state instead.
Shell and motion
¶ The page-card layer and its tokens
¶ .rbx-shell-card
Routes render inside a page-card layer inset from the app frame; rails and flyouts live on the outer frame.
The card uses a 14px top-left corner at desktop sizes and becomes edge-to-edge with square corners below lg. Phones remain edge-to-edge.
¶ Three CSS tokens
--rbx-typing-motion-duration (288ms), --rbx-typing-motion-ease, and --rbx-typing-row-h drive the typing animation.
The client keeps a JS timer (
TYPING_MOTION_MS) in sync with the CSS token so exit animations complete before unmount.¶ TagChip
A shared TagChip component replaces ad-hoc tag rendering in multiple tiles and lists. Prefer TagChip for new work.
Checks
¶ Run them from apps/web before release
Frontend deploys are not gated by lint, typecheck, or tests. Run them manually before release.
cd apps/web
pnpm lint
pnpm typecheck
pnpm build