loadtoagent 1.0.0

package/renderer/styles-onboarding.css

@@ -0,0 +1,344 @@
+/*
+ * Onboarding and navigation help
+ * ------------------------------
+ * First-run guidance, progress cues, compact tools, and primary entry actions.
+ */
+
+.beginner-guide-intro span {
+  display: block;
+  margin-top: 5px;
+  color: #8290a2;
+  font-size: 11px;
+}
+
+.beginner-guide li>i {
+  width: 27px;
+  height: 27px;
+  display: grid;
+  place-items: center;
+  border-radius: 50%;
+  background: #18384a;
+  color: #8ee4ff;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 750;
+}
+
+.beginner-guide li b {
+  display: block;
+  color: #dce6ef;
+  font-size: 12px;
+}
+
+.beginner-guide li small {
+  display: block;
+  margin-top: 4px;
+  color: #7e8da0;
+  font-size: 11px;
+  line-height: 1.45;
+}
+
+.beginner-guide b {
+  word-break: keep-all;
+  overflow-wrap: break-word;
+}
+
+.beginner-guide small {
+  word-break: keep-all;
+  overflow-wrap: break-word;
+}
+
+.new-run-cta {
+  min-width: 168px;
+  height: 48px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 10px;
+  padding: 0 10px 0 12px;
+  border: 0;
+  border-radius: 13px;
+  box-shadow: 0 0 0 1px rgba(255,255,255,.14),0 12px 30px rgba(83,160,192,.18);
+  transition-property: transform,box-shadow,filter;
+  transition-duration: 160ms;
+  transition-timing-function: ease-out;
+}
+
+.new-run-cta:hover {
+  filter: brightness(1.04);
+  box-shadow: 0 0 0 1px rgba(255,255,255,.22),0 16px 34px rgba(83,160,192,.25);
+}
+
+.new-run-cta:active {
+  transform: scale(.96);
+}
+
+.new-run-cta-icon {
+  width: 30px;
+  height: 30px;
+  display: grid;
+  place-items: center;
+  flex: 0 0 auto;
+  border-radius: 9px;
+  background: rgba(6,18,25,.12);
+  font-size: 19px;
+  font-weight: 450;
+}
+
+.new-run-cta-copy {
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  flex: 1;
+}
+
+.new-run-cta-copy b {
+  overflow: hidden;
+  font-size: 12px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.new-run-cta-copy small {
+  margin-left: auto;
+  color: rgba(4,16,23,.58);
+  font-size: 9px;
+}
+
+.new-run-cta-copy kbd {
+  font: inherit;
+}
+
+.guide-toggle {
+  min-width: 154px;
+  min-height: 48px;
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  padding: 6px 11px;
+  border: 1px solid #304253;
+  border-radius: 13px;
+  background: #101925;
+  color: #dce7ef;
+  text-align: left;
+  cursor: pointer;
+}
+
+.guide-toggle:hover {
+  border-color: #4e7187;
+  background: #152332;
+}
+
+.guide-toggle>span:first-child {
+  width: 28px;
+  height: 28px;
+  display: grid;
+  place-items: center;
+  flex: 0 0 auto;
+  border-radius: 9px;
+  background: #18384a;
+  color: #91e7ff;
+  font-size: 14px;
+  font-weight: 850;
+}
+
+.guide-toggle b {
+  display: block;
+  font-size: 12px;
+}
+
+.guide-toggle small {
+  display: block;
+  margin-top: 3px;
+  color: #8d9dad;
+  font-size: 10px;
+}
+
+.beginner-guide {
+  max-width: 1640px;
+  display: grid;
+  margin: 18px auto 0;
+  border: 1px solid #263746;
+  border-radius: 15px;
+  position: relative;
+  grid-template-columns: 230px minmax(0,1fr);
+  align-items: stretch;
+  gap: 16px;
+  padding: 18px 52px 18px 18px;
+  border-color: #345062;
+  background: radial-gradient(circle at 0 0,rgba(89,216,255,.12),transparent 38%),linear-gradient(125deg,#101b27,#0b111a 68%);
+}
+
+.guide-time {
+  display: inline-flex!important;
+  width: max-content;
+  margin-bottom: 8px;
+  padding: 4px 8px;
+  border-radius: 999px;
+  background: #17394a;
+  color: #8ce5ff!important;
+  font-size: 10px!important;
+  font-weight: 800;
+  letter-spacing: .06em;
+}
+
+.beginner-guide-intro b {
+  display: block;
+  color: #e5edf5;
+  font-size: 15px;
+}
+
+.beginner-guide-intro>span:not(.guide-time) {
+  color: #a0adbd;
+  font-size: 12px;
+  line-height: 1.5;
+}
+
+.guide-progress {
+  height: 6px;
+  margin-top: 13px;
+  overflow: hidden;
+  border-radius: 999px;
+  background: #202d3a;
+}
+
+.guide-progress i {
+  display: block;
+  width: 0;
+  height: 100%;
+  border-radius: inherit;
+  background: linear-gradient(90deg,#57d7ff,#5de4ad);
+  transition: width .3s ease;
+}
+
+.beginner-guide ol {
+  display: grid;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  grid-template-columns: repeat(4,minmax(0,1fr));
+  gap: 9px;
+}
+
+.beginner-guide li {
+  min-width: 0;
+  grid-template-columns: 30px minmax(0,1fr);
+  align-items: center;
+  gap: 9px;
+  border-left: 1px solid #263746;
+  display: block;
+  padding: 0;
+  border: 0;
+}
+
+.beginner-guide li>button {
+  width: 100%;
+  min-height: 112px;
+  display: grid;
+  grid-template-columns: 32px minmax(0,1fr);
+  align-items: start;
+  gap: 9px;
+  padding: 12px;
+  border: 1px solid #2a3a48;
+  border-radius: 13px;
+  background: #0d151f;
+  color: inherit;
+  text-align: left;
+  cursor: pointer;
+  transition: transform .16s ease,border-color .16s ease,background .16s ease;
+}
+
+.beginner-guide li>button:hover {
+  transform: translateY(-2px);
+  border-color: #4b7084;
+  background: #12202c;
+}
+
+.beginner-guide li>button>i {
+  width: 30px;
+  height: 30px;
+  display: grid;
+  place-items: center;
+  border-radius: 9px;
+  background: #18384a;
+  color: #91e7ff;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 800;
+}
+
+.beginner-guide li>button>span {
+  min-width: 0;
+}
+
+.beginner-guide li>button b {
+  display: block;
+  color: #e4edf4;
+  font-size: 13px;
+}
+
+.beginner-guide li>button small {
+  display: block;
+  margin-top: 5px;
+  color: #a0adbd;
+  font-size: 11px;
+  line-height: 1.5;
+}
+
+.beginner-guide li>button em {
+  display: block;
+  margin-top: 9px;
+  color: #82dfff;
+  font-size: 10px;
+  font-style: normal;
+  font-weight: 750;
+}
+
+.beginner-guide li.completed>button {
+  border-color: #2d6656;
+  background: #0d201d;
+}
+
+.beginner-guide li.completed>button>i {
+  background: #1a493b;
+  color: #83edc3;
+  font-size: 0;
+}
+
+.beginner-guide li.completed>button>i:after {
+  content: "✓";
+  font-size: 13px;
+}
+
+.beginner-guide li.completed>button em {
+  color: #74d9b4;
+}
+
+.beginner-guide li.completed>button em:before {
+  content: "완료 · ";
+}
+
+.guide-dismiss {
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  min-width: 34px;
+  min-height: 34px;
+  padding: 0 9px;
+  border: 0;
+  border-radius: 9px;
+  background: #17222e;
+  color: #9cabb9;
+  font-size: 10px;
+  cursor: pointer;
+}
+
+.guide-dismiss:hover {
+  background: #20303e;
+  color: #edf5f8;
+}
+
+.mobile-tools-menu {
+  display: none;
+}

package/renderer/styles-overlays.css

@@ -0,0 +1,284 @@
+/*
+ * Overlays and transient UI
+ * -------------------------
+ * Drawers, modal surfaces, backdrops, close controls, and toast messages.
+ */
+
+.drawer-loading {
+  min-height: 280px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  color: #728094;
+}
+
+.drawer-loading span {
+  width: 27px;
+  height: 27px;
+  border: 2px solid #253244;
+  border-top-color: var(--drawer-provider);
+  border-radius: 50%;
+  animation: spin .75s linear infinite;
+}
+
+.drawer-loading b {
+  margin-top: 13px;
+  color: #b9c4d1;
+  font-size: 10px;
+}
+
+.drawer-loading small {
+  margin-top: 5px;
+  color: #596678;
+  font-size: 8px;
+}
+
+.drawer-backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(2,4,8,.5);
+  backdrop-filter: blur(2px);
+  z-index: 20;
+}
+
+.drawer-head {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 21px 22px 16px;
+}
+
+.drawer-title {
+  min-width: 0;
+}
+
+.close-button:hover {
+  background: #1a2230;
+  color: white;
+}
+
+.drawer-tabs {
+  display: flex;
+  padding: 0 22px;
+  border-bottom: 1px solid var(--line);
+}
+
+.drawer-tab.active {
+  color: #e2e9f1;
+}
+
+.drawer-tab.active:after {
+  content: "";
+  position: absolute;
+  left: 12px;
+  right: 12px;
+  bottom: -1px;
+  height: 2px;
+  background: var(--drawer-provider,#79d9f8);
+}
+
+.drawer-content {
+  flex: 1;
+  overflow: auto;
+  padding: 18px 22px 30px;
+}
+
+.drawer-error {
+  min-height: 280px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+}
+
+.drawer-error b {
+  font-size: 15px;
+}
+
+.drawer-error span {
+  max-width: 420px;
+  margin-top: 8px;
+  color: #78879a;
+  font-size: 11px;
+}
+
+.drawer-error button {
+  margin-top: 16px;
+  padding: 9px 13px;
+  border: 1px solid #395b54;
+  border-radius: 9px;
+  background: #142720;
+  color: #8be5c3;
+  cursor: pointer;
+}
+
+.modal-head {
+  display: flex;
+  align-items: start;
+  margin-bottom: 18px;
+}
+
+.modal-head h2 {
+  margin: 0;
+  font-size: 18px;
+}
+
+.modal-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  margin-top: 17px;
+}
+
+.toast {
+  position: fixed;
+  z-index: 50;
+  left: 50%;
+  bottom: 24px;
+  transform: translateX(-50%);
+  padding: 10px 14px;
+  border: 1px solid #2a3647;
+  border-radius: 10px;
+  background: #121924;
+  box-shadow: 0 12px 36px rgba(0,0,0,.35);
+  color: #bdc7d4;
+  font-size: 9px;
+}
+
+.drawer-backdrop:not(.hidden) {
+  animation: motion-backdrop-in var(--motion-medium) ease both;
+}
+
+.drawer-backdrop.closing {
+  animation: motion-backdrop-out 260ms ease both;
+}
+
+.detail-drawer {
+  position: fixed;
+  z-index: 21;
+  right: 0;
+  top: 0;
+  width: min(610px,88vw);
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  border-left: 1px solid #263142;
+  background: linear-gradient(180deg,#101620,#090d14);
+  box-shadow: -26px 0 70px rgba(0,0,0,.45);
+  transform: translateX(105%);
+  transition: transform var(--motion-medium) var(--motion-ease),box-shadow var(--motion-medium) ease;
+}
+
+.detail-drawer.open {
+  transform: translateX(0);
+  box-shadow: -32px 0 88px rgba(0,0,0,.52);
+}
+
+.modal-backdrop:not(.hidden) {
+  animation: motion-backdrop-in var(--motion-medium) ease both;
+}
+
+.modal-backdrop.closing {
+  animation: motion-backdrop-out 220ms ease both;
+  pointer-events: none;
+}
+
+.toast:not(.hidden) {
+  animation: motion-toast-in 340ms var(--motion-ease) both;
+}
+
+.toast.leaving {
+  animation: motion-toast-out 220ms cubic-bezier(.4,0,1,1) both;
+}
+
+.drawer-meta .resume-agent {
+  border-color: #407d69;
+  background: #17382f;
+  color: #9ae8c9;
+  cursor: pointer;
+}
+
+.drawer-meta .resume-agent:hover {
+  background: #1d4b3e;
+  color: #c6f8e4;
+}
+
+.drawer-meta .work-state.working {
+  border-color: rgba(76,227,154,.3);
+  background: rgba(76,227,154,.09);
+  color: #79e9b4;
+}
+
+.drawer-meta .work-state.resting {
+  border-color: rgba(109,174,204,.27);
+  background: rgba(109,174,204,.08);
+  color: #9bc9dc;
+}
+
+.drawer-meta .work-state.attention {
+  border-color: rgba(255,107,127,.3);
+  background: rgba(255,107,127,.08);
+  color: #ff9dab;
+}
+
+.close-button {
+  width: 32px;
+  height: 32px;
+  margin-left: auto;
+  border: 1px solid var(--line);
+  border-radius: 9px;
+  background: #121823;
+  color: #8290a3;
+  font-size: 19px;
+  cursor: pointer;
+  transition: transform var(--motion-fast) var(--motion-ease),background-color var(--motion-fast) ease,border-color var(--motion-fast) ease,color var(--motion-fast) ease,box-shadow var(--motion-medium) ease,opacity var(--motion-fast) ease;
+}
+
+.drawer-title span {
+  color: #68758a;
+  font-weight: 700;
+  letter-spacing: .12em;
+  text-transform: uppercase;
+  font-size: 11px;
+}
+
+.drawer-title h2 {
+  margin: 4px 0 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 18px;
+}
+
+.drawer-tab {
+  transition: transform var(--motion-fast) var(--motion-ease),background-color var(--motion-fast) ease,border-color var(--motion-fast) ease,color var(--motion-fast) ease,box-shadow var(--motion-medium) ease,opacity var(--motion-fast) ease;
+  position: relative;
+  padding: 0 15px;
+  border: 0;
+  background: transparent;
+  color: #6e7a8d;
+  cursor: pointer;
+  height: 44px;
+  min-height: 44px;
+  font-size: 12px;
+}
+
+.drawer-meta {
+  display: flex;
+  flex-wrap: wrap;
+  padding: 0 22px 15px;
+  gap: 8px;
+}
+
+.modal-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 30;
+  display: grid;
+  place-items: center;
+  padding: 25px;
+  backdrop-filter: blur(5px);
+  background: rgba(2,5,9,.88);
+}