Grid menus, the filter drawer, KPI band and view pickers sit on every
list page, so their English sort, group and count labels showed in
every locale. Module-level helpers (operations, service types, monitor
scope, the AI context) now call t() at use time or carry labelKeys.
operations.test initialises i18next like errorMessage.test, since
operations.js now translates its labels.
Service, database, security, Docker, monitoring and deploy-console
components showed English busy labels, status arms and fallbacks in
every locale. They now go through t() in house style, with _one/_other
plurals for counts. Sentences that were split around an element
(". The statements are unlikely to apply cleanly.") become whole
keys, so a translator can reorder them. LogFileList and
ImportDumpModal resolve their declared keys instead of raw labels.
Page-level busy labels, status arms, empty-state fallbacks and
templated counts were English in every locale. They now go through
t() in house style: sentence case, "…", "Couldn't X." errors, and
_one/_other plurals where a count used to be hand-rolled. CronJobs
renders its state labels through their keys, and auth.signIn reads
"Sign in" to match the glossary.
Busy-state ternaries, fallbacks and templated labels in the settings
tabs, the connections hub and the setup wizard rendered English in
every locale because the census could not see them until afe81eac.
They now go through t() in house style, with real plurals for counts.
ProviderCard and the sidebar presets also resolve their declared
labelKeys instead of showing the raw label.
es.json drops errors.* keys that en.json does not define yet; they
stay in the working tree for the typed error codes still in progress.
Errors read five ways ("Failed to X", "X failed", "Could not X",
"Error loading X", "Couldn't X") and many dropped their period.
407 core strings now say "Couldn't {verb} {object}." with any
{{placeholder}} kept after it, and the generic common.error strings
say what to do next.
Interpolated English verbs could not be translated and produced
"Failed to restart container"-style grammar for every action, so 17
sites (container, compose, service, unit, process, alert and on/off
toasts, sort labels) now pick one string per action. 37 hand-rolled
plurals ("(s)", item{{value}}, fragment + `count === 1 ? '' : 's'`)
use i18next _one/_other keys: extract-i18n reads defaultValue_one /
defaultValue_other into k_one / k_other, and check-i18n accepts a
translator's extra forms (k_few, k_many) beside the English pair.
Validation says what is valid (IP or CIDR range, JSON payloads,
verification codes, sign-in links). The PRIMARY backup badge and the
upper-cased service type are plain text; container status labels go
to sentence case. Orphaned translations pruned; the i18n literal
ceiling drops to 840.
Error toasts said either what failed ("Failed to delete service")
with the reason thrown away, or only the server's reason ("Not
found") with no subject. utils/errorMessage.js is one door for both
halves: errorReason(err) reads data.error, data.message, then
err.message (a translated error code wins), and turns bare transport
failures (Failed to fetch, Request failed (500)) into a next step;
toastError(toast, message, err) renders "What failed. Why."
Moved onto it: 236 `err.message || t(...)` sites, 58 bare t() toasts
in catch blocks that dropped the error (51 gained a catch parameter),
and 63 toasts that showed only err.message, which now say what failed
under new keys. 56 "{{message}}" interpolations and ErrorState read
the reason through errorReason. The pages/ toast ratchet counts
toastError calls, since they are the same per-page presentation.
The literal census missed copy a user reads through an expression:
both arms of a JSX ternary ({saving ? 'Saving...' : 'Save'}), the
fallback of a || or ??, the right side of &&, template literals
(read as one sentence with holes as {{x}}), and the same shapes as
values of label/title/description keys with no matching *Key. It now
counts them, and reads only the arms of a ternary in copy attributes,
not its test.
Untracked extension copies under src/plugins are skipped: they are
censused in their own repos, and counting them made the host number
depend on what a machine has installed.
The ceiling moves from 0 to the honest count, 844.
Applies the panel copy rules to the five builtin extensions. Tab,
page-title and command-palette labels go to sentence case (Cloud
servers, FTP server, Remote access, Status pages); display names stay
as extension names.
Walkthrough Studio: no period on short toasts, "Couldn't" errors, a
delete confirm that states the consequence, and four hardcoded strings
wrapped in t() (kicker, step eyebrow, default duration and action),
with Spanish for the new keys. 30 strings in all: Studio 16, cloud
provisioning 4, FTP 4, remote access 3, status 3.
Synced into frontend/src/plugins and the tracked live serverkit-status
manifest.
Each shortcut row was 42px with card padding and radius, so a
one-row widget cropped its third action. Rows now use the 32px
control height and control radius like every other button.
Applies the copy glossary to about 370 strings and 64 call sites:
service (not app/application/site), sign in/out (not log in/out),
server and panel server (not box/machine/host), Delete destroys /
Remove detaches / Uninstall is for software, New opens a form and
Create submits it, settings, backup vs snapshot vs restore point,
extensions and Features, environment variables, compose project,
two-factor authentication. Confirm dialogs that destroy something now
use the same verb on the title and the button instead of "Confirm".
Backend messages that reach toasts verbatim ("Application not
found" x95 and others) are listed in plan 88 for the typed-error
work rather than edited here.
1,250 strings across 223 files, edited at their inline English
defaults (en.json regenerated, keys unchanged):
- sentence case for buttons, titles, labels, tabs and nav (827),
with an allowlist of product names and acronyms
- every em dash rewritten (184); "successfully", neutral "!" and
short-toast periods dropped; helper sentences end with a period
- "Are you sure?" confirms now state the consequence; "Danger Zone",
"no going back", "to get started" and "You're all set" gone
- straight quotes, "…", "time zone", unit spacing, "and" for "&"
- Confirm/Cancel and four other hardcoded labels wrapped in t()
scripts/copy-rewrite.mjs applies a {key: English} map at every call
site; the glossary pass reuses it.
Second geometry pass, over every stylesheet: control heights are 28,
32 or 40; tables have a 32px header and 40px rows (the databases grid
stays compact at 32); cards use one radius and 16px padding; about 30
page-specific pill classes follow the 20px badge spec; and shadows are
only on things that float (menus raised, modals and drawers overlay),
with focus as one ring. Glows, hover lifts and card shadows are gone,
and page overrides of the shared primitives are removed.
Sign-in and setup screens use the 40px size. Fixed chrome (status bar,
icons, avatars, chart boxes) is marked // geometry: and exempt.
Measured: distinct button heights 25 -> 13, table headers 8 -> 3,
badges 7 -> 3. check-geometry ceilings are now zero for raw shadows
and control heights.
Measured across the app: buttons rendered at 25 heights, 452 of them
at the browser's default 13.33px font, with 19 radii and 22 shadows.
- Controls: 28/32/40 tokens; buttons, inputs and selects default to
32px (the dense-product norm), 28 small, 40 large. Buttons and form
fields inherit the page font.
- Radii: four theme-driven tokens (badge 4, control 6, card 8,
overlay 12). Theme radius now reaches every corner, not ~10%.
- Spacing: every padding/margin/gap is a $space-* token on the 4px
grid, with 2px and 6px half steps; odd values snapped.
- Flat primary button and status dots: no gradient, glow or inner
highlight. Badges are 20px with a 4px radius.
check-geometry rejects the legacy names and ratchets the raw shadows
and control heights that still need a judgment pass.
On about 30 pages a failed request rendered the empty state, often
with a call to action: SSL offered to install Certbot, Domains said
"No domains yet" (its error branch was unreachable), the catalog and
monitoring pages showed empty lists, Fleet printed "null%" and Server
Templates went blank. ResourceListPage now takes error/onRetry, and
every page separates loading, error (server reason + Try again) and
empty, keeping existing rows with a compact error when a refresh
fails. Settings tabs a user can't open redirect to Profile.
A failed request in these tabs read as "nothing here": the firewall
tab offered to install a firewall, Cloud said not connected, About
invented version 1.0.0, and the security config, site settings and
2FA policy forms rendered with defaults, so saving after a failed
load would overwrite the real settings. Each tab now separates
loading, error (with the server's reason and Try again) and empty,
and keeps existing data with a compact error when a refresh fails.
It called useToast().showToast, which does not exist, so every load,
emit or cleanup failure threw inside its own catch and the page fell
over instead of reporting the error.
Service and FTP start/stop/restart toasts built the past tense by
appending "ed" to the action, which printed "stoped" and could not be
translated. Each action now has its own string. Also points the two
uses of the undefined --radius-md token at --radius-sm, so those
corners stop rendering square.
Table columns, detail rows, the status bar, the sidebar and the
dashboard widgets showed dates, counts, enum words and labels in the
monospace face. They now use the UI face (sk-cell-dim for dim table
cells); monospace stays on hosts, IPs, ports, versions, paths, IDs,
hashes, code and logs. check-type-scale ratchets the number of
monospace rules so it only goes down.
About 200 labels were uppercase with wide letter-spacing and about 180
label, title, meta, time and count rules used the monospace face, the
"terminal dashboard" look that reads as generated rather than chosen.
Labels are now sentence case in the UI face; monospace stays on
machine values (IPs, hosts, ports, versions, paths, commands, IDs,
code, logs). Body text uses tabular figures so numbers still line up
in tables without monospace.
Core SCSS used about 30 font sizes (9, 9.5, 10.5, 11.5, 12.5px...)
and six weights, so the same kind of text looked different on every
page. It now uses -xs..2xl (12, 13, 14, 16, 18, 24, 32px) and
three weights, following the dense-product norm: 14px body and a
12px floor, as in Primer, Carbon and Atlassian, which raised its own
minimum from 11px to 12px for legibility. Small labels that were
9-11.5px grow to 12px.
The old $font-size-* names stay as aliases on the new scale so
extension stylesheets keep compiling; check-type-scale rejects them,
raw sizes and off-scale weights in core.
check-shared-fields fails on a native <select>, a second server
picker, or a page calling the base-domain or port-check APIs instead
of DomainField and PortField. A new exception needs a reason in the
allowlist.
Table footers, column menus, the filter drawer, the schedule picker,
the widget editor, the log viewer and the env edit row now use the
compact shared Select. Also drops CSS left dead by the field sweep.
Keyboard shortcuts and DataTable row navigation only skipped native
<select> elements. With Radix Select, Escape closed the widget editor
and arrows moved the table cursor while a list was open.
Tunnel hostnames are not an A record at this server: a Cloudflare
route creates its own record and a WireGuard tunnel needs the name
pointed at the edge. hint(name) replaces the default line there.
Toolbars, table footers and inline rows kept native selects because the
Radix trigger is a full-width 40px form field. size="sm" gives them a
content-width 30px trigger, so they can use the same dropdown.
Every page that picked a server now uses ServerPicker, so TargetPicker
and the templates-only picker are gone. Install commands and
connection strings are CopyFields, single-hostname inputs are
DomainFields, host ports are PortFields, and native selects are the
shared dropdown. The style guide shows each shared field.
Log, journal, AI model and connection pickers, the capacity and
threshold panels and the deploy console toolbar use the shared
dropdown and ServerPicker; error cards and private URLs copy through
CopyButton/CopyField instead of calling the clipboard directly.
Run Container takes host and container ports as PortField rows and env
as an EnvEditor, database credentials and connection strings are
masked CopyFields, engine ports are checked live, and server, service
and database detail rows are InfoList. Native selects become the
shared dropdown.
Secrets (API key, webhook secret, 2FA setup) are CopyFields that stay
masked until revealed, SMTP and firewall ports are PortFields, the
canonical and base domain inputs are DomainFields, detail rows are
InfoList, and every native select is the shared dropdown.
Extensions hand-roll their own server selects, domain inputs and copy
boxes because core never exported its versions. Exporting them keeps
an extension page looking and validating exactly like a core page.
One component per job, so pages stop hand-building them:
- ServerPicker: which machine; local first, capacity, capability filter
- CopyField: any value meant to be copied; secrets stay masked
- PortField: host ports checked live against /ports/check, naming the
app that holds a taken port and offering the next free one
- EnvEditor: KEY=value rows for forms; a pasted .env fills the rows
Call sites move onto them in the following commits.
The deploy paths already know which host ports are taken (app rows,
slot rows, Docker mappings, a bind test) but only used that to pick a
port silently. Exposing it lets the shared port input say "8001 is
used by shop-api" and offer the next free port, instead of failing
at deploy time.
Every screen that asked for a domain had its own input: a copied
regex in service settings, a separate "give it a subdomain" modal, a
bare required field on the Domains page. DomainField offers a managed
subdomain (label + base domain) or the user's own domain, normalizes
what is pasted, and says what will happen with DNS before submit.
attachDomain() sends either kind to the right endpoint.
Service settings now has one add-domain flow instead of an attach
form plus a subdomain modal, and the Domains page add modal uses the
same field.
The three remaining catalogs each had their own card: a 140px cover
banner with source, category, first-party and trust badges on
Extensions, a legacy SharedCard on Server Templates, and a bespoke
button card in the engine drawer. All three now use the shared
CatalogCard: one tag, author and trust as plain text, an outline
action, and a flat surface. Server-template facts also get singular
forms ("1 package", not "1 packages").
Extensions, templates, server templates and database engines each
drew their own card with their own badges. CatalogCard is the one
shape for browsable things: icon, name, version line, one plain-text
tag, a two-line description, facts and one action. Templates is the
first user; the icon-only website/docs markers and the hover-reveal
deploy button went with the old card.
The explorer drew its own toolbar with an h1 titled differently from
the sidebar entry and a hand-rolled New menu. It now uses PageLayout
like the other workbench pages, with the shared button and dropdown
primitives; the tree and workspace below are unchanged.
Docker was the one list page with its own layout: an inner sidebar
for Containers/Images/Volumes, an Inventory panel repeating the KPI
counts, and a bespoke workbar title. It now uses PageLayout like every
other standalone page, with those sections as top-bar tabs and the
target picker, prune and create actions in the bar. /docker redirects
to /docker/containers so the first tab lights up. The old sidebar,
workbar and container-card CSS was unused and is removed.
Section headings in Settings, the new-service wizard, Agent Fleet and
restore points each had a one-line description that restated the
heading. The Installed section header said "installed" three times.
Only lines that say something specific (what disabling a module does,
install instructions, user data) are kept.
Detail headers and table heads used a top-lit gradient plus a radial
accent wash. They are now a flat surface, matching every other card.
The old Servers card layout (hero, health panel, card grid, empty
state) was no longer referenced anywhere and carried most of the
remaining gradients, so it goes.
Vela holds one ServerKit API key as a host-side secret and polls the
fleet list, so this read route moves from bare @jwt_required() to
auth_required() + require_scope('servers:read') — a deliberate,
per-route jwt_only_census exception, not a sweep. JWT callers are
unchanged; a restricted key without servers:read gets 403 from the
scope middleware, no credentials get 401.
Scope choice: the existing servers:read catalog entry already covers
'list servers, agents, and metrics', and the serverkit-gui read routes
(capabilities/frame/surface, sibling repo) take the same scope, so one
key scope serves the whole Vela polling surface.
The census ceiling ratchets down to 600 and the migration inventory is
regenerated, as both ratchets require. tests/test_servers_api_key_scope.py
pins the four cases: scoped key 200, wrong-scope key 403, JWT 200,
anonymous 401.
Session keys must name their purpose, and both loopback legs skip
environment proxies so the grant and bearer token never leave the box.
In the tunnel the API always goes through the relay, which attaches the
grant, and the two raw root anchors become router Links so they stay
under the /t/<device> prefix.
The connect-session route authenticates by the loopback-only Cloud
grant rather than a session, and the tunnel's Socket.IO bridge starts
two raw threads; both guards failed CI until they were recorded.
Juan Denis