cicy-desktop 2.1.69 → 2.1.71

package/workers/render.bak.20260528-2338/src/components/BackendCard.css

@@ -1,299 +0,0 @@
-/* ── Square BackendCard ─────────────────────────────────────────────────
-   Aspect 1:1, brand-accented top stripe, large name, prominent CTA.
-*/
-.bcard {
-  position: relative;
-  /* Fixed footprint — does not stretch with window width. The grid is
-     repeat(auto-fill, 200px) so columns are always exactly 200px wide. */
-  width: 200px;
-  height: 200px;
-  background: var(--bg-elev-1);
-  border: 1px solid var(--hairline);
-  border-radius: var(--r-lg);
-  padding: var(--sp-4);
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  cursor: default;
-  transition: transform var(--dur-base) var(--ease),
-              box-shadow var(--dur-base) var(--ease),
-              border-color var(--dur-base) var(--ease);
-}
-.bcard:hover {
-  transform: translateY(-2px);
-  border-color: var(--hairline-strong, var(--hairline));
-  box-shadow: 0 8px 24px -8px rgba(0,0,0,0.18), 0 1px 0 rgba(255,255,255,0.04) inset;
-}
-
-/* top accent stripe — colored bar that runs across the top edge */
-.bcard__accent {
-  position: absolute;
-  top: 0; left: 0; right: 0;
-  height: 3px;
-  background: var(--brand);
-  opacity: 0.85;
-}
-
-/* Glowing background circle for online cards (subtle) */
-.bcard--online::before {
-  content: "";
-  position: absolute;
-  bottom: -40%;
-  right: -20%;
-  width: 140%;
-  height: 100%;
-  background: radial-gradient(circle at center, var(--brand-soft) 0%, transparent 60%);
-  pointer-events: none;
-  opacity: 0.5;
-}
-
-/* ── top row: status pill + menu ── */
-.bcard__top {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  position: relative;
-  z-index: 1;
-}
-.bcard__status-pill {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  padding: 4px 8px;
-  background: var(--bg);
-  border: 1px solid var(--hairline);
-  border-radius: var(--r-pill);
-  color: var(--fg-2);
-}
-.bcard__status-pill svg { color: var(--fg-3); }
-.bcard__dot {
-  width: 7px; height: 7px;
-  border-radius: 50%;
-  background: var(--fg-3);
-  flex-shrink: 0;
-}
-.bcard__dot--up      { background: var(--ok); box-shadow: 0 0 0 2px color-mix(in srgb, var(--ok) 30%, transparent); }
-.bcard__dot--warn    { background: var(--warn); }
-.bcard__dot--down    { background: var(--err); }
-.bcard__dot--unknown { background: var(--fg-3); }
-
-.bcard__menu-trigger { color: var(--fg-3); }
-.bcard__menu-trigger:hover { color: var(--fg); }
-
-/* ── body: name + host + meta ── */
-.bcard__body {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  gap: var(--sp-1);
-  padding-top: var(--sp-3);
-  padding-bottom: var(--sp-3);
-  position: relative;
-  z-index: 1;
-  min-width: 0;
-}
-.bcard__name {
-  margin: 0;
-  font-size: 17px;
-  font-weight: 700;
-  color: var(--fg);
-  letter-spacing: -0.015em;
-  line-height: 1.25;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.bcard__host {
-  font-family: var(--font-mono);
-  font-size: 11px;
-  color: var(--fg-2);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.bcard__meta {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 4px;
-  font-size: 11px;
-  color: var(--fg-3);
-}
-.bcard__ver {
-  font-family: var(--font-mono);
-  color: var(--fg-2);
-  background: var(--bg);
-  padding: 1px 6px;
-  border-radius: var(--r-sm);
-  border: 1px solid var(--hairline);
-}
-.bcard__sep { opacity: 0.4; }
-.bcard__badge {
-  display: inline-flex; align-items: center;
-  align-self: flex-start;
-  padding: 2px 8px;
-  border-radius: var(--r-pill);
-  background: var(--brand-soft);
-  color: var(--brand);
-  font-size: 10px;
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.4px;
-}
-
-/* ── primary CTA button ── */
-.bcard__cta {
-  position: relative; z-index: 1;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  width: 100%;
-  height: 38px;
-  border: none;
-  border-radius: var(--r-md);
-  background: var(--brand);
-  color: white;
-  font-size: var(--t-sm);
-  font-weight: 600;
-  letter-spacing: 0.1px;
-  cursor: pointer;
-  transition: transform 0.1s var(--ease), background var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
-  box-shadow: 0 2px 6px -1px color-mix(in srgb, var(--brand) 35%, transparent);
-}
-.bcard__cta:hover {
-  background: color-mix(in srgb, var(--brand) 90%, white);
-  box-shadow: 0 4px 10px -2px color-mix(in srgb, var(--brand) 50%, transparent);
-}
-.bcard__cta:active { transform: translateY(1px); }
-.bcard__cta:disabled {
-  background: var(--bg);
-  color: var(--fg-3);
-  cursor: not-allowed;
-  box-shadow: none;
-  border: 1px solid var(--hairline);
-}
-.bcard__cta--ghost {
-  background: var(--bg);
-  color: var(--fg);
-  border: 1px solid var(--hairline);
-  box-shadow: none;
-}
-.bcard__cta--ghost:hover {
-  background: var(--bg-elev-2, var(--bg));
-  border-color: var(--brand);
-  color: var(--brand);
-}
-.bcard__cta-spinner {
-  width: 14px; height: 14px;
-  border: 2px solid currentColor;
-  border-top-color: transparent;
-  border-radius: 50%;
-  animation: bcard-spin 0.8s linear infinite;
-}
-@keyframes bcard-spin { to { transform: rotate(360deg); } }
-
-/* ── progress overlay — replaces CTA ── */
-.bcard__progress {
-  position: relative; z-index: 1;
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-}
-.bcard__progress-text {
-  display: flex;
-  justify-content: space-between;
-  font-size: 12px;
-  font-weight: 500;
-  color: var(--fg);
-}
-.bcard__progress-pct { color: var(--brand); font-weight: 700; }
-.bcard__progress-bar {
-  height: 5px;
-  background: var(--bg);
-  border-radius: var(--r-pill);
-  overflow: hidden;
-  border: 1px solid var(--hairline);
-}
-.bcard__progress-fill {
-  height: 100%;
-  background: linear-gradient(90deg, var(--brand), color-mix(in srgb, var(--brand) 60%, white));
-  transition: width 0.3s var(--ease);
-  border-radius: var(--r-pill);
-}
-.bcard__progress-bar.is-indeterminate .bcard__progress-fill {
-  animation: bcard-indeterminate 1.4s ease-in-out infinite;
-}
-@keyframes bcard-indeterminate {
-  0%   { transform: translateX(-100%); }
-  100% { transform: translateX(400%); }
-}
-.bcard__progress-meta {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  font-size: 11px;
-  color: var(--fg-3);
-  font-family: var(--font-mono);
-}
-.bcard__cancel {
-  background: transparent;
-  border: none;
-  color: var(--fg-3);
-  font-size: 11px;
-  cursor: pointer;
-  padding: 0;
-  font-family: inherit;
-}
-.bcard__cancel:hover { color: var(--err); }
-
-/* Scrollable log panel under the progress bar — surfaces every shell command
-   and its summarized output so the user knows the install is alive. */
-/* When the install log is showing, let the card span the entire grid row
-   so the scrollable log has room (otherwise it's clamped to one card width). */
-.bcard.bcard--has-log {
-  grid-column: 1 / -1;
-}
-
-/* Install-time scrolling shell log. Each entry is one shell command preview
-   and its summarized output so the user knows the install is alive. */
-.bcard__progress-log {
-  margin-top: 10px;
-  max-height: 55vh;
-  min-height: 200px;
-  overflow-y: auto;
-  font-family: var(--font-mono);
-  font-size: 12px;
-  line-height: 1.5;
-  color: var(--fg-3);
-  background: color-mix(in srgb, var(--bg-1, #0d1117) 70%, transparent);
-  border: 1px solid var(--border, #30363d);
-  border-radius: 6px;
-  padding: 10px 12px;
-  white-space: pre-wrap;
-  word-break: break-word;
-  user-select: text;
-}
-
-/* ── kind variants ── */
-.bcard--local .bcard__accent { background: var(--brand); }
-.bcard--cloud .bcard__accent { background: var(--accent-cloud, #f59e0b); }
-.bcard--cloud .bcard__cta { background: var(--accent-cloud, #f59e0b); box-shadow: 0 2px 6px -1px color-mix(in srgb, var(--accent-cloud, #f59e0b) 35%, transparent); }
-.bcard--cloud .bcard__cta:hover { background: color-mix(in srgb, var(--accent-cloud, #f59e0b) 90%, white); }
-
-
-/* Minimal in-progress state — used when the WSL banner above the grid
-   already shows the full step timeline. The card just says "安装中…"
-   to avoid duplicating that information. */
-.bcard__progress--minimal {
-  display: flex;
-  flex-direction: row !important;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  flex: 1;
-  font-size: var(--t-sm);
-  color: var(--fg-2);
-}
-.bcard__progress--minimal .bcard__cta-spinner {
-  border-color: var(--fg-3) transparent transparent transparent;
-}

package/workers/render.bak.20260528-2338/src/components/BackendCard.jsx

@@ -1,133 +0,0 @@
-import Card from "./Card.jsx";
-import Button from "./Button.jsx";
-import Menu from "./Menu.jsx";
-import StatusChip, { dotKind } from "./StatusChip.jsx";
-import Icon from "./Icon.jsx";
-import { useT } from "../i18n";
-import "./BackendCard.css";
-
-/**
- * Square BackendCard — single tile in the grid. 1:1 aspect ratio.
- *
- * Visual layout (top-down):
- *   ┌──────────────────────┐
- *   │ ●           ⋯        │  meta row: status dot, kind icon, menu
- *   │                      │
- *   │ Local                │  name (large, bold)
- *   │ 127.0.0.1:8008       │  host (mono, dim)
- *   │ v2.0.7  ·  3h        │  version + uptime
- *   │                      │
- *   │ ┌──────────────────┐ │
- *   │ │  ↗   Open        │ │  primary action (full-width)
- *   │ └──────────────────┘ │
- *   └──────────────────────┘
- */
-export default function BackendCard({
-  backend, health, onOpen, menuItems = [],
-  badge, openLoading = false, openDisabled = false,
-  primaryButton, progress, progressLog, onCancel,
-}) {
-  const t = useT();
-  const isLocal = backend.kind === "local";
-  const kind = dotKind(health);
-
-  const hasProgress = !!progress;
-  const pct = hasProgress && typeof progress.progress === "number"
-    ? Math.round(progress.progress * 100) : null;
-
-  const accent = isLocal ? "var(--brand)" : "var(--accent-cloud)";
-
-  return (
-    <div className={`bcard ${isLocal ? "bcard--local" : "bcard--cloud"} ${kind === "up" ? "bcard--online" : ""} ${hasProgress && progressLog && progressLog.length > 0 ? "bcard--has-log" : ""}`}>
-      <div className="bcard__accent" style={{ background: accent }} />
-
-      <div className="bcard__top">
-        <div className="bcard__status-pill">
-          <span className={`bcard__dot bcard__dot--${kind}`} />
-          <Icon name={isLocal ? "laptop" : "globe"} size={12} />
-        </div>
-        {menuItems.length > 0 && !hasProgress && (
-          <Menu
-            trigger={<Button variant="ghost" size="sm" className="btn--icon bcard__menu-trigger" icon={<Icon name="more" />} />}
-            items={menuItems}
-          />
-        )}
-      </div>
-
-      <div className="bcard__body">
-        <h3 className="bcard__name" title={isLocal ? t("team.local") : backend.name}>
-          {isLocal ? t("team.local") : backend.name}
-        </h3>
-        {badge && <span className="bcard__badge">{badge}</span>}
-      </div>
-
-      {hasProgress ? (
-        progress.minimal ? (
-          // Minimal state: just say "安装中…" with a small spinner. The
-          // detailed timeline + progress bar lives in the WSL banner
-          // above the grid; the card avoids duplicating it.
-          <div className="bcard__progress bcard__progress--minimal">
-            <span className="bcard__cta-spinner" />
-            <span>{t("card.installing")}</span>
-          </div>
-        ) : (
-        <div className="bcard__progress">
-          <div className="bcard__progress-text">
-            <span>{progress.message || t("card.installing")}</span>
-            <span className="bcard__progress-pct">{pct == null ? "" : `${pct}%`}</span>
-          </div>
-          <div className={`bcard__progress-bar ${pct == null ? "is-indeterminate" : ""}`}>
-            <div className="bcard__progress-fill" style={{ width: pct == null ? "30%" : `${pct}%` }} />
-          </div>
-          <div className="bcard__progress-meta">
-            <span>
-              {progress.received != null && progress.total
-                ? `${formatBytes(progress.received)} / ${formatBytes(progress.total)}`
-                : (progress.phase || "")}
-            </span>
-            {onCancel && (
-              <button type="button" className="bcard__cancel" onClick={onCancel}>{t("card.cancel")}</button>
-            )}
-          </div>
-          {progressLog && progressLog.length > 0 && (
-            <pre className="bcard__progress-log" ref={(el) => {
-              // Auto-scroll to the bottom whenever a new line lands. ref callback
-              // runs on every render — cheaper than a useEffect for a leaf div.
-              if (el) el.scrollTop = el.scrollHeight;
-            }}>
-              {progressLog.join("\n")}
-            </pre>
-          )}
-        </div>
-        )
-      ) : (
-        <button
-          type="button"
-          className={`bcard__cta ${primaryButton?.variant === "ghost" ? "bcard__cta--ghost" : ""}`}
-          /* openDisabled is intended for the default Open button (which
-             would launch into a not-yet-running container). When the
-             caller supplies a primaryButton (Install / Start / Retry /
-             Update), it has its own onClick and shouldn't inherit that
-             gating — otherwise e.g. the Install button in `missing` state
-             is disabled by the very condition (no daemon) that requires
-             clicking Install. The primaryButton can still opt in
-             explicitly via its own `disabled: true`. */
-          disabled={primaryButton ? !!primaryButton.disabled : openDisabled}
-          onClick={primaryButton?.onClick || onOpen}
-        >
-          {(primaryButton?.loading ?? openLoading)
-            ? <span className="bcard__cta-spinner" />
-            : <Icon name={primaryButton?.icon || "open"} size={14} />}
-          <span>{primaryButton?.label || t("card.open")}</span>
-        </button>
-      )}
-    </div>
-  );
-}
-
-function formatBytes(n) {
-  if (n == null) return "?";
-  if (n < 1024) return `${n} B`;
-  if (n < 1024 * 1024) return `${(n / 1024).toFixed(1)} KB`;
-  return `${(n / (1024 * 1024)).toFixed(1)} MB`;
-}

package/workers/render.bak.20260528-2338/src/components/BackendModal.css

@@ -1,161 +0,0 @@
-.modal-backdrop {
-  position: fixed;
-  inset: 0;
-  background: rgba(5, 8, 12, 0.6);
-  backdrop-filter: blur(6px);
-  -webkit-backdrop-filter: blur(6px);
-  display: grid;
-  place-items: center;
-  z-index: 2000;
-  animation: modal-fade var(--dur-base) var(--ease);
-  padding: var(--sp-4);
-}
-@keyframes modal-fade {
-  from { opacity: 0; }
-  to   { opacity: 1; }
-}
-
-.modal {
-  width: 100%;
-  max-width: 480px;
-  background: var(--bg-elev-1);
-  border: 1px solid var(--hairline-2);
-  border-radius: var(--r-lg);
-  box-shadow: 0 24px 48px -12px rgba(0,0,0,0.6), 0 4px 12px rgba(0,0,0,0.3);
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  animation: modal-rise var(--dur-base) var(--ease);
-}
-@keyframes modal-rise {
-  from { opacity: 0; transform: translateY(8px) scale(0.98); }
-  to   { opacity: 1; transform: translateY(0) scale(1); }
-}
-
-.modal__head {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: var(--sp-4) var(--sp-5);
-  border-bottom: 1px solid var(--hairline);
-}
-.modal__title {
-  margin: 0;
-  font-size: var(--t-md);
-  font-weight: 600;
-  color: var(--fg);
-  letter-spacing: -0.01em;
-}
-.modal__close {
-  display: grid; place-items: center;
-  width: 28px; height: 28px;
-  border-radius: var(--r-sm);
-  color: var(--fg-3);
-  transition: all var(--dur-fast) var(--ease);
-}
-.modal__close:hover { color: var(--fg); background: var(--bg-elev-2); }
-
-.modal__body {
-  padding: var(--sp-5);
-  display: flex;
-  flex-direction: column;
-  gap: var(--sp-4);
-}
-.modal__field {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-}
-.modal__label {
-  font-size: 11px;
-  font-weight: 600;
-  color: var(--fg-2);
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
-}
-.modal__required { color: var(--brand); }
-.modal__input {
-  background: var(--bg);
-  border: 1px solid var(--hairline-2);
-  border-radius: var(--r-sm);
-  padding: 10px 12px;
-  font-size: var(--t-sm);
-  color: var(--fg);
-  font-family: inherit;
-  transition: all var(--dur-fast) var(--ease);
-  user-select: text;
-  -webkit-user-select: text;
-}
-.modal__input:focus {
-  border-color: var(--brand);
-  box-shadow: 0 0 0 3px var(--brand-soft);
-  outline: none;
-}
-.modal__input::placeholder { color: var(--fg-3); }
-
-.modal__status {
-  font-size: var(--t-xs);
-  padding: 8px 12px;
-  border-radius: var(--r-sm);
-}
-.modal__status--idle    { display: none; }
-.modal__status--probing { background: var(--brand-soft); color: var(--brand); }
-.modal__status--ok      { background: var(--success-soft); color: var(--success); }
-.modal__status--err     { background: var(--danger-soft); color: var(--danger); }
-
-.modal__foot {
-  display: flex;
-  justify-content: flex-end;
-  gap: var(--sp-2);
-  padding: var(--sp-3) var(--sp-5) var(--sp-4);
-  border-top: 1px solid var(--hairline);
-}
-
-.modal__input[readonly] {
-  color: var(--fg-3);
-  cursor: not-allowed;
-  background: var(--bg-elev-2);
-  border-color: var(--hairline);
-}
-.modal__input[readonly]:focus {
-  border-color: var(--hairline);
-  box-shadow: none;
-}
-.modal__locked {
-  font-size: 10px;
-  color: var(--fg-3);
-  font-weight: 400;
-  text-transform: none;
-  letter-spacing: normal;
-  margin-left: 6px;
-}
-
-.modal__token-wrap {
-  position: relative;
-  display: flex;
-  align-items: stretch;
-}
-.modal__token-input {
-  flex: 1;
-  padding-right: 40px;          /* leave room for the eye button */
-}
-.modal__token-toggle {
-  position: absolute;
-  right: 4px;
-  top: 50%;
-  transform: translateY(-50%);
-  width: 32px;
-  height: 32px;
-  display: grid;
-  place-items: center;
-  border-radius: var(--r-sm);
-  color: var(--fg-3);
-  cursor: pointer;
-  background: transparent;
-  border: 0;
-  transition: all var(--dur-fast) var(--ease);
-}
-.modal__token-toggle:hover {
-  color: var(--fg);
-  background: var(--bg-elev-2);
-}