@moondeck/station 0.0.0-stage → 1.0.0

package/ui/style.css

@@ -0,0 +1,685 @@
+/* Local host UI (ADR-028). Design tokens borrowed from the marketing site:
+   warm off-white, dark via prefers-color-scheme, system fonts, quiet UI. */
+
+:root {
+  --bg: #fafaf9;
+  --fg: #18181b;
+  --fg-muted: #5f5f66;
+  --line: #e7e5e4;
+  --tint: #f4f4f2;
+  --accent: #18181b;
+  --accent-fg: #fafaf9;
+  --ok: #15803d;
+  --warn: #b45309;
+  --bad: #b91c1c;
+  --radius: 10px;
+  --maxw: 56rem;
+  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
+    "Helvetica Neue", Arial, "Noto Sans", sans-serif;
+  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bg: #0e0e10;
+    --fg: #f5f5f4;
+    --fg-muted: #a1a1aa;
+    --line: #27272a;
+    --tint: #19191c;
+    --accent: #f5f5f4;
+    --accent-fg: #0e0e10;
+    --ok: #4ade80;
+    --warn: #fbbf24;
+    --bad: #f87171;
+  }
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html {
+  color-scheme: light dark;
+}
+
+body {
+  margin: 0;
+  background: var(--bg);
+  color: var(--fg);
+  font-family: var(--font);
+  font-size: 15px;
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+}
+
+main {
+  max-width: var(--maxw);
+  margin: 0 auto;
+  padding: clamp(1.25rem, 4vw, 3rem) clamp(1rem, 4vw, 2rem) 4rem;
+}
+
+code,
+.mono {
+  font-family: var(--mono);
+  font-size: 0.92em;
+}
+
+/* --- header --------------------------------------------------------------- */
+
+.topbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  padding-bottom: 1.5rem;
+  margin-bottom: 0.5rem;
+  border-bottom: 1px solid var(--line);
+  flex-wrap: wrap;
+}
+
+.brand {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.logo {
+  height: 30px;
+  width: auto;
+}
+
+@media (prefers-color-scheme: dark) {
+  .logo {
+    filter: invert(1);
+  }
+}
+
+.host-name {
+  font-weight: 600;
+  font-size: 1.05rem;
+}
+
+.host-sub {
+  color: var(--fg-muted);
+  font-size: 0.82rem;
+}
+
+/* --- connection badge ----------------------------------------------------- */
+
+.badge-wrap {
+  position: relative;
+}
+
+.badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.4rem 0.75rem;
+  border: 1px solid var(--line);
+  border-radius: 999px;
+  background: var(--tint);
+  color: var(--fg);
+  font: inherit;
+  font-size: 0.85rem;
+  cursor: pointer;
+}
+
+.dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 999px;
+  background: var(--fg-muted);
+}
+
+.dot.ok {
+  background: var(--ok);
+}
+.dot.warn {
+  background: var(--warn);
+}
+.dot.bad {
+  background: var(--bad);
+}
+
+.badge-detail {
+  position: absolute;
+  right: 0;
+  top: calc(100% + 0.4rem);
+  z-index: 10;
+  min-width: 16rem;
+  padding: 0.75rem 0.9rem;
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  background: var(--bg);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+  font-size: 0.85rem;
+}
+
+.badge-detail .row {
+  display: flex;
+  justify-content: space-between;
+  gap: 1rem;
+}
+
+.badge-detail .err {
+  margin-top: 0.4rem;
+  color: var(--bad);
+  word-break: break-word;
+}
+
+/* --- panels --------------------------------------------------------------- */
+
+.panel {
+  margin-top: 2rem;
+}
+
+.panel h2 {
+  font-size: 0.78rem;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--fg-muted);
+  font-weight: 600;
+  margin: 0 0 0.75rem;
+}
+
+.count {
+  color: var(--fg-muted);
+  font-weight: 400;
+}
+
+.empty {
+  color: var(--fg-muted);
+  font-size: 0.9rem;
+  margin: 0.25rem 0;
+}
+
+/* --- service key/value ---------------------------------------------------- */
+
+.kv {
+  display: grid;
+  grid-template-columns: max-content 1fr;
+  gap: 0.35rem 1.25rem;
+  margin: 0;
+}
+
+.kv dt {
+  color: var(--fg-muted);
+  font-size: 0.85rem;
+}
+
+.kv dd {
+  margin: 0;
+  font-family: var(--mono);
+  font-size: 0.85rem;
+  word-break: break-all;
+}
+
+/* --- tasks ---------------------------------------------------------------- */
+
+.task {
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  margin-bottom: 0.6rem;
+  overflow: hidden;
+}
+
+.task-head {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.7rem 0.9rem;
+  cursor: pointer;
+}
+
+.task-head:hover {
+  background: var(--tint);
+}
+
+.task-main {
+  flex: 1;
+  min-width: 0;
+}
+
+.task-title {
+  display: flex;
+  align-items: baseline;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+
+.task-owner {
+  font-weight: 600;
+}
+
+.slug {
+  display: inline-block;
+  font-family: var(--mono);
+  font-size: 0.78rem;
+  color: var(--fg-muted);
+  background: var(--tint);
+  border: 1px solid var(--line);
+  border-radius: 6px;
+  padding: 0 0.35rem;
+  margin-right: 0.25rem;
+}
+
+.task-meta {
+  color: var(--fg-muted);
+  font-size: 0.82rem;
+  margin-top: 0.2rem;
+}
+
+.task-status {
+  font-size: 0.78rem;
+  color: var(--fg-muted);
+}
+
+.task-id {
+  font-family: var(--mono);
+  font-size: 0.72rem;
+  color: var(--fg-muted);
+}
+
+.task-stop {
+  flex: none;
+  font-size: 0.85rem;
+  opacity: 0;
+  transition: opacity 0.12s ease;
+}
+/* Reveal Stop on row hover; keep it visible mid-action so it doesn't vanish. */
+.task-head:hover .task-stop,
+.task-stop:disabled {
+  opacity: 1;
+}
+
+.chev {
+  color: var(--fg-muted);
+  transition: transform 0.15s ease;
+}
+
+.task.open .chev {
+  transform: rotate(90deg);
+}
+
+.task-events {
+  border-top: 1px solid var(--line);
+  background: var(--tint);
+  padding: 0.5rem 0.9rem 0.7rem;
+}
+
+.task-events ol {
+  margin: 0;
+  padding-left: 1.1rem;
+}
+
+/* --- events --------------------------------------------------------------- */
+
+.events {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.events li:not(.empty) {
+  display: flex;
+  align-items: baseline;
+  gap: 0.75rem;
+  padding: 0.4rem 0;
+  border-bottom: 1px solid var(--line);
+  font-size: 0.88rem;
+}
+
+.ev-kind {
+  font-family: var(--mono);
+  font-size: 0.8rem;
+}
+
+.ev-kind.created {
+  color: var(--fg-muted);
+}
+.ev-kind.started {
+  color: var(--ok);
+}
+.ev-kind.ended {
+  color: var(--fg-muted);
+}
+.ev-kind.ship {
+  color: var(--warn);
+}
+
+.ev-time {
+  color: var(--fg-muted);
+  font-size: 0.8rem;
+  white-space: nowrap;
+}
+
+.ev-task {
+  font-family: var(--mono);
+  font-size: 0.78rem;
+  color: var(--fg-muted);
+  margin-left: auto;
+}
+
+/* --- engines --------------------------------------------------------------- */
+
+.panel h2 .add-engine {
+  float: right;
+  text-transform: none;
+  letter-spacing: 0;
+}
+
+.engines {
+  display: flex;
+  flex-direction: column;
+  gap: 0.6rem;
+}
+
+.engine-card {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  padding: 0.6rem 0.9rem;
+}
+
+/* ADR-076: accounts sub-panel spans the full card width below the head/actions. */
+.engine-accounts {
+  flex-basis: 100%;
+  border-top: 1px solid var(--line);
+  padding-top: 0.5rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+}
+
+.engine-account-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  font-size: 0.88rem;
+}
+
+.engine-head {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  flex: 1;
+  min-width: 0;
+}
+
+.engine-mono {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  flex: none;
+  border-radius: 8px;
+  background: var(--accent);
+  color: var(--accent-fg);
+  font-weight: 600;
+  font-size: 0.9rem;
+}
+
+.engine-meta {
+  min-width: 0;
+}
+
+.engine-name {
+  font-weight: 600;
+}
+
+.engine-sub {
+  color: var(--fg-muted);
+  font-size: 0.82rem;
+}
+
+.engine-sub.ok {
+  color: var(--ok);
+}
+
+/* --- buttons --------------------------------------------------------------- */
+
+.btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  padding: 0.45rem 0.9rem;
+  border: 1px solid var(--accent);
+  border-radius: 8px;
+  background: var(--accent);
+  color: var(--accent-fg);
+  font: inherit;
+  font-size: 0.88rem;
+  cursor: pointer;
+}
+
+.btn:disabled {
+  opacity: 0.6;
+  cursor: default;
+}
+
+.link-btn {
+  border: none;
+  background: none;
+  padding: 0;
+  color: var(--fg-muted);
+  font: inherit;
+  font-size: 0.85rem;
+  cursor: pointer;
+  text-decoration: none;
+}
+
+.link-btn:hover {
+  color: var(--fg);
+  text-decoration: underline;
+}
+
+.link-btn.danger:hover {
+  color: var(--bad);
+}
+
+/* --- modal ----------------------------------------------------------------- */
+
+.modal-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 50;
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  padding: 8vh 1rem 1rem;
+  background: rgba(0, 0, 0, 0.4);
+}
+
+.modal-backdrop[hidden] {
+  display: none;
+}
+
+.modal {
+  width: 100%;
+  max-width: 32rem;
+  background: var(--bg);
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.28);
+  overflow: hidden;
+}
+
+.modal-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  padding: 0.9rem 1.1rem;
+  border-bottom: 1px solid var(--line);
+}
+
+.modal-head h3 {
+  margin: 0;
+  font-size: 1rem;
+}
+
+.modal-close {
+  border: none;
+  background: none;
+  color: var(--fg-muted);
+  font-size: 1.4rem;
+  line-height: 1;
+  cursor: pointer;
+}
+
+.modal-close:hover {
+  color: var(--fg);
+}
+
+.modal-body {
+  padding: 1.1rem;
+}
+
+/* --- engine picker + setup ------------------------------------------------- */
+
+.engine-picker {
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+}
+
+.engine-pick {
+  display: flex;
+  align-items: center;
+  gap: 0.7rem;
+  width: 100%;
+  text-align: left;
+  padding: 0.6rem 0.75rem;
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  background: var(--bg);
+  color: var(--fg);
+  font: inherit;
+  cursor: pointer;
+}
+
+.engine-pick:hover {
+  background: var(--tint);
+}
+
+.engine-pick .chev {
+  margin-left: auto;
+}
+
+.engine-setup {
+  display: flex;
+  flex-direction: column;
+  gap: 0.7rem;
+}
+
+.setup-note {
+  margin: 0;
+  color: var(--fg-muted);
+  font-size: 0.88rem;
+}
+
+.field {
+  display: flex;
+}
+
+.text-input {
+  width: 100%;
+  padding: 0.5rem 0.7rem;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background: var(--bg);
+  color: var(--fg);
+  font: inherit;
+  font-family: var(--mono);
+  font-size: 0.88rem;
+}
+
+.text-input:focus {
+  outline: none;
+  border-color: var(--fg-muted);
+}
+
+/* Add-account token field: long secrets must be fully visible (no truncation)
+   and wrap so a bad paste is obvious before saving. */
+textarea.token-area {
+  resize: vertical;
+  min-height: 3.2rem;
+  line-height: 1.35;
+  word-break: break-all;
+  white-space: pre-wrap;
+}
+
+/* Copyable command row (e.g. `claude setup-token`) + Copy button. */
+.copy-row {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+}
+
+.copy-cmd {
+  flex: 1;
+  padding: 0.45rem 0.7rem;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background: var(--bg);
+  color: var(--fg);
+  font-family: var(--mono);
+  font-size: 0.85rem;
+  word-break: break-all;
+}
+
+.setup-or {
+  margin-top: 0.4rem;
+}
+
+.setup-actions {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.setup-status {
+  font-size: 0.85rem;
+  color: var(--fg-muted);
+  min-height: 1.1rem;
+}
+
+.setup-status.err {
+  color: var(--bad);
+}
+
+.log {
+  margin: 0;
+  max-height: 14rem;
+  overflow: auto;
+  padding: 0.6rem 0.75rem;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background: var(--tint);
+  color: var(--fg-muted);
+  font-family: var(--mono);
+  font-size: 0.78rem;
+  line-height: 1.45;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.back {
+  margin-top: 0.3rem;
+  align-self: flex-start;
+}
+
+/* --- footer --------------------------------------------------------------- */
+
+.foot {
+  margin-top: 3rem;
+  padding-top: 1rem;
+  border-top: 1px solid var(--line);
+  color: var(--fg-muted);
+  font-size: 0.78rem;
+}

package/ui/uai-favicon.svg

@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 341.02 341.02">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #231f20;
+      }
+
+      .cls-2 {
+        fill: #fff;
+      }
+    </style>
+  </defs>
+  <g id="Layer_1-2" data-name="Layer 1">
+    <rect class="cls-1" x="0" width="341.02" height="341.02"/>
+    <g>
+      <path class="cls-2" d="M170.51,43.13c-70.35,0-127.37,57.03-127.37,127.37s57.03,127.37,127.37,127.37,127.37-57.03,127.37-127.37-57.03-127.37-127.37-127.37ZM170.51,269.54c-54.69,0-99.03-44.34-99.03-99.03s44.34-99.03,99.03-99.03,99.03,44.34,99.03,99.03-44.34,99.03-99.03,99.03Z"/>
+      <path class="cls-2" d="M170.59,99.55c-4.31,0-8.53.4-12.63,1.14l-53.93,95.15c3.15,8.33,7.81,15.91,13.65,22.41h105.8c5.74-6.39,10.34-13.82,13.48-21.98l-54.22-95.67c-3.96-.68-8.02-1.06-12.17-1.06ZM194.08,169.79c0,13.02-10.55,23.57-23.57,23.57s-23.57-10.55-23.57-23.57,10.55-23.57,23.57-23.57,23.57,10.55,23.57,23.57Z"/>
+    </g>
+  </g>
+</svg>

package/ui/uai-logo-black.svg

@@ -0,0 +1,9 @@
+<svg width="250" height="148" viewBox="0 0 250 148" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M100.415 69.076C100.415 93.25 81.6825 112.847 58.5752 112.847H41.8394C18.7322 112.847 0 93.25 0 69.076V3.38385e-07H29.2876V68.3921C29.2876 80.4791 38.6537 90.2775 50.2073 90.2775C61.761 90.2775 71.127 80.4791 71.127 68.3921V3.38385e-07H100.415V69.076Z" fill="black"/>
+<path d="M112.847 64.6305C112.847 47.4219 126.762 33.4715 143.928 33.4715H156.36C173.525 33.4716 187.441 47.4219 187.441 64.6305V113.803H165.684V65.1174C165.684 56.5131 158.726 49.5379 150.144 49.5379C141.561 49.5379 134.603 56.5131 134.603 65.1174V113.803H112.847V64.6305Z" fill="black"/>
+<path d="M197.96 38.2532H219.956V113.803H197.96V38.2532Z" fill="black"/>
+<path d="M233.344 8.1288C233.344 3.63939 236.984 3.38385e-07 241.473 3.38385e-07C245.963 3.38385e-07 249.602 3.63939 249.602 8.1288V139.146C249.602 143.635 245.963 147.275 241.473 147.275C236.984 147.275 233.344 143.635 233.344 139.146V8.1288Z" fill="black"/>
+<path d="M112.847 16.2576V5.81055e-06L245.777 0V16.2576L112.847 16.2576Z" fill="black"/>
+<path d="M115.716 90.8513V74.5937L182.659 74.5937V90.8513H115.716Z" fill="black"/>
+<path d="M2.86899 147.275L2.86899 131.017L249.602 131.017V147.275L2.86899 147.275Z" fill="black"/>
+</svg>

package/ui/uai-wheel.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Uai "wheel" mark (brand 8a5db40). Dark fill on transparent bg so the
+     header's dark-mode `filter: invert(1)` renders it white on dark. -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 341.02 341.02">
+  <g fill="#231f20">
+    <path d="M170.51,43.13c-70.35,0-127.37,57.03-127.37,127.37s57.03,127.37,127.37,127.37,127.37-57.03,127.37-127.37-57.03-127.37-127.37-127.37ZM170.51,269.54c-54.69,0-99.03-44.34-99.03-99.03s44.34-99.03,99.03-99.03,99.03,44.34,99.03,99.03-44.34,99.03-99.03,99.03Z"/>
+    <path d="M170.59,99.55c-4.31,0-8.53.4-12.63,1.14l-53.93,95.15c3.15,8.33,7.81,15.91,13.65,22.41h105.8c5.74-6.39,10.34-13.82,13.48-21.98l-54.22-95.67c-3.96-.68-8.02-1.06-12.17-1.06ZM194.08,169.79c0,13.02-10.55,23.57-23.57,23.57s-23.57-10.55-23.57-23.57,10.55-23.57,23.57-23.57,23.57,10.55,23.57,23.57Z"/>
+  </g>
+</svg>