@abot-ai/runtime 1.0.0

package/dist/src/web-ui/app/styles/10-shell-sessions.css

@@ -0,0 +1,867 @@
+/* Chat-first application shell and conversation navigation. */
+
+.app-shell {
+  position: relative;
+  display: grid;
+  grid-template-columns: 72px minmax(0, 1fr);
+  width: 100vw;
+  height: 100vh;
+  overflow: hidden;
+  background: var(--bg);
+}
+
+.workspace-rail {
+  position: relative;
+  z-index: 35;
+  grid-column: 1;
+  grid-row: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  width: 72px;
+  min-width: 72px;
+  height: 100vh;
+  padding: 12px 10px;
+  border-right: 1px solid rgba(126, 159, 194, 0.12);
+  background: #07111d;
+}
+
+.workspace-rail .brand-mark {
+  display: grid;
+  place-items: center;
+  width: 40px;
+  min-width: 40px;
+  height: 40px;
+  min-height: 40px;
+  margin-bottom: 10px;
+  padding: 0;
+  border: 0;
+  border-radius: 12px;
+  background: #2c6ee8;
+  color: #fff;
+  font-size: 18px;
+  font-weight: 700;
+  box-shadow: none;
+}
+
+.rail-history-button {
+  flex: none;
+  margin-bottom: 10px;
+}
+
+.rail-actions,
+.rail-footer,
+.rail-bottom {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 7px;
+  width: 100%;
+}
+
+.rail-footer,
+.rail-bottom,
+.rail-runtime {
+  margin-top: auto;
+}
+
+.rail-spacer {
+  flex: 1;
+}
+
+.rail-button,
+.rail-action,
+.workspace-rail button:not(.rail-brand) {
+  position: relative;
+  display: inline-grid;
+  place-items: center;
+  width: 44px;
+  min-width: 44px;
+  height: 44px;
+  min-height: 44px;
+  padding: 0;
+  border-color: transparent;
+  border-radius: 12px;
+  background: transparent;
+  color: var(--muted);
+  box-shadow: none;
+}
+
+.rail-button:hover,
+.rail-action:hover,
+.workspace-rail button:not(.rail-brand):hover,
+.rail-button.active,
+.rail-action.active,
+.rail-button[aria-current="page"],
+.workspace-rail button[aria-expanded="true"] {
+  border-color: transparent;
+  background: rgba(111, 158, 210, 0.11);
+  color: var(--text-strong);
+}
+
+.rail-button.active,
+.rail-action.active,
+.rail-button[aria-current="page"],
+.workspace-rail button[aria-expanded="true"] {
+  background: rgba(77, 133, 239, 0.16);
+  color: #b9d2ff;
+}
+
+.rail-button svg,
+.rail-action svg,
+.workspace-rail button svg {
+  width: 19px;
+  height: 19px;
+}
+
+.rail-button > .rail-button-label,
+.rail-action > .rail-button-label {
+  position: absolute;
+  left: calc(100% + 12px);
+  z-index: 90;
+  padding: 6px 8px;
+  border: 1px solid var(--line);
+  border-radius: 7px;
+  background: #142234;
+  color: var(--text);
+  font-size: 12px;
+  font-weight: 500;
+  white-space: nowrap;
+  opacity: 0;
+  pointer-events: none;
+  transform: translateX(-3px);
+  transition:
+    opacity 120ms ease,
+    transform 120ms ease;
+}
+
+.rail-button:hover > .rail-button-label,
+.rail-action:hover > .rail-button-label,
+.rail-button:focus-visible > .rail-button-label,
+.rail-action:focus-visible > .rail-button-label {
+  opacity: 1;
+  transform: none;
+}
+
+.rail-runtime {
+  position: relative;
+  display: grid;
+  justify-items: center;
+  gap: 0;
+  width: 48px;
+  padding: 3px;
+  border: 1px solid rgba(112, 161, 210, 0.14);
+  border-radius: 14px;
+  background: rgba(58, 97, 136, 0.08);
+  transition:
+    border-color 140ms ease,
+    background-color 140ms ease;
+}
+
+.rail-runtime:hover,
+.rail-runtime:focus-within {
+  border-color: rgba(122, 174, 225, 0.24);
+  background: rgba(66, 110, 153, 0.12);
+}
+
+.rail-status {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--green);
+  box-shadow: 0 0 0 3px rgba(59, 209, 155, 0.1);
+}
+
+.rail-status.connecting {
+  background: var(--amber);
+  box-shadow: 0 0 0 3px rgba(242, 187, 92, 0.1);
+}
+
+.rail-status.failed,
+.rail-status.error {
+  background: var(--danger);
+  box-shadow: 0 0 0 3px rgba(255, 116, 128, 0.1);
+}
+
+.rail-environment {
+  position: relative;
+  width: 100%;
+  overflow: visible;
+}
+
+.rail-environment .rail-environment-button {
+  width: 40px;
+  min-width: 40px;
+  height: 38px;
+  min-height: 38px;
+  overflow: hidden;
+  border-radius: 11px;
+  color: var(--muted);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 11px;
+  font-weight: 550;
+}
+
+.rail-environment .agent-picker-menu {
+  position: absolute;
+  bottom: 0;
+  left: calc(100% + 12px);
+  z-index: 90;
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 3px;
+  width: 190px;
+  padding: 5px;
+  border: 1px solid var(--line);
+  border-radius: 10px;
+  background: #132438;
+  box-shadow: 0 18px 42px rgba(0, 6, 16, 0.34);
+}
+
+.chat-panel {
+  position: relative;
+  z-index: 1;
+  grid-column: 2;
+  grid-row: 1;
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr) auto;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+  background: #081421;
+}
+
+.sessions-panel,
+.workspace-sheet.sessions-sheet {
+  position: fixed;
+  inset: 0 auto 0 72px;
+  z-index: 60;
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  width: min(320px, calc(100vw - 88px));
+  min-width: 0;
+  min-height: 0;
+  padding: 18px 16px 16px;
+  overflow: hidden;
+  border: 0;
+  border-right: 1px solid var(--line);
+  background: #0a1725;
+  box-shadow: 20px 0 48px rgba(0, 6, 16, 0.3);
+  opacity: 0;
+  pointer-events: none;
+  transform: translateX(-18px);
+  transition:
+    opacity 160ms ease,
+    transform 180ms ease;
+}
+
+/* The drawer uses size, spacing, and color for hierarchy instead of bold text. */
+#sessionsPanel,
+#sessionsPanel * {
+  font-weight: 400;
+}
+
+.app-shell.sessions-open .sessions-panel,
+.app-shell.sessions-open .workspace-sheet.sessions-sheet {
+  opacity: 1;
+  pointer-events: auto;
+  transform: none;
+}
+
+.panel-resizer {
+  display: none;
+}
+
+.mobile-only {
+  display: none !important;
+}
+
+#closeSessionsButton.mobile-only {
+  display: inline-grid !important;
+}
+
+.sidebar-topline,
+.brand-row,
+.connection-row,
+.session-create-row,
+.sessions-heading-row {
+  display: flex;
+  align-items: center;
+}
+
+.sidebar-topline,
+.sessions-heading-row {
+  justify-content: space-between;
+}
+
+.sidebar-topline {
+  min-height: 38px;
+}
+
+.sheet-heading-actions {
+  display: flex;
+  align-items: center;
+  gap: 3px;
+}
+
+.brand-row {
+  min-width: 0;
+  gap: 10px;
+}
+
+.brand-row > .brand-mark {
+  display: grid;
+  flex: 0 0 30px;
+  place-items: center;
+  width: 30px;
+  height: 30px;
+  border: 0;
+  border-radius: 9px;
+  background: #2c6ee8;
+  color: #fff;
+  font-size: 14px;
+  font-weight: 700;
+  box-shadow: none;
+}
+
+.brand-copy {
+  min-width: 0;
+}
+
+#sessionsHeading {
+  margin: 0;
+  color: var(--text-strong);
+  font-size: 18px;
+  font-weight: 400;
+  letter-spacing: -0.02em;
+}
+
+.brand-row h1 {
+  margin: 0;
+  color: var(--text-strong);
+  font-size: 15px;
+  font-weight: 650;
+  letter-spacing: -0.01em;
+}
+
+.brand-row p {
+  margin: 2px 0 0;
+  color: var(--muted-2);
+  font-size: 12px;
+}
+
+.icon-button,
+.icon-action-button {
+  display: inline-grid;
+  flex: none;
+  place-items: center;
+  width: 34px;
+  min-width: 34px;
+  height: 34px;
+  min-height: 34px;
+  padding: 0;
+  border-color: transparent;
+  border-radius: 9px;
+  background: transparent;
+  color: var(--muted);
+  box-shadow: none;
+}
+
+.icon-button:hover,
+.icon-action-button:hover {
+  border-color: transparent;
+  background: rgba(101, 145, 190, 0.1);
+  color: var(--text);
+}
+
+.session-create-row {
+  order: 1;
+  gap: 7px;
+}
+
+.primary-button {
+  display: inline-flex;
+  flex: 1;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  min-height: 38px;
+  border-color: transparent;
+  border-radius: 10px;
+  background: #2869dc;
+  color: #f8fbff;
+  font-size: 13px;
+  font-weight: 600;
+  box-shadow: none;
+}
+
+.primary-button:hover {
+  border-color: transparent;
+  background: #3275e8;
+}
+
+.primary-button svg {
+  width: 16px;
+  height: 16px;
+}
+
+.sessions-section {
+  order: 2;
+  display: grid;
+  flex: 1;
+  grid-template-rows: auto auto minmax(0, 1fr);
+  gap: 10px;
+  min-height: 0;
+}
+
+.sessions-heading-row h2 {
+  margin: 0;
+  color: var(--text);
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.sessions-list-label {
+  color: var(--muted);
+  font-size: 12px;
+  font-weight: 400;
+}
+
+.count-badge {
+  min-width: 22px;
+  padding: 2px 7px;
+  border-radius: 999px;
+  background: rgba(105, 147, 188, 0.1);
+  color: var(--muted);
+  text-align: center;
+  font-size: 11px;
+  font-weight: 400;
+}
+
+.session-search {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.session-search svg {
+  position: absolute;
+  left: 11px;
+  z-index: 1;
+  width: 15px;
+  height: 15px;
+  color: var(--muted-2);
+  pointer-events: none;
+}
+
+.session-search input {
+  width: 100%;
+  min-height: 36px;
+  padding: 0 12px 0 34px;
+  border-color: transparent;
+  border-radius: 9px;
+  background: rgba(92, 132, 172, 0.08);
+  color: var(--text);
+  font-size: 13px;
+  box-shadow: none;
+}
+
+.session-search input:hover,
+.session-search input:focus {
+  border-color: rgba(111, 157, 204, 0.2);
+  background: rgba(92, 132, 172, 0.11);
+}
+
+.sessions-list,
+.events-list {
+  min-height: 0;
+  overflow: auto;
+}
+
+.sessions-list {
+  margin-right: -5px;
+  padding-right: 5px;
+}
+
+.sidebar-empty-state {
+  display: grid;
+  gap: 5px;
+  padding: 30px 10px;
+  color: var(--muted);
+  text-align: left;
+}
+
+.sidebar-empty-state strong {
+  color: var(--text);
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.sidebar-empty-state span {
+  font-size: 12px;
+  line-height: 1.5;
+}
+
+.session-item {
+  position: relative;
+  display: grid;
+  width: 100%;
+  margin: 0 0 3px;
+  padding: 9px 9px 9px 11px;
+  border: 0;
+  border-radius: 9px;
+  background: transparent;
+  color: var(--text);
+  transition:
+    background 120ms ease,
+    opacity 120ms ease;
+}
+
+.session-item:hover {
+  background: rgba(91, 133, 175, 0.075);
+}
+
+.session-item.active {
+  background: rgba(77, 133, 239, 0.13);
+}
+
+.session-item.unread,
+.session-item.pinned {
+  border: 0;
+}
+
+.session-item.pinned::before {
+  position: absolute;
+  top: 15px;
+  left: 3px;
+  width: 3px;
+  height: 3px;
+  border-radius: 50%;
+  background: var(--amber);
+  content: "";
+}
+
+.session-item.busy {
+  opacity: 0.56;
+  pointer-events: none;
+}
+
+.session-open-button {
+  display: grid;
+  gap: 4px;
+  min-height: 0;
+  padding: 0 30px 0 0;
+  border: 0;
+  background: transparent;
+  text-align: left;
+  box-shadow: none;
+}
+
+.session-open-button:hover {
+  border-color: transparent;
+  background: transparent;
+}
+
+.session-title-row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 7px;
+  align-items: center;
+}
+
+.session-title {
+  overflow: hidden;
+  color: var(--text);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 13px;
+  font-weight: 400;
+}
+
+.session-preview {
+  display: -webkit-box;
+  overflow: hidden;
+  color: var(--muted-2);
+  font-size: 12px;
+  line-height: 1.4;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+
+.session-unread-badge {
+  display: inline-grid;
+  place-items: center;
+  min-width: 18px;
+  height: 18px;
+  padding: 0 5px;
+  border-radius: 999px;
+  background: rgba(87, 148, 255, 0.18);
+  color: #cfe0ff;
+  font-size: 10px;
+  font-weight: 650;
+}
+
+.session-actions {
+  position: absolute;
+  top: 7px;
+  right: 7px;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 120ms ease;
+}
+
+.session-item:hover .session-actions,
+.session-item:focus-within .session-actions,
+.session-actions.open {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.session-menu-button {
+  width: 26px;
+  min-width: 26px;
+  height: 26px;
+  min-height: 26px;
+  padding: 0;
+  border: 0;
+  border-radius: 7px;
+  background: rgba(10, 23, 37, 0.9);
+  color: var(--muted);
+  font-size: 10px;
+  letter-spacing: -1px;
+  box-shadow: none;
+}
+
+.session-menu {
+  position: absolute;
+  top: calc(100% + 5px);
+  right: 0;
+  z-index: 12;
+  display: none;
+  min-width: 132px;
+  padding: 5px;
+  border: 1px solid var(--line);
+  border-radius: 9px;
+  background: #122338;
+  box-shadow: var(--shadow);
+}
+
+.session-actions.open .session-menu {
+  display: grid;
+  gap: 2px;
+}
+
+.session-action {
+  min-height: 31px;
+  padding: 0 9px;
+  border-color: transparent;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--text);
+  text-align: left;
+  font-size: 12px;
+  box-shadow: none;
+}
+
+.session-action:hover {
+  border-color: transparent;
+  background: rgba(101, 146, 190, 0.1);
+}
+
+.pin-action {
+  color: #f2cf86;
+}
+
+.delete-action {
+  color: #ff9da6;
+}
+
+.runtime-summary {
+  order: 3;
+  display: grid;
+  gap: 8px;
+  margin-top: auto;
+  padding: 12px 2px 0;
+  border: 0;
+  border-top: 1px solid rgba(120, 157, 194, 0.12);
+  border-radius: 0;
+  background: transparent;
+}
+
+.connection-row {
+  min-height: 20px;
+}
+
+#connectionLabel {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  color: var(--muted);
+  font-size: 12px;
+  font-weight: 500;
+}
+
+#connectionLabel::before {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: var(--amber);
+  content: "";
+}
+
+#connectionLabel.connected::before {
+  background: var(--green);
+}
+
+#connectionLabel.error-text::before {
+  background: var(--danger);
+}
+
+.field-label,
+.control-label {
+  color: var(--muted-2);
+  font-size: 11px;
+  font-weight: 500;
+}
+
+.agent-native-select {
+  display: none;
+}
+
+.agent-picker {
+  position: relative;
+  min-width: 0;
+}
+
+.agent-picker-button {
+  display: none;
+}
+
+.agent-picker-menu {
+  position: static;
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 3px;
+  padding: 3px;
+  border: 0;
+  border-radius: 8px;
+  background: rgba(87, 126, 165, 0.07);
+  opacity: 1;
+  pointer-events: auto;
+  transform: none;
+  box-shadow: none;
+}
+
+.workspace-rail #connectionLabel {
+  position: absolute;
+  top: 3px;
+  right: 3px;
+  z-index: 2;
+  display: grid;
+  place-items: center;
+  width: 12px;
+  height: 12px;
+  min-height: 12px;
+  overflow: hidden;
+  background: transparent;
+  color: transparent;
+  font-size: 0;
+  pointer-events: none;
+}
+
+.workspace-rail #connectionLabel::before {
+  width: 6px;
+  height: 6px;
+  margin: 0;
+  border: 2px solid #0b1928;
+  background: var(--amber);
+  box-shadow: 0 0 0 2px rgba(242, 187, 92, 0.08);
+}
+
+.workspace-rail #connectionLabel.connected::before {
+  background: var(--green);
+  box-shadow: 0 0 0 2px rgba(59, 209, 155, 0.08);
+}
+
+.workspace-rail #connectionLabel.error-text::before {
+  background: var(--danger);
+  box-shadow: 0 0 0 2px rgba(255, 116, 128, 0.08);
+}
+
+.agent-picker-option {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 29px;
+  padding: 0 8px;
+  border-color: transparent;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--muted);
+  font-size: 12px;
+  font-weight: 550;
+  text-align: center;
+  text-transform: capitalize;
+  box-shadow: none;
+}
+
+.agent-picker-option:hover {
+  border-color: transparent;
+  background: rgba(100, 146, 191, 0.09);
+  color: var(--text);
+}
+
+.agent-picker-option.selected {
+  background: rgba(77, 133, 239, 0.14);
+  color: #d5e3fb;
+}
+
+.agent-option-check {
+  display: none;
+}
+
+.sidebar-command-surface,
+.sidebar-command-grid,
+.sidebar-actions {
+  display: contents;
+}
+
+@media (max-width: 760px) {
+  .app-shell {
+    grid-template-columns: 1fr;
+  }
+
+  .workspace-rail {
+    display: none;
+  }
+
+  .chat-panel {
+    grid-column: 1;
+  }
+
+  .sessions-panel,
+  .workspace-sheet.sessions-sheet {
+    inset-inline-start: 0;
+    width: min(320px, calc(100vw - 28px));
+    padding: 16px 14px;
+  }
+
+  .mobile-only {
+    display: inline-grid !important;
+  }
+
+  .session-actions {
+    opacity: 1;
+    pointer-events: auto;
+  }
+}
+
+@media (pointer: coarse) {
+  .session-actions {
+    opacity: 1;
+    pointer-events: auto;
+  }
+}