omnilane 0.7.0

package/ui/styles.css

@@ -0,0 +1,1023 @@
+:root {
+  --ink: #17212b;
+  --muted: #52606d;
+  --quiet: #6b7280;
+  --canvas: #f3f4f5;
+  --paper: #ffffff;
+  --line: #d2d7dc;
+  --line-strong: #9aa5af;
+  --selection: #e8f1f9;
+  --accent: #1f5f99;
+  --good: #17633a;
+  --warn: #8a4b08;
+  --fault: #b42318;
+  --reading: "Avenir Next", "Segoe UI", system-ui, sans-serif;
+  --data: SFMono-Regular, Menlo, Consolas, monospace;
+  --header-height: 54px;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  width: 100%;
+  height: 100%;
+  min-width: 320px;
+  margin: 0;
+  overflow: hidden;
+}
+
+html {
+  background: var(--canvas);
+}
+
+body {
+  color: var(--ink);
+  background: var(--canvas);
+  font-family: var(--reading);
+  font-size: 15px;
+  line-height: 1.5;
+}
+
+button,
+input,
+select,
+summary {
+  color: inherit;
+  font: inherit;
+}
+
+button,
+summary {
+  cursor: pointer;
+}
+
+button:focus-visible,
+input:focus-visible,
+select:focus-visible,
+summary:focus-visible,
+[tabindex="0"]:focus-visible {
+  outline: 3px solid var(--accent);
+  outline-offset: 2px;
+}
+
+[hidden] {
+  display: none !important;
+}
+
+.board-frame {
+  height: 100dvh;
+  overflow: hidden;
+  background: var(--paper);
+}
+
+.board-header {
+  height: var(--header-height);
+  min-height: var(--header-height);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-bottom: 1px solid var(--line-strong);
+  background: var(--paper);
+}
+
+.board-identity {
+  min-width: 0;
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  padding: 0 18px;
+  white-space: nowrap;
+}
+
+.board-identity strong {
+  font-size: 15px;
+  font-weight: 700;
+  letter-spacing: -0.01em;
+}
+
+.board-identity span {
+  color: var(--muted);
+  font-size: 13px;
+}
+
+.board-readouts {
+  height: 100%;
+  display: flex;
+  align-items: center;
+}
+
+.read-only-tag,
+.job-count,
+.connection-status {
+  height: 100%;
+  margin: 0;
+  display: flex;
+  align-items: center;
+  border-left: 1px solid var(--line);
+  padding: 0 14px;
+  color: var(--muted);
+  font-size: 12px;
+  white-space: nowrap;
+}
+
+.read-only-tag {
+  font-weight: 650;
+}
+
+.job-count {
+  min-width: 76px;
+  justify-content: center;
+  font-family: var(--data);
+  font-size: 11px;
+}
+
+.connection-status {
+  min-width: 172px;
+  gap: 8px;
+}
+
+.connection-lamp {
+  width: 8px;
+  height: 8px;
+  flex: 0 0 auto;
+  border-radius: 50%;
+  background: var(--quiet);
+}
+
+.connection-status[data-mode="live"] .connection-lamp {
+  background: var(--good);
+}
+
+.connection-status[data-mode="waiting"] .connection-lamp,
+.connection-status[data-mode="reconnecting"] .connection-lamp {
+  background: var(--warn);
+}
+
+.connection-status[data-mode="unauthorized"] .connection-lamp {
+  background: var(--fault);
+}
+
+.board-layout {
+  height: calc(100dvh - var(--header-height));
+  min-height: 0;
+  display: grid;
+  grid-template-columns: clamp(320px, 26vw, 400px) minmax(0, 1fr);
+  overflow: hidden;
+}
+
+.dispatch-index {
+  min-width: 0;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  border-right: 1px solid var(--line-strong);
+  background: var(--canvas);
+}
+
+.index-heading {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  min-height: 72px;
+  padding: 14px 18px 12px;
+  border-bottom: 1px solid var(--line);
+}
+
+.section-label,
+.state-code {
+  margin: 0 0 3px;
+  color: var(--muted);
+  font-size: 12px;
+  font-weight: 650;
+}
+
+.index-heading h1,
+.section-heading h3,
+.inspector-state h2 {
+  margin: 0;
+  font-weight: 650;
+  letter-spacing: -0.02em;
+  line-height: 1.2;
+}
+
+.index-heading h1 {
+  font-size: 20px;
+}
+
+.queue-controls {
+  flex: 0 0 auto;
+  padding: 12px 14px 14px;
+  border-bottom: 1px solid var(--line);
+}
+
+.search-control {
+  display: grid;
+  gap: 5px;
+  color: var(--muted);
+  font-size: 12px;
+  font-weight: 650;
+}
+
+.search-control input {
+  width: 100%;
+  min-height: 44px;
+  border: 1px solid var(--line-strong);
+  border-radius: 5px;
+  padding: 9px 11px;
+  color: var(--ink);
+  background: var(--paper);
+  font-size: 14px;
+}
+
+.search-control input::placeholder {
+  color: var(--quiet);
+  opacity: 1;
+}
+
+.status-filter {
+  margin: 10px 0 0;
+  padding: 0;
+  border: 0;
+}
+
+.status-filter legend {
+  margin-bottom: 5px;
+  color: var(--muted);
+  font-size: 12px;
+  font-weight: 650;
+}
+
+.filter-options {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  border: 1px solid var(--line-strong);
+  border-radius: 5px;
+  overflow: hidden;
+  background: var(--paper);
+}
+
+.filter-button {
+  min-width: 0;
+  min-height: 44px;
+  border: 0;
+  border-right: 1px solid var(--line);
+  padding: 7px 4px;
+  background: transparent;
+  font-size: 12px;
+}
+
+.filter-button:last-child {
+  border-right: 0;
+}
+
+.filter-button:hover {
+  background: #edf0f2;
+}
+
+.filter-button.is-active {
+  color: #ffffff;
+  background: var(--ink);
+}
+
+.filter-button:disabled,
+.search-control input:disabled {
+  cursor: not-allowed;
+  opacity: 0.58;
+}
+
+.job-list {
+  min-height: 0;
+  flex: 1 1 auto;
+  margin: 0;
+  padding: 0;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  list-style: none;
+  scrollbar-gutter: stable;
+}
+
+.job-list li {
+  margin: 0;
+}
+
+.job-card {
+  position: relative;
+  width: 100%;
+  min-height: 80px;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 4px 12px;
+  border: 0;
+  border-bottom: 1px solid var(--line);
+  padding: 12px 14px 11px 18px;
+  text-align: left;
+  background: transparent;
+}
+
+.job-card::before {
+  content: "";
+  position: absolute;
+  inset: 0 auto 0 0;
+  width: 3px;
+  background: transparent;
+}
+
+.job-card:hover {
+  background: #eceff1;
+}
+
+.job-card.is-selected {
+  background: var(--selection);
+}
+
+.job-card.is-selected::before {
+  background: var(--accent);
+}
+
+.card-task {
+  min-width: 0;
+  overflow: hidden;
+  font-size: 14px;
+  font-weight: 650;
+  line-height: 1.35;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.card-job-id,
+.card-route {
+  min-width: 0;
+  overflow: hidden;
+  color: var(--muted);
+  font-family: var(--data);
+  font-size: 10.5px;
+  line-height: 1.35;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.card-route {
+  grid-column: 1;
+}
+
+.card-state {
+  grid-row: 1 / span 3;
+  grid-column: 2;
+  align-self: start;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding-top: 2px;
+  color: var(--muted);
+  font-family: var(--data);
+  font-size: 10px;
+}
+
+.card-state::before {
+  content: "";
+  width: 7px;
+  height: 7px;
+  flex: 0 0 auto;
+  border-radius: 50%;
+  background: var(--quiet);
+}
+
+.state-running::before,
+.state-starting::before {
+  background: var(--warn);
+}
+
+.state-succeeded::before {
+  background: var(--good);
+}
+
+.state-failed::before,
+.state-dead::before,
+.state-invalid::before {
+  background: var(--fault);
+}
+
+.list-message {
+  flex: 0 0 auto;
+  margin: 0;
+  padding: 18px;
+  color: var(--muted);
+  font-size: 13px;
+}
+
+.job-inspector {
+  min-width: 0;
+  min-height: 0;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  scrollbar-gutter: stable;
+  background: var(--paper);
+}
+
+.mobile-back {
+  display: none;
+}
+
+.inspector-state {
+  min-height: 100%;
+  display: grid;
+  align-content: center;
+  justify-items: start;
+  padding: clamp(32px, 6vw, 80px);
+}
+
+.state-code {
+  color: var(--accent);
+}
+
+.inspector-state h2 {
+  max-width: 25ch;
+  font-size: clamp(26px, 4vw, 44px);
+}
+
+.inspector-state > p:last-child {
+  max-width: 46rem;
+  margin: 12px 0 0;
+  color: var(--muted);
+}
+
+.job-detail {
+  min-width: 0;
+}
+
+.job-titlebar {
+  min-height: 86px;
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 20px;
+  padding: 17px clamp(20px, 4vw, 52px) 15px;
+  border-bottom: 1px solid var(--line);
+}
+
+.selected-job-id {
+  margin: 0;
+  font-family: var(--data);
+  font-size: clamp(14px, 1.5vw, 18px);
+  font-weight: 650;
+  overflow-wrap: anywhere;
+}
+
+.selected-time {
+  margin: 4px 0 0;
+  color: var(--muted);
+  font-size: 12px;
+}
+
+.title-actions {
+  flex: 0 0 auto;
+  display: grid;
+  justify-items: end;
+  gap: 7px;
+}
+
+.state-pill {
+  flex: 0 0 auto;
+  display: inline-flex;
+  align-items: center;
+  min-height: 28px;
+  border: 1px solid var(--line-strong);
+  border-radius: 999px;
+  padding: 3px 10px;
+  color: var(--muted);
+  background: var(--paper);
+  font-size: 11px;
+  font-weight: 700;
+}
+
+.state-pill.state-running,
+.state-pill.state-starting {
+  border-color: var(--warn);
+  color: var(--warn);
+}
+
+.state-pill.state-succeeded {
+  border-color: var(--good);
+  color: var(--good);
+}
+
+.state-pill.state-failed,
+.state-pill.state-dead,
+.state-pill.state-invalid {
+  border-color: var(--fault);
+  color: var(--fault);
+}
+
+.compare-toggle,
+.compare-clear {
+  min-height: 44px;
+  border: 1px solid var(--line-strong);
+  border-radius: 4px;
+  padding: 6px 10px;
+  color: var(--accent);
+  background: var(--paper);
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.compare-toggle:hover:not(:disabled),
+.compare-clear:hover {
+  background: var(--selection);
+}
+
+.compare-toggle[aria-pressed="true"] {
+  border-color: var(--warn);
+  color: var(--warn);
+}
+
+.compare-toggle:disabled {
+  cursor: not-allowed;
+  opacity: 0.52;
+}
+
+.compare-reference-label {
+  max-width: 28ch;
+  margin: 0;
+  color: var(--muted);
+  font-family: var(--data);
+  font-size: 10px;
+  overflow-wrap: anywhere;
+  text-align: right;
+}
+
+.comparison-section {
+  padding: 22px clamp(20px, 4vw, 52px) 28px;
+  border-bottom: 1px solid var(--line-strong);
+  background: #f8f6f1;
+}
+
+.comparison-heading {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 18px;
+}
+
+.comparison-heading h3 {
+  margin: 0;
+  font-size: 20px;
+  font-weight: 650;
+  letter-spacing: -0.02em;
+  line-height: 1.2;
+}
+
+.comparison-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 12px;
+  margin-top: 16px;
+}
+
+.comparison-column {
+  min-width: 0;
+  border: 1px solid var(--line);
+  border-left: 4px solid var(--accent);
+  padding: 14px;
+  background: var(--paper);
+}
+
+.comparison-column.is-reference {
+  border-left-color: var(--warn);
+}
+
+.comparison-role,
+.comparison-output-label {
+  margin: 0;
+  color: var(--muted);
+  font-size: 11px;
+  font-weight: 700;
+}
+
+.comparison-column h4 {
+  margin: 3px 0 0;
+  font-family: var(--data);
+  font-size: 13px;
+  overflow-wrap: anywhere;
+}
+
+.comparison-route {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  margin: 14px 0;
+  border-top: 1px solid var(--line);
+  border-left: 1px solid var(--line);
+}
+
+.comparison-route > div {
+  min-width: 0;
+  border-right: 1px solid var(--line);
+  border-bottom: 1px solid var(--line);
+  padding: 8px 9px;
+}
+
+.comparison-route dt {
+  color: var(--muted);
+  font-size: 10px;
+  font-weight: 650;
+}
+
+.comparison-route dd {
+  min-width: 0;
+  margin: 3px 0 0;
+  font-family: var(--data);
+  font-size: 11px;
+  overflow-wrap: anywhere;
+}
+
+.comparison-output {
+  max-height: 16rem;
+  min-height: 84px;
+  margin: 6px 0 0;
+  overflow: auto;
+  border: 1px solid var(--line);
+  border-radius: 3px;
+  padding: 10px;
+  background: #fbfbfa;
+  font-family: var(--data);
+  font-size: 11px;
+  line-height: 1.55;
+  overflow-wrap: anywhere;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.content-section,
+.routing-section {
+  padding: 24px clamp(20px, 4vw, 52px) 28px;
+  border-bottom: 1px solid var(--line);
+}
+
+.task-section {
+  background: #fbfbfa;
+}
+
+.result-section {
+  min-height: 260px;
+}
+
+.section-heading {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 18px;
+}
+
+.section-heading h3 {
+  font-size: 20px;
+}
+
+.content-markers {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: 6px;
+}
+
+.content-marker {
+  display: inline-block;
+  border: 1px solid var(--warn);
+  border-radius: 999px;
+  padding: 3px 8px;
+  color: var(--warn);
+  background: var(--paper);
+  font-size: 11px;
+}
+
+.content-marker.is-fault {
+  border-color: var(--fault);
+  color: var(--fault);
+}
+
+.plain-content {
+  max-height: 36rem;
+  margin: 16px 0 0;
+  overflow: auto;
+  border: 1px solid var(--line);
+  border-radius: 4px;
+  padding: 14px 16px;
+  color: var(--ink);
+  background: var(--paper);
+  font-family: var(--data);
+  font-size: 12px;
+  line-height: 1.65;
+  overflow-wrap: anywhere;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.result-content {
+  min-height: 120px;
+}
+
+.content-empty {
+  margin: 16px 0 0;
+  border-left: 3px solid var(--line-strong);
+  padding-left: 12px;
+  color: var(--muted);
+}
+
+.routing-section {
+  background: var(--canvas);
+}
+
+.routing-list {
+  margin: 16px 0 0;
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  border-top: 1px solid var(--line-strong);
+  border-bottom: 1px solid var(--line-strong);
+}
+
+.routing-list > div {
+  min-width: 0;
+  padding: 12px 14px;
+  border-right: 1px solid var(--line);
+}
+
+.routing-list > div:last-child {
+  border-right: 0;
+}
+
+.routing-list dt,
+.job-facts dt {
+  color: var(--muted);
+  font-size: 11px;
+  font-weight: 650;
+}
+
+.routing-list dd,
+.job-facts dd {
+  min-width: 0;
+  margin: 4px 0 0;
+  font-family: var(--data);
+  font-size: 12px;
+  overflow-wrap: anywhere;
+}
+
+.technical-details {
+  border-bottom: 1px solid var(--line);
+}
+
+.technical-details summary {
+  min-height: 48px;
+  display: flex;
+  align-items: center;
+  padding: 0 clamp(20px, 4vw, 52px);
+  color: var(--muted);
+  font-size: 13px;
+  font-weight: 650;
+}
+
+.technical-details summary::before {
+  content: "+";
+  width: 18px;
+  color: var(--accent);
+  font-family: var(--data);
+}
+
+.technical-details[open] summary::before {
+  content: "−";
+}
+
+.job-facts {
+  margin: 0;
+  padding: 0 clamp(20px, 4vw, 52px) 22px;
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+}
+
+.fact {
+  min-width: 0;
+  padding: 12px 14px;
+  border-top: 1px solid var(--line);
+  border-right: 1px solid var(--line);
+}
+
+.fact:nth-child(4),
+.fact:last-child {
+  border-right: 0;
+}
+
+.fact-wide {
+  grid-column: span 2;
+}
+
+.noscript-message {
+  position: fixed;
+  inset: auto 16px 16px;
+  margin: 0;
+  border: 1px solid var(--fault);
+  padding: 10px 14px;
+  color: var(--ink);
+  background: var(--paper);
+}
+
+@media (max-width: 760px) {
+  .board-identity {
+    padding: 0 12px;
+  }
+
+  .board-identity span:last-child,
+  .read-only-tag,
+  .job-count {
+    display: none;
+  }
+
+  .connection-status {
+    min-width: 0;
+    border-left: 0;
+    padding: 0 12px;
+  }
+
+  .board-layout {
+    display: block;
+  }
+
+  .dispatch-index,
+  .job-inspector {
+    width: 100%;
+    height: 100%;
+    border-right: 0;
+  }
+
+  body[data-mobile-view="list"] .dispatch-index {
+    display: flex;
+  }
+
+  body[data-mobile-view="list"] .job-inspector {
+    display: none;
+  }
+
+  body[data-mobile-view="detail"] .dispatch-index {
+    display: none;
+  }
+
+  body[data-mobile-view="detail"] .job-inspector {
+    display: block;
+  }
+
+  .index-heading {
+    min-height: 64px;
+    padding: 11px 14px 9px;
+  }
+
+  .queue-controls {
+    padding: 10px 12px 12px;
+  }
+
+  .job-card {
+    min-height: 76px;
+    padding-right: 12px;
+    padding-left: 16px;
+  }
+
+  .mobile-back {
+    position: sticky;
+    z-index: 4;
+    top: 0;
+    width: 100%;
+    min-height: 48px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    border: 0;
+    border-bottom: 1px solid var(--line-strong);
+    padding: 0 14px;
+    color: var(--accent);
+    background: var(--paper);
+    font-weight: 650;
+    text-align: left;
+  }
+
+  .job-titlebar {
+    min-height: 92px;
+    padding: 14px 16px;
+  }
+
+  .comparison-section {
+    padding: 20px 16px 24px;
+  }
+
+  .comparison-grid {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .content-section,
+  .routing-section {
+    padding: 21px 16px 24px;
+  }
+
+  .technical-details summary {
+    padding: 0 16px;
+  }
+
+  .job-facts {
+    padding: 0 16px 18px;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .fact:nth-child(2n) {
+    border-right: 0;
+  }
+
+  .fact:nth-child(4) {
+    border-right: 0;
+  }
+
+  .fact-wide {
+    grid-column: span 1;
+  }
+
+  .routing-list {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .routing-list > div:nth-child(2) {
+    border-right: 0;
+  }
+
+  .routing-list > div:nth-child(-n + 2) {
+    border-bottom: 1px solid var(--line);
+  }
+}
+
+@media (max-width: 430px) {
+  .connection-status {
+    max-width: 144px;
+    font-size: 11px;
+  }
+
+  .filter-options {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .filter-button:nth-child(2) {
+    border-right: 0;
+  }
+
+  .filter-button:nth-child(-n + 2) {
+    border-bottom: 1px solid var(--line);
+  }
+
+  .job-titlebar,
+  .section-heading,
+  .comparison-heading {
+    display: grid;
+  }
+
+  .title-actions {
+    justify-items: start;
+  }
+
+  .compare-reference-label {
+    text-align: left;
+  }
+
+  .state-pill {
+    justify-self: start;
+  }
+
+  .content-markers {
+    justify-content: flex-start;
+  }
+
+  .routing-list,
+  .job-facts {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .routing-list > div,
+  .routing-list > div:nth-child(2),
+  .fact,
+  .fact:nth-child(2n),
+  .fact:nth-child(4) {
+    grid-column: auto;
+    border-right: 0;
+    border-bottom: 1px solid var(--line);
+  }
+
+  .routing-list > div:last-child,
+  .fact:last-child {
+    border-bottom: 0;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    scroll-behavior: auto !important;
+    transition-duration: 0.01ms !important;
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+  }
+}