loadtoagent 1.0.0

package/renderer/styles-responsive-runtime.css

@@ -0,0 +1,718 @@
+/*
+ * Responsive terminal and tmux workspaces
+ * ---------------------------------------
+ * Terminal workbench, tmux resources, command controls, and runtime panes.
+ * Breakpoints are ordered wide-to-narrow, followed by height and motion rules.
+ */
+
+/* Compact screens ≤ 1380px: stack terminal toolbars while retaining side resources. */
+@media (max-width:1380px) {
+  .tmux-stats {
+    grid-template-columns: repeat(3,1fr);
+  }
+
+  .tmux-session-tree {
+    grid-template-columns: 220px 38px minmax(0,1fr);
+  }
+
+  .tmux-window-tree {
+    grid-template-columns: 130px 30px minmax(0,1fr);
+  }
+
+  .tmux-pane-stack {
+    grid-template-columns: 1fr;
+  }
+
+  .terminal-target-meta {
+    width: 100%;
+  }
+
+  #terminalSection .terminal-layout {
+    grid-template-columns: 240px minmax(0,1fr);
+  }
+
+  .terminal-controlbar {
+    display: grid;
+    grid-template-columns: minmax(0,1fr);
+    align-items: flex-start;
+    flex-direction: column;
+    gap: 9px;
+  }
+
+  .terminal-target-meta span {
+    max-width: 820px;
+  }
+
+  #terminalSection .terminal-controlbar {
+    display: grid;
+    grid-template-columns: minmax(0,1fr);
+    align-items: start;
+  }
+
+  .terminal-workspace-actions {
+    justify-content: space-between;
+    width: 100%;
+    display: grid;
+    grid-template-columns: minmax(0,1fr);
+    justify-items: start;
+    gap: 7px;
+  }
+
+  .terminal-key-actions {
+    width: 100%;
+    max-width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+  }
+
+  .terminal-key-actions button {
+    flex: 0 0 auto;
+  }
+}
+
+/* Compact screens ≤ 1280px: move resource lists above the workbench and preserve console height. */
+@media (max-width:1280px) {
+  .terminal-layout {
+    grid-template-columns: 235px minmax(0,1fr);
+  }
+
+  .terminal-controlbar {
+    align-items: flex-start;
+    flex-direction: column;
+    gap: 9px;
+  }
+
+  .terminal-key-actions {
+    width: 100%;
+    justify-content: flex-start;
+  }
+
+  .tmux-section-head {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+
+  .tmux-section-actions {
+    width: 100%;
+    justify-content: flex-start;
+  }
+
+  .tmux-control-head {
+    align-items: flex-start;
+    flex-direction: column;
+    gap: 7px;
+  }
+
+  .tmux-control-head>p {
+    text-align: left;
+  }
+
+  #terminalSection .terminal-layout {
+    height: auto;
+    min-height: 0;
+    display: block;
+  }
+
+  .terminal-resource-panel {
+    max-height: none;
+    display: grid;
+    grid-template-columns: 205px minmax(0,1fr);
+    grid-template-rows: 92px;
+    border-right: 0;
+    border-bottom: 1px solid #1d2d38;
+  }
+
+  .terminal-resource-head {
+    min-height: 92px;
+    border-right: 1px solid #1d2d38;
+    border-bottom: 0;
+  }
+
+  .terminal-session-list {
+    grid-template-columns: repeat(2,minmax(0,1fr));
+    max-height: 92px;
+    padding: 9px;
+  }
+
+  .terminal-session-item {
+    min-height: 72px;
+  }
+
+  .terminal-resource-tip {
+    display: none;
+  }
+
+  #terminalSection .terminal-workbench {
+    height: 495px;
+    min-height: 495px;
+  }
+}
+
+/* Compact screens ≤ 1100px: move resource lists above the workbench and preserve console height. */
+@media (max-width:1100px) {
+  .tmux-control-layout {
+    display: block;
+  }
+
+  .tmux-control-layout .terminal-resource-panel {
+    max-height: 240px;
+    border-right: 0;
+    border-bottom: 1px solid #1c2a34;
+  }
+}
+
+/* Compact screens ≤ 1040px: move resource lists above the workbench and preserve console height. */
+@media (max-width:1040px) {
+  #terminalSection .terminal-workbench {
+    height: auto;
+    min-height: 720px;
+  }
+
+  .terminal-stage {
+    grid-template-columns: 1fr;
+    grid-template-rows: minmax(210px,34vh) minmax(470px,1fr);
+  }
+
+  .terminal-stage:has(.terminal-history-panel.hidden) {
+    grid-template-rows: minmax(560px,1fr);
+  }
+
+  .terminal-stage.history-collapsed {
+    grid-template-columns: 1fr;
+    grid-template-rows: 52px minmax(560px,1fr);
+  }
+
+  .terminal-history-panel {
+    border-right: 0;
+    border-bottom: 1px solid #243844;
+  }
+
+  .terminal-console-pane {
+    min-height: 470px;
+  }
+}
+
+/* Compact screens ≤ 980px: move resource lists above the workbench and preserve console height. */
+@media (max-width:980px) {
+  .tmux-section {
+    padding: 16px;
+  }
+
+  .tmux-section-head>p {
+    display: none;
+  }
+
+  .tmux-session-tree {
+    display: block;
+  }
+
+  .tmux-window-tree {
+    display: block;
+  }
+
+  .tmux-link-line {
+    width: 1px;
+    height: 28px;
+    margin-left: 24px;
+    background: #31534c;
+  }
+
+  .tmux-link-line:before {
+    display: none;
+  }
+
+  .tmux-link-line i {
+    display: none;
+  }
+
+  .tmux-window-stack {
+    padding-left: 22px;
+  }
+
+  .tmux-window-tree+.tmux-window-tree {
+    margin-top: 12px;
+  }
+
+  .tmux-pane-stack {
+    padding-left: 22px;
+    margin-top: 0;
+  }
+
+  .tmux-stats {
+    grid-template-columns: repeat(2,1fr);
+  }
+
+  .terminal-section-head {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+
+  .terminal-layout {
+    display: block;
+  }
+
+  .terminal-resource-panel {
+    max-height: 240px;
+    border-right: 0;
+    border-bottom: 1px solid #1c2a34;
+  }
+
+  .terminal-workbench {
+    min-height: 650px;
+  }
+
+  .terminal-tmux-tools {
+    flex-wrap: wrap;
+  }
+
+  .terminal-tabs-row {
+    align-items: stretch;
+    flex-direction: column;
+  }
+
+  .terminal-connection-state {
+    min-height: 28px;
+    border-top: 1px solid #18252e;
+  }
+
+  .terminal-stage {
+    grid-template-columns: 1fr;
+    grid-template-rows: minmax(190px,34vh) minmax(360px,1fr);
+  }
+
+  .terminal-stage:has(.terminal-history-panel.hidden) {
+    grid-template-rows: minmax(360px,1fr);
+  }
+
+  .terminal-history-panel {
+    border-right: 0;
+    border-bottom: 1px solid #20323c;
+  }
+
+  .terminal-history-panel.collapsed {
+    width: auto;
+    height: 52px;
+    grid-template-rows: 52px;
+  }
+
+  .terminal-history-panel.collapsed .terminal-history-head {
+    min-height: 52px;
+  }
+
+  .terminal-viewport {
+    min-height: 360px;
+  }
+
+  .terminal-stage.history-collapsed {
+    grid-template-columns: 1fr;
+    grid-template-rows: 52px minmax(360px,1fr);
+  }
+}
+
+/* Compact screens ≤ 900px: move resource lists above the workbench and preserve console height. */
+@media (max-width:900px) {
+  .live-tmux-overview-open {
+    margin-left: 51px;
+  }
+
+  .live-tmux-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+/* Compact screens ≤ 720px: turn runtime panes into a vertical workbench with wrapped controls. */
+@media (max-width:720px) {
+  #terminalSection .terminal-section-head {
+    gap: 14px;
+  }
+
+  .terminal-resource-head {
+    min-height: 66px;
+    border-right: 0;
+    border-bottom: 1px solid #1d2d38;
+  }
+
+  .terminal-session-list {
+    grid-template-columns: 1fr;
+    max-height: 176px;
+  }
+
+  .terminal-key-actions button span {
+    display: none;
+  }
+
+  .terminal-command-label>span {
+    display: none;
+  }
+
+  .terminal-command-form button span {
+    display: none;
+  }
+
+  .terminal-command-form button {
+    width: 42px;
+    padding: 0;
+    justify-content: center;
+  }
+
+  .terminal-console-head {
+    align-items: flex-start;
+  }
+
+  .terminal-console-state {
+    margin-top: 1px;
+  }
+
+  .tmux-nav-item.active {
+    background: linear-gradient(180deg,rgba(55,196,155,.15),rgba(55,196,155,.04));
+    box-shadow: inset 0 2px #55d6aa;
+  }
+
+  .tmux-section {
+    padding: 13px;
+    border-radius: 15px;
+  }
+
+  .tmux-section-head {
+    gap: 14px;
+  }
+
+  .tmux-section-head>div {
+    min-width: 0;
+    align-items: flex-start;
+  }
+
+  .tmux-logo {
+    width: 42px;
+    height: 42px;
+    flex: 0 0 auto;
+  }
+
+  .terminal-logo {
+    width: 42px;
+    height: 42px;
+    flex: 0 0 auto;
+  }
+
+  .tmux-section-head h2 {
+    overflow-wrap: anywhere;
+  }
+
+  .terminal-section-head h2 {
+    overflow-wrap: anywhere;
+  }
+
+  .tmux-section-actions {
+    display: grid;
+    grid-template-columns: repeat(2,minmax(0,1fr));
+    gap: 7px;
+  }
+
+  .terminal-create-actions {
+    display: grid;
+    grid-template-columns: repeat(2,minmax(0,1fr));
+    gap: 7px;
+  }
+
+  .tmux-section-actions button {
+    width: 100%;
+    min-width: 0;
+    padding-inline: 8px;
+    white-space: nowrap;
+  }
+
+  .terminal-create-actions button {
+    width: 100%;
+    min-width: 0;
+    padding-inline: 8px;
+    white-space: nowrap;
+  }
+
+  .tmux-session-node {
+    max-width: 100%;
+    min-width: 0;
+  }
+
+  .tmux-window-node {
+    max-width: 100%;
+    min-width: 0;
+  }
+
+  .tmux-pane-node {
+    max-width: 100%;
+    min-width: 0;
+  }
+
+  .tmux-window-stack {
+    padding-left: 8px;
+  }
+
+  .tmux-pane-stack {
+    padding-left: 8px;
+  }
+
+  .tmux-pane-main {
+    padding-inline: 11px;
+  }
+
+  .tmux-pane-node footer {
+    padding-inline: 11px;
+  }
+
+  .tmux-map {
+    max-width: 100%;
+    overflow: hidden;
+  }
+
+  #terminalSection .terminal-layout {
+    width: 100%;
+  }
+
+  #terminalSection .terminal-workbench {
+    width: 100%;
+    min-width: 0;
+  }
+
+  .terminal-section-head>div:first-child {
+    min-width: 0;
+    align-items: flex-start;
+  }
+
+  .terminal-resource-panel {
+    display: block;
+    min-width: 0;
+  }
+
+  .terminal-session-item {
+    max-width: 100%;
+    min-width: 0;
+  }
+
+  .terminal-target-cluster {
+    max-width: 100%;
+    min-width: 0;
+  }
+
+  .terminal-workspace-actions {
+    align-items: flex-start;
+    flex-direction: column;
+    max-width: 100%;
+    min-width: 0;
+  }
+
+  .terminal-key-actions {
+    width: 100%;
+    justify-content: flex-start;
+    flex-wrap: wrap;
+    max-width: 100%;
+    min-width: 0;
+  }
+
+  .terminal-controlbar {
+    min-width: 0;
+  }
+
+  .terminal-target-meta {
+    max-width: 100%;
+  }
+
+  .terminal-target-meta span {
+    white-space: normal;
+    overflow-wrap: anywhere;
+    word-break: break-word;
+  }
+
+  .terminal-key-actions button {
+    min-width: 0;
+    padding-inline: 8px;
+  }
+
+  .terminal-key-actions kbd {
+    display: none;
+  }
+
+  .terminal-tmux-tools {
+    max-width: 100%;
+    overscroll-behavior-inline: contain;
+  }
+
+  .terminal-stage {
+    max-width: 100%;
+  }
+
+  .terminal-empty {
+    padding-inline: 14px;
+  }
+
+  .terminal-empty p {
+    margin-inline: 0;
+  }
+
+  .terminal-command-composer {
+    grid-template-columns: minmax(0,1fr) 42px;
+  }
+
+  .sidebar .nav-item[data-view="terminal"] {
+    display: none;
+  }
+
+  .sidebar .nav-item[data-view="tmux"] {
+    display: none;
+  }
+
+  body[data-current-view="terminal"] .topbar {
+    margin-bottom: 10px;
+    padding-bottom: 10px;
+  }
+
+  body[data-current-view="tmux"] .topbar {
+    margin-bottom: 10px;
+    padding-bottom: 10px;
+  }
+
+  body[data-current-view="terminal"] .topbar h1 {
+    font-size: 19px;
+  }
+
+  body[data-current-view="tmux"] .topbar h1 {
+    font-size: 19px;
+  }
+}
+
+/* Compact screens ≤ 640px: turn runtime panes into a vertical workbench with wrapped controls. */
+@media (max-width:640px) {
+  .tmux-section-head h2 {
+    font-size: 20px;
+  }
+
+  .tmux-stats {
+    grid-template-columns: 1fr;
+  }
+
+  .tmux-stats>div {
+    border-right: 0;
+    border-bottom: 1px solid #1a2831;
+  }
+
+  .tmux-window-stack {
+    padding-left: 12px;
+  }
+
+  .tmux-pane-stack {
+    padding-left: 12px;
+  }
+
+  .tmux-agent-metrics {
+    grid-template-columns: repeat(2,1fr);
+  }
+
+  .tmux-agent-metrics>span:last-child {
+    display: none;
+  }
+
+  .terminal-create-actions {
+    width: 100%;
+    flex-wrap: wrap;
+  }
+
+  .terminal-create-actions button {
+    flex: 1;
+  }
+
+  .terminal-section-head h2 {
+    font-size: 20px;
+  }
+
+  .terminal-layout {
+    border-radius: 13px;
+  }
+
+  .terminal-controlbar {
+    padding: 8px;
+  }
+
+  .terminal-key-actions {
+    justify-content: flex-start;
+    flex-wrap: wrap;
+  }
+
+  .terminal-command-form {
+    grid-template-columns: 1fr;
+  }
+
+  .terminal-command-form label {
+    display: none;
+  }
+
+  .terminal-command-form button {
+    width: 100%;
+  }
+
+  .terminal-viewport {
+    min-height: 360px;
+  }
+
+  .tmux-section-actions {
+    flex-wrap: wrap;
+  }
+
+  .tmux-section-actions button {
+    flex: 1;
+  }
+
+  .tmux-pane-node footer {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+
+  .tmux-pane-actions {
+    width: 100%;
+    justify-content: flex-start;
+    flex-wrap: wrap;
+  }
+}
+
+/* Compact screens ≤ 420px: prioritize the console and primary runtime actions. */
+@media (max-width:420px) {
+  .tmux-section {
+    padding: 10px;
+  }
+
+  .terminal-create-actions {
+    grid-template-columns: 1fr;
+  }
+
+  .tmux-section-actions {
+    grid-template-columns: 1fr;
+  }
+
+  .terminal-key-actions {
+    gap: 4px;
+  }
+
+  .terminal-controlbar .terminal-key-actions button {
+    padding-inline: 7px;
+    font-size: 9px;
+  }
+
+  .terminal-console-head small {
+    font-size: 8px;
+  }
+
+  .terminal-console-state {
+    font-size: 8px;
+  }
+
+  .terminal-command-form {
+    padding-inline: 8px;
+  }
+
+  .live-tmux-title {
+    display: -webkit-box;
+    white-space: normal;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    line-height: 1.4;
+  }
+}