Web client (also what the desktop app runs): - Simplified Sliding Sync (MSC4186) when the homeserver advertises org.matrix.simplified_msc3575. src/matrix/sliding.ts answers the SDK's GET /sync with a sliding sync request and rewrites the response into the /sync shape, as the Android app does; the SDK's own sliding sync mode doesn't sort thread replies into threads. 20 rooms first, then every room (up to 1000); to_device, e2ee, account data, receipts and typing extensions; M_UNKNOWN_POS starts a new connection. The SDK's /members?at=<sync token> drops the token, which here is ours. Settings can switch back to /sync. - Notifications for new messages and incoming calls while Warp isn't in front, by the account's push rules, evaluated after decryption. The browser's Notification API once turned on in Settings, or the desktop app's bridge (window.warpDesktop). One per room; a click opens it. - Voice messages: record from the composer, sent as m.audio with MSC3245's voice marker and MSC1767's duration and waveform (encrypted in encrypted rooms); a waveform player in the timeline. - @warp/ui: a slot for extra composer buttons; bell-off, play and pause icons. Desktop app: - System notifications through Wails' notifications service, fed by /_desktop/bridge.js (/_desktop/notify, JSON only); clicking one shows the window and opens the room. - Tray icon with Open and Quit; closing the window hides it (a one-time notification says so), File > Quit ends it. The page title goes to the window and the tray tooltip, the unread count to the taskbar or Dock badge. - Auto-update from a Wails update manifest at DESKTOP_UPDATE_URL: a quiet check a minute after start and every six hours, a notification when a newer version exists, Help > Check for updates opens the update window. Optional signature key (DESKTOP_UPDATE_KEY). Linux package installs leave updates to the package manager. build/manifest writes the manifest. - Per-user NSIS installer (make desktop-windows-installer), the macOS bundle zipped for the updater, a desktop CI job, and a Desktop release workflow that builds all three platforms and the manifest. Tested on Windows against a local homeserver: sliding sync with E2EE, threads and a server restart; notifications (toast history), close to tray, relaunch restoring the window; voice messages recorded, sent and played, encrypted too; the update check finding a newer version. Not tested: installing an update, the NSIS installer, CI, macOS and Linux. Code signing needs certificates and isn't done. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@warp/ui
Warp's design system for Vue 3 and Tailwind CSS v4: the brand tokens, fonts, icons and logo, and the components built on them. Every Warp app in the browser uses it, so a colour or a radius is changed here once.
The package ships source, not a build: apps import the .vue and .ts
files and their own Vite compiles them.
Use
/* the app's main stylesheet */
@import "tailwindcss";
@import "@warp/ui/styles.css";
import { WButton, WTextField, WBanner, useTheme } from '@warp/ui'
The stylesheet brings in:
tokens.css: the colour, type, space, radius and shadow tokens as CSS variables, the three font faces and the type classes (title,heading,body,small,caption,mxid,code, ...). Dark follows the OS, ordata-theme="dark"on<html>(useTheme()sets it).- A Tailwind theme on those tokens. The default palette is cleared, so the
colour utilities are the token names:
bg-surface-sunken,text-ink-muted,border-line,text-teal-text. They switch with the theme on their own; nodark:variants.shadow-raisedandshadow-floatare the tokens'shadow-smandshadow-lg. - The component styles (
wp-*classes) from the brand package, plus the ones drawn here for the apps: card, switch, checkbox, select, textarea, dialog, table, nav item, segmented control, spinner.
Components
| Component | What |
|---|---|
WLogo |
horizontal lockup or symbol, never redrawn |
WIcon |
the stroke icons, in currentColor |
WButton, WIconButton |
actions; one primary per view |
WTextField, WTextArea, WSelect, WCheckbox, WSwitch |
forms |
WAvatar, WBadge |
identity and status |
WBanner |
feedback; always icon and words, never colour alone |
WDialog |
modal on the native <dialog> |
WSpinner |
progress |
WRoomItem |
a row of the room list: avatar, name, preview, time, unread counter |
WMessageBubble |
a message with sender, time and delivery status (sending, sent, read, failed) |
WComposer |
the message field: attach, Enter sends, Shift+Enter adds a line |
Where things come from
src/styles/tokens.css, tokens.json, fonts/, the 20 brand icons in
src/icons/ and the logo paths in src/logos/ are copies from the brand
package (warp-brand/design-system). Change them there and copy them over.
The other icons (home, globe, key, trash, ...) were drawn for the
apps on the same grid: 24px, 1.75 stroke, round caps and joins.
The fonts are Outfit, Figtree and JetBrains Mono under the SIL Open Font License.
The three chat components are the brand package's RoomItem,
MessageBubble and Composer. The Matrix state itself is not here: it
lives with the web client (apps/web/src/stores, apps/web/src/matrix),
which the desktop app will reuse as a whole.