loadtoagent 1.1.0 → 1.3.1

package/renderer/styles-readability.css

@@ -0,0 +1,862 @@
+/*
+ * Readability system
+ * ------------------
+ * Final, cross-view legibility layer. This file intentionally loads last so
+ * every screen shares the same readable type floor, contrast, and focus cues.
+ */
+
+:root {
+  --sidebar: 272px;
+  --text: #f6f9fb;
+  --muted: #c3ced7;
+  --dim: #aab8c4;
+  --line: #344554;
+  --line-soft: #253542;
+  --panel: #0c151f;
+  --panel-2: #121d28;
+  --panel-3: #172532;
+  --focus: #99ebff;
+}
+
+html,
+body {
+  font-size: 15px;
+  line-height: 1.55;
+  text-rendering: optimizeLegibility;
+}
+
+body {
+  letter-spacing: -.005em;
+}
+
+/* Small copy carries real product meaning here, so it must remain readable. */
+body small {
+  font-size: 12px !important;
+  line-height: 1.5;
+  color: #b9c6d0 !important;
+}
+
+body :is(time, dt, dd) {
+  color: #b9c6d0 !important;
+  font-size: 12px !important;
+  line-height: 1.5;
+}
+
+body :is(
+  [class*="-meta"],
+  [class*="-label"],
+  [class*="-caption"],
+  [class*="-status"],
+  [class*="-hint"],
+  [class*="-summary"],
+  [class*="-time"],
+  [class*="-count"],
+  [class*="-kicker"]
+) {
+  font-size: 12px;
+  line-height: 1.5;
+}
+
+body :is(p, li, dd, dt, label, input, textarea, select, button) {
+  line-height: 1.5;
+}
+
+body :is(.subtitle, .section-explain, .run-modal-intro, .settings-head p) {
+  color: var(--muted);
+  font-size: 15px;
+  line-height: 1.7;
+}
+
+.global-stat > span,
+.global-stat > em {
+  font-size: 12px;
+}
+
+.global-stat > span {
+  color: #cbd6de !important;
+}
+
+body :is(.eyebrow, .nav-group-label, .section-title, .field-label) {
+  color: #a9b8c5;
+  font-size: 12px;
+  line-height: 1.4;
+  letter-spacing: .08em;
+}
+
+.main-stage {
+  display: flex;
+  flex-direction: column;
+  padding-top: 34px;
+}
+
+.main-stage > * {
+  width: 100%;
+  flex: 0 0 auto;
+}
+
+/* Home starts with decisions, then live work; reference material comes later. */
+body[data-current-view="all"] .topbar { order: 0; }
+body[data-current-view="all"] #appErrorBanner { order: 1; }
+body[data-current-view="all"] #operationsOverview { order: 2; margin-top: 20px; }
+body[data-current-view="all"] #liveSection { order: 3; }
+body[data-current-view="all"] #updateNotice { order: 4; }
+body[data-current-view="all"] #globalStats { order: 5; }
+body[data-current-view="all"] #providerOverview { order: 6; }
+body[data-current-view="all"] #beginnerGuide { order: 7; }
+body[data-current-view="all"] #sessionSection { order: 8; }
+
+.topbar {
+  align-items: center;
+  margin: 0 auto;
+}
+
+.topbar h1 {
+  line-height: 1.16;
+}
+
+.top-actions :is(button, .sync-state) {
+  min-height: 48px;
+}
+
+.sync-state.connection-error > span {
+  background: var(--red, #ff7373);
+  box-shadow: 0 0 9px rgba(255, 115, 115, .55);
+  animation: none;
+}
+
+.sync-state.connection-error small {
+  color: #ff9b9b !important;
+  font-weight: 750;
+}
+
+/* Navigation: labels and counts should be scannable without leaning in. */
+.sidebar {
+  padding-inline: 19px;
+}
+
+.brand small {
+  color: #95a6b7;
+  font-size: 12px !important;
+}
+
+.nav-item {
+  min-height: 48px;
+  color: #c0ccd7;
+  font-size: 14px;
+  font-weight: 620;
+}
+
+.nav-item:hover {
+  background: #182331;
+  color: #f4f8fb;
+}
+
+.nav-item.active {
+  background: linear-gradient(90deg, rgba(89, 216, 255, .2), rgba(89, 216, 255, .07));
+  color: #fff;
+  box-shadow: inset 3px 0 var(--cyan);
+}
+
+.nav-item b {
+  min-width: 42px;
+  display: inline-flex;
+  align-items: baseline;
+  justify-content: center;
+  gap: 3px;
+  padding: 4px 7px;
+  color: #d3dce5;
+  font-size: 12px;
+}
+
+.nav-item b small,
+.advanced-tools-nav > summary b small {
+  color: #9eb0bd;
+  font-size: 11.5px !important;
+  font-weight: 700;
+}
+
+.advanced-tools-nav > summary b {
+  min-width: 48px;
+  display: inline-flex;
+  align-items: baseline;
+  justify-content: center;
+  gap: 3px;
+}
+
+.nav-icon {
+  font-size: 16px;
+}
+
+.sidebar-footer strong,
+.sidebar-footer small,
+.sidebar-app-version {
+  color: #aebdca;
+  font-size: 12px !important;
+}
+
+.provider-rail-item,
+.workspace-item {
+  min-height: 44px;
+  color: #c5d0da;
+  font-size: 13px;
+}
+
+.provider-mini-mark {
+  width: 25px;
+  height: 25px;
+  font-size: 12px;
+}
+
+/* Shared surfaces: stronger separation makes dense screens easier to chunk. */
+body :is(
+  .beginner-guide,
+  .provider-overview-card,
+  .session-card,
+  .settings-card,
+  .language-settings-card,
+  .provider-visibility-card,
+  .update-center,
+  .terminal-workbench,
+  .tmux-map-shell,
+  .automation-overview,
+  .operations-overview,
+  .attention-inbox
+) {
+  border-color: var(--line);
+}
+
+body :is(.provider-overview-card, .session-card, .runtime-schedule-card, .terminal-session-item) {
+  box-shadow: 0 10px 28px rgba(0, 0, 0, .13);
+}
+
+body :is(button, input, select, textarea, summary, [tabindex]):focus-visible {
+  outline: 3px solid var(--focus);
+  outline-offset: 3px;
+}
+
+.app-error-banner {
+  max-width: 1640px;
+  display: grid;
+  grid-template-columns: 44px minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 14px;
+  margin: 20px auto 0;
+  padding: 16px 18px;
+  border: 1px solid #8b4b55;
+  border-radius: 14px;
+  background: linear-gradient(100deg, rgba(111, 39, 51, .34), rgba(35, 18, 24, .9));
+}
+
+.app-error-icon {
+  width: 44px;
+  height: 44px;
+  display: grid;
+  place-items: center;
+  border-radius: 12px;
+  background: #4c2029;
+  color: #ffb0ba;
+  font-size: 20px;
+  font-weight: 850;
+}
+
+.app-error-banner b { color: #fff3f5; font-size: 15px; }
+.app-error-banner p { margin: 4px 0 0; color: #e7c8cd; font-size: 13px; }
+.app-error-actions { display: flex; flex-wrap: wrap; gap: 8px; }
+.app-error-actions button {
+  min-height: 44px;
+  padding: 0 14px;
+  border: 1px solid #8b5961;
+  border-radius: 10px;
+  background: #301b21;
+  color: #ffe8ec;
+  font-weight: 720;
+}
+.app-error-actions button:first-child { border-color: #e47b89; background: #6b2f3a; }
+
+body :is(input, select, textarea) {
+  color: #f3f7fa;
+}
+
+body :is(input, textarea)::placeholder {
+  color: #8293a3;
+  opacity: 1;
+}
+
+/* First-use guide: each step reads as a clear action, not fine print. */
+.beginner-guide {
+  grid-template-columns: minmax(240px, .75fr) minmax(0, 2.7fr);
+  gap: 20px;
+  padding: 22px 56px 22px 22px;
+}
+
+.beginner-guide-intro b {
+  font-size: 17px;
+  line-height: 1.35;
+}
+
+.beginner-guide-intro > span:not(.guide-time) {
+  color: #becbd6;
+  font-size: 13px;
+  line-height: 1.6;
+}
+
+.guide-time {
+  font-size: 12px !important;
+}
+
+.beginner-guide ol {
+  gap: 10px;
+}
+
+.beginner-guide li button {
+  min-height: 118px;
+  padding: 15px;
+}
+
+.beginner-guide li b {
+  font-size: 14px;
+  line-height: 1.35;
+}
+
+.beginner-guide li small {
+  color: #acbac7;
+  font-size: 12px !important;
+  line-height: 1.55;
+}
+
+.beginner-guide li em {
+  font-size: 12px;
+  font-weight: 760;
+}
+
+/* Home and task cards: strengthen the title > current state > metadata order. */
+.provider-overview-card {
+  min-height: 142px;
+  padding: 20px;
+}
+
+.provider-overview-card strong {
+  font-size: 16px;
+}
+
+.provider-overview-card :is(span, small) {
+  color: #adbac6;
+  font-size: 12px;
+}
+
+.sessions-heading h2,
+.live-section h2,
+.terminal-section h2,
+.tmux-section h2 {
+  line-height: 1.25;
+}
+
+.session-card h3,
+.card-title {
+  color: #f4f8fb;
+  font-size: 17px;
+  line-height: 1.35;
+}
+
+.session-card :is(.card-subtitle, .activity-copy span, .conversation-preview p, .now-strip p) {
+  color: #b5c2cd;
+  font-size: 13px;
+  line-height: 1.6;
+}
+
+.session-card :is(.status-pill, .meta-chip, time) {
+  font-size: 12px;
+}
+
+.card-provider-line span {
+  font-size: 12px;
+}
+
+.session-result-summary {
+  color: #9faebb;
+  font-size: 12px;
+}
+
+/* Runtime view: labels were the smallest text in the product. */
+.runtime-overview-title > div > span,
+.runtime-loop-detail header p,
+.runtime-now-strip p,
+.runtime-schedule-card small,
+.runtime-loop-phase > small,
+.runtime-current-signal p {
+  color: #adbec7;
+  font-size: 12px;
+  line-height: 1.55;
+}
+
+.runtime-overview-counts span,
+.runtime-schedule-time,
+.runtime-loop-tab small,
+.runtime-active-phase small,
+.runtime-now-strip small,
+.runtime-loop-phase-index,
+.runtime-loop-footer dt,
+.runtime-current-signal b {
+  font-size: 12px;
+  line-height: 1.45;
+}
+
+.runtime-schedule-card {
+  min-height: 104px;
+  padding: 18px;
+}
+
+.runtime-schedule-card strong,
+.runtime-loop-phase > b {
+  font-size: 14px;
+  line-height: 1.4;
+}
+
+.runtime-loop-tab {
+  min-height: 58px;
+}
+
+.runtime-loop-tabs {
+  padding-right: 18px;
+  border-right: 2px solid #58cdb0;
+  box-shadow: inset -20px 0 18px -20px rgba(89, 216, 255, .9);
+  scrollbar-width: auto;
+  scrollbar-color: #5a7f7a #0a1721;
+}
+
+.runtime-loop-tabs::after {
+  content: "→";
+  position: sticky;
+  right: 0;
+  align-self: center;
+  color: #8de6cd;
+  font-size: 15px;
+  font-weight: 800;
+}
+
+.runtime-loop-tab b {
+  font-size: 13px;
+}
+
+.runtime-loop-detail h3 {
+  font-size: 20px;
+  line-height: 1.3;
+}
+
+.runtime-now-strip b {
+  font-size: 15px;
+  line-height: 1.45;
+}
+
+.runtime-open-task {
+  font-size: 12px;
+}
+
+/* Terminal/tmux: preserve console density while making surrounding controls clear. */
+.terminal-section-head,
+.tmux-section-head {
+  align-items: center;
+}
+
+.terminal-workbench :is(.terminal-target-meta small, .terminal-session-item small, .terminal-resource-tip small) {
+  color: #aab9c6;
+  font-size: 12px !important;
+}
+
+.terminal-session-item strong,
+.terminal-target-meta b {
+  font-size: 14px;
+  line-height: 1.4;
+}
+
+.terminal-workbench :is(button, label, .terminal-command-status) {
+  font-size: 12px;
+}
+
+.terminal-session-row {
+  grid-template-columns: minmax(0, 1fr) 44px;
+  gap: 7px;
+}
+
+.terminal-reorder-actions button {
+  min-width: 44px;
+  min-height: 44px;
+  font-size: 16px;
+}
+
+.terminal-font-controls {
+  grid-template-columns: 44px 52px 44px;
+  min-height: 44px;
+}
+
+.terminal-font-controls button {
+  min-width: 44px;
+  height: 44px;
+}
+
+.terminal-font-controls output { font-size: 12px; }
+
+.terminal-session-tools { position: relative; }
+
+.terminal-session-tools > summary {
+  min-width: 112px;
+  min-height: 44px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  padding: 0 12px;
+  border: 1px solid #35505d;
+  border-radius: 9px;
+  background: #111d27;
+  color: #c7d4dc;
+  font-size: 12px;
+  font-weight: 750;
+  cursor: pointer;
+  list-style: none;
+}
+
+.terminal-session-tools > summary::-webkit-details-marker { display: none; }
+.terminal-session-tools > summary i { font-style: normal; transition: transform .18s ease; }
+.terminal-session-tools[open] > summary i { transform: rotate(180deg); }
+.terminal-session-tools .terminal-key-actions {
+  position: absolute;
+  z-index: 8;
+  top: calc(100% + 8px);
+  right: 0;
+  min-width: 440px;
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 7px;
+  padding: 10px;
+  border: 1px solid #3a4f5d;
+  border-radius: 12px;
+  background: #0c151e;
+  box-shadow: 0 18px 44px rgba(0, 0, 0, .48);
+}
+
+.terminal-session-tools:not([open]) > .terminal-key-actions { display: none; }
+
+.terminal-controlbar .terminal-session-tools .terminal-key-actions button {
+  min-height: 44px;
+  height: auto;
+  justify-content: space-between;
+  font-size: 12px;
+}
+
+.terminal-command-form textarea,
+.terminal-screen .xterm {
+  font-size: 14px;
+  line-height: 1.5;
+}
+
+.terminal-command-form textarea {
+  min-height: 72px;
+}
+
+.tmux-pane-node :is(small, span),
+.tmux-map-shell :is(.tmux-map-legend, .tmux-map-help) {
+  color: #afbdc9;
+}
+
+/* Settings: version metadata and explanations are primary, not decorative. */
+.settings-section :is(p, small, dt) {
+  color: #b5c3cc;
+}
+
+.settings-section :is(.language-settings-copy p, .provider-visibility-copy p, .update-state-copy p) {
+  font-size: 13px;
+  line-height: 1.65;
+}
+
+.settings-section :is(.language-settings-card, .provider-visibility-card) {
+  padding: 24px;
+}
+
+.provider-visibility-item {
+  min-height: 72px;
+}
+
+.version-card small,
+.version-route small,
+.update-fact p,
+.update-step p {
+  font-size: 12px !important;
+  line-height: 1.55;
+}
+
+/* Drawers, dialogs, and menus must be as readable as the main views. */
+.detail-drawer {
+  width: min(610px, 94vw);
+}
+
+.drawer-tabs .drawer-tab {
+  min-height: 48px;
+  font-size: 13px;
+}
+
+.drawer-content :is(p, li, dd, dt, span) {
+  line-height: 1.6;
+}
+
+.quality-command-list button small,
+.quality-dialog-status,
+.shortcut-help-list dd {
+  color: #aebcc8;
+  font-size: 12px;
+}
+
+.run-step-head b,
+.field-label {
+  font-size: 13px;
+}
+
+.run-step-head small,
+.run-advanced small,
+.permission-toggle small {
+  color: #b0beca;
+  font-size: 12px !important;
+}
+
+/* Keep compact product metadata readable without changing structural sizing. */
+.provider-mark,
+.sync-state b,
+.guide-dismiss,
+.update-notice button span,
+.source-tag,
+.runtime-segment-icon,
+.runtime-segment > header em,
+.live-tmux-overview-open {
+  font-size: 12px;
+}
+
+.new-run-cta-copy b,
+.new-run-cta-icon {
+  color: #102733;
+}
+
+.new-run-cta {
+  background-color: #b8d2e1;
+}
+
+.new-run-cta-copy small,
+.new-run-cta-copy kbd {
+  background-color: #b8d2e1;
+  color: #102733 !important;
+}
+
+.runtime-segment > header em,
+.runtime-disclosure > summary em,
+.agent-flow-copy em,
+.agent-flow-provider em,
+.agent-identity em,
+.live-tmux-card-head em,
+.tmux-agent-block em {
+  color: #b7c5cf;
+  font-size: 12px;
+}
+
+.operations-metrics span {
+  color: #d1dbe2 !important;
+}
+
+.poc-state,
+.poc-metrics span,
+.poc-head small,
+.provider-overview-card .status-pill {
+  font-size: 12px;
+}
+
+.execution-mode-badge,
+.execution-mode-badge b,
+.execution-mode-badge small,
+.execution-mode-badge i {
+  font-size: 12px !important;
+}
+
+.runtime-schedule-lane > header em {
+  color: #9db2bd;
+}
+
+.runtime-loop-phase-index em {
+  color: #adbbc4;
+  font-size: 12px;
+}
+
+.runtime-overview-title p,
+.runtime-schedule-lane > header span,
+.runtime-loop-lane-head > div > span,
+.runtime-overview-counts > span,
+.runtime-overview-counts > b {
+  font-size: 12px;
+}
+
+.settings-section :is(
+  .language-settings-copy > span,
+  .language-select > span,
+  .provider-visibility-copy > span,
+  .version-node span,
+  .update-fact > span,
+  .update-step > span
+) {
+  color: #a8bac4;
+  font-size: 12px;
+}
+
+.terminal-section :is(
+  button,
+  small,
+  em,
+  .terminal-resource-live,
+  .terminal-session-icon,
+  .terminal-target-icon,
+  .terminal-console-state,
+  .terminal-command-label > span,
+  .terminal-notice
+) {
+  font-size: 12px;
+}
+
+#terminalSessionSummary,
+.terminal-resource-tip b,
+.terminal-target-meta span,
+.terminal-connection-state span,
+.terminal-command-form .terminal-command-label label {
+  font-size: 12px;
+}
+
+.tmux-section :is(
+  button,
+  small,
+  em,
+  .tmux-stats span,
+  .tmux-distro-node > span,
+  .tmux-distro-node > b,
+  .tmux-pane-node span
+) {
+  font-size: 12px;
+}
+
+.tmux-pane-head i {
+  font-size: 12px;
+}
+
+.live-tmux-shortcut {
+  min-height: 44px;
+}
+
+@media (max-width: 1280px) {
+  .beginner-guide {
+    grid-template-columns: 1fr;
+  }
+
+  .beginner-guide ol {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .beginner-guide li button {
+    min-height: 104px;
+  }
+}
+
+@media (max-width: 980px) {
+  :root {
+    --sidebar: 220px;
+  }
+
+  .sidebar {
+    padding-inline: 14px;
+  }
+}
+
+@media (max-width: 720px) {
+  :root {
+    --sidebar: 0px;
+  }
+
+  html,
+  body {
+    font-size: 14px;
+  }
+
+  .main-stage {
+    padding-top: 22px;
+  }
+
+  .subtitle {
+    font-size: 14px;
+  }
+
+  .beginner-guide {
+    padding: 18px;
+  }
+
+  .beginner-guide ol {
+    grid-template-columns: 1fr;
+  }
+
+  .beginner-guide li button {
+    min-height: 96px;
+  }
+
+  .sidebar .nav-item > span:nth-child(2) {
+    font-size: 12px;
+  }
+
+  .guide-dismiss {
+    font-size: 0;
+  }
+
+  .detail-drawer {
+    width: 100vw;
+  }
+
+  .app-error-banner {
+    grid-template-columns: 40px minmax(0, 1fr);
+  }
+
+  .app-error-actions {
+    grid-column: 1 / -1;
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .run-modal-actions .run-submit-button {
+    grid-column: 1 / -1;
+    white-space: nowrap;
+  }
+
+  .run-submit-button #runSubmitLabel {
+    white-space: nowrap;
+  }
+
+  .terminal-session-tools .terminal-key-actions {
+    position: absolute;
+    top: calc(100% + 8px);
+    right: auto;
+    bottom: auto;
+    left: 0;
+    width: min(440px, calc(100vw - 28px));
+    min-width: 0;
+  }
+}
+
+@media (prefers-contrast: more) {
+  :root {
+    --line: #5b6f80;
+    --line-soft: #435666;
+    --muted: #d5dee5;
+    --dim: #c2ced7;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    scroll-behavior: auto !important;
+    animation-duration: .01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: .01ms !important;
+  }
+}