@stacksjs/ts-cloud 0.7.67 → 0.7.69

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (56) hide show
  1. package/dist/bin/cli.js +1126 -1126
  2. package/dist/{chunk-n59was4s.js → chunk-j6zaxywt.js} +31 -11
  3. package/dist/deploy/index.js +2 -2
  4. package/dist/drivers/hetzner/host-optimization.d.ts +19 -0
  5. package/dist/drivers/index.js +1 -1
  6. package/dist/index.js +2 -2
  7. package/dist/queue/queue.d.ts +8 -0
  8. package/dist/queue/worker.d.ts +2 -0
  9. package/dist/ui/account/automation.html +3 -3
  10. package/dist/ui/account/security.html +2 -2
  11. package/dist/ui/applications/compose.html +4 -4
  12. package/dist/ui/applications/new.html +2 -2
  13. package/dist/ui/data/backups.html +4 -4
  14. package/dist/ui/data/services.html +4 -4
  15. package/dist/ui/data/volumes.html +4 -4
  16. package/dist/ui/index.html +4 -4
  17. package/dist/ui/integrations.html +2 -2
  18. package/dist/ui/operations/alerts.html +4 -4
  19. package/dist/ui/operations/configuration.html +4 -4
  20. package/dist/ui/operations/jobs.html +4 -4
  21. package/dist/ui/operations/maintenance.html +4 -4
  22. package/dist/ui/operations/observability.html +4 -4
  23. package/dist/ui/operations/previews.html +4 -4
  24. package/dist/ui/operations/queue.html +4 -4
  25. package/dist/ui/operations/regions.html +4 -4
  26. package/dist/ui/operations/releases.html +4 -4
  27. package/dist/ui/operations/workloads.html +4 -4
  28. package/dist/ui/server/actions.html +4 -4
  29. package/dist/ui/server/activity.html +2 -2
  30. package/dist/ui/server/capacity.html +4 -4
  31. package/dist/ui/server/database.html +4 -4
  32. package/dist/ui/server/deployments.html +4 -4
  33. package/dist/ui/server/diagnostics.html +2 -2
  34. package/dist/ui/server/firewall.html +3 -3
  35. package/dist/ui/server/fleet.html +4 -4
  36. package/dist/ui/server/logs.html +4 -4
  37. package/dist/ui/server/metrics.html +4 -4
  38. package/dist/ui/server/services.html +2 -2
  39. package/dist/ui/server/sites.html +4 -4
  40. package/dist/ui/server/ssh-keys.html +3 -3
  41. package/dist/ui/server/team.html +4 -4
  42. package/dist/ui/server/terminal.html +2 -2
  43. package/dist/ui/serverless/alarms.html +4 -4
  44. package/dist/ui/serverless/assets.html +2 -2
  45. package/dist/ui/serverless/cost.html +2 -2
  46. package/dist/ui/serverless/data.html +4 -4
  47. package/dist/ui/serverless/firewall.html +2 -2
  48. package/dist/ui/serverless/functions.html +4 -4
  49. package/dist/ui/serverless/logs.html +4 -4
  50. package/dist/ui/serverless/metrics.html +2 -2
  51. package/dist/ui/serverless/queues.html +4 -4
  52. package/dist/ui/serverless/secrets.html +4 -4
  53. package/dist/ui/serverless/traces.html +4 -4
  54. package/dist/ui/serverless.html +4 -4
  55. package/package.json +3 -3
  56. /package/dist/{chunk-xawdhj7z.js → chunk-1p8jah5z.js} +0 -0
package/dist/ui/server/terminal.html CHANGED
@@ -102,7 +102,7 @@ else {
102
102
  }
103
103
  })
104
104
  return { buf, cmd, status, send, reconnect, clearOut, statusTone };
105
- })</script> <!DOCTYPE html><html lang="en" data-theme="dark"><head><meta name="title" content="stx Project"><meta name="description" content="A website built with stx templating engine"><meta property="og:title" content="stx Project"><meta property="og:description" content="A website built with stx templating engine"><meta property="og:type" content="website"><meta name="twitter:card" content="summary_large_image"><meta name="twitter:title" content="stx Project"><meta name="twitter:description" content="A website built with stx templating engine"><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>ts-cloud · Terminal</title><link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect x='3' y='3' width='26' height='26' rx='8' fill='%235a8be0'/%3E%3C/svg%3E"><link rel="preconnect" href="https://fonts.googleapis.com"><link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet"><style> :root { --bg: #0a0e15; --bg2: #0b0f18; --panel: rgba(255,255,255,0.03); --panel-br: rgba(255,255,255,0.072); --txt: #e9edf5; --txt2: #94a1b8; --txt3: #5a6577; --accent: #5a8be0; --accent-dim: rgba(90,139,224,0.14); --accent-ink: #061019; --ok: #35d19b; --okbg: rgba(53,209,155,0.11); --bad: #f0736e; --badbg: rgba(240,115,110,0.11); --warn: #edb949; --warnbg: rgba(237,185,73,0.11); --mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace; } * { box-sizing: border-box; margin: 0; padding: 0; } html { background: var(--bg); min-height: 100%; } body { font-family: 'Inter', system-ui, sans-serif; color: var(--txt); min-height: 100vh; /* One calm accent wash, no AI blue-purple mesh. */ background: radial-gradient(900px 460px at 88% -8%, rgba(90,139,224,0.06), transparent 62%), linear-gradient(175deg, var(--bg), var(--bg2)); -webkit-font-smoothing: antialiased; font-feature-settings: 'tnum' 1, 'ss01' 1; padding-left: 248px; overflow-x: hidden; } /* Tabular monospaced numerals wherever a value is read at a glance (density 7). */ .stat, .gauge .pct, .vital .vval, .health-hero .hmeta .item b, .kv > b, td.mono { font-variant-numeric: tabular-nums; } .stat, .gauge .pct { font-family: var(--mono); letter-spacing: -0.03em; } a { color: inherit; text-decoration: none; } .wrap { max-width: 1240px; margin: 0 auto; padding: 0 28px 64px; min-width: 0; } .skip-link { position: fixed; z-index: 100; top: 8px; left: 264px; transform: translateY(-150%); background: var(--accent); color: var(--accent-ink); border-radius: 8px; padding: 8px 12px; font-size: 13px; font-weight: 800; } .skip-link:focus { transform: translateY(0); } .app-sidebar { position: fixed; inset: 0 auto 0 0; z-index: 30; width: 248px; display: flex; flex-direction: column; background: rgba(9,13,20,0.96); border-right: 1px solid var(--panel-br); backdrop-filter: blur(18px); padding: 18px 14px 14px; overflow-y: auto; overscroll-behavior: contain; } .brand { display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 0 8px; font-weight: 800; font-size: 17px; letter-spacing: -0.02em; } .brand .dot { width: 20px; height: 20px; border-radius: 6px; background: var(--accent); box-shadow: inset 0 1px 0 rgba(255,255,255,0.35); } .sidebar-context { display: grid; gap: 3px; margin-top: 16px; padding: 12px; border: 1px solid var(--panel-br); border-radius: 12px; background: rgba(255,255,255,0.025); } .sidebar-context strong { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .context-label { color: var(--txt3); font-size: 10px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; } .context-detail { color: var(--txt3); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .environment-picker { display: grid; gap: 6px; margin: 14px 4px 4px; } .environment-picker details { position: relative; } .environment-current { display: flex; align-items: center; gap: 8px; min-height: 38px; padding: 7px 9px; cursor: pointer; list-style: none; border: 1px solid var(--panel-br); border-radius: 10px; background: rgba(255,255,255,0.03); } .environment-current::-webkit-details-marker { display: none; } .environment-current::after { content: '⌄'; margin-left: auto; color: var(--txt3); } .environment-current > span { min-width: 36px; padding: 3px 5px; border-radius: 5px; background: var(--accent-dim); color: var(--accent); font: 800 9px var(--mono); text-align: center; letter-spacing: .06em; } .environment-current.production > span { background: var(--warnbg); color: var(--warn); } .environment-current strong { font-size: 12px; text-transform: capitalize; } .environment-menu { position: absolute; z-index: 40; top: calc(100% + 6px); left: 0; right: 0; padding: 5px; border: 1px solid var(--panel-br); border-radius: 11px; background: #111722; box-shadow: 0 14px 36px rgba(0,0,0,.4); } .environment-menu a { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px; border-radius: 7px; font-size: 12px; text-transform: capitalize; } .environment-menu a:hover, .environment-menu a.active { background: var(--accent-dim); color: var(--accent); } .environment-menu small { color: var(--txt3); font-size: 9px; text-transform: uppercase; letter-spacing: .05em; } .command-trigger { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: calc(100% - 8px); margin: 12px 4px 0; padding: 8px 9px; border: 1px solid var(--panel-br); border-radius: 9px; background: rgba(255,255,255,.025); color: var(--txt2); font: 600 12px inherit; text-align: left; } .command-trigger:hover { border-color: rgba(90,139,224,.35); color: var(--txt); } .command-trigger kbd { padding: 2px 5px; border: 1px solid var(--panel-br); border-radius: 5px; background: rgba(255,255,255,.04); color: var(--txt3); font: 600 10px var(--mono); } .nav-groups { display: grid; gap: 18px; margin-top: 20px; } .nav-group { display: grid; gap: 2px; } .nav-group h2 { padding: 0 10px 5px; color: var(--txt3); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; } .nav-group a { position: relative; display: flex; align-items: center; min-height: 34px; padding: 7px 10px; border-radius: 8px; color: var(--txt2); font-size: 12.5px; font-weight: 600; } .nav-group a:hover { color: var(--txt); background: rgba(255,255,255,.035); } .nav-group a.active { color: var(--accent); background: var(--accent-dim); } .nav-group a.active::before { content: ''; position: absolute; left: -4px; width: 3px; height: 16px; border-radius: 4px; background: var(--accent); } .context-bar { position: sticky; top: 0; z-index: 20; min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 28px; border-bottom: 1px solid var(--panel-br); background: rgba(10,14,21,.78); backdrop-filter: blur(14px); } .context-path { display: flex; align-items: center; gap: 12px; min-width: 0; overflow: hidden; } .context-breadcrumb { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--txt2); font-size: 12px; } .context-breadcrumb i { color: var(--txt3); font-style: normal; } .context-breadcrumb strong { color: var(--txt); text-transform: capitalize; } .context-breadcrumb small { margin-left: 7px; padding-left: 14px; border-left: 1px solid var(--panel-br); color: var(--txt3); white-space: nowrap; } .context-filters { display: flex; align-items: center; gap: 5px; min-width: 0; overflow-x: auto; } .filter-chip { flex: 0 0 auto; padding: 4px 8px; border: 1px solid rgba(90,139,224,.25); border-radius: 999px; background: var(--accent-dim); color: var(--accent); font: 700 10px var(--mono); } .filter-chip:hover { border-color: var(--accent); } .scope-safety { flex: 0 0 auto; padding: 4px 9px; border: 1px solid rgba(90,139,224,.25); border-radius: 999px; background: var(--accent-dim); color: var(--accent); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; } .scope-safety.production { border-color: rgba(237,185,73,.3); background: var(--warnbg); color: var(--warn); } .env { padding: 4px 10px; border-radius: 999px; background: var(--okbg); color: var(--ok); font-weight: 600; font-size: 12px; } .signout { display: flex; margin-top: auto; padding: 18px 4px 0; } .signout button { width: 100%; appearance: none; border: 1px solid var(--panel-br); background: rgba(255,255,255,0.035); color: var(--txt2); border-radius: 8px; padding: 5px 11px; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; transition: color .12s, border-color .12s; } .signout button:hover { color: var(--txt); border-color: rgba(255,255,255,0.16); } .nav-toggle-button, .nav-scrim { display: none; } .nav-toggle-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .state-page { min-height: calc(100vh - 48px); display: grid; align-content: center; justify-items: start; gap: 12px; max-width: 620px; padding: 48px 0; } .state-page .state-code { color: var(--accent); font: 800 12px var(--mono); text-transform: uppercase; letter-spacing: .12em; } .state-page h1 { font-size: clamp(28px, 5vw, 48px); letter-spacing: -.035em; } .state-page p { color: var(--txt2); max-width: 560px; font-size: 15px; line-height: 1.65; } .state-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; } .auth-page { min-height: 100vh; display: grid; place-items: center; padding: 24px; } .auth-card { width: min(460px, 100%); display: grid; gap: 24px; padding: 28px; border: 1px solid var(--panel-br); border-radius: 18px; background: var(--panel); box-shadow: 0 24px 70px rgba(0,0,0,.35); } .auth-card .brand { padding: 0; } .auth-card h1 { margin-top: 7px; font-size: 28px; } .auth-card p { margin-top: 6px; color: var(--txt2); line-height: 1.55; } .auth-form { display: grid; gap: 14px; } .auth-form .field-block { display: grid; gap: 6px; } .auth-form .field-block input { width: 100%; } .auth-form small { color: var(--txt3); font-size: 11px; } .auth-form .btn { justify-self: stretch; } .auth-status { min-height: 20px; color: var(--txt2); font-size: 12px; } .sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; } .command-palette { width: min(660px, calc(100vw - 24px)); max-height: min(620px, calc(100vh - 40px)); margin: 9vh auto 0; padding: 0; overflow: hidden; border: 1px solid rgba(255,255,255,.13); border-radius: 16px; background: #0f151f; color: var(--txt); box-shadow: 0 28px 90px rgba(0,0,0,.58); } .command-palette::backdrop { background: rgba(2,5,9,.72); backdrop-filter: blur(5px); } .command-search { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--panel-br); } .command-search > span { color: var(--txt3); font-size: 22px; } .command-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--txt); font: 500 15px inherit; } .command-search input::placeholder { color: var(--txt3); } .command-close { padding: 4px 7px; border: 1px solid var(--panel-br); border-radius: 6px; color: var(--txt3); font: 700 10px var(--mono); } .command-status { padding: 12px 16px; color: var(--txt3); font-size: 12px; } .saved-views { display: grid; gap: 8px; padding: 0 14px 12px; border-bottom: 1px solid var(--panel-br); } .saved-views-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .saved-views h3, .command-group > h3 { color: var(--txt3); font: 800 9px var(--mono); text-transform: uppercase; letter-spacing: .08em; } .save-view-form { display: flex; align-items: center; gap: 6px; } .save-view-form input { width: 150px; min-width: 0; padding: 5px 7px; border: 1px solid var(--panel-br); border-radius: 7px; background: rgba(255,255,255,.035); color: var(--txt); font-size: 11px; } .save-view-form button, .saved-view-row button { padding: 5px 7px; border: 1px solid var(--panel-br); border-radius: 7px; color: var(--txt2); font-size: 10px; } .saved-view-list { display: flex; flex-wrap: wrap; gap: 6px; } .saved-view-row { display: inline-flex; align-items: center; overflow: hidden; border: 1px solid var(--panel-br); border-radius: 8px; } .saved-view-row a { padding: 5px 8px; color: var(--txt2); font-size: 11px; } .saved-view-row button { border: 0; border-left: 1px solid var(--panel-br); border-radius: 0; color: var(--txt3); } .saved-views.empty .saved-view-list::after { content: 'No saved views yet'; color: var(--txt3); font-size: 11px; } .tag-result-form { display: grid; grid-template-columns: 1fr 150px 32px auto; align-items: center; gap: 7px; padding: 9px 14px; border-bottom: 1px solid var(--panel-br); } .tag-result-form label { color: var(--txt3); font: 800 9px var(--mono); text-transform: uppercase; letter-spacing: .08em; } .tag-result-form input:not(.tag-color) { min-width: 0; padding: 5px 7px; border: 1px solid var(--panel-br); border-radius: 7px; background: rgba(255,255,255,.035); color: var(--txt); font-size: 11px; } .tag-result-form .tag-color { width: 32px; height: 27px; padding: 2px; border: 1px solid var(--panel-br); border-radius: 7px; background: transparent; } .tag-result-form button { padding: 5px 8px; border: 1px solid var(--panel-br); border-radius: 7px; color: var(--txt2); font-size: 10px; } .tag-result-form button:disabled { opacity: .45; cursor: not-allowed; } .command-results { display: grid; gap: 3px; max-height: 430px; overflow-y: auto; padding: 0 7px 10px; } .command-group { display: grid; gap: 3px; } .command-group > h3 { padding: 8px 10px 2px; } .command-result-row { display: grid; grid-template-columns: minmax(0, 1fr) 36px; align-items: center; } .command-results a { display: grid; grid-template-columns: 78px 1fr; gap: 10px; align-items: center; min-width: 0; padding: 10px; border-radius: 9px; } .command-results a:hover, .command-results a.selected { background: var(--accent-dim); } .favorite-result { display: grid; place-content: center; width: 30px; height: 30px; border-radius: 8px; color: var(--txt3); font-size: 17px; } .favorite-result:hover, .favorite-result.active { color: var(--warn); background: var(--warnbg); } .command-type { color: var(--txt3); font: 800 9px var(--mono); text-transform: uppercase; letter-spacing: .07em; } .command-copy { display: grid; gap: 3px; min-width: 0; } .command-copy strong, .command-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .command-copy strong { font-size: 13px; } .command-copy small { color: var(--txt3); font-size: 11px; } .command-copy mark { border-radius: 2px; background: var(--warnbg); color: var(--warn); } .command-palette footer { display: flex; flex-wrap: wrap; gap: 14px; padding: 9px 14px; border-top: 1px solid var(--panel-br); color: var(--txt3); font-size: 10px; } @media (max-width: 820px) { body { padding-left: 0; } .wrap { padding-left: 16px; padding-right: 16px; } .context-bar { padding: 8px 14px 8px 58px; } .context-breadcrumb small { display: none; } .nav-toggle-button { position: fixed; top: 9px; left: 12px; z-index: 50; width: 36px; height: 30px; display: grid; place-content: center; gap: 4px; border: 1px solid var(--panel-br); border-radius: 8px; background: #111722; cursor: pointer; } .nav-toggle-button span { display: block; width: 15px; height: 1px; background: var(--txt2); } .app-sidebar { transform: translateX(-102%); transition: transform .18s ease; box-shadow: 18px 0 48px rgba(0,0,0,.45); } .nav-scrim { position: fixed; inset: 0; z-index: 25; background: rgba(0,0,0,.58); } body.nav-open .nav-scrim { display: block; } body.nav-open .app-sidebar { transform: translateX(0); } .skip-link { left: 56px; } } @media (max-width: 420px) { .context-filters { display: none; } .saved-views-heading { align-items: stretch; flex-direction: column; } .save-view-form input { width: auto; flex: 1; } .tag-result-form { grid-template-columns: 1fr 32px auto; } .tag-result-form label { grid-column: 1 / -1; } .scope-safety { max-width: 92px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } header.page { padding-top: 22px; } header.page h1 { font-size: 23px; } .cards, .cards-3, .cards-2, .vitals { grid-template-columns: 1fr; } .panel { padding: 15px; } table { display: block; overflow-x: auto; } } header.page { padding: 30px 0 22px; display: flex; align-items: flex-start; gap: 20px; flex-wrap: wrap; } header.page h1 { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; } header.page p { color: var(--txt2); margin-top: 4px; font-size: 14px; } .server-line { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 14px; color: var(--txt2); font-size: 13px; } .server-line b { color: var(--txt); font-weight: 600; } .header-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; } /* Breadcrumb / back link for drill-down pages */ .crumbs { display: flex; align-items: center; gap: 8px; padding-top: 26px; font-size: 13px; color: var(--txt3); } .crumbs a { color: var(--txt2); } .crumbs a:hover { color: var(--accent); } .crumbs .sep { color: var(--txt3); } .grid { display: grid; gap: 16px; } .cards { grid-template-columns: repeat(4, 1fr); } .cards-3 { grid-template-columns: repeat(3, 1fr); } .cards-2 { grid-template-columns: repeat(2, 1fr); } @media (max-width: 880px) { .cards, .cards-3, .cards-2 { grid-template-columns: repeat(2, 1fr); } } .panel { background: var(--panel); border: 1px solid var(--panel-br); border-radius: 16px; padding: 18px; backdrop-filter: blur(6px); } a.panel { display: block; transition: border-color .15s, transform .15s; } a.panel:hover { border-color: rgba(90,139,224,0.5); transform: translateY(-1px); } .panel h3 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--txt3); font-weight: 700; } .stat { font-size: 28px; font-weight: 800; margin-top: 8px; letter-spacing: -0.02em; } .stat small { font-size: 14px; color: var(--txt2); font-weight: 500; } .bar { height: 7px; border-radius: 999px; background: rgba(255,255,255,0.07); margin-top: 12px; overflow: hidden; } .bar > i { display: block; height: 100%; border-radius: 999px; background: var(--accent); } .section { margin-top: 30px; } .section > h2 { font-size: 15px; font-weight: 700; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; } .section > h2 .more { margin-left: auto; display: inline-flex; align-items: center; gap: 12px; font-size: 12px; font-weight: 600; color: var(--accent); } .section > h2 .more a { color: var(--accent); } .cols { display: grid; grid-template-columns: 1.6fr 1fr; gap: 16px; } @media (max-width: 880px) { .cols { grid-template-columns: 1fr; } } table { width: 100%; border-collapse: collapse; font-size: 14px; } th { text-align: left; color: var(--txt3); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; padding: 0 12px 10px; } td { padding: 12px; border-top: 1px solid rgba(255,255,255,0.05); } tr:hover td { background: rgba(255,255,255,0.02); } .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; color: var(--txt2); } .pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; } .pill::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; } .pill.ok { background: var(--okbg); color: var(--ok); } .pill.bad { background: var(--badbg); color: var(--bad); } .pill.warn { background: var(--warnbg); color: var(--warn); } .tag { padding: 2px 8px; border-radius: 6px; background: rgba(90,139,224,0.12); color: var(--accent); font-size: 12px; font-weight: 600; } .kv { display: flex; justify-content: space-between; padding: 9px 0; border-top: 1px solid rgba(255,255,255,0.05); font-size: 14px; gap: 16px; } .kv:first-of-type { border-top: 0; } .kv > span { color: var(--txt2); white-space: nowrap; } .kv > b { text-align: right; word-break: break-all; } .deploy { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid rgba(255,255,255,0.05); font-size: 14px; } .deploy:first-of-type { border-top: 0; } .deploy .when { margin-left: auto; color: var(--txt3); font-size: 12px; } .btn { background: var(--accent); color: var(--accent-ink); border: 0; border-radius: 10px; padding: 9px 16px; font-weight: 700; font-size: 13.5px; cursor: pointer; font-family: inherit; white-space: nowrap; transition: filter .12s, transform .12s; } .btn:hover { filter: brightness(1.06); } .btn:active { transform: translateY(1px); } .btn.ghost { background: rgba(255,255,255,0.045); border: 1px solid var(--panel-br); color: var(--txt); } .btn.ghost:hover { background: rgba(255,255,255,0.075); filter: none; } .btn.danger { background: transparent; border: 1px solid var(--badbg); color: var(--bad); } .btn.danger:hover { background: var(--badbg); filter: none; } .btn.sm { padding: 6px 12px; font-size: 12px; } .data-item { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid rgba(255,255,255,0.05); font-size: 14px; } .data-item:first-of-type { border-top: 0; } .data-item .detail { color: var(--txt3); font-size: 12px; } .data-item .st { margin-left: auto; } .secret { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid rgba(255,255,255,0.05); font-size: 14px; } .secret:first-of-type { border-top: 0; } .secret .val { margin-left: auto; color: var(--txt3); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; letter-spacing: 2px; } /* Drill-down extras */ .spark { display: flex; align-items: flex-end; gap: 3px; height: 48px; margin-top: 12px; } .spark > i { flex: 1; background: linear-gradient(180deg, var(--accent), rgba(90,139,224,0.25)); border-radius: 3px 3px 0 0; min-height: 2px; } .logs { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; line-height: 1.7; color: var(--txt2); max-height: 360px; overflow: auto; } .logs .ts { color: var(--txt3); } .logs .err { color: var(--bad); } .log-list { display: grid; gap: 10px; max-height: 680px; overflow: auto; padding-right: 4px; } .log-row { border: 1px solid rgba(255,255,255,0.07); border-radius: 12px; background: rgba(255,255,255,0.025); padding: 12px 14px; } .log-row.warn { border-color: rgba(251,191,36,0.18); background: rgba(251,191,36,0.04); } .log-row.error { border-color: rgba(248,113,113,0.2); background: rgba(248,113,113,0.045); } .log-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; color: var(--txt3); font-size: 12px; margin-bottom: 9px; } .log-row pre { white-space: pre-wrap; overflow-wrap: anywhere; color: var(--txt2); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; line-height: 1.55; } .timeline { display: grid; gap: 11px; } .timeline-row { display: grid; grid-template-columns: 92px 1fr auto; gap: 13px; align-items: start; border: 1px solid rgba(255,255,255,0.07); border-radius: 12px; background: rgba(255,255,255,0.025); padding: 12px 14px; } .timeline-row .type { color: var(--txt3); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.07em; } .timeline-row .title { font-weight: 800; } .timeline-row .detail { color: var(--txt2); font-size: 13px; margin-top: 3px; overflow-wrap: anywhere; } .timeline-row .when { color: var(--txt3); font-size: 12px; white-space: nowrap; } .check-list { display: grid; gap: 10px; } .check { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; padding: 13px 0; border-top: 1px solid rgba(255,255,255,0.05); } .check:first-child { border-top: 0; padding-top: 0; } .check .mark { width: 12px; height: 12px; border-radius: 50%; margin-top: 4px; background: var(--ok); box-shadow: 0 0 0 4px var(--okbg); } .check.warn .mark { background: var(--warn); box-shadow: 0 0 0 4px var(--warnbg); } .check.fail .mark { background: var(--bad); box-shadow: 0 0 0 4px var(--badbg); } .check .name { font-weight: 800; } .check .detail { color: var(--txt2); font-size: 13px; margin-top: 3px; line-height: 1.45; } .port-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } @media (max-width: 880px) { .port-grid { grid-template-columns: 1fr; } } .port-card { border: 1px solid rgba(255,255,255,0.07); border-radius: 12px; background: rgba(255,255,255,0.025); padding: 13px 14px; min-width: 0; } .port-card .top { display: flex; align-items: center; gap: 8px; justify-content: space-between; } .port-card .listen { margin-top: 8px; font-weight: 800; overflow-wrap: anywhere; } .port-card .proc { color: var(--txt3); font-size: 12px; margin-top: 5px; overflow-wrap: anywhere; } .action-runner { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .action-runner select { background: rgba(255,255,255,0.05); border: 1px solid var(--panel-br); border-radius: 10px; padding: 8px 10px; color: var(--txt); font-family: inherit; font-size: 13px; min-width: 150px; } .action-output { margin-top: 12px; white-space: pre-wrap; overflow: auto; max-height: 260px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.07); background: rgba(0,0,0,0.22); padding: 12px; color: var(--txt2); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; line-height: 1.5; } .op-confirm { margin-top: 14px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .op-confirm-input { flex: 0 0 200px; background: rgba(255,255,255,0.05); border: 1px solid var(--panel-br); border-radius: 10px; padding: 8px 12px; color: var(--txt); font-family: inherit; font-size: 14px; } .op-confirm-input:focus { outline: none; border-color: var(--accent); } .note { color: var(--txt3); font-size: 12px; margin-top: 10px; } .row-actions { display: flex; gap: 8px; } .field { display: flex; gap: 8px; margin-top: 12px; } .field input { flex: 1; background: rgba(255,255,255,0.05); border: 1px solid var(--panel-br); border-radius: 10px; padding: 9px 12px; color: var(--txt); font-family: inherit; font-size: 14px; } .field input:focus { outline: none; border-color: var(--accent); } .empty { display: grid; place-items: center; gap: 6px; min-height: 132px; text-align: center; color: var(--txt3); border: 1px dashed rgba(255,255,255,0.12); border-radius: 14px; background: rgba(255,255,255,0.025); padding: 22px; } .empty strong { color: var(--txt); font-size: 14px; } .empty span { max-width: 540px; font-size: 13px; line-height: 1.5; } .empty.compact { min-height: 74px; margin-top: 10px; padding: 14px; } .form-grid { display: grid; grid-template-columns: minmax(180px, 0.7fr) minmax(280px, 1.4fr); gap: 14px; align-items: end; } .field-block { display: flex; flex-direction: column; gap: 7px; } .field-block.wide { grid-column: 1 / -1; } .field-block label, .select-filter span { color: var(--txt3); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.07em; } .field-block input, .field-block textarea, .select-filter select { width: 100%; background: rgba(255,255,255,0.05); border: 1px solid var(--panel-br); border-radius: 10px; padding: 10px 12px; color: var(--txt); font-family: inherit; font-size: 14px; } .field-block textarea { resize: vertical; min-height: 92px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; line-height: 1.5; } .field-block input:focus, .field-block textarea:focus, .select-filter select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(90,139,224,0.12); } .form-actions { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .msg { color: var(--txt3); font-size: 13px; } .msg.ok { color: var(--ok); } .msg.bad { color: var(--bad); } .table-actions { text-align: right; white-space: nowrap; } .filters { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin: 16px 0; } .segmented { display: inline-flex; padding: 4px; border: 1px solid var(--panel-br); background: rgba(255,255,255,0.035); border-radius: 12px; gap: 2px; } .segmented button { appearance: none; border: 0; background: transparent; color: var(--txt2); border-radius: 9px; padding: 7px 12px; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; } .segmented button.active { background: rgba(90,139,224,0.18); color: var(--accent); box-shadow: inset 0 0 0 1px rgba(90,139,224,0.18); } .select-filter { display: inline-flex; align-items: center; gap: 8px; } .select-filter select { min-width: 150px; padding: 8px 10px; } @media (max-width: 760px) { .form-grid { grid-template-columns: 1fr; } .filters { align-items: stretch; } .segmented, .select-filter, .select-filter select { width: 100%; } .segmented button { flex: 1; } } /* Honest action affordance: a copyable CLI command (static dashboard has no backend - the buttons would POST nowhere, so we show the exact command). */ .cmd { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 10px; background: rgba(255,255,255,0.05); border: 1px solid var(--panel-br); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; color: var(--txt); white-space: nowrap; } .cmd::before { content: '$'; color: var(--txt3); } .cmd.accent { border-color: rgba(90,139,224,0.4); color: var(--accent); } .cmds { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } /* Server dashboard components */ .svc { display: flex; flex-wrap: wrap; gap: 10px; } .svc .item { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 10px; background: rgba(255,255,255,0.03); border: 1px solid var(--panel-br); font-size: 13px; font-weight: 500; } .key { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid rgba(255,255,255,0.05); font-size: 14px; } .key:first-of-type { border-top: 0; } .key .fp { margin-left: auto; color: var(--txt3); font-size: 12px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; } .chart-panel { overflow: hidden; } .chart-panel.subtle { padding: 0; margin-bottom: 14px; background: transparent; border: 0; } svg.chart { display: block; width: 100%; height: auto; min-height: 150px; } svg.chart .chart-shell { fill: rgba(255,255,255,0.025); stroke: rgba(255,255,255,0.07); } svg.chart .chart-grid { stroke: rgba(255,255,255,0.08); stroke-width: 1; } svg.chart .chart-axis, svg.chart .chart-label { fill: var(--txt3); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; } svg.chart .chart-value { fill: var(--txt); font-size: 12px; font-weight: 800; } svg.chart .chart-empty-title { fill: var(--txt); font-size: 15px; font-weight: 800; } svg.chart .chart-empty-sub { fill: var(--txt3); font-size: 12px; } svg.chart .bar-mark.ok rect { fill: var(--ok); opacity: 0.85; } svg.chart .bar-mark.warn rect { fill: var(--warn); opacity: 0.88; } svg.chart .bar-mark.bad rect { fill: var(--bad); opacity: 0.9; } svg.chart .spark-path { fill: none; stroke: var(--accent); stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; } svg.chart circle.ok { fill: var(--ok); } svg.chart circle.bad { fill: var(--bad); } svg.chart.disabled { opacity: 0.86; } /* ───────────── Health / vital signs (server metrics) ───────────── */ /* Overall status banner - at-a-glance "is the box OK?" verdict. */ .health-hero { --hue: var(--ok); --huebg: var(--okbg); display: flex; align-items: center; gap: 18px 28px; flex-wrap: wrap; margin-top: 8px; background: radial-gradient(700px 200px at 0% 0%, var(--huebg), transparent 70%), var(--panel); border: 1px solid var(--panel-br); border-radius: 18px; padding: 18px 22px; backdrop-filter: blur(6px); } .health-hero.warn { --hue: var(--warn); --huebg: var(--warnbg); } .health-hero.bad { --hue: var(--bad); --huebg: var(--badbg); } .health-hero .status { display: inline-flex; align-items: center; gap: 12px; font-weight: 800; font-size: 17px; letter-spacing: -0.01em; color: var(--hue); } .health-hero .status .led { width: 13px; height: 13px; border-radius: 50%; background: var(--hue); box-shadow: 0 0 0 4px var(--huebg); animation: hb-pulse 2.4s ease-in-out infinite; } .health-hero .status small { display: block; color: var(--txt3); font-size: 12px; font-weight: 500; margin-top: 2px; letter-spacing: 0; } @keyframes hb-pulse { 0%, 100% { opacity: 1 } 50% { opacity: 0.5 } } .health-hero .hmeta { margin-left: auto; display: flex; flex-wrap: wrap; gap: 22px 26px; color: var(--txt2); font-size: 13px; } .health-hero .hmeta .item { display: flex; flex-direction: column; gap: 2px; } .health-hero .hmeta .item span { color: var(--txt3); font-size: 11px; text-transform: uppercase; letter-spacing: 0.07em; font-weight: 700; } .health-hero .hmeta .item b { color: var(--txt); font-weight: 600; font-size: 14px; } /* Radial gauges - the centerpiece read for CPU / memory / disk. */ .gauges { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 16px; } @media (max-width: 760px) { .gauges { grid-template-columns: 1fr; } } .gauge { --g: var(--ok); --gbg: var(--okbg); background: var(--panel); border: 1px solid var(--panel-br); border-radius: 18px; padding: 20px 20px 18px; backdrop-filter: blur(6px); display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; transition: border-color .15s, transform .15s; } .gauge:hover { border-color: color-mix(in srgb, var(--g) 45%, transparent); transform: translateY(-1px); } .gauge.warn { --g: var(--warn); --gbg: var(--warnbg); } .gauge.bad { --g: var(--bad); --gbg: var(--badbg); } .gauge .ghead { display: flex; align-items: center; gap: 8px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--txt3); font-weight: 700; } .gauge .ghead svg { width: 15px; height: 15px; color: var(--g); } .gauge .ring { position: relative; width: 172px; height: 172px; margin: 6px 0 2px; border-radius: 50%; background: conic-gradient(var(--g) calc(var(--pct) * 1%), rgba(255,255,255,0.07) 0); } .gauge .ring::after { content: ''; position: absolute; inset: 15px; border-radius: 50%; background: linear-gradient(160deg, #10151f, #0c1017); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.035); } .gauge .center { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; } .gauge .pct { font-size: 40px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; } .gauge .pct sup { font-size: 17px; font-weight: 700; color: var(--txt2); margin-left: 1px; top: -0.7em; } .gauge .punit { font-size: 11px; color: var(--txt3); font-weight: 600; margin-top: 7px; text-transform: uppercase; letter-spacing: 0.07em; } .gauge .gsub { color: var(--txt2); font-size: 14px; font-weight: 500; } .gauge .gsub b { color: var(--txt); font-weight: 700; } .gauge .gtag { display: inline-flex; align-items: center; gap: 6px; padding: 3px 11px; border-radius: 999px; background: var(--gbg); color: var(--g); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; } /* Vital-sign tiles - the secondary numbers (free RAM, uptime, etc.). */ .vitals { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } @media (max-width: 880px) { .vitals { grid-template-columns: repeat(2, 1fr); } } .vital { background: var(--panel); border: 1px solid var(--panel-br); border-radius: 14px; padding: 14px 16px; } .vital .vlabel { display: flex; align-items: center; gap: 7px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--txt3); font-weight: 700; } .vital .vlabel svg { width: 13px; height: 13px; } .vital .vval { font-size: 21px; font-weight: 700; margin-top: 7px; letter-spacing: -0.01em; } .vital .vval small { font-size: 12.5px; color: var(--txt2); font-weight: 500; } .vital .vnote { font-size: 12px; color: var(--txt3); margin-top: 3px; } /* Tone-colored progress bars (shared with index health cards). */ .bar.ok > i { background: var(--ok); } .bar.warn > i { background: var(--warn); } .bar.bad > i { background: var(--bad); } /* Load trend chart - sparkline with capacity guide + axis labels. */ .chart { position: relative; } .chart .spark { height: 124px; align-items: flex-end; } .chart .spark > i { background: linear-gradient(180deg, var(--accent), rgba(90,139,224,0.22)); transition: height .6s ease; } .chart .spark > i.hot { background: linear-gradient(180deg, var(--warn), rgba(251,191,36,0.22)); } .chart .spark > i.peak { background: linear-gradient(180deg, var(--bad), rgba(248,113,113,0.25)); } .chart .xaxis { display: flex; justify-content: space-between; margin-top: 9px; color: var(--txt3); font-size: 11px; } .grid > *, .panel, header.page > *, .cols > * { min-width: 0; } @media (max-width: 420px) { .cards, .cards-3, .cards-2, .vitals, .gauges, .cols { grid-template-columns: minmax(0, 1fr); } .stat { max-width: 100%; font-size: 25px; overflow-wrap: anywhere; } .stat small { display: block; margin-top: 5px; letter-spacing: 0; } .header-actions { width: 100%; margin-left: 0; justify-content: flex-end; } .context-breadcrumb { overflow: hidden; } .context-breadcrumb span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .timeline-row { grid-template-columns: 1fr; } .timeline-row .when { white-space: normal; } .field, .action-runner, .op-confirm { align-items: stretch; flex-direction: column; } .field input, .op-confirm-input, .action-runner select { flex: 1 1 auto; width: 100%; min-width: 0; } } </style><style data-stx-cloak>[x-cloak]{display:none !important}</style><style data-crosswind="generated"> /* ! Tailwind CSS Preflight | MIT License | https://tailwindcss.com */ *, ::before, ::after { box-sizing: border-box; border-width: 0; border-style: solid; border-color: var(--border-color, currentColor); } ::before, ::after { --hw-content: ''; } html, :host { line-height: 1.5; -webkit-text-size-adjust: 100%; -moz-tab-size: 4; tab-size: 4; font-family: ui-sans-serif, system-ui, sans-serif; font-feature-settings: normal; font-variation-settings: normal; -webkit-tap-highlight-color: transparent; } body { margin: 0; line-height: inherit; } hr { height: 0; color: inherit; border-top-width: 1px; } abbr:where([title]) { text-decoration: underline dotted; } h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; } a { color: inherit; text-decoration: inherit; } b, strong { font-weight: bolder; } code, kbd, samp, pre { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-feature-settings: normal; font-variation-settings: normal; font-size: 1em; } small { font-size: 80%; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } table { text-indent: 0; border-color: var(--border-color, inherit); border-collapse: collapse; } button, input, optgroup, select, textarea { font-family: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-size: 100%; font-weight: inherit; line-height: inherit; letter-spacing: inherit; color: inherit; margin: 0; padding: 0; } button, select { text-transform: none; } button, input:where([type='button']), input:where([type='reset']), input:where([type='submit']) { -webkit-appearance: button; background-color: transparent; background-image: none; } :-moz-focusring { outline: auto; } :-moz-ui-invalid { box-shadow: none; } progress { vertical-align: baseline; } ::-webkit-inner-spin-button, ::-webkit-outer-spin-button { height: auto; } [type='search'] { -webkit-appearance: textfield; outline-offset: -2px; } ::-webkit-search-decoration { -webkit-appearance: none; } ::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; } summary { display: list-item; } blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre { margin: 0; } fieldset { margin: 0; padding: 0; } legend { padding: 0; } ol, ul, menu { list-style: none; margin: 0; padding: 0; } dialog { padding: 0; } textarea { resize: vertical; } input::placeholder, textarea::placeholder { opacity: 1; color: #9ca3af; } button, [role="button"] { cursor: pointer; } :disabled { cursor: default; } img, svg, video, canvas, audio, iframe, embed, object { display: block; vertical-align: middle; } img, video { max-width: 100%; height: auto; } [hidden] { display: none; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } </style></head><body data-stx-auto><a data-stx-scope="stx_scope_nav_33" class="skip-link" href="#main-content">Skip to content</a><button class="nav-toggle-button" type="button" aria-label="Open navigation" aria-controls="primary-navigation" aria-expanded="false"><span></span><span></span><span></span></button><button class="nav-scrim" type="button" aria-label="Close navigation"></button><aside class="app-sidebar" id="primary-navigation" aria-label="Primary navigation"><a class="brand" href="/?env=production"><span class="dot"></span><span>ts-cloud</span></a><div class="sidebar-context"><span class="context-label">Project</span><strong>stacks-production-app</strong></div><div class="environment-picker" aria-label="Environment"><span class="context-label">Environment</span><details><summary class="environment-current production"><span>PROD</span><strong>production</strong></summary></details></div><button class="command-trigger" type="button" aria-keyshortcuts="Meta+K Control+K"><span>Search resources</span><kbd>⌘ K</kbd></button><div class="nav-groups"><section class="nav-group"><h2>Overview</h2><a class="active" href="/?env=production">Dashboard</a><a href="/server/activity?env=production">Activity</a></section><section class="nav-group"><h2>Applications</h2><a class="" href="/server/sites?env=production">Services</a><a class="" href="/server/deployments?env=production">Deployments</a><a class="" href="/server/logs?env=production">Logs</a><a class="" href="/integrations?env=production">Git integrations</a><a class="" href="/applications/new?env=production">Create application</a><a class="" href="/applications/compose?env=production">Compose applications</a></section><section class="nav-group"><h2>Operations</h2><a class="" href="/operations/queue?env=production">Deployment queue</a><a class="" href="/operations/previews?env=production">Preview environments</a><a class="" href="/operations/releases?env=production">Releases & promotion</a><a class="" href="/operations/regions?env=production">Regions & failover</a><a class="" href="/operations/maintenance?env=production">Maintenance & DR</a><a class="" href="/operations/workloads?env=production">Workloads</a><a class="" href="/operations/observability?env=production">Observability</a><a class="" href="/operations/alerts?env=production">Alerts & health</a><a href="/server/metrics?env=production">Metrics</a><a href="/server/services?env=production">Runtime services</a><a class="" href="/operations/jobs?env=production">Workers & schedules</a><a class="" href="/operations/configuration?env=production">Environment &amp; secrets</a><a class="" href="/data/backups?env=production">Backups &amp; recovery</a><a class="" href="/data/volumes?env=production">Persistent volumes</a><a href="/server/actions?env=production">Run operations</a></section><section class="nav-group"><h2>Infrastructure</h2><a class="" href="/data/services?env=production">Data services</a><a class="" href="/data/volumes?env=production">Persistent volumes</a><a href="/server/firewall?env=production">Network & firewall</a><a href="/server/ssh-keys?env=production">SSH keys</a><a class="" href="/server/fleet?env=production">Fleet inventory</a><a class="" href="/server/capacity?env=production">Capacity & placement</a><a href="/security?env=production">Security posture</a><a href="/server/terminal?env=production">Terminal</a></section><section class="nav-group"><h2>Organization</h2><a class="" href="/server/team?env=production">People & access</a><a class="" href="/account/automation?env=production">API & automation</a></section><section class="nav-group"><h2>Account</h2><a class="" href="/account/security?env=production">Sign-in & security</a></section></div><form method="post" action="/api/logout" class="signout"><button type="submit">Sign out</button></form></aside><dialog class="command-palette" aria-labelledby="command-title"><div class="command-search"><span aria-hidden="true">⌕</span><input type="search" placeholder="Search services, domains, deployments…" aria-label="Search resources" autocomplete="off"><button type="button" class="command-close" aria-label="Close search">Esc</button></div><h2 id="command-title" class="sr-only">Search resources and navigation</h2><div class="command-status" role="status">Start typing to search this project.</div><section class="saved-views" aria-labelledby="saved-views-title"><div class="saved-views-heading"><h3 id="saved-views-title">Saved views</h3><form class="save-view-form"><label class="sr-only" for="save-view-name">Saved view name</label><input id="save-view-name" maxlength="64" placeholder="Name this view" autocomplete="off"><button type="submit">Save current filters</button></form></div><div class="saved-view-list"></div></section><form class="tag-result-form"><label for="tag-result-name">Tag selected resource</label><input id="tag-result-name" maxlength="32" placeholder="customer-facing" pattern="[A-Za-z0-9][A-Za-z0-9 -]{0,31}" autocomplete="off"><input class="tag-color" type="color" value="#5a8be0" aria-label="Tag color"><button type="submit">Add tag</button></form><div class="command-results" role="listbox" aria-label="Search results"></div><footer><span>↑ ↓ navigate</span><span>Enter open</span><span>Esc close</span></footer></dialog><div class="context-bar" aria-label="Current scope"><div class="context-path"><div class="context-breadcrumb"><span>stacks-production-app</span><i>/</i><strong>production</strong></div><div class="context-filters" aria-label="Active filters"></div></div><span class="scope-safety production">Production scope</span></div> <script data-stx-scoped>
105
+ })</script> <!DOCTYPE html><html lang="en" data-theme="dark"><head><meta name="title" content="stx Project"><meta name="description" content="A website built with stx templating engine"><meta property="og:title" content="stx Project"><meta property="og:description" content="A website built with stx templating engine"><meta property="og:type" content="website"><meta name="twitter:card" content="summary_large_image"><meta name="twitter:title" content="stx Project"><meta name="twitter:description" content="A website built with stx templating engine"><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>ts-cloud · Terminal</title><link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect x='3' y='3' width='26' height='26' rx='8' fill='%235a8be0'/%3E%3C/svg%3E"><link rel="preconnect" href="https://fonts.googleapis.com"><link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet"><style> :root { --bg: #0a0e15; --bg2: #0b0f18; --panel: rgba(255,255,255,0.03); --panel-br: rgba(255,255,255,0.072); --txt: #e9edf5; --txt2: #94a1b8; --txt3: #5a6577; --accent: #5a8be0; --accent-dim: rgba(90,139,224,0.14); --accent-ink: #061019; --ok: #35d19b; --okbg: rgba(53,209,155,0.11); --bad: #f0736e; --badbg: rgba(240,115,110,0.11); --warn: #edb949; --warnbg: rgba(237,185,73,0.11); --mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace; } * { box-sizing: border-box; margin: 0; padding: 0; } html { background: var(--bg); min-height: 100%; } body { font-family: 'Inter', system-ui, sans-serif; color: var(--txt); min-height: 100vh; /* One calm accent wash, no AI blue-purple mesh. */ background: radial-gradient(900px 460px at 88% -8%, rgba(90,139,224,0.06), transparent 62%), linear-gradient(175deg, var(--bg), var(--bg2)); -webkit-font-smoothing: antialiased; font-feature-settings: 'tnum' 1, 'ss01' 1; padding-left: 248px; overflow-x: hidden; } /* Tabular monospaced numerals wherever a value is read at a glance (density 7). */ .stat, .gauge .pct, .vital .vval, .health-hero .hmeta .item b, .kv > b, td.mono { font-variant-numeric: tabular-nums; } .stat, .gauge .pct { font-family: var(--mono); letter-spacing: -0.03em; } a { color: inherit; text-decoration: none; } .wrap { max-width: 1240px; margin: 0 auto; padding: 0 28px 64px; min-width: 0; } .skip-link { position: fixed; z-index: 100; top: 8px; left: 264px; transform: translateY(-150%); background: var(--accent); color: var(--accent-ink); border-radius: 8px; padding: 8px 12px; font-size: 13px; font-weight: 800; } .skip-link:focus { transform: translateY(0); } .app-sidebar { position: fixed; inset: 0 auto 0 0; z-index: 30; width: 248px; display: flex; flex-direction: column; background: rgba(9,13,20,0.96); border-right: 1px solid var(--panel-br); backdrop-filter: blur(18px); padding: 18px 14px 14px; overflow-y: auto; overscroll-behavior: contain; } .brand { display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 0 8px; font-weight: 800; font-size: 17px; letter-spacing: -0.02em; } .brand .dot { width: 20px; height: 20px; border-radius: 6px; background: var(--accent); box-shadow: inset 0 1px 0 rgba(255,255,255,0.35); } .sidebar-context { display: grid; gap: 3px; margin-top: 16px; padding: 12px; border: 1px solid var(--panel-br); border-radius: 12px; background: rgba(255,255,255,0.025); } .sidebar-context strong { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .context-label { color: var(--txt3); font-size: 10px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; } .context-detail { color: var(--txt3); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .environment-picker { display: grid; gap: 6px; margin: 14px 4px 4px; } .environment-picker details { position: relative; } .environment-current { display: flex; align-items: center; gap: 8px; min-height: 38px; padding: 7px 9px; cursor: pointer; list-style: none; border: 1px solid var(--panel-br); border-radius: 10px; background: rgba(255,255,255,0.03); } .environment-current::-webkit-details-marker { display: none; } .environment-current::after { content: '⌄'; margin-left: auto; color: var(--txt3); } .environment-current > span { min-width: 36px; padding: 3px 5px; border-radius: 5px; background: var(--accent-dim); color: var(--accent); font: 800 9px var(--mono); text-align: center; letter-spacing: .06em; } .environment-current.production > span { background: var(--warnbg); color: var(--warn); } .environment-current strong { font-size: 12px; text-transform: capitalize; } .environment-menu { position: absolute; z-index: 40; top: calc(100% + 6px); left: 0; right: 0; padding: 5px; border: 1px solid var(--panel-br); border-radius: 11px; background: #111722; box-shadow: 0 14px 36px rgba(0,0,0,.4); } .environment-menu a { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px; border-radius: 7px; font-size: 12px; text-transform: capitalize; } .environment-menu a:hover, .environment-menu a.active { background: var(--accent-dim); color: var(--accent); } .environment-menu small { color: var(--txt3); font-size: 9px; text-transform: uppercase; letter-spacing: .05em; } .command-trigger { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: calc(100% - 8px); margin: 12px 4px 0; padding: 8px 9px; border: 1px solid var(--panel-br); border-radius: 9px; background: rgba(255,255,255,.025); color: var(--txt2); font: 600 12px inherit; text-align: left; } .command-trigger:hover { border-color: rgba(90,139,224,.35); color: var(--txt); } .command-trigger kbd { padding: 2px 5px; border: 1px solid var(--panel-br); border-radius: 5px; background: rgba(255,255,255,.04); color: var(--txt3); font: 600 10px var(--mono); } .nav-groups { display: grid; gap: 18px; margin-top: 20px; } .nav-group { display: grid; gap: 2px; } .nav-group h2 { padding: 0 10px 5px; color: var(--txt3); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; } .nav-group a { position: relative; display: flex; align-items: center; min-height: 34px; padding: 7px 10px; border-radius: 8px; color: var(--txt2); font-size: 12.5px; font-weight: 600; } .nav-group a:hover { color: var(--txt); background: rgba(255,255,255,.035); } .nav-group a.active { color: var(--accent); background: var(--accent-dim); } .nav-group a.active::before { content: ''; position: absolute; left: -4px; width: 3px; height: 16px; border-radius: 4px; background: var(--accent); } .context-bar { position: sticky; top: 0; z-index: 20; min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 28px; border-bottom: 1px solid var(--panel-br); background: rgba(10,14,21,.78); backdrop-filter: blur(14px); } .context-path { display: flex; align-items: center; gap: 12px; min-width: 0; overflow: hidden; } .context-breadcrumb { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--txt2); font-size: 12px; } .context-breadcrumb i { color: var(--txt3); font-style: normal; } .context-breadcrumb strong { color: var(--txt); text-transform: capitalize; } .context-breadcrumb small { margin-left: 7px; padding-left: 14px; border-left: 1px solid var(--panel-br); color: var(--txt3); white-space: nowrap; } .context-filters { display: flex; align-items: center; gap: 5px; min-width: 0; overflow-x: auto; } .filter-chip { flex: 0 0 auto; padding: 4px 8px; border: 1px solid rgba(90,139,224,.25); border-radius: 999px; background: var(--accent-dim); color: var(--accent); font: 700 10px var(--mono); } .filter-chip:hover { border-color: var(--accent); } .scope-safety { flex: 0 0 auto; padding: 4px 9px; border: 1px solid rgba(90,139,224,.25); border-radius: 999px; background: var(--accent-dim); color: var(--accent); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; } .scope-safety.production { border-color: rgba(237,185,73,.3); background: var(--warnbg); color: var(--warn); } .env { padding: 4px 10px; border-radius: 999px; background: var(--okbg); color: var(--ok); font-weight: 600; font-size: 12px; } .signout { display: flex; margin-top: auto; padding: 18px 4px 0; } .signout button { width: 100%; appearance: none; border: 1px solid var(--panel-br); background: rgba(255,255,255,0.035); color: var(--txt2); border-radius: 8px; padding: 5px 11px; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; transition: color .12s, border-color .12s; } .signout button:hover { color: var(--txt); border-color: rgba(255,255,255,0.16); } .nav-toggle-button, .nav-scrim { display: none; } .nav-toggle-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .state-page { min-height: calc(100vh - 48px); display: grid; align-content: center; justify-items: start; gap: 12px; max-width: 620px; padding: 48px 0; } .state-page .state-code { color: var(--accent); font: 800 12px var(--mono); text-transform: uppercase; letter-spacing: .12em; } .state-page h1 { font-size: clamp(28px, 5vw, 48px); letter-spacing: -.035em; } .state-page p { color: var(--txt2); max-width: 560px; font-size: 15px; line-height: 1.65; } .state-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; } .auth-page { min-height: 100vh; display: grid; place-items: center; padding: 24px; } .auth-card { width: min(460px, 100%); display: grid; gap: 24px; padding: 28px; border: 1px solid var(--panel-br); border-radius: 18px; background: var(--panel); box-shadow: 0 24px 70px rgba(0,0,0,.35); } .auth-card .brand { padding: 0; } .auth-card h1 { margin-top: 7px; font-size: 28px; } .auth-card p { margin-top: 6px; color: var(--txt2); line-height: 1.55; } .auth-form { display: grid; gap: 14px; } .auth-form .field-block { display: grid; gap: 6px; } .auth-form .field-block input { width: 100%; } .auth-form small { color: var(--txt3); font-size: 11px; } .auth-form .btn { justify-self: stretch; } .auth-status { min-height: 20px; color: var(--txt2); font-size: 12px; } .sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; } .command-palette { width: min(660px, calc(100vw - 24px)); max-height: min(620px, calc(100vh - 40px)); margin: 9vh auto 0; padding: 0; overflow: hidden; border: 1px solid rgba(255,255,255,.13); border-radius: 16px; background: #0f151f; color: var(--txt); box-shadow: 0 28px 90px rgba(0,0,0,.58); } .command-palette::backdrop { background: rgba(2,5,9,.72); backdrop-filter: blur(5px); } .command-search { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--panel-br); } .command-search > span { color: var(--txt3); font-size: 22px; } .command-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--txt); font: 500 15px inherit; } .command-search input::placeholder { color: var(--txt3); } .command-close { padding: 4px 7px; border: 1px solid var(--panel-br); border-radius: 6px; color: var(--txt3); font: 700 10px var(--mono); } .command-status { padding: 12px 16px; color: var(--txt3); font-size: 12px; } .saved-views { display: grid; gap: 8px; padding: 0 14px 12px; border-bottom: 1px solid var(--panel-br); } .saved-views-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .saved-views h3, .command-group > h3 { color: var(--txt3); font: 800 9px var(--mono); text-transform: uppercase; letter-spacing: .08em; } .save-view-form { display: flex; align-items: center; gap: 6px; } .save-view-form input { width: 150px; min-width: 0; padding: 5px 7px; border: 1px solid var(--panel-br); border-radius: 7px; background: rgba(255,255,255,.035); color: var(--txt); font-size: 11px; } .save-view-form button, .saved-view-row button { padding: 5px 7px; border: 1px solid var(--panel-br); border-radius: 7px; color: var(--txt2); font-size: 10px; } .saved-view-list { display: flex; flex-wrap: wrap; gap: 6px; } .saved-view-row { display: inline-flex; align-items: center; overflow: hidden; border: 1px solid var(--panel-br); border-radius: 8px; } .saved-view-row a { padding: 5px 8px; color: var(--txt2); font-size: 11px; } .saved-view-row button { border: 0; border-left: 1px solid var(--panel-br); border-radius: 0; color: var(--txt3); } .saved-views.empty .saved-view-list::after { content: 'No saved views yet'; color: var(--txt3); font-size: 11px; } .tag-result-form { display: grid; grid-template-columns: 1fr 150px 32px auto; align-items: center; gap: 7px; padding: 9px 14px; border-bottom: 1px solid var(--panel-br); } .tag-result-form label { color: var(--txt3); font: 800 9px var(--mono); text-transform: uppercase; letter-spacing: .08em; } .tag-result-form input:not(.tag-color) { min-width: 0; padding: 5px 7px; border: 1px solid var(--panel-br); border-radius: 7px; background: rgba(255,255,255,.035); color: var(--txt); font-size: 11px; } .tag-result-form .tag-color { width: 32px; height: 27px; padding: 2px; border: 1px solid var(--panel-br); border-radius: 7px; background: transparent; } .tag-result-form button { padding: 5px 8px; border: 1px solid var(--panel-br); border-radius: 7px; color: var(--txt2); font-size: 10px; } .tag-result-form button:disabled { opacity: .45; cursor: not-allowed; } .command-results { display: grid; gap: 3px; max-height: 430px; overflow-y: auto; padding: 0 7px 10px; } .command-group { display: grid; gap: 3px; } .command-group > h3 { padding: 8px 10px 2px; } .command-result-row { display: grid; grid-template-columns: minmax(0, 1fr) 36px; align-items: center; } .command-results a { display: grid; grid-template-columns: 78px 1fr; gap: 10px; align-items: center; min-width: 0; padding: 10px; border-radius: 9px; } .command-results a:hover, .command-results a.selected { background: var(--accent-dim); } .favorite-result { display: grid; place-content: center; width: 30px; height: 30px; border-radius: 8px; color: var(--txt3); font-size: 17px; } .favorite-result:hover, .favorite-result.active { color: var(--warn); background: var(--warnbg); } .command-type { color: var(--txt3); font: 800 9px var(--mono); text-transform: uppercase; letter-spacing: .07em; } .command-copy { display: grid; gap: 3px; min-width: 0; } .command-copy strong, .command-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .command-copy strong { font-size: 13px; } .command-copy small { color: var(--txt3); font-size: 11px; } .command-copy mark { border-radius: 2px; background: var(--warnbg); color: var(--warn); } .command-palette footer { display: flex; flex-wrap: wrap; gap: 14px; padding: 9px 14px; border-top: 1px solid var(--panel-br); color: var(--txt3); font-size: 10px; } @media (max-width: 820px) { body { padding-left: 0; } .wrap { padding-left: 16px; padding-right: 16px; } .context-bar { padding: 8px 14px 8px 58px; } .context-breadcrumb small { display: none; } .nav-toggle-button { position: fixed; top: 9px; left: 12px; z-index: 50; width: 36px; height: 30px; display: grid; place-content: center; gap: 4px; border: 1px solid var(--panel-br); border-radius: 8px; background: #111722; cursor: pointer; } .nav-toggle-button span { display: block; width: 15px; height: 1px; background: var(--txt2); } .app-sidebar { transform: translateX(-102%); transition: transform .18s ease; box-shadow: 18px 0 48px rgba(0,0,0,.45); } .nav-scrim { position: fixed; inset: 0; z-index: 25; background: rgba(0,0,0,.58); } body.nav-open .nav-scrim { display: block; } body.nav-open .app-sidebar { transform: translateX(0); } .skip-link { left: 56px; } } @media (max-width: 420px) { .context-filters { display: none; } .saved-views-heading { align-items: stretch; flex-direction: column; } .save-view-form input { width: auto; flex: 1; } .tag-result-form { grid-template-columns: 1fr 32px auto; } .tag-result-form label { grid-column: 1 / -1; } .scope-safety { max-width: 92px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } header.page { padding-top: 22px; } header.page h1 { font-size: 23px; } .cards, .cards-3, .cards-2, .vitals { grid-template-columns: 1fr; } .panel { padding: 15px; } table { display: block; overflow-x: auto; } } header.page { padding: 30px 0 22px; display: flex; align-items: flex-start; gap: 20px; flex-wrap: wrap; } header.page h1 { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; } header.page p { color: var(--txt2); margin-top: 4px; font-size: 14px; } .server-line { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 14px; color: var(--txt2); font-size: 13px; } .server-line b { color: var(--txt); font-weight: 600; } .header-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; } /* Breadcrumb / back link for drill-down pages */ .crumbs { display: flex; align-items: center; gap: 8px; padding-top: 26px; font-size: 13px; color: var(--txt3); } .crumbs a { color: var(--txt2); } .crumbs a:hover { color: var(--accent); } .crumbs .sep { color: var(--txt3); } .grid { display: grid; gap: 16px; } .cards { grid-template-columns: repeat(4, 1fr); } .cards-3 { grid-template-columns: repeat(3, 1fr); } .cards-2 { grid-template-columns: repeat(2, 1fr); } @media (max-width: 880px) { .cards, .cards-3, .cards-2 { grid-template-columns: repeat(2, 1fr); } } .panel { background: var(--panel); border: 1px solid var(--panel-br); border-radius: 16px; padding: 18px; backdrop-filter: blur(6px); } a.panel { display: block; transition: border-color .15s, transform .15s; } a.panel:hover { border-color: rgba(90,139,224,0.5); transform: translateY(-1px); } .panel h3 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--txt3); font-weight: 700; } .stat { font-size: 28px; font-weight: 800; margin-top: 8px; letter-spacing: -0.02em; } .stat small { font-size: 14px; color: var(--txt2); font-weight: 500; } .bar { height: 7px; border-radius: 999px; background: rgba(255,255,255,0.07); margin-top: 12px; overflow: hidden; } .bar > i { display: block; height: 100%; border-radius: 999px; background: var(--accent); } .section { margin-top: 30px; } .section > h2 { font-size: 15px; font-weight: 700; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; } .section > h2 .more { margin-left: auto; display: inline-flex; align-items: center; gap: 12px; font-size: 12px; font-weight: 600; color: var(--accent); } .section > h2 .more a { color: var(--accent); } .cols { display: grid; grid-template-columns: 1.6fr 1fr; gap: 16px; } @media (max-width: 880px) { .cols { grid-template-columns: 1fr; } } table { width: 100%; border-collapse: collapse; font-size: 14px; } th { text-align: left; color: var(--txt3); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; padding: 0 12px 10px; } td { padding: 12px; border-top: 1px solid rgba(255,255,255,0.05); } tr:hover td { background: rgba(255,255,255,0.02); } .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; color: var(--txt2); } .pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; } .pill::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; } .pill.ok { background: var(--okbg); color: var(--ok); } .pill.bad { background: var(--badbg); color: var(--bad); } .pill.warn { background: var(--warnbg); color: var(--warn); } .tag { padding: 2px 8px; border-radius: 6px; background: rgba(90,139,224,0.12); color: var(--accent); font-size: 12px; font-weight: 600; } .kv { display: flex; justify-content: space-between; padding: 9px 0; border-top: 1px solid rgba(255,255,255,0.05); font-size: 14px; gap: 16px; } .kv:first-of-type { border-top: 0; } .kv > span { color: var(--txt2); white-space: nowrap; } .kv > b { text-align: right; word-break: break-all; } .deploy { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid rgba(255,255,255,0.05); font-size: 14px; } .deploy:first-of-type { border-top: 0; } .deploy .when { margin-left: auto; color: var(--txt3); font-size: 12px; } .btn { background: var(--accent); color: var(--accent-ink); border: 0; border-radius: 10px; padding: 9px 16px; font-weight: 700; font-size: 13.5px; cursor: pointer; font-family: inherit; white-space: nowrap; transition: filter .12s, transform .12s; } .btn:hover { filter: brightness(1.06); } .btn:active { transform: translateY(1px); } .btn.ghost { background: rgba(255,255,255,0.045); border: 1px solid var(--panel-br); color: var(--txt); } .btn.ghost:hover { background: rgba(255,255,255,0.075); filter: none; } .btn.danger { background: transparent; border: 1px solid var(--badbg); color: var(--bad); } .btn.danger:hover { background: var(--badbg); filter: none; } .btn.sm { padding: 6px 12px; font-size: 12px; } .data-item { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid rgba(255,255,255,0.05); font-size: 14px; } .data-item:first-of-type { border-top: 0; } .data-item .detail { color: var(--txt3); font-size: 12px; } .data-item .st { margin-left: auto; } .secret { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid rgba(255,255,255,0.05); font-size: 14px; } .secret:first-of-type { border-top: 0; } .secret .val { margin-left: auto; color: var(--txt3); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; letter-spacing: 2px; } /* Drill-down extras */ .spark { display: flex; align-items: flex-end; gap: 3px; height: 48px; margin-top: 12px; } .spark > i { flex: 1; background: linear-gradient(180deg, var(--accent), rgba(90,139,224,0.25)); border-radius: 3px 3px 0 0; min-height: 2px; } .logs { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; line-height: 1.7; color: var(--txt2); max-height: 360px; overflow: auto; } .logs .ts { color: var(--txt3); } .logs .err { color: var(--bad); } .log-list { display: grid; gap: 10px; max-height: 680px; overflow: auto; padding-right: 4px; } .log-row { border: 1px solid rgba(255,255,255,0.07); border-radius: 12px; background: rgba(255,255,255,0.025); padding: 12px 14px; } .log-row.warn { border-color: rgba(251,191,36,0.18); background: rgba(251,191,36,0.04); } .log-row.error { border-color: rgba(248,113,113,0.2); background: rgba(248,113,113,0.045); } .log-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; color: var(--txt3); font-size: 12px; margin-bottom: 9px; } .log-row pre { white-space: pre-wrap; overflow-wrap: anywhere; color: var(--txt2); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; line-height: 1.55; } .timeline { display: grid; gap: 11px; } .timeline-row { display: grid; grid-template-columns: 92px 1fr auto; gap: 13px; align-items: start; border: 1px solid rgba(255,255,255,0.07); border-radius: 12px; background: rgba(255,255,255,0.025); padding: 12px 14px; } .timeline-row .type { color: var(--txt3); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.07em; } .timeline-row .title { font-weight: 800; } .timeline-row .detail { color: var(--txt2); font-size: 13px; margin-top: 3px; overflow-wrap: anywhere; } .timeline-row .when { color: var(--txt3); font-size: 12px; white-space: nowrap; } .check-list { display: grid; gap: 10px; } .check { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; padding: 13px 0; border-top: 1px solid rgba(255,255,255,0.05); } .check:first-child { border-top: 0; padding-top: 0; } .check .mark { width: 12px; height: 12px; border-radius: 50%; margin-top: 4px; background: var(--ok); box-shadow: 0 0 0 4px var(--okbg); } .check.warn .mark { background: var(--warn); box-shadow: 0 0 0 4px var(--warnbg); } .check.fail .mark { background: var(--bad); box-shadow: 0 0 0 4px var(--badbg); } .check .name { font-weight: 800; } .check .detail { color: var(--txt2); font-size: 13px; margin-top: 3px; line-height: 1.45; } .port-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } @media (max-width: 880px) { .port-grid { grid-template-columns: 1fr; } } .port-card { border: 1px solid rgba(255,255,255,0.07); border-radius: 12px; background: rgba(255,255,255,0.025); padding: 13px 14px; min-width: 0; } .port-card .top { display: flex; align-items: center; gap: 8px; justify-content: space-between; } .port-card .listen { margin-top: 8px; font-weight: 800; overflow-wrap: anywhere; } .port-card .proc { color: var(--txt3); font-size: 12px; margin-top: 5px; overflow-wrap: anywhere; } .action-runner { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .action-runner select { background: rgba(255,255,255,0.05); border: 1px solid var(--panel-br); border-radius: 10px; padding: 8px 10px; color: var(--txt); font-family: inherit; font-size: 13px; min-width: 150px; } .action-output { margin-top: 12px; white-space: pre-wrap; overflow: auto; max-height: 260px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.07); background: rgba(0,0,0,0.22); padding: 12px; color: var(--txt2); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; line-height: 1.5; } .op-confirm { margin-top: 14px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .op-confirm-input { flex: 0 0 200px; background: rgba(255,255,255,0.05); border: 1px solid var(--panel-br); border-radius: 10px; padding: 8px 12px; color: var(--txt); font-family: inherit; font-size: 14px; } .op-confirm-input:focus { outline: none; border-color: var(--accent); } .note { color: var(--txt3); font-size: 12px; margin-top: 10px; } .row-actions { display: flex; gap: 8px; } .field { display: flex; gap: 8px; margin-top: 12px; } .field input { flex: 1; background: rgba(255,255,255,0.05); border: 1px solid var(--panel-br); border-radius: 10px; padding: 9px 12px; color: var(--txt); font-family: inherit; font-size: 14px; } .field input:focus { outline: none; border-color: var(--accent); } .empty { display: grid; place-items: center; gap: 6px; min-height: 132px; text-align: center; color: var(--txt3); border: 1px dashed rgba(255,255,255,0.12); border-radius: 14px; background: rgba(255,255,255,0.025); padding: 22px; } .empty strong { color: var(--txt); font-size: 14px; } .empty span { max-width: 540px; font-size: 13px; line-height: 1.5; } .empty.compact { min-height: 74px; margin-top: 10px; padding: 14px; } .form-grid { display: grid; grid-template-columns: minmax(180px, 0.7fr) minmax(280px, 1.4fr); gap: 14px; align-items: end; } .field-block { display: flex; flex-direction: column; gap: 7px; } .field-block.wide { grid-column: 1 / -1; } .field-block label, .select-filter span { color: var(--txt3); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.07em; } .field-block input, .field-block textarea, .select-filter select { width: 100%; background: rgba(255,255,255,0.05); border: 1px solid var(--panel-br); border-radius: 10px; padding: 10px 12px; color: var(--txt); font-family: inherit; font-size: 14px; } .field-block textarea { resize: vertical; min-height: 92px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; line-height: 1.5; } .field-block input:focus, .field-block textarea:focus, .select-filter select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(90,139,224,0.12); } .form-actions { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .msg { color: var(--txt3); font-size: 13px; } .msg.ok { color: var(--ok); } .msg.bad { color: var(--bad); } .table-actions { text-align: right; white-space: nowrap; } .filters { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin: 16px 0; } .segmented { display: inline-flex; padding: 4px; border: 1px solid var(--panel-br); background: rgba(255,255,255,0.035); border-radius: 12px; gap: 2px; } .segmented button { appearance: none; border: 0; background: transparent; color: var(--txt2); border-radius: 9px; padding: 7px 12px; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; } .segmented button.active { background: rgba(90,139,224,0.18); color: var(--accent); box-shadow: inset 0 0 0 1px rgba(90,139,224,0.18); } .select-filter { display: inline-flex; align-items: center; gap: 8px; } .select-filter select { min-width: 150px; padding: 8px 10px; } @media (max-width: 760px) { .form-grid { grid-template-columns: 1fr; } .filters { align-items: stretch; } .segmented, .select-filter, .select-filter select { width: 100%; } .segmented button { flex: 1; } } /* Honest action affordance: a copyable CLI command (static dashboard has no backend - the buttons would POST nowhere, so we show the exact command). */ .cmd { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 10px; background: rgba(255,255,255,0.05); border: 1px solid var(--panel-br); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; color: var(--txt); white-space: nowrap; } .cmd::before { content: '$'; color: var(--txt3); } .cmd.accent { border-color: rgba(90,139,224,0.4); color: var(--accent); } .cmds { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } /* Server dashboard components */ .svc { display: flex; flex-wrap: wrap; gap: 10px; } .svc .item { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 10px; background: rgba(255,255,255,0.03); border: 1px solid var(--panel-br); font-size: 13px; font-weight: 500; } .key { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid rgba(255,255,255,0.05); font-size: 14px; } .key:first-of-type { border-top: 0; } .key .fp { margin-left: auto; color: var(--txt3); font-size: 12px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; } .chart-panel { overflow: hidden; } .chart-panel.subtle { padding: 0; margin-bottom: 14px; background: transparent; border: 0; } svg.chart { display: block; width: 100%; height: auto; min-height: 150px; } svg.chart .chart-shell { fill: rgba(255,255,255,0.025); stroke: rgba(255,255,255,0.07); } svg.chart .chart-grid { stroke: rgba(255,255,255,0.08); stroke-width: 1; } svg.chart .chart-axis, svg.chart .chart-label { fill: var(--txt3); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; } svg.chart .chart-value { fill: var(--txt); font-size: 12px; font-weight: 800; } svg.chart .chart-empty-title { fill: var(--txt); font-size: 15px; font-weight: 800; } svg.chart .chart-empty-sub { fill: var(--txt3); font-size: 12px; } svg.chart .bar-mark.ok rect { fill: var(--ok); opacity: 0.85; } svg.chart .bar-mark.warn rect { fill: var(--warn); opacity: 0.88; } svg.chart .bar-mark.bad rect { fill: var(--bad); opacity: 0.9; } svg.chart .spark-path { fill: none; stroke: var(--accent); stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; } svg.chart circle.ok { fill: var(--ok); } svg.chart circle.bad { fill: var(--bad); } svg.chart.disabled { opacity: 0.86; } /* ───────────── Health / vital signs (server metrics) ───────────── */ /* Overall status banner - at-a-glance "is the box OK?" verdict. */ .health-hero { --hue: var(--ok); --huebg: var(--okbg); display: flex; align-items: center; gap: 18px 28px; flex-wrap: wrap; margin-top: 8px; background: radial-gradient(700px 200px at 0% 0%, var(--huebg), transparent 70%), var(--panel); border: 1px solid var(--panel-br); border-radius: 18px; padding: 18px 22px; backdrop-filter: blur(6px); } .health-hero.warn { --hue: var(--warn); --huebg: var(--warnbg); } .health-hero.bad { --hue: var(--bad); --huebg: var(--badbg); } .health-hero .status { display: inline-flex; align-items: center; gap: 12px; font-weight: 800; font-size: 17px; letter-spacing: -0.01em; color: var(--hue); } .health-hero .status .led { width: 13px; height: 13px; border-radius: 50%; background: var(--hue); box-shadow: 0 0 0 4px var(--huebg); animation: hb-pulse 2.4s ease-in-out infinite; } .health-hero .status small { display: block; color: var(--txt3); font-size: 12px; font-weight: 500; margin-top: 2px; letter-spacing: 0; } @keyframes hb-pulse { 0%, 100% { opacity: 1 } 50% { opacity: 0.5 } } .health-hero .hmeta { margin-left: auto; display: flex; flex-wrap: wrap; gap: 22px 26px; color: var(--txt2); font-size: 13px; } .health-hero .hmeta .item { display: flex; flex-direction: column; gap: 2px; } .health-hero .hmeta .item span { color: var(--txt3); font-size: 11px; text-transform: uppercase; letter-spacing: 0.07em; font-weight: 700; } .health-hero .hmeta .item b { color: var(--txt); font-weight: 600; font-size: 14px; } /* Radial gauges - the centerpiece read for CPU / memory / disk. */ .gauges { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 16px; } @media (max-width: 760px) { .gauges { grid-template-columns: 1fr; } } .gauge { --g: var(--ok); --gbg: var(--okbg); background: var(--panel); border: 1px solid var(--panel-br); border-radius: 18px; padding: 20px 20px 18px; backdrop-filter: blur(6px); display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; transition: border-color .15s, transform .15s; } .gauge:hover { border-color: color-mix(in srgb, var(--g) 45%, transparent); transform: translateY(-1px); } .gauge.warn { --g: var(--warn); --gbg: var(--warnbg); } .gauge.bad { --g: var(--bad); --gbg: var(--badbg); } .gauge .ghead { display: flex; align-items: center; gap: 8px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--txt3); font-weight: 700; } .gauge .ghead svg { width: 15px; height: 15px; color: var(--g); } .gauge .ring { position: relative; width: 172px; height: 172px; margin: 6px 0 2px; border-radius: 50%; background: conic-gradient(var(--g) calc(var(--pct) * 1%), rgba(255,255,255,0.07) 0); } .gauge .ring::after { content: ''; position: absolute; inset: 15px; border-radius: 50%; background: linear-gradient(160deg, #10151f, #0c1017); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.035); } .gauge .center { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; } .gauge .pct { font-size: 40px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; } .gauge .pct sup { font-size: 17px; font-weight: 700; color: var(--txt2); margin-left: 1px; top: -0.7em; } .gauge .punit { font-size: 11px; color: var(--txt3); font-weight: 600; margin-top: 7px; text-transform: uppercase; letter-spacing: 0.07em; } .gauge .gsub { color: var(--txt2); font-size: 14px; font-weight: 500; } .gauge .gsub b { color: var(--txt); font-weight: 700; } .gauge .gtag { display: inline-flex; align-items: center; gap: 6px; padding: 3px 11px; border-radius: 999px; background: var(--gbg); color: var(--g); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; } /* Vital-sign tiles - the secondary numbers (free RAM, uptime, etc.). */ .vitals { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } @media (max-width: 880px) { .vitals { grid-template-columns: repeat(2, 1fr); } } .vital { background: var(--panel); border: 1px solid var(--panel-br); border-radius: 14px; padding: 14px 16px; } .vital .vlabel { display: flex; align-items: center; gap: 7px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--txt3); font-weight: 700; } .vital .vlabel svg { width: 13px; height: 13px; } .vital .vval { font-size: 21px; font-weight: 700; margin-top: 7px; letter-spacing: -0.01em; } .vital .vval small { font-size: 12.5px; color: var(--txt2); font-weight: 500; } .vital .vnote { font-size: 12px; color: var(--txt3); margin-top: 3px; } /* Tone-colored progress bars (shared with index health cards). */ .bar.ok > i { background: var(--ok); } .bar.warn > i { background: var(--warn); } .bar.bad > i { background: var(--bad); } /* Load trend chart - sparkline with capacity guide + axis labels. */ .chart { position: relative; } .chart .spark { height: 124px; align-items: flex-end; } .chart .spark > i { background: linear-gradient(180deg, var(--accent), rgba(90,139,224,0.22)); transition: height .6s ease; } .chart .spark > i.hot { background: linear-gradient(180deg, var(--warn), rgba(251,191,36,0.22)); } .chart .spark > i.peak { background: linear-gradient(180deg, var(--bad), rgba(248,113,113,0.25)); } .chart .xaxis { display: flex; justify-content: space-between; margin-top: 9px; color: var(--txt3); font-size: 11px; } .grid > *, .panel, header.page > *, .cols > * { min-width: 0; } @media (max-width: 420px) { .cards, .cards-3, .cards-2, .vitals, .gauges, .cols { grid-template-columns: minmax(0, 1fr); } .stat { max-width: 100%; font-size: 25px; overflow-wrap: anywhere; } .stat small { display: block; margin-top: 5px; letter-spacing: 0; } .header-actions { width: 100%; margin-left: 0; justify-content: flex-end; } .context-breadcrumb { overflow: hidden; } .context-breadcrumb span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .timeline-row { grid-template-columns: 1fr; } .timeline-row .when { white-space: normal; } .field, .action-runner, .op-confirm { align-items: stretch; flex-direction: column; } .field input, .op-confirm-input, .action-runner select { flex: 1 1 auto; width: 100%; min-width: 0; } } </style><style data-stx-cloak>[x-cloak]{display:none !important}</style><style data-crosswind="generated"> /* ! Tailwind CSS Preflight | MIT License | https://tailwindcss.com */ *, ::before, ::after { box-sizing: border-box; border-width: 0; border-style: solid; border-color: var(--border-color, currentColor); } ::before, ::after { --hw-content: ''; } html, :host { line-height: 1.5; -webkit-text-size-adjust: 100%; -moz-tab-size: 4; tab-size: 4; font-family: ui-sans-serif, system-ui, sans-serif; font-feature-settings: normal; font-variation-settings: normal; -webkit-tap-highlight-color: transparent; } body { margin: 0; line-height: inherit; } hr { height: 0; color: inherit; border-top-width: 1px; } abbr:where([title]) { text-decoration: underline dotted; } h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; } a { color: inherit; text-decoration: inherit; } b, strong { font-weight: bolder; } code, kbd, samp, pre { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-feature-settings: normal; font-variation-settings: normal; font-size: 1em; } small { font-size: 80%; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } table { text-indent: 0; border-color: var(--border-color, inherit); border-collapse: collapse; } button, input, optgroup, select, textarea { font-family: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-size: 100%; font-weight: inherit; line-height: inherit; letter-spacing: inherit; color: inherit; margin: 0; padding: 0; } button, select { text-transform: none; } button, input:where([type='button']), input:where([type='reset']), input:where([type='submit']) { -webkit-appearance: button; background-color: transparent; background-image: none; } :-moz-focusring { outline: auto; } :-moz-ui-invalid { box-shadow: none; } progress { vertical-align: baseline; } ::-webkit-inner-spin-button, ::-webkit-outer-spin-button { height: auto; } [type='search'] { -webkit-appearance: textfield; outline-offset: -2px; } ::-webkit-search-decoration { -webkit-appearance: none; } ::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; } summary { display: list-item; } blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre { margin: 0; } fieldset { margin: 0; padding: 0; } legend { padding: 0; } ol, ul, menu { list-style: none; margin: 0; padding: 0; } dialog { padding: 0; } textarea { resize: vertical; } input::placeholder, textarea::placeholder { opacity: 1; color: #9ca3af; } button, [role="button"] { cursor: pointer; } :disabled { cursor: default; } img, svg, video, canvas, audio, iframe, embed, object { display: block; vertical-align: middle; } img, video { max-width: 100%; height: auto; } [hidden] { display: none; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } </style></head><body data-stx-auto><a data-stx-scope="stx_scope_nav_29" class="skip-link" href="#main-content">Skip to content</a><button class="nav-toggle-button" type="button" aria-label="Open navigation" aria-controls="primary-navigation" aria-expanded="false"><span></span><span></span><span></span></button><button class="nav-scrim" type="button" aria-label="Close navigation"></button><aside class="app-sidebar" id="primary-navigation" aria-label="Primary navigation"><a class="brand" href="/?env=production"><span class="dot"></span><span>ts-cloud</span></a><div class="sidebar-context"><span class="context-label">Project</span><strong>stacks-production-app</strong></div><div class="environment-picker" aria-label="Environment"><span class="context-label">Environment</span><details><summary class="environment-current production"><span>PROD</span><strong>production</strong></summary></details></div><button class="command-trigger" type="button" aria-keyshortcuts="Meta+K Control+K"><span>Search resources</span><kbd>⌘ K</kbd></button><div class="nav-groups"><section class="nav-group"><h2>Overview</h2><a class="active" href="/?env=production">Dashboard</a><a href="/server/activity?env=production">Activity</a></section><section class="nav-group"><h2>Applications</h2><a class="" href="/server/sites?env=production">Services</a><a class="" href="/server/deployments?env=production">Deployments</a><a class="" href="/server/logs?env=production">Logs</a><a class="" href="/integrations?env=production">Git integrations</a><a class="" href="/applications/new?env=production">Create application</a><a class="" href="/applications/compose?env=production">Compose applications</a></section><section class="nav-group"><h2>Operations</h2><a class="" href="/operations/queue?env=production">Deployment queue</a><a class="" href="/operations/previews?env=production">Preview environments</a><a class="" href="/operations/releases?env=production">Releases & promotion</a><a class="" href="/operations/regions?env=production">Regions & failover</a><a class="" href="/operations/maintenance?env=production">Maintenance & DR</a><a class="" href="/operations/workloads?env=production">Workloads</a><a class="" href="/operations/observability?env=production">Observability</a><a class="" href="/operations/alerts?env=production">Alerts & health</a><a href="/server/metrics?env=production">Metrics</a><a href="/server/services?env=production">Runtime services</a><a class="" href="/operations/jobs?env=production">Workers & schedules</a><a class="" href="/operations/configuration?env=production">Environment &amp; secrets</a><a class="" href="/data/backups?env=production">Backups &amp; recovery</a><a class="" href="/data/volumes?env=production">Persistent volumes</a><a href="/server/actions?env=production">Run operations</a></section><section class="nav-group"><h2>Infrastructure</h2><a class="" href="/data/services?env=production">Data services</a><a class="" href="/data/volumes?env=production">Persistent volumes</a><a href="/server/firewall?env=production">Network & firewall</a><a href="/server/ssh-keys?env=production">SSH keys</a><a class="" href="/server/fleet?env=production">Fleet inventory</a><a class="" href="/server/capacity?env=production">Capacity & placement</a><a href="/security?env=production">Security posture</a><a href="/server/terminal?env=production">Terminal</a></section><section class="nav-group"><h2>Organization</h2><a class="" href="/server/team?env=production">People & access</a><a class="" href="/account/automation?env=production">API & automation</a></section><section class="nav-group"><h2>Account</h2><a class="" href="/account/security?env=production">Sign-in & security</a></section></div><form method="post" action="/api/logout" class="signout"><button type="submit">Sign out</button></form></aside><dialog class="command-palette" aria-labelledby="command-title"><div class="command-search"><span aria-hidden="true">⌕</span><input type="search" placeholder="Search services, domains, deployments…" aria-label="Search resources" autocomplete="off"><button type="button" class="command-close" aria-label="Close search">Esc</button></div><h2 id="command-title" class="sr-only">Search resources and navigation</h2><div class="command-status" role="status">Start typing to search this project.</div><section class="saved-views" aria-labelledby="saved-views-title"><div class="saved-views-heading"><h3 id="saved-views-title">Saved views</h3><form class="save-view-form"><label class="sr-only" for="save-view-name">Saved view name</label><input id="save-view-name" maxlength="64" placeholder="Name this view" autocomplete="off"><button type="submit">Save current filters</button></form></div><div class="saved-view-list"></div></section><form class="tag-result-form"><label for="tag-result-name">Tag selected resource</label><input id="tag-result-name" maxlength="32" placeholder="customer-facing" pattern="[A-Za-z0-9][A-Za-z0-9 -]{0,31}" autocomplete="off"><input class="tag-color" type="color" value="#5a8be0" aria-label="Tag color"><button type="submit">Add tag</button></form><div class="command-results" role="listbox" aria-label="Search results"></div><footer><span>↑ ↓ navigate</span><span>Enter open</span><span>Esc close</span></footer></dialog><div class="context-bar" aria-label="Current scope"><div class="context-path"><div class="context-breadcrumb"><span>stacks-production-app</span><i>/</i><strong>production</strong></div><div class="context-filters" aria-label="Active filters"></div></div><span class="scope-safety production">Production scope</span></div> <script data-stx-scoped>
106
106
  (function() {
107
107
  var { state, derived, effect, batch, onMount, onDestroy, defineStore, useStore, useFetch, useRef, useQuery, useMutation, useOptimistic, useDebounce, useDebouncedValue, useThrottle, useInterval, useTimeout, useToggle, useCounter, useClickOutside, useFocus, useAsync, useLocalStorage, useSessionStorage, useCookie, useReactiveProp, useEventListener, useWebSocket, useColorMode, useDark, useHead, useSeoMeta, definePageMeta, useRoute, useSearchParams, navigate, goBack, goForward, provide, ref, reactive, computed, watch, watchEffect, defineProps, withDefaults, defineEmits, defineExpose, defineSlots } = window.stx;
108
108
  var __destroyHooks = [];
@@ -445,7 +445,7 @@ else {
445
445
 
446
446
 
447
447
  if (!window.stx._scopes) window.stx._scopes = {};
448
- window.stx._scopes['stx_scope_nav_33'] = { __destroyCallbacks: __destroyHooks };
448
+ window.stx._scopes['stx_scope_nav_29'] = { __destroyCallbacks: __destroyHooks };
449
449
  })();
450
450
  </script> <div class="wrap"><div class="crumbs"><a href="/">Server</a><span class="sep">/</span> Terminal</div><header class="page"><div><h1>Terminal</h1><p>A live shell on the dashboard host. Type a command and press Enter; output streams back.</p></div><div class="header-actions"><span class="pill" :class="statusTone(status())"></span><button id="__stx_evt_0" class="btn ghost sm" type="button">Clear</button><button id="__stx_evt_1" class="btn ghost sm" type="button">Reconnect</button></div></header><div class="section"><div class="panel"><pre data-stx-ref="terminalOutput" id="term-out" class="logs" aria-live="polite" aria-label="Terminal output" style="max-height:520px; white-space:pre-wrap; overflow-wrap:anywhere;"></pre><div class="field" style="margin-top:12px;"><label class="sr-only" for="terminal-command">Command</label><input id="terminal-command" :value="cmd()" placeholder="e.g. systemctl status rpx-gateway, tail -n 50 /var/log/syslog" autocomplete="off" spellcheck="false" style="font-family:ui-monospace, SFMono-Regular, Menlo, monospace;"><button id="__stx_evt_3" class="btn" type="button">Run</button></div><p class="note">The shell runs on the machine serving this dashboard (in box mode, the provisioned server) and is protected by the same Basic auth. It is line-oriented, so full-screen programs like vim or htop are not supported. Disable it with <span class="mono">TS_CLOUD_DASHBOARD_TERMINAL=0</span>.</p></div></div></div> <script data-stx-scoped>
451
451
  (function() {