apexrest 0.4.0-beta.1

package/dist/resources/panel/panel.css

@@ -0,0 +1,805 @@
+:root {
+  color-scheme: dark;
+  --bg: #141616;
+  --surface: #1c1f1f;
+  --surface-2: #242828;
+  --line: #333939;
+  --text: #edf0ed;
+  --muted: #9da6a0;
+  --accent: #c3e6b0;
+  --ink: #152010;
+  --red: #ffaaa1;
+  --blue: #a6c9fa;
+  --yellow: #e5cd89;
+  font-family:
+    Inter,
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    sans-serif;
+  font-size: 14px;
+}
+* {
+  box-sizing: border-box;
+}
+body {
+  margin: 0;
+  background: var(--bg);
+  color: var(--text);
+  display: grid;
+  grid-template-columns: 225px minmax(0, 1fr);
+  min-height: 100vh;
+}
+button,
+input,
+select,
+textarea {
+  font: inherit;
+}
+button {
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background: var(--surface-2);
+  color: var(--text);
+  padding: 10px 14px;
+  cursor: pointer;
+  transition: background 0.15s;
+}
+button:hover {
+  background: var(--line);
+}
+button:disabled {
+  opacity: 0.42;
+  cursor: not-allowed;
+}
+button:focus-visible,
+input:focus-visible,
+select:focus-visible,
+textarea:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 3px;
+}
+.primary {
+  background: var(--accent);
+  color: var(--ink);
+  font-weight: 650;
+  border-color: var(--accent);
+}
+.primary:hover {
+  background: #d5efc7;
+}
+.quiet {
+  background: transparent;
+}
+.danger {
+  color: var(--red);
+}
+input,
+select,
+textarea {
+  width: 100%;
+  background: var(--bg);
+  border: 1px solid var(--line);
+  border-radius: 7px;
+  padding: 10px;
+  color: var(--text);
+}
+textarea {
+  resize: vertical;
+  line-height: 1.55;
+}
+label {
+  display: grid;
+  gap: 8px;
+  color: var(--muted);
+  font-size: 12px;
+  margin: 15px 0;
+}
+h1,
+h2,
+h3,
+p {
+  margin: 0;
+}
+h1 {
+  font-size: 28px;
+  letter-spacing: -0.8px;
+  font-weight: 600;
+  line-height: 1.3;
+}
+h2 {
+  font-size: 19px;
+  font-weight: 600;
+  letter-spacing: -0.35px;
+}
+h3 {
+  font-size: 14px;
+  font-weight: 600;
+}
+p {
+  line-height: 1.6;
+}
+.subtle {
+  font-size: 12px;
+  color: var(--muted);
+  line-height: 1.6;
+}
+.eyebrow {
+  color: var(--muted);
+  font-size: 10px;
+  letter-spacing: 1.6px;
+  font-weight: 650;
+  margin-bottom: 9px;
+}
+.sidebar {
+  padding: 28px 18px 22px;
+  background: var(--surface);
+  border-right: 1px solid var(--line);
+  position: sticky;
+  top: 0;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+.brand {
+  display: flex;
+  align-items: center;
+  gap: 11px;
+  font-weight: 700;
+  letter-spacing: 1.2px;
+  font-size: 15px;
+}
+.brand small {
+  display: block;
+  font-size: 8px;
+  letter-spacing: 2px;
+  color: var(--muted);
+  margin-top: 6px;
+}
+.brand-mark {
+  font-size: 26px;
+  color: var(--accent);
+}
+.project-label {
+  font-size: 9px;
+  letter-spacing: 1.8px;
+  color: var(--muted);
+  margin-top: 43px;
+  margin-bottom: 9px;
+}
+#project-name {
+  font-size: 13px;
+  overflow-wrap: anywhere;
+}
+.path {
+  font-size: 10px;
+  overflow-wrap: anywhere;
+  margin-top: 5px;
+  max-height: 65px;
+  overflow: auto;
+}
+nav {
+  display: grid;
+  gap: 6px;
+  margin-top: 28px;
+}
+nav button {
+  text-align: left;
+  background: transparent;
+  border-color: transparent;
+  font-size: 12px;
+  padding: 12px 10px;
+  display: flex;
+  gap: 13px;
+  align-items: center;
+}
+nav button span {
+  font-size: 18px;
+  width: 20px;
+  color: var(--muted);
+}
+nav button[aria-current='page'] {
+  background: var(--surface-2);
+  border-color: var(--line);
+}
+nav button[aria-current='page'] span {
+  color: var(--accent);
+}
+.sidebar-bottom {
+  margin-top: auto;
+  padding-top: 30px;
+}
+.sidebar-bottom p {
+  margin: 9px 0;
+}
+.sidebar-bottom button {
+  font-size: 11px;
+  padding: 7px 10px;
+}
+main {
+  padding: 32px 34px 18px;
+  max-width: 1600px;
+  min-width: 0;
+}
+header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 20px;
+  margin-bottom: 30px;
+}
+header .subtle {
+  margin-top: 8px;
+}
+.metrics {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 12px;
+  margin-bottom: 26px;
+}
+.metric {
+  padding: 19px 18px;
+  border: 1px solid var(--line);
+  border-radius: 10px;
+  background: var(--surface);
+}
+.metric .value {
+  font-size: 22px;
+  font-weight: 550;
+  margin: 9px 0 4px;
+  letter-spacing: -0.7px;
+}
+.metric .subtle {
+  font-size: 10px;
+}
+.card {
+  border: 1px solid var(--line);
+  border-radius: 11px;
+  padding: 22px;
+  background: var(--surface);
+  margin-bottom: 16px;
+  overflow: hidden;
+}
+.section-heading {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 14px;
+  margin-bottom: 18px;
+}
+.section-heading .subtle {
+  margin-top: 6px;
+}
+.two-columns {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  gap: 16px;
+  align-items: start;
+}
+.connection-group {
+  margin: 18px 0;
+  padding: 18px;
+  min-width: 0;
+  border: 1px solid var(--line);
+  border-radius: 9px;
+  background: var(--bg);
+}
+.connection-group legend {
+  padding: 0 7px;
+  color: var(--text);
+  font-size: 13px;
+  font-weight: 600;
+}
+.connection-picker {
+  display: flex;
+  align-items: flex-end;
+  flex-wrap: wrap;
+  gap: 12px;
+  margin: 15px 0 10px;
+}
+.connection-picker label {
+  flex: 1 1 240px;
+  min-width: 0;
+  margin: 0;
+}
+.connection-picker button {
+  min-height: 39px;
+}
+.connection-storage-note {
+  margin-top: 12px;
+}
+#saved-connections-status[data-state='error'] {
+  color: var(--red);
+}
+.badge {
+  font-size: 10px;
+  letter-spacing: 0.3px;
+  display: inline-block;
+  border-radius: 5px;
+  padding: 5px 8px;
+  border: 1px solid var(--line);
+  color: var(--muted);
+  white-space: nowrap;
+}
+.badge.good {
+  background: #213027;
+  color: var(--accent);
+  border-color: #354638;
+}
+.badge.running {
+  background: #23303c;
+  color: var(--blue);
+  border-color: #354251;
+}
+.badge.bad {
+  background: #382826;
+  color: var(--red);
+  border-color: #533b37;
+}
+.badge.warn {
+  background: #322e24;
+  color: var(--yellow);
+  border-color: #494231;
+}
+.steps {
+  display: flex;
+  margin: 5px 0 15px;
+  gap: 7px;
+}
+.step {
+  flex: 1;
+  padding-top: 12px;
+  border-top: 3px solid var(--line);
+  font-size: 10px;
+  color: var(--muted);
+  line-height: 1.5;
+}
+.step.done {
+  border-color: var(--accent);
+}
+.step.active {
+  border-color: var(--blue);
+  color: var(--text);
+}
+.agents {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
+  gap: 12px;
+}
+.agent {
+  background: var(--bg);
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  padding: 16px;
+  min-width: 0;
+}
+.agent-title {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 18px;
+}
+.role-icon {
+  display: inline-grid;
+  place-items: center;
+  width: 28px;
+  height: 28px;
+  border: 1px solid var(--line);
+  border-radius: 50%;
+  font-size: 11px;
+  color: var(--accent);
+  margin-right: 8px;
+}
+.agent-action {
+  font-size: 12px;
+  line-height: 1.6;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  min-height: 40px;
+  margin: 13px 0;
+}
+.agent-meta {
+  font-size: 10px;
+  color: var(--muted);
+  display: grid;
+  gap: 5px;
+  overflow-wrap: anywhere;
+}
+.empty {
+  padding: 27px 12px;
+  color: var(--muted);
+  text-align: center;
+  line-height: 1.8;
+  font-size: 13px;
+}
+.kv {
+  display: grid;
+  grid-template-columns: minmax(95px, 1fr) minmax(0, 2fr);
+  gap: 12px;
+  padding: 12px 0;
+  border-bottom: 1px solid var(--line);
+  font-size: 12px;
+}
+.kv:last-child {
+  border-bottom: 0;
+}
+.kv dt {
+  color: var(--muted);
+}
+.kv dd {
+  margin: 0;
+  overflow-wrap: anywhere;
+}
+dl {
+  margin: 0;
+}
+.activity {
+  border-left: 1px solid var(--line);
+  padding: 0 0 18px 18px;
+  margin-left: 5px;
+  position: relative;
+}
+.activity:before {
+  content: '';
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: var(--muted);
+  position: absolute;
+  left: -4px;
+  top: 5px;
+}
+.activity .subtle {
+  font-size: 10px;
+}
+.activity p {
+  font-size: 12px;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  margin-top: 6px;
+}
+.activity:last-child {
+  padding-bottom: 0;
+}
+.review {
+  padding: 15px 0;
+  border-bottom: 1px solid var(--line);
+}
+.review:last-child {
+  border: 0;
+}
+.review p {
+  font-size: 12px;
+  margin-top: 9px;
+  white-space: pre-wrap;
+}
+.review ul {
+  font-size: 12px;
+  padding-left: 18px;
+  line-height: 1.7;
+  color: var(--muted);
+}
+.table-wrap {
+  overflow: auto;
+}
+table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 12px;
+  text-align: left;
+}
+th {
+  color: var(--muted);
+  font-weight: 500;
+  font-size: 10px;
+  letter-spacing: 0.4px;
+}
+td,
+th {
+  padding: 13px 10px;
+  border-bottom: 1px solid var(--line);
+  vertical-align: top;
+}
+td:first-child,
+th:first-child {
+  padding-left: 0;
+}
+td button {
+  font-size: 10px;
+  padding: 5px 8px;
+}
+td p {
+  font-size: 11px;
+  max-width: 400px;
+  white-space: pre-wrap;
+}
+.actions {
+  display: flex;
+  gap: 12px;
+  align-items: flex-end;
+  flex-wrap: wrap;
+  margin: 10px 0 18px;
+}
+.actions label {
+  flex: 1;
+  min-width: 135px;
+  margin: 0;
+}
+.actions button {
+  min-height: 39px;
+}
+.form-footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 12px;
+  flex-wrap: wrap;
+  margin-top: 15px;
+}
+.form-footer p {
+  flex: 1;
+  min-width: 180px;
+}
+.inline-label {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  margin: 0;
+  max-width: 360px;
+}
+.inline-label select {
+  max-width: 290px;
+}
+.notice {
+  padding: 13px 16px;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  margin-bottom: 18px;
+  font-size: 12px;
+  line-height: 1.6;
+  background: var(--surface-2);
+}
+.notice.error {
+  color: var(--red);
+  border-color: #61403b;
+}
+pre {
+  font:
+    11px/1.65 ui-monospace,
+    SFMono-Regular,
+    Menlo,
+    monospace;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  color: var(--muted);
+  max-height: 360px;
+  overflow: auto;
+}
+details {
+  margin-top: 18px;
+}
+summary {
+  cursor: pointer;
+  font-size: 12px;
+  color: var(--muted);
+  padding: 8px 0;
+}
+footer {
+  margin-top: 30px;
+  border-top: 1px solid var(--line);
+  padding-top: 16px;
+  display: flex;
+  gap: 5px;
+  font-size: 9px;
+  letter-spacing: 0.6px;
+  color: var(--muted);
+}
+footer span:last-child {
+  margin-left: auto;
+}
+dialog {
+  border: 1px solid var(--line);
+  background: var(--surface);
+  color: var(--text);
+  border-radius: 14px;
+  padding: 25px;
+  width: min(650px, calc(100vw - 36px));
+  box-shadow: 0 20px 90px #0008;
+}
+dialog::backdrop {
+  background: #0008;
+  backdrop-filter: blur(3px);
+}
+dialog .primary {
+  margin-top: 17px;
+}
+body[data-disconnected='true'] main {
+  opacity: 0.78;
+}
+[hidden] {
+  display: none !important;
+}
+@media (max-width: 1000px) {
+  body {
+    grid-template-columns: 180px minmax(0, 1fr);
+  }
+  main {
+    padding: 24px 20px;
+  }
+  .sidebar {
+    padding: 23px 13px;
+  }
+  .two-columns {
+    grid-template-columns: 1fr;
+  }
+  .metrics {
+    gap: 8px;
+  }
+  .metric {
+    padding: 13px;
+  }
+  .metric .value {
+    font-size: 19px;
+  }
+  .agents {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+@media (max-width: 650px) {
+  body {
+    display: block;
+  }
+  .sidebar {
+    height: auto;
+    position: static;
+    border-right: 0;
+    border-bottom: 1px solid var(--line);
+    padding: 16px;
+  }
+  .brand {
+    font-size: 12px;
+  }
+  .brand small,
+  .brand-mark,
+  .project-label,
+  .path,
+  .sidebar-bottom,
+  #project-name {
+    display: none;
+  }
+  nav {
+    display: flex;
+    margin-top: 15px;
+    gap: 3px;
+  }
+  nav button {
+    flex: 1;
+    padding: 9px 4px;
+    font-size: 10px;
+    display: block;
+    text-align: center;
+  }
+  nav button span {
+    display: none;
+  }
+  main {
+    padding: 20px 14px;
+  }
+  header {
+    align-items: flex-start;
+    margin-bottom: 20px;
+  }
+  h1 {
+    font-size: 22px;
+  }
+  header button {
+    font-size: 10px;
+    padding: 9px;
+    white-space: nowrap;
+  }
+  .metrics {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  .card {
+    padding: 17px;
+  }
+  .steps {
+    flex-wrap: wrap;
+  }
+  .step {
+    flex-basis: 28%;
+  }
+  .agents {
+    grid-template-columns: 1fr;
+  }
+  .section-heading {
+    align-items: flex-start;
+    flex-wrap: wrap;
+  }
+  .form-footer {
+    justify-content: flex-start;
+  }
+  footer {
+    font-size: 8px;
+    line-height: 1.6;
+    flex-wrap: wrap;
+  }
+}
+@media (prefers-color-scheme: light) {
+  :root {
+    color-scheme: light;
+    --bg: #f5f6f2;
+    --surface: #fff;
+    --surface-2: #f0f2ed;
+    --line: #dfe4db;
+    --text: #1e271e;
+    --muted: #687365;
+    --accent: #d0e4b7;
+    --ink: #17320d;
+    --red: #a83429;
+    --blue: #33669c;
+    --yellow: #876b1c;
+  }
+  .badge.good {
+    background: #edf5e5;
+    color: #34572a;
+    border-color: #d8e8ca;
+  }
+  .badge.running {
+    background: #edf4fb;
+    color: #33669c;
+    border-color: #d8e7f5;
+  }
+  .badge.bad {
+    background: #fff0ed;
+    color: #a83429;
+    border-color: #f1d6d0;
+  }
+  .badge.warn {
+    background: #fff8e3;
+    color: #876b1c;
+    border-color: #eee2b5;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  * {
+    transition: none !important;
+    scroll-behavior: auto !important;
+  }
+}
+.avatar {
+  width: 64px;
+  height: 64px;
+  object-fit: contain;
+  image-rendering: pixelated;
+  flex-shrink: 0;
+}
+.agent-title {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+.agent-title h3 {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 4px;
+}
+.agent-title small {
+  font-size: 11px;
+  font-weight: 500;
+}
+.brand-mark img {
+  display: block;
+}
+.task-summary {
+  font-size: 13px;
+  line-height: 1.6;
+  white-space: pre-wrap;
+  border-left: 2px solid var(--accent);
+  padding-left: 14px;
+  margin: 0 0 22px;
+  max-height: 150px;
+  overflow: auto;
+}