feat(ui): separate live data and lab surfaces

apps/control-station/src/styles/observation-sessions.css

@@ -270,6 +270,158 @@
   color: rgb(var(--nodedc-danger-rgb));
 }
 
+.observation-session-archive {
+  display: grid;
+  gap: 0.85rem;
+  padding: 1rem;
+  border-radius: 1rem;
+  background: rgb(255 255 255 / 0.025);
+}
+
+.observation-session-archive__head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 1rem;
+}
+
+.observation-session-archive__head h2,
+.observation-session-archive__head p {
+  margin: 0;
+}
+
+.observation-session-archive__head h2 {
+  margin-top: 0.25rem;
+  color: var(--nodedc-text-primary);
+  font-size: 1rem;
+}
+
+.observation-session-archive__head p {
+  max-width: 50rem;
+  margin-top: 0.35rem;
+  color: var(--nodedc-text-muted);
+  font-size: 0.68rem;
+  line-height: 1.5;
+}
+
+.observation-session-archive__refresh {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.45rem;
+  border: 0;
+  border-radius: 999px;
+  background: rgb(255 255 255 / 0.055);
+  color: var(--nodedc-text-secondary);
+  padding: 0.55rem 0.75rem;
+  font: inherit;
+  font-size: 0.65rem;
+  cursor: pointer;
+}
+
+.observation-session-archive__list {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 0.35rem;
+  max-height: 18rem;
+  overflow: auto;
+}
+
+.observation-session-archive__item {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 2.5rem;
+  min-width: 0;
+  border-radius: 0.75rem;
+  background: rgb(255 255 255 / 0.025);
+}
+
+.observation-session-archive__open {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 0.7rem;
+  min-width: 0;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  padding: 0.72rem;
+  text-align: left;
+  cursor: pointer;
+}
+
+.observation-session-archive__open > i {
+  width: 0.45rem;
+  height: 0.45rem;
+  border-radius: 50%;
+  background: var(--nodedc-text-muted);
+}
+
+.observation-session-archive__open > i[data-session-visual-state="ready"],
+.observation-session-archive__open > i[data-session-visual-state="processing"] {
+  background: rgb(var(--nodedc-success-rgb));
+}
+
+.observation-session-archive__open > span {
+  display: grid;
+  min-width: 0;
+  gap: 0.28rem;
+}
+
+.observation-session-archive__open strong,
+.observation-session-archive__open small {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.observation-session-archive__open strong {
+  color: var(--nodedc-text-primary);
+  font-size: 0.7rem;
+}
+
+.observation-session-archive__open strong > small {
+  margin-right: 0.45rem;
+  color: var(--nodedc-accent);
+  font-size: 0.55rem;
+  letter-spacing: 0.05em;
+}
+
+.observation-session-archive__open > span > small,
+.observation-session-archive__open em {
+  color: var(--nodedc-text-muted);
+  font-size: 0.58rem;
+  font-style: normal;
+}
+
+.observation-session-archive__delete {
+  display: grid;
+  place-items: center;
+  border: 0;
+  background: transparent;
+  color: var(--nodedc-text-muted);
+  cursor: pointer;
+}
+
+.observation-session-archive__delete:hover:not(:disabled) {
+  color: rgb(var(--nodedc-danger-rgb));
+}
+
+.observation-session-archive__empty {
+  display: grid;
+  min-height: 7rem;
+  place-items: center;
+  align-content: center;
+  gap: 0.45rem;
+  color: var(--nodedc-text-muted);
+  font-size: 0.65rem;
+  text-align: center;
+}
+
+@media (max-width: 1080px) {
+  .observation-session-archive__list {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}
+
 @media (max-width: 860px) {
   .workspace-layout-feedback {
     display: none;
@@ -287,4 +439,8 @@
   .observation-session-select__trigger > svg:last-child {
     display: none;
   }
+
+  .observation-session-archive__head {
+    display: grid;
+  }
 }