The demo is a flush full-height 3-pane console; the live page was padded
floating cards, which is why it did not read as the new design.
- de-cardify: .db-explorer padding/gaps -> 0; toolbar/tree-panel/
workspace/statusbar lose radius+outer borders, join on 1px edges
- ResultsGrid: demo cellEl semantic tints (NULL italic-ghost, emails/URLs
+ positive statuses green, negative amber)
- tab strip: demo + new-tab pill (opens SQL console on selected source)
- result count number bold green
Follow-up (S8.1): SQL editor line-number gutter + keyword highlighting.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
These two pages were never migrated: hard-coded Tailwind light-palette
utilities (bg-gray-200, bg-yellow-50, bg-blue-600, bg-white modal) made
the /servers -> /fleet jump read as a different app and broke dark theme.
- StatCard/StatsGrid -> MetricCard KPI strip; progress bars -> ds Gauge
- status Badges -> Pill (versions, rollouts, heatmap, alerts, anomalies,
search, discovery)
- new token homes in _fleet-monitor.scss: .fleet-kpis/.fleet-warnrow/
.fleet-ico/.fleet-statbox/.fleet-predbox/.fleet-modal/.fleet-statrow
- heatmap buckets + forecast chart strokes -> theme vars
- _utilities.scss: shim text-green-500/red-500/yellow-600/yellow-700
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Pass-1 restyle stops short of real parity on several pages; S8 ranks the
gaps per page (Agent Fleet/Fleet Monitor never migrated, Databases still
cardified, Services list structure diverged, Terminal IA, WP list, etc.)
and sets the execution order.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
(1) New %sk-state placeholder + .sk-state class in _design-system.scss
(mono uppercase state chip, 7 tone modifiers); the 5 page-local copies
(.mon-state/.sec-state/.inc-state+.inc-impact/.git-chip/.bk-type) now
@extend it - class names and JSX untouched, compiled output verified
equivalent. (2) Dead connectionColors export removed from
connectionRules.js (zero consumers). (3) _email.scss globals evicted:
.status-badge deleted (its unique content was dead variants + a phantom
::before dot artifact in two text badges - strict improvement),
.empty-state moved to _empty-state.scss via an html-prefixed bridge that
preserves the cascade over page-partial copies. (4) TokenModal blocks in
_servers.scss re-tokened (--bg-code scripts/connection string, eyebrow
labels, green status dot) - no other selectors in the file changed.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Map item #21, bottom-dock IA kept (S6.3 stays open). LogsDrawer: sk-
drawer-style head (icon tile, mono source sub, live-dot line counter),
log well on --bg-code, mobile fix (dock was orphan-offset 250px with the
sidebar off-canvas). RemoteTerminal: previously UNSTYLED (classes had no
stylesheet; old VS Code palette in an embedded <style> tag) - now has a
proper token home in _logs-drawer.scss; xterm theme retinted to the new
palette incl. the v5 selectionBackground key fix (v4 selection key was
silently ignored). ContainerLogs: icon-tile header + mono sub; its
styles live in _wordpress-pipeline.scss (CONTAINER LOGS section only).
All socket/resize/follow/cleanup behavior byte-identical.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
The last old-look pages. Base app-* classes in _applications.scss now
carry the new spec directly (gradient detail header + accent wash, mono
breadcrumbs/eyebrow panel headers, sk-info-row k/v grids, accent tab
strip) - property-aligned with the .wp-detail-page overrides so WP detail
stays identical and WordPressProject inherits the new chrome for free.
Applications list: PageTopbar + MetricCard KPI strip + dense sk-dtable
(type tiles, Pills, Gauge resource rows, SegControl filter); page no
longer borrows docker-* classes. ApplicationDetail: tinted header tile +
Pill/EnvTag, deploy/build Badges -> Pills, consoles on --bg-code; dead
blocks with zero consumers dropped. Also fixes pre-existing lint errors
(empty catches, unescaped entities). NOTE: /apps currently redirects to
/services so the list page is orphaned - restyled for consistency.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Log Files + Journal tabs -> single bordered console frame (con-rail
target list with mono eyebrow groups, accent-bg active rows, session-head
viewer bar, log well on --bg-code); Processes tab -> same frame with
sk-dtable-spec sortable table + token gauges; Services tab cards re-
tinted with status stripes. Terminal gets its OWN proc-chip filter chips
(no longer depends on _templates.scss .filter-chip); process/service
statuses -> ds Pills; hashColor/priority palettes retinted to the new
palette. Legacy block kept for shared consumers (JournalControls/
ProcessTable/ServiceCard).
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
SCSS-only reskin of the FileManager page to the demo's `.fmgr` look:
- page goes full-bleed flush (no floating cards): toolbar / tree rail /
listing / status bar joined by 1px soft borders
- left rail: flat groups under mono-uppercase eyebrow headers, demo tree
rows (accent-bg active, amber folders), dense type filters + disk gauges
- list view: sticky mono-uppercase headers, tighter rows, mono size/
modified/permissions cells
- grid view: transparent cards with surface-2 hover, accent-bg selection
(type-tinted thumbs kept)
- status bar + breadcrumbs go mono; bulk bar becomes a flush accent strip
- type palette literals aligned to the redesign tokens (amber/violet/
green/cyan); context menu + preview drawer re-tinted to surface tokens
- dropped dead blocks from the pre-topbar era (.page-header, .sort-popover,
.filter-chips-row, .quick-access-*, .analysis-*, .toolbar-select)
All capabilities kept (uploads, bulk ops, type filters, disk mounts,
remote targets, shortcuts) — zero JSX changes. Build verified.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Finish the Domains trio visually:
- DNS Zones: records table -> dense .sk-dtable; record type rendered as a colored .dns-rtype chip (A/CNAME/MX/TXT/NS/SOA…); content cell uses .sk-cell-mono. Drop unused Badge import.
- SSL Certificates: per-cert status Badge -> Pill (green Valid / amber Expiring). Drop unused Badge import.
Both already themed from Phase 0; these add the redesign's chip/pill language.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Convert the .wp-site-card grid into a dense .sk-dtable: Site tile + name/port, Environments, Version (mono), Status (Pill green/gray), tag chips, and Open-Site/WP-Admin links. Add a status SegControl (All/Running/Stopped) alongside the existing tag filter; row click still opens the site detail. Omitted SSL/plugins/visits/uptime/server columns (not in the get_sites payload — no list backend) per restyle-first. Drop an unused Badge import.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Visual restyle of the existing .servers-table (no column/capability changes — bulk-select, group, telemetry, and row actions all kept): mono uppercase headers, and thin token-colored telemetry gauges (CPU=accent-bright, RAM=cyan, Disk=green). Region/Load columns omitted (mock-only, no backend field) per restyle-first.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Final sidebar sub-menu moved to the demo's top-bar structure (REDESIGN_MAP §6 decision 3):
- Add shared WORDPRESS_TABS (WordPress / Pipeline); render PageTopbar on WordPress (sites list) and WordPressProjects (pipeline).
- Remove the wordpress subItems from the sidebar — NO sidebar item has a sub-menu anymore; the rail is fully flat, matching the demo.
- WordPress list: both headers (loading + main) swapped; Import Site + Create Site actions kept.
- Pipeline list header swapped (title 'Pipeline').
- The Pipeline tab is now always visible (was wpInstalled-gated in the sidebar).
Six infra groups total now use the top-bar layout: Domains, Servers, Services, Files, Monitoring, Marketplace, WordPress. Body restyles still pending per group.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Final two sidebar sub-menus moved to the demo's top-bar structure (REDESIGN_MAP §6 decision 3):
- Monitoring group: shared MONITOR_TABS (Monitoring/Status Pages); PageTopbar on both pages (Refresh + Start/Stop + Create-Page actions kept).
- Marketplace group: shared MARKET_TABS (Marketplace/Downloads); PageTopbar replaces the marketplace hero; Downloads header swapped (Import ZIP + Refresh kept).
- Remove the monitoring + marketplace subItems from the sidebar.
Only WordPress (Pipeline) still has a sidebar sub-menu; everything else is now flat + top-bar. Body restyles still pending per group.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Move Files + FTP to the demo's top-bar structure (REDESIGN_MAP §6 decision 3):
- Add shared FILE_TABS (Files / FTP Server); render PageTopbar on both pages.
- Remove the files subItems from the sidebar (route /ftp unchanged, reachable from the tab).
- FileManager: top bar added as the first child of the full-bleed fullscreen browser (already a flex column; body keeps filling) — the toolbar, tree, preview, upload tray and all file ops are untouched.
- FTPServer: .page-header swapped for PageTopbar; the conditional install/test/start/stop/restart actions moved verbatim into the top bar.
- Fix a pre-existing unescaped-apostrophe lint error in FTPServer.
Follow-up: restyle the FileManager + FTP bodies.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Restyle .new-service-page__mode-card into the demo's centered method-card look (icon chip on top, title, description, corner check on the active card) and tokenize the old teal/indigo active-state literals. GitHub-OAuth repo picker, manifest detection, and the template flow are all preserved. Follow-up: template-catalog grid + Docker-Image/From-Scratch methods.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Move Services + its sub-pages to the demo's top-bar structure (REDESIGN_MAP §6 decision 3):
- Add shared SERVICE_TABS (Services/New Service/Templates/Deploy Activity); render PageTopbar on all 4 group pages so the tab group persists.
- Remove the services subItems from the sidebar (routes /services/new, /templates, /deployments unchanged, reachable from the tabs).
- Services: header -> PageTopbar (meta shows total/running; New Service action kept).
- NewService: drop the now-redundant breadcrumb; Connections action kept.
- Templates: search box moved into the top-bar actions.
- Deployments: New Service + Live/Paused + Refresh actions kept.
Follow-up: restyle the bodies (NewService method-cards + template catalog, Services dense table, ServiceDetail tabs).
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Move Servers + its 4 sub-pages to the demo's top-bar structure (REDESIGN_MAP §6 decision 3):
- Add shared SERVER_TABS (Servers/Agent Fleet/Fleet Monitor/Cloud Servers/Config Templates) and render PageTopbar on all 5 pages so the tab group persists.
- Remove the servers subItems from the sidebar (routes unchanged, reachable from the tabs).
- Main Servers page: top bar added ABOVE the full-bleed ops workspace (container -> column); the fleet-health rail, status/group filtering, workbar, bulk actions and pairing are fully preserved — no capability removed.
- Sub-pages (AgentFleet/FleetMonitor/CloudProvision/ServerTemplates): .page-header swapped for PageTopbar, action buttons preserved.
- Fix a pre-existing unescaped-quote lint error in FleetMonitor.
Follow-up: restyle the Servers list body to the demo's dense table + ServerDetail tabs.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Finish the domain page group so the Domains/DNS Zones/SSL tabs persist on all three:
- Extract DOMAIN_TABS to components/domains/domainTabs.jsx; Domains imports it.
- DNSZones + SSLCertificates pages now render the shared <PageTopbar tabs={DOMAIN_TABS}> in place of their old headers (actions preserved).
- Fix a pre-existing unescaped-apostrophe lint error in SSLCertificates.
DNS/SSL page bodies (lists/forms) are not yet restyled — headers only.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
First infra page moved to the demo structure (REDESIGN_MAP §6 decision 3):
- Add shared PageTopbar ds primitive (icon + title + routed sub-nav + actions).
- Domains: top bar with Domains/DNS Zones/SSL tabs (replaces the removed sidebar sub-menu), KPI strip (MetricCard), segmented filter (SegControl), .sk-dtable list, and a detail Drawer with SSL/linked-site/status specs + all actions (visit/verify/SSL/delete). Add-domain + enable-SSL modals preserved.
- Remove the domains subItems from sidebarItems.js (/dns, /ssl routes unchanged, reachable from the top-bar tabs).
- Omit registrar/DNSSEC/nameservers columns (no WHOIS backend yet) per restyle-first.
Follow-up: give DNSZones + SSLCertificates pages the same top bar so the tab group persists.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Per-view change map for the UI redesign: thesis, modularity contract, Phase 0 foundation, shared primitives, per-page deltas, backend gap register, decisions (incl. infra pages adopt the demo's top-bar layout, not sidebar sub-menus), and phased sequence.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Replace accidental old-palette literals (old indigo/green/amber/zinc surfaces+borders, white/black washes) with design tokens so they theme correctly in light mode and track a custom accent. Intentional literals (brand colors, categorical log/node/file-type palettes, theme-preview mockups, white-on-color, scrims) were preserved.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Phase 0 of the ServerKit UI redesign (see docs/REDESIGN_MAP.md):
- Remap design tokens to the new infra-console palette behind existing names; add prototype token names (surface ramp, cyan/violet, accent-bright/-bg). Dark/light/system.
- Self-host IBM Plex (woff2 vendored via scripts/fetch-fonts.mjs); no Google Fonts CDN.
- Runtime-derive the full accent ramp in ThemeContext.
- Add shared design-system primitives in components/ds (Pill, EnvTag, SegControl, MetricCard, Gauge, ServiceTile, Sparkline, AreaChart, ScoreGauge, Feed, Drawer).
- Restyle the sidebar (gradient rail, mono section headers, left accent bar) and switch the brand to the demo's gradient-tile logo.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Expose and surface containerised databases and introduce managed app base port control. Backend: add endpoint to list databases across all Docker apps, robustly resolve compose container names, include docker DB user when querying, compute migration needs from live heads and self-heal orphaned alembic_version entries by stamping to head, and add the managed_app_base_port system setting. Template service now honours the managed_app_base_port and WordPress template default HTTP port updated to 8300. Frontend: add react-icons brand icons and DatabaseBrands component, show Docker-hosted DBs under their engine nodes with a docker badge, platform-aware console shortcut label, pass DB user to docker table/query API calls, add API client header merge fix, UI for managing base port in settings, enhanced migration history UI (backup/apply/resync flows, confirm dialog, toasts), and various style tweaks and color additions.
Re-reading python.py showed every mutating endpoint is independently
@admin_required (runs before the shared get_app_or_404 gate), so that gate only
governs the 4 read GETs (packages/env/status/gunicorn-config). Pointing it at
can_access_app safely opens those to grantees while the admin-only mutations stay
untouched — no per-method split needed.
With this, every app-related blueprint is grant-aware. Also fixes the int-vs-str
identity comparison in the helper.
Verified: a python read-gate test (stranger 403, grantee passes), full suite
132 passed.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
A grant now reaches every app-related blueprint, not just apps.py + WordPress, so
a shared application is fully manageable by its grantees.
- Promoted the access helpers to a shared seam: ResourceGrantService.can_access_app
(owner/admin/any grant -> reads) and can_edit_app (owner/admin/editor grant ->
mutations); apps.py now delegates to them.
- Swept 33 ownership checks across 6 blueprints (categorized read vs mutate via a
parallel mapping workflow): builds.py (12), domains.py (7, incl. SSL + domain
CRUD), deploy.py (6), private_urls.py (5), templates.py (2), databases.py (1).
Reads -> any grant; mutates -> editor grant.
- Fixed the same latent int-vs-str ownership bug in all 33 (now user.id).
Deferred: python.py's single get_app_or_404 helper gates read+mutate+delete
together and needs per-method splitting before it's safe to make grant-aware.
Verified: cross-blueprint integration test (grantee reaches builds deployments;
stranger 403), full suite 131 passed.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Completes the chosen access-level ACL design: a grant now lets the user actually
operate the resource, gated by a real role.
- Grants carry a role: editor (view + operate) or viewer (read-only). grant POST
validates role in {viewer, editor} (default editor); ResourceGrantService gains
grant_role(); the Sharing UI gains a role selector.
- Two access helpers split the app endpoints: _can_access_app (owner/admin/ANY
grant) gates reads (get_app, /linked, /logs, /container-logs, /containers,
/status); _can_edit_app (owner/admin/EDITOR grant) gates mutations (/link,
/unlink, /environment, PUT, /start, /stop, /restart).
- DELETE stays owner-or-admin (an editor can't delete — tested).
- The same sweep fixed a latent int-vs-str ownership bug across ~14 app endpoints
(compared app.user_id to the stringified get_jwt_identity(); now user.id).
Verified: 3 more ACL tests (viewer read-only + can't operate, editor operates +
can't delete, role validation/default), full suite 130 passed, lint + build.
Still owner-only: env-vars/databases/domains blueprints (follow-up sweep).
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Completes the per-site ACL feature with UI on top of the backend (d9a5ec7).
- A per-app 'Share' action in the Workspaces Resources modal opens an inline
sub-view: current grantees with Revoke, plus a grant-access list of users
(the owner and existing grantees are filtered out).
- Client methods getAppGrants / grantAppAccess / revokeAppAccess.
Verified: frontend lint-clean (no new warnings) + production build. The grant
endpoints are covered by backend tests.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
