loadtoagent 1.0.0

package/renderer/styles-cards.css

@@ -0,0 +1,600 @@
+/*
+ * Session cards and metrics
+ * -------------------------
+ * Session summaries, provider marks, status pills, context meters, and token data.
+ */
+
+.provider-mark {
+  --provider: #8fa2b7;
+  display: grid;
+  place-items: center;
+  width: 35px;
+  height: 35px;
+  flex: 0 0 auto;
+  border-radius: 10px;
+  background: color-mix(in srgb,var(--provider) 11%,#111620);
+  border: 1px solid color-mix(in srgb,var(--provider) 32%,#202938);
+  color: var(--provider);
+  font-size: 9px;
+  font-weight: 850;
+  letter-spacing: -.03em;
+}
+
+.session-card:before {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  height: 2px;
+  background: linear-gradient(90deg,var(--provider),transparent 72%);
+  opacity: .7;
+}
+
+.session-card.running {
+  box-shadow: inset 0 0 36px color-mix(in srgb,var(--provider) 4%,transparent);
+}
+
+.card-head {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  padding: 15px 16px 11px;
+}
+
+.card-head-main {
+  min-width: 0;
+  flex: 1;
+}
+
+.status-pill:before {
+  content: "";
+  width: 5px;
+  height: 5px;
+  border-radius: 50%;
+  background: #697487;
+}
+
+.status-pill.running {
+  border-color: rgba(76,227,154,.25);
+  background: rgba(76,227,154,.08);
+  color: #7cecad;
+}
+
+.status-pill.running:before {
+  background: var(--green);
+  box-shadow: 0 0 7px var(--green);
+}
+
+.status-pill.waiting {
+  border-color: rgba(246,189,85,.25);
+  background: rgba(246,189,85,.08);
+  color: #f6c974;
+}
+
+.status-pill.waiting:before {
+  background: var(--amber);
+}
+
+.status-pill.failed {
+  border-color: rgba(255,107,127,.25);
+  background: rgba(255,107,127,.08);
+  color: #ff8999;
+}
+
+.status-pill.cancelled {
+  border-color: rgba(255,107,127,.25);
+  background: rgba(255,107,127,.08);
+  color: #ff8999;
+}
+
+.status-pill.failed:before {
+  background: var(--red);
+}
+
+.status-pill.cancelled:before {
+  background: var(--red);
+}
+
+.card-subtitle span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.card-subtitle i {
+  width: 3px;
+  height: 3px;
+  border-radius: 50%;
+  background: #3d4655;
+  flex: 0 0 auto;
+}
+
+.card-usage {
+  display: grid;
+  grid-template-columns: 1.1fr .9fr;
+  gap: 12px;
+  padding: 13px 16px;
+}
+
+.token-breakdown {
+  display: grid;
+  grid-template-columns: repeat(2,1fr);
+  gap: 5px;
+}
+
+.token-breakdown div {
+  min-width: 0;
+}
+
+.token-breakdown span {
+  display: block;
+  color: #566173;
+  font-size: 7px;
+}
+
+.token-breakdown b {
+  display: block;
+  margin-top: 2px;
+  color: #aeb9c6;
+  font-size: 9px;
+  font-weight: 570;
+}
+
+.session-card.running .source-tag:before {
+  background: var(--green);
+}
+
+.now-strip.is-live {
+  border-color: rgba(76,227,154,.17);
+  background: linear-gradient(90deg,rgba(76,227,154,.07),#090d14 74%);
+}
+
+.now-strip-icon {
+  width: 25px;
+  height: 25px;
+  flex: 0 0 auto;
+  display: grid;
+  place-items: center;
+  border-radius: 7px;
+  background: color-mix(in srgb,var(--provider) 11%,#131822);
+  color: var(--provider);
+  font-size: 10px;
+}
+
+.now-strip>div {
+  min-width: 0;
+  flex: 1;
+}
+
+.now-strip.is-live b {
+  color: #75e9ab;
+}
+
+.preview-line.assistant b {
+  color: var(--provider);
+}
+
+.preview-line.tool b {
+  color: #b49dea;
+}
+
+.preview-line.user span {
+  color: #b3bdc9;
+}
+
+.context-meter {
+  margin: 11px 16px 0;
+  padding: 11px 12px;
+  border: 1px solid #1b2532;
+  border-radius: 11px;
+  background: #0a0f16;
+}
+
+.context-meter-head {
+  display: flex;
+  align-items: end;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.context-meter.warning .context-meter-head>b {
+  color: var(--amber);
+}
+
+.context-meter.critical .context-meter-head>b {
+  color: var(--red);
+}
+
+.context-meter-track {
+  position: relative;
+  height: 9px;
+  margin-top: 9px;
+  border: 1px solid #25303e;
+  border-radius: 6px;
+  background: #141c27;
+  overflow: hidden;
+}
+
+.context-meter.warning .context-meter-track span {
+  background: linear-gradient(90deg,#d69a38,var(--amber));
+}
+
+.context-meter.critical .context-meter-track span {
+  background: linear-gradient(90deg,#e34e67,var(--red));
+  animation: meter-alert 1.15s ease-in-out infinite;
+}
+
+.context-meter-track i {
+  position: absolute;
+  z-index: 2;
+  top: 0;
+  bottom: 0;
+  width: 1px;
+  background: rgba(255,255,255,.19);
+}
+
+.context-meter-foot span:last-child {
+  color: #778397;
+}
+
+.token-row {
+  display: grid;
+  grid-template-columns: repeat(4,1fr);
+  gap: 0;
+  margin: 8px 16px 11px;
+  border: 1px solid #171f2b;
+  border-radius: 9px;
+  background: #0a0e15;
+  overflow: hidden;
+}
+
+.token-row>div {
+  min-width: 0;
+  padding: 7px 8px;
+  border-right: 1px solid #171f2b;
+}
+
+.token-row>div:last-child {
+  border: 0;
+  background: color-mix(in srgb,var(--provider) 5%,#0a0e15);
+}
+
+.token-row .total b {
+  color: var(--provider);
+}
+
+.token-hero {
+  padding: 17px;
+  border: 1px solid var(--line);
+  border-radius: 14px;
+  background: linear-gradient(145deg,color-mix(in srgb,var(--drawer-provider) 6%,#111721),#0c1018);
+}
+
+.token-hero-head {
+  display: flex;
+  justify-content: space-between;
+}
+
+.token-grid {
+  display: grid;
+  grid-template-columns: repeat(2,1fr);
+  gap: 9px;
+  margin-top: 12px;
+}
+
+.token-tile {
+  padding: 13px;
+  border: 1px solid var(--line-soft);
+  border-radius: 11px;
+  background: #0b0f16;
+}
+
+.token-tile strong {
+  display: block;
+  margin-top: 6px;
+  font-size: 17px;
+  font-weight: 620;
+}
+
+.now-strip {
+  margin: 13px 16px 0;
+  padding: 8px 10px;
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  border: 1px solid var(--line-soft);
+  border-radius: 10px;
+  background: #090d14;
+  min-height: 56px;
+}
+
+.preview-line {
+  min-width: 0;
+  display: grid;
+  align-items: baseline;
+  gap: 7px;
+  grid-template-columns: 62px minmax(0,1fr);
+}
+
+.context-meter-head>b {
+  color: var(--provider);
+  font-weight: 670;
+  letter-spacing: -.05em;
+  font-size: 25px;
+}
+
+.token-hero-head span {
+  color: #6d798d;
+  font-size: 11px;
+}
+
+.token-hero-head b {
+  font-size: 14px;
+}
+
+.token-tile span {
+  display: block;
+  color: #606c7e;
+  font-size: 10px;
+}
+
+.token-tile small {
+  display: block;
+  margin-top: 4px;
+  color: #4e596a;
+  font-size: 9px;
+}
+
+.token-note {
+  margin-top: 12px;
+  padding: 11px 12px;
+  border-left: 2px solid #344153;
+  background: #0d121a;
+  color: #697588;
+  line-height: 1.55;
+  font-size: 9px;
+}
+
+.motion-content-in .token-tile {
+  animation: motion-item-in 360ms var(--motion-ease) both;
+}
+
+.motion-content-in .token-tile:nth-child(2) {
+  animation-delay: 34ms;
+}
+
+.motion-content-in .token-tile:nth-child(3) {
+  animation-delay: 68ms;
+}
+
+.motion-content-in .token-tile:nth-child(n+4) {
+  animation-delay: 92ms;
+}
+
+.status-pill.completed {
+  border-color: rgba(109,174,204,.25);
+  background: rgba(109,174,204,.08);
+  color: #91c9e1;
+}
+
+.status-pill.completed:before {
+  background: #6daecc;
+}
+
+.status-pill.work-working {
+  border-color: rgba(76,227,154,.32);
+  background: rgba(76,227,154,.11);
+  color: #78e9b2;
+}
+
+.status-pill.work-working:before {
+  background: #4ce39a;
+  box-shadow: 0 0 7px rgba(76,227,154,.7);
+}
+
+.status-pill.work-resting {
+  border-color: rgba(109,174,204,.26);
+  background: rgba(109,174,204,.08);
+  color: #9bc8da;
+}
+
+.status-pill.work-resting:before {
+  border: 1px solid #6daecc;
+  background: transparent;
+}
+
+.status-pill.work-attention {
+  border-color: rgba(255,107,127,.3);
+  background: rgba(255,107,127,.08);
+  color: #ff9aa8;
+}
+
+.status-pill.work-attention:before {
+  background: #ff6b7f;
+}
+
+.card-head .execution-mode-badge {
+  margin-left: auto;
+}
+
+.card-head .execution-mode-badge+.status-pill {
+  margin-left: 0;
+}
+
+.session-card:active {
+  transform: translateY(1px) scale(.985);
+}
+
+.session-card {
+  --provider: #8fa2b7;
+  position: relative;
+  min-width: 0;
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  background: linear-gradient(155deg,color-mix(in srgb,var(--provider) 4%,#111722),#0c1018 48%);
+  overflow: hidden;
+  cursor: pointer;
+  content-visibility: auto;
+  contain-intrinsic-size: 430px;
+  contain: layout style paint;
+  min-height: 438px;
+  transition: transform var(--motion-medium) var(--motion-ease),border-color var(--motion-medium) ease,box-shadow var(--motion-medium) ease,filter var(--motion-medium) ease;
+}
+
+.session-card:hover {
+  transform: translateY(-3px);
+  border-color: color-mix(in srgb,var(--provider) 29%,#2b3546);
+  box-shadow: 0 16px 44px rgba(0,0,0,.22);
+  will-change: transform;
+}
+
+.context-meter-track span {
+  position: relative;
+  z-index: 1;
+  display: block;
+  height: 100%;
+  min-width: 0;
+  border-radius: 5px;
+  background: linear-gradient(90deg,color-mix(in srgb,var(--provider) 68%,#3ccf94),var(--provider));
+  box-shadow: 0 0 15px color-mix(in srgb,var(--provider) 28%,transparent);
+  transition: width 520ms var(--motion-ease),background-color var(--motion-medium) ease,filter var(--motion-medium) ease;
+}
+
+.card-provider-line {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  color: #6d798c;
+  font-size: 11px;
+}
+
+.card-provider-line b {
+  color: #b8c3d1;
+  font-size: 12px;
+}
+
+.status-pill {
+  margin-left: auto;
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 4px 7px;
+  border: 1px solid #2a3443;
+  border-radius: 10px;
+  background: #141a24;
+  color: #8d99aa;
+  font-weight: 700;
+  letter-spacing: .06em;
+  text-transform: uppercase;
+  font-size: 10px;
+}
+
+.card-title {
+  margin: 0;
+  padding: 0 16px;
+  font-weight: 610;
+  letter-spacing: -.025em;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 16px;
+  line-height: 1.45;
+}
+
+.card-subtitle {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  margin: 6px 16px 0;
+  white-space: nowrap;
+  overflow: hidden;
+  color: #9ba8b8;
+  font-size: 11px;
+}
+
+.now-strip b {
+  display: block;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: #c6d0dc;
+  font-weight: 620;
+  font-size: 12px;
+}
+
+.now-strip div>span {
+  display: block;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin-top: 3px;
+  color: #95a3b4;
+  font-size: 11px;
+}
+
+.preview-line b {
+  color: #778397;
+  text-transform: uppercase;
+  white-space: nowrap;
+  font-size: 10px;
+}
+
+.preview-line span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: #a7b3c1;
+  font-size: 11px;
+}
+
+.context-meter-head>div span {
+  display: block;
+  font-weight: 700;
+  letter-spacing: .08em;
+  text-transform: uppercase;
+  color: #909eaf;
+  font-size: 11px;
+}
+
+.context-meter-foot {
+  display: flex;
+  justify-content: space-between;
+  gap: 10px;
+  margin-top: 6px;
+  color: #909eaf;
+  font-size: 11px;
+}
+
+.token-row span {
+  display: block;
+  color: #909eaf;
+  font-size: 11px;
+}
+
+.card-footer {
+  height: 34px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 16px;
+  border-top: 1px solid var(--line-soft);
+  background: rgba(7,10,16,.42);
+  color: #909eaf;
+  font-size: 11px;
+}
+
+.context-meter-head>div strong {
+  display: block;
+  margin-top: 4px;
+  color: #d1d9e3;
+  font-weight: 620;
+  font-size: 13px;
+}
+
+.token-row b {
+  display: block;
+  margin-top: 3px;
+  color: #aeb9c7;
+  font-weight: 600;
+  font-size: 12px;
+}