loadtoagent 1.0.0

package/renderer/styles-responsive-shell.css

@@ -0,0 +1,533 @@
+/*
+ * Responsive shell and shared components
+ * --------------------------------------
+ * Application shell, navigation, shared cards, and content density.
+ * Breakpoints are ordered wide-to-narrow, followed by height and motion rules.
+ */
+
+/* Compact screens ≤ 1280px: collapse content columns and simplify the side rail. */
+@media (max-width:1280px) {
+  .session-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+/* Compact screens ≤ 1100px: collapse content columns and simplify the side rail. */
+@media (max-width:1100px) {
+  .sessions-heading {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+
+  .session-tools {
+    width: 100%;
+    justify-content: flex-start;
+    flex-wrap: wrap;
+  }
+
+  .search-box {
+    flex: 1 1 240px;
+    width: auto;
+  }
+
+  .provider-filter {
+    max-width: 100%;
+    overflow-x: auto;
+  }
+
+  .top-actions {
+    flex-wrap: wrap;
+    justify-content: flex-end;
+  }
+}
+
+/* Compact screens ≤ 980px: collapse content columns and simplify the side rail. */
+@media (max-width:980px) {
+  :root {
+    --sidebar: 76px;
+  }
+}
+
+/* Compact screens ≤ 900px: collapse content columns and simplify the side rail. */
+@media (max-width:900px) {
+  :root {
+    --sidebar: 72px;
+  }
+
+  .brand>div:last-child {
+    display: none;
+  }
+
+  .nav-item span:not(.nav-icon) {
+    display: none;
+  }
+
+  .nav-item b {
+    display: none;
+  }
+
+  .section-title span {
+    display: none;
+  }
+
+  .provider-rail-item strong {
+    display: none;
+  }
+
+  .workspace-section {
+    display: none;
+  }
+
+  .sidebar-footer div {
+    display: none;
+  }
+
+  .brand {
+    justify-content: center;
+    padding-left: 0;
+    padding-right: 0;
+  }
+
+  .nav-item {
+    grid-template-columns: 1fr;
+    place-items: center;
+  }
+
+  .topbar {
+    display: block;
+  }
+
+  .top-actions {
+    margin-top: 16px;
+  }
+
+  .session-tools {
+    flex-wrap: wrap;
+    justify-content: flex-end;
+  }
+
+  .session-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .execution-mode-badge small {
+    display: none;
+  }
+}
+
+/* Compact screens ≤ 720px: replace the side rail with bottom navigation and protect horizontal space. */
+@media (max-width:720px) {
+  :root {
+    --sidebar: 0px;
+    --radius: 14px;
+  }
+
+  html {
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+  }
+
+  body {
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+  }
+
+  .app-shell {
+    display: block;
+    width: 100%;
+    height: 100vh;
+    height: 100dvh;
+    min-height: 0;
+  }
+
+  .main-stage {
+    width: 100%;
+    height: 100vh;
+    height: 100dvh;
+    padding: 20px 14px calc(92px + env(safe-area-inset-bottom));
+    overscroll-behavior: contain;
+  }
+
+  .sidebar {
+    position: fixed;
+    z-index: 18;
+    inset: auto 0 0;
+    height: calc(66px + env(safe-area-inset-bottom));
+    padding: 6px max(6px,env(safe-area-inset-right)) env(safe-area-inset-bottom) max(6px,env(safe-area-inset-left));
+    overflow: visible;
+    border-top: 1px solid #273142;
+    border-right: 0;
+    background: rgba(10,14,22,.96);
+    box-shadow: 0 -16px 40px rgba(0,0,0,.34);
+    backdrop-filter: blur(18px);
+  }
+
+  .sidebar>.brand {
+    display: none!important;
+  }
+
+  .sidebar>.sidebar-section {
+    display: none!important;
+  }
+
+  .sidebar>.sidebar-footer {
+    display: none!important;
+  }
+
+  .nav-group-label {
+    display: none!important;
+  }
+
+  .nav-item {
+    min-width: 0;
+    height: 54px;
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: 23px 15px;
+    place-items: center;
+    gap: 2px;
+    padding: 5px 1px;
+    border-radius: 10px;
+    text-align: center;
+  }
+
+  .sidebar .nav-item>span:nth-child(2) {
+    display: block;
+    max-width: 100%;
+    overflow: hidden;
+    color: inherit;
+    font-size: 9px;
+    font-weight: 700;
+    letter-spacing: -.04em;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .nav-item b {
+    display: none!important;
+  }
+
+  .nav-icon {
+    height: 21px;
+    display: grid;
+    place-items: center;
+    font-size: 15px;
+  }
+
+  .nav-item.active {
+    background: linear-gradient(180deg,rgba(77,183,226,.13),rgba(77,183,226,.04));
+    box-shadow: inset 0 2px var(--cyan);
+  }
+
+  .topbar h1 {
+    font-size: clamp(25px,7.5vw,30px);
+    line-height: 1.15;
+    overflow-wrap: anywhere;
+  }
+
+  .subtitle {
+    font-size: 12px;
+    line-height: 1.6;
+  }
+
+  #newRunBtn {
+    width: 100%;
+    min-width: 0;
+    padding-inline: 10px;
+    white-space: nowrap;
+  }
+
+  .sessions-section {
+    margin-top: 24px;
+  }
+
+  .session-tools {
+    display: grid;
+    grid-template-columns: repeat(2,minmax(0,1fr));
+    gap: 8px;
+    margin-top: 12px;
+  }
+
+  .search-box {
+    grid-column: 1/-1;
+    width: 100%;
+  }
+
+  .session-card {
+    min-height: 0;
+    contain-intrinsic-size: 390px;
+  }
+
+  .card-head {
+    flex-wrap: wrap;
+    padding-inline: 13px;
+  }
+
+  .card-title {
+    padding-inline: 13px;
+    white-space: normal;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+  }
+
+  .card-subtitle {
+    margin-left: 13px;
+    margin-right: 13px;
+  }
+
+  .now-strip {
+    margin-left: 13px;
+    margin-right: 13px;
+  }
+
+  .conversation-preview {
+    margin-left: 13px;
+    margin-right: 13px;
+  }
+
+  .context-meter {
+    margin-left: 13px;
+    margin-right: 13px;
+  }
+
+  .token-row {
+    margin-left: 13px;
+    margin-right: 13px;
+  }
+
+  .card-footer {
+    padding-inline: 13px;
+  }
+
+  .token-row>div {
+    padding-inline: 6px;
+  }
+
+  .chat-row {
+    grid-template-columns: 29px minmax(0,1fr);
+    gap: 8px;
+  }
+
+  .lifecycle-event {
+    grid-template-columns: 23px minmax(0,1fr);
+  }
+
+  .lifecycle-event time {
+    grid-column: 2;
+    margin-top: -6px;
+  }
+
+  .form-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .path-field {
+    min-width: 0;
+  }
+
+  .path-field input {
+    min-width: 0;
+  }
+
+  .sidebar>.view-nav {
+    width: 100%;
+    height: 60px;
+    display: grid;
+    gap: 2px;
+    grid-template-columns: repeat(4,minmax(0,1fr));
+  }
+
+  .topbar {
+    gap: 16px;
+  }
+
+  .top-actions {
+    margin-top: 17px;
+    width: 100%;
+    display: grid;
+    grid-template-columns: auto minmax(0,1fr);
+    gap: 9px;
+    padding-top: 0;
+  }
+
+  .sync-state {
+    min-width: 0;
+    padding: 7px 9px;
+    min-height: 46px;
+  }
+
+  .session-tools select {
+    width: 100%;
+    min-width: 0;
+    padding-left: 9px;
+    font-size: 12px;
+  }
+
+  .provider-filter {
+    width: 100%;
+    grid-column: 1 / -1;
+  }
+
+  .search-box input {
+    font-size: 12px;
+  }
+}
+
+/* Compact screens ≤ 640px: replace the side rail with bottom navigation and protect horizontal space. */
+@media (max-width:640px) {
+  .main-stage {
+    padding: 22px 15px 40px;
+  }
+
+  .sessions-heading {
+    display: block;
+  }
+
+  .session-tools {
+    margin-top: 12px;
+  }
+
+  .search-box {
+    width: 100%;
+  }
+
+  .form-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .chat-history-head {
+    align-items: flex-start;
+  }
+
+  .json-object>div {
+    grid-template-columns: 1fr;
+  }
+
+  .overview-branches button:nth-of-type(n+3) {
+    display: none;
+  }
+}
+
+/* Compact screens ≤ 430px: trim labels and spacing for the narrowest supported window. */
+@media (max-width:430px) {
+  .sidebar .nav-item>span:nth-child(2) {
+    font-size: 8px;
+  }
+}
+
+/* Compact screens ≤ 420px: trim labels and spacing for the narrowest supported window. */
+@media (max-width:420px) {
+  .eyebrow {
+    margin-bottom: 6px;
+  }
+
+  .top-actions {
+    grid-template-columns: 88px minmax(0,1fr);
+  }
+
+  .sync-state {
+    gap: 6px;
+    padding-inline: 7px;
+  }
+
+  .session-tools {
+    grid-template-columns: 1fr;
+  }
+
+  .search-box {
+    grid-column: auto;
+  }
+
+  .card-head {
+    gap: 8px;
+  }
+
+  .card-head .provider-mark {
+    width: 32px;
+    height: 32px;
+  }
+
+  .status-pill {
+    padding-inline: 6px;
+    letter-spacing: 0;
+  }
+
+  .token-row span {
+    font-size: 8px;
+  }
+
+  .token-row b {
+    font-size: 11px;
+  }
+
+  .chat-row {
+    grid-template-columns: 25px minmax(0,1fr);
+    gap: 7px;
+  }
+
+  .chat-avatar {
+    width: 25px;
+    height: 25px;
+    border-radius: 7px;
+  }
+
+  .main-stage {
+    padding-right: 11px;
+    padding-left: 11px;
+    padding-top: 15px;
+  }
+
+  .topbar h1 {
+    font-size: 25px;
+  }
+
+  .subtitle {
+    font-size: 13px;
+  }
+}
+
+/* Reduced motion: preserve state changes while removing decorative movement. */
+@media (prefers-reduced-motion:reduce) {
+  html {
+    scroll-behavior: auto!important;
+  }
+
+  * {
+    animation-duration: .001ms!important;
+    animation-delay: 0ms!important;
+    animation-iteration-count: 1!important;
+    scroll-behavior: auto!important;
+    transition-duration: .001ms!important;
+  }
+
+  *::before {
+    animation-duration: .001ms!important;
+    animation-delay: 0ms!important;
+    animation-iteration-count: 1!important;
+    scroll-behavior: auto!important;
+    transition-duration: .001ms!important;
+  }
+
+  *::after {
+    animation-duration: .001ms!important;
+    animation-delay: 0ms!important;
+    animation-iteration-count: 1!important;
+    scroll-behavior: auto!important;
+    transition-duration: .001ms!important;
+  }
+
+  .activity-wave i {
+    animation: none!important;
+  }
+
+  .sync-state>span {
+    animation: none!important;
+  }
+
+  .empty-orbit span {
+    animation: none!important;
+  }
+}