cicy-desktop 2.1.69 → 2.1.71

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

@@ -1,199 +0,0 @@
-import { useEffect, useState } from "react";
-import { createPortal } from "react-dom";
-import Button from "./Button.jsx";
-import Icon from "./Icon.jsx";
-import { api } from "../api.js";
-import { useT } from "../i18n";
-import "./BackendModal.css";
-
-/**
- * <BackendModal mode="add"|"edit" backend={...} open onClose onSaved />
- *
- * Single dialog for both adding and editing a cloud backend.
- *   - mode="add":   blank fields, "Probe & Add" button
- *   - mode="edit":  pre-filled, "Save" button (URL probe optional via test btn)
- *
- * Rendered via React portal so it floats above any overflow:hidden ancestor.
- */
-export default function BackendModal({ mode = "add", backend, open, onClose, onSaved }) {
-  const t = useT();
-  const isEdit = mode === "edit";
-  const isLocal = isEdit && backend?.kind === "local";
-
-  const [name, setName]   = useState("");
-  const [url, setUrl]     = useState("");
-  const [token, setToken] = useState("");
-  const [showToken, setShowToken] = useState(false);
-  const [status, setStatus] = useState({ kind: "idle", msg: "" });
-  const [submitting, setSubmitting] = useState(false);
-
-  // Reset / hydrate when opening or switching backend
-  useEffect(() => {
-    if (!open) return;
-    setStatus({ kind: "idle", msg: "" });
-    setShowToken(false);
-    if (isEdit && backend) {
-      setName(backend.name || "");
-      setUrl(backend.url || "");
-      setToken(backend.token || "");
-    } else {
-      setName(""); setUrl(""); setToken("");
-    }
-  }, [open, isEdit, backend]);
-
-  // Esc closes
-  useEffect(() => {
-    if (!open) return;
-    const onKey = (e) => { if (e.key === "Escape") onClose && onClose(); };
-    document.addEventListener("keydown", onKey);
-    return () => document.removeEventListener("keydown", onKey);
-  }, [open, onClose]);
-
-  if (!open) return null;
-
-  const submit = async () => {
-    // Local edit path: only the display name. URL/token are managed by the
-    // app (window-manager.buildLocalUrl reads global.json live). No probe.
-    if (isLocal) {
-      setSubmitting(true);
-      try {
-        const saved = await api.backends.update({ id: backend.id, name: name.trim() || backend.name });
-        onSaved && onSaved(saved);
-        onClose && onClose();
-      } catch (e) {
-        setStatus({ kind: "err", msg: e.message });
-      } finally {
-        setSubmitting(false);
-      }
-      return;
-    }
-
-    if (!url.trim()) { setStatus({ kind: "err", msg: t("modal.url_required") }); return; }
-    setSubmitting(true);
-    setStatus({ kind: "probing", msg: t("modal.probing") });
-    try {
-      const probe = await api.backends.probe({ url: url.trim(), token: token.trim() });
-      if (!probe.ok) {
-        setStatus({ kind: "err", msg: probe.error || `HTTP ${probe.statusCode || "?"}` });
-        return;
-      }
-      const finalName = name.trim() || (() => { try { return new URL(url).host; } catch { return "Cloud"; } })();
-      let saved;
-      if (isEdit) {
-        saved = await api.backends.update({
-          id: backend.id,
-          name: finalName,
-          url: url.trim(),
-          token: token.trim() || "",
-        });
-      } else {
-        saved = await api.backends.add({
-          name: finalName,
-          url: url.trim(),
-          token: token.trim() || undefined,
-        });
-      }
-      onSaved && onSaved(saved);
-      onClose && onClose();
-    } catch (e) {
-      setStatus({ kind: "err", msg: e.message });
-    } finally {
-      setSubmitting(false);
-    }
-  };
-
-  const onBackdrop = (e) => {
-    if (e.target === e.currentTarget) onClose && onClose();
-  };
-
-  return createPortal(
-    <div className="modal-backdrop" onClick={onBackdrop}>
-      <div className="modal" role="dialog" aria-modal="true">
-        <header className="modal__head">
-          <h3 className="modal__title">{
-            isLocal ? t("modal.edit_local_title")
-            : isEdit ? t("modal.edit_title")
-            : t("modal.add_title")
-          }</h3>
-          <button className="modal__close" onClick={onClose} aria-label="Close">
-            <Icon name="close" />
-          </button>
-        </header>
-
-        <div className="modal__body">
-          <label className="modal__field">
-            <span className="modal__label">{t("modal.name")}</span>
-            <input
-              className="modal__input"
-              type="text"
-              placeholder={t("modal.name_placeholder")}
-              value={name}
-              onChange={(e) => setName(e.target.value)}
-              autoFocus={isLocal || isEdit}
-            />
-          </label>
-
-          <label className="modal__field">
-            <span className="modal__label">
-              {t("modal.url")} {!isLocal && <span className="modal__required">*</span>}
-              {isLocal && <span className="modal__locked">· {t("modal.locked_local")}</span>}
-            </span>
-            <input
-              className="modal__input"
-              type="url"
-              placeholder="https://cicy.example.com:8008"
-              value={isLocal ? "http://127.0.0.1:8008" : url}
-              onChange={(e) => setUrl(e.target.value)}
-              readOnly={isLocal}
-              autoFocus={!isEdit && !isLocal}
-            />
-          </label>
-
-          <label className="modal__field">
-            <span className="modal__label">
-              {t("modal.token")}
-              {isLocal && <span className="modal__locked">· {t("modal.token_local_hint")}</span>}
-            </span>
-            <div className="modal__token-wrap">
-              <input
-                className="modal__input modal__token-input"
-                type={showToken ? "text" : "password"}
-                placeholder={isLocal ? "—" : t("modal.token_placeholder")}
-                value={isLocal ? "" : token}
-                onChange={(e) => setToken(e.target.value)}
-                readOnly={isLocal}
-                autoComplete="off"
-                spellCheck={false}
-              />
-              {!isLocal && (
-                <button
-                  type="button"
-                  className="modal__token-toggle"
-                  onClick={() => setShowToken((v) => !v)}
-                  aria-label={showToken ? t("modal.hide_token") : t("modal.show_token")}
-                  title={showToken ? t("modal.hide_token") : t("modal.show_token")}
-                >
-                  <Icon name={showToken ? "eye-off" : "eye"} size={16} />
-                </button>
-              )}
-            </div>
-          </label>
-
-          {status.msg && (
-            <div className={`modal__status modal__status--${status.kind}`}>
-              {status.msg}
-            </div>
-          )}
-        </div>
-
-        <footer className="modal__foot">
-          <Button variant="ghost" onClick={onClose}>{t("modal.cancel")}</Button>
-          <Button variant="primary" loading={submitting} onClick={submit}>
-            {isEdit ? t("modal.save") : t("modal.probe_add")}
-          </Button>
-        </footer>
-      </div>
-    </div>,
-    document.body
-  );
-}

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

@@ -1,72 +0,0 @@
-.btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--sp-2);
-  padding: 0 var(--sp-4);
-  border-radius: var(--r-sm);
-  font-weight: 500;
-  white-space: nowrap;
-  user-select: none;
-  transition:
-    background var(--dur-fast) var(--ease),
-    color var(--dur-fast) var(--ease),
-    border-color var(--dur-fast) var(--ease),
-    box-shadow var(--dur-fast) var(--ease),
-    transform 80ms var(--ease);
-}
-.btn:active:not(:disabled) { transform: scale(0.98); }
-
-/* sizes */
-.btn--sm { height: 28px; font-size: var(--t-xs); padding: 0 var(--sp-3); }
-.btn--md { height: 36px; font-size: var(--t-sm); padding: 0 var(--sp-4); }
-
-/* variants */
-.btn--primary {
-  background: var(--brand);
-  color: var(--brand-fg);
-}
-.btn--primary:hover:not(:disabled) { filter: brightness(1.08); }
-.btn--primary:disabled { background: var(--bg-elev-2); color: var(--fg-3); }
-
-.btn--ghost {
-  background: var(--bg-elev-2);
-  color: var(--fg);
-  border: 1px solid transparent;
-}
-.btn--ghost:hover:not(:disabled) { background: var(--bg-elev-1); border-color: var(--hairline-2); color: var(--fg); }
-.btn--ghost:disabled { color: var(--fg-3); }
-
-.btn--danger {
-  background: var(--danger-soft);
-  color: var(--danger);
-}
-.btn--danger:hover:not(:disabled) { background: var(--danger); color: #fff; }
-
-/* Plain icon button — used for ⋯ / × / refresh — minimal chrome */
-.btn--icon {
-  width: 32px; padding: 0;
-  background: transparent;
-  color: var(--fg-2);
-}
-.btn--icon:hover:not(:disabled) { background: var(--bg-elev-2); color: var(--fg); }
-
-.btn:disabled { cursor: not-allowed; opacity: 0.6; }
-
-.btn__icon { display: inline-flex; line-height: 0; }
-.btn__icon svg { width: 16px; height: 16px; fill: currentColor; }
-.btn--sm .btn__icon svg { width: 14px; height: 14px; }
-.btn__label { line-height: 1; }
-
-.btn.is-loading .btn__label { opacity: 0; }
-.btn__spinner {
-  position: absolute;
-  width: 14px; height: 14px;
-  border: 2px solid currentColor;
-  border-top-color: transparent;
-  border-radius: 50%;
-  animation: btn-spin 0.7s linear infinite;
-}
-.btn { position: relative; }
-
-@keyframes btn-spin { to { transform: rotate(360deg); } }

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

@@ -1,37 +0,0 @@
-import "./Button.css";
-
-/**
- * <Button variant="primary|ghost|danger" size="sm|md" loading disabled icon={...}>
- *   Label
- * </Button>
- *
- * Sizes:
- *   sm = 28px tall (compact toolbars)
- *   md = 36px tall (default — meets touch target on mobile)
- */
-export default function Button({
-  children,
-  variant = "ghost",
-  size = "md",
-  loading = false,
-  disabled = false,
-  icon = null,
-  iconAfter = null,
-  className = "",
-  type = "button",
-  ...rest
-}) {
-  return (
-    <button
-      type={type}
-      className={`btn btn--${variant} btn--${size} ${loading ? "is-loading" : ""} no-drag ${className}`}
-      disabled={disabled || loading}
-      {...rest}
-    >
-      {loading && <span className="btn__spinner" aria-hidden="true" />}
-      {icon && <span className="btn__icon">{icon}</span>}
-      {children && <span className="btn__label">{children}</span>}
-      {iconAfter && <span className="btn__icon">{iconAfter}</span>}
-    </button>
-  );
-}

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

@@ -1,42 +0,0 @@
-.card {
-  position: relative;
-  display: block;
-  text-align: left;
-  width: 100%;
-  background: var(--bg-elev-1);
-  border: 1px solid var(--hairline);
-  border-radius: var(--r-md);
-  padding: var(--sp-4);
-  font: inherit;
-  color: inherit;
-  transition: border-color var(--dur-fast) var(--ease),
-              background var(--dur-fast) var(--ease),
-              box-shadow var(--dur-fast) var(--ease),
-              transform var(--dur-fast) var(--ease);
-}
-
-.card--interactive { cursor: pointer; }
-.card--interactive:hover {
-  background: var(--bg-elev-2);
-  border-color: var(--hairline-2);
-  box-shadow: var(--shadow-2);
-}
-.card--interactive:active { transform: translateY(1px); }
-
-.card--accent::before {
-  content: "";
-  position: absolute;
-  left: 0; top: 0; bottom: 0;
-  width: 3px;
-  background: var(--accent, var(--brand));
-  border-radius: var(--r-md) 0 0 var(--r-md);
-}
-
-button.card { all: unset; display: block; }
-button.card.card--interactive {
-  cursor: pointer;
-  background: var(--bg-elev-1);
-  border: 1px solid var(--hairline);
-  border-radius: var(--r-md);
-  padding: var(--sp-4);
-}

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

@@ -1,21 +0,0 @@
-import "./Card.css";
-
-/**
- * <Card> base surface. Variants:
- *   plain     — flat, no hover (default)
- *   interactive — hover lift + cursor pointer
- *   accent    — left accent bar (color via prop accentColor)
- */
-export default function Card({ children, variant = "plain", accentColor, onClick, className = "", ...rest }) {
-  const Tag = onClick ? "button" : "div";
-  return (
-    <Tag
-      className={`card card--${variant} ${className}`}
-      onClick={onClick}
-      style={accentColor ? { "--accent": accentColor } : undefined}
-      {...rest}
-    >
-      {children}
-    </Tag>
-  );
-}

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

@@ -1,30 +0,0 @@
-// Tiny inline icons. 16×16 viewBox. Use:  <Icon name="open" />
-const ICONS = {
-  open:    "M14 3v2h3.59L8.29 14.29l1.41 1.41L19 6.41V10h2V3h-7zM19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7z",
-  refresh: "M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z",
-  restart: "M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z",
-  trash:   "M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z",
-  add:     "M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z",
-  close:   "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z",
-  check:   "M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z",
-  more:    "M5 12a2 2 0 11-4 0 2 2 0 014 0zm9 0a2 2 0 11-4 0 2 2 0 014 0zm9 0a2 2 0 11-4 0 2 2 0 014 0z",
-  download:"M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z",
-  play:    "M8 5v14l11-7z",
-  warn:    "M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z",
-  globe:   "M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM18.92 8h-2.95a15.65 15.65 0 00-1.38-3.56A8.03 8.03 0 0118.92 8zM12 4.04c.83 1.2 1.48 2.53 1.91 3.96h-3.82c.43-1.43 1.08-2.76 1.91-3.96zM4.26 14C4.1 13.36 4 12.69 4 12s.1-1.36.26-2h3.38c-.08.66-.14 1.32-.14 2 0 .68.06 1.34.14 2H4.26zm.82 2h2.95c.32 1.25.78 2.45 1.38 3.56A7.987 7.987 0 015.08 16zm2.95-8H5.08a7.987 7.987 0 014.33-3.56A15.65 15.65 0 008.03 8zM12 19.96c-.83-1.2-1.48-2.53-1.91-3.96h3.82c-.43 1.43-1.08 2.76-1.91 3.96zM14.34 14H9.66c-.09-.66-.16-1.32-.16-2 0-.68.07-1.35.16-2h4.68c.09.65.16 1.32.16 2 0 .68-.07 1.34-.16 2zm.25 5.56c.6-1.11 1.06-2.31 1.38-3.56h2.95a8.03 8.03 0 01-4.33 3.56zM16.36 14c.08-.66.14-1.32.14-2 0-.68-.06-1.34-.14-2h3.38c.16.64.26 1.31.26 2s-.1 1.36-.26 2h-3.38z",
-  laptop:  "M20 18c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2H4c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2H0v2h24v-2h-4zM4 6h16v10H4V6z",
-  edit:    "M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04a1 1 0 000-1.41l-2.34-2.34a1 1 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z",
-  eye:     "M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zm0 12.5a5 5 0 110-10 5 5 0 010 10zm0-8a3 3 0 100 6 3 3 0 000-6z",
-  "eye-off":"M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28.46.46C3.08 8.3 1.78 10.02 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3 2 4.27zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2zm4.31-.78l3.15 3.15.02-.16c0-1.66-1.34-3-3-3l-.17.01z",
-  folder:  "M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z",
-};
-
-export default function Icon({ name, size = 16 }) {
-  const d = ICONS[name];
-  if (!d) return null;
-  return (
-    <svg viewBox="0 0 24 24" width={size} height={size} fill="currentColor" aria-hidden="true">
-      <path d={d} />
-    </svg>
-  );
-}

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

@@ -1,55 +0,0 @@
-.menu-trigger {
-  display: inline-flex;
-  position: relative;
-}
-
-.menu {
-  position: fixed;
-  z-index: 1000;
-  min-width: 180px;
-  background: var(--bg-elev-2);
-  border: 1px solid var(--hairline-2);
-  border-radius: var(--r-md);
-  padding: var(--sp-1) 0;
-  box-shadow: var(--shadow-3);
-  transform-origin: top right;
-  animation: menu-pop var(--dur-fast) var(--ease);
-}
-@keyframes menu-pop {
-  from { opacity: 0; transform: scale(0.95) translateY(-4px); }
-  to   { opacity: 1; transform: scale(1) translateY(0); }
-}
-
-.menu-item {
-  display: flex; align-items: center; gap: var(--sp-3);
-  width: 100%;
-  padding: var(--sp-2) var(--sp-4);
-  font-size: var(--t-sm);
-  color: var(--fg);
-  text-align: left;
-  transition: background var(--dur-fast) var(--ease);
-}
-.menu-item:hover:not(:disabled) { background: var(--bg-elev-1); }
-.menu-item.is-disabled { color: var(--fg-3); cursor: not-allowed; }
-.menu-item.is-danger { color: var(--danger); }
-.menu-item.is-danger:hover { background: var(--danger-soft); }
-.menu-item__icon {
-  display: inline-flex;
-  color: var(--fg-2);
-  line-height: 0;
-}
-.menu-item:hover .menu-item__icon { color: var(--fg); }
-.menu-item__icon svg { width: 16px; height: 16px; fill: currentColor; }
-.menu-item__label { flex: 1; }
-.menu-item__badge {
-  width: 6px; height: 6px;
-  border-radius: 50%;
-  background: var(--brand);
-  flex-shrink: 0;
-}
-
-.menu-divider {
-  height: 1px;
-  background: var(--hairline);
-  margin: var(--sp-1) 0;
-}

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

@@ -1,91 +0,0 @@
-import { useEffect, useRef, useState } from "react";
-import { createPortal } from "react-dom";
-import "./Menu.css";
-
-/**
- * <Menu trigger={<button>⋯</button>} items={[
- *   { label: "Restart", icon: ..., onClick: () => {} },
- *   "divider",
- *   { label: "Update to v2.0.3", icon: ..., onClick: () => {}, badge: true },
- * ]} />
- *
- * Renders the menu in a portal (position: fixed) so parent overflow:hidden
- * never clips it. Closes on outside click + Escape.
- */
-export default function Menu({ trigger, items, align = "right" }) {
-  const [open, setOpen] = useState(false);
-  const [pos, setPos]   = useState({ top: 0, left: 0 });
-  const triggerRef = useRef(null);
-  const menuRef    = useRef(null);
-
-  useEffect(() => {
-    if (!open) return;
-    const onDoc = (e) => {
-      if (menuRef.current && !menuRef.current.contains(e.target)
-          && triggerRef.current && !triggerRef.current.contains(e.target)) {
-        setOpen(false);
-      }
-    };
-    const onKey = (e) => { if (e.key === "Escape") setOpen(false); };
-    document.addEventListener("mousedown", onDoc);
-    document.addEventListener("keydown", onKey);
-    return () => {
-      document.removeEventListener("mousedown", onDoc);
-      document.removeEventListener("keydown", onKey);
-    };
-  }, [open]);
-
-  const toggle = (e) => {
-    e.stopPropagation();
-    if (open) { setOpen(false); return; }
-    const r = triggerRef.current.getBoundingClientRect();
-    // Initial position; refined after first paint when we know menu width.
-    setPos({ top: r.bottom + 4, left: align === "right" ? r.right - 180 : r.left });
-    setOpen(true);
-  };
-
-  // After mount, snap to actual width.
-  useEffect(() => {
-    if (!open || !menuRef.current || !triggerRef.current) return;
-    const r = triggerRef.current.getBoundingClientRect();
-    const w = menuRef.current.offsetWidth;
-    setPos((p) => ({ ...p, left: align === "right" ? r.right - w : r.left }));
-  }, [open, align]);
-
-  return (
-    <>
-      <span ref={triggerRef} onClick={toggle} className="menu-trigger no-drag">
-        {trigger}
-      </span>
-      {open && createPortal((
-        <div
-          ref={menuRef}
-          className="menu"
-          role="menu"
-          style={{ top: pos.top, left: pos.left }}
-        >
-          {items.map((it, i) => {
-            if (it === "divider") return <div key={i} className="menu-divider" />;
-            return (
-              <button
-                key={i}
-                role="menuitem"
-                className={`menu-item ${it.disabled ? "is-disabled" : ""} ${it.danger ? "is-danger" : ""}`}
-                disabled={it.disabled}
-                onClick={(e) => {
-                  e.stopPropagation();
-                  setOpen(false);
-                  it.onClick && it.onClick();
-                }}
-              >
-                {it.icon && <span className="menu-item__icon">{it.icon}</span>}
-                <span className="menu-item__label">{it.label}</span>
-                {it.badge && <span className="menu-item__badge" />}
-              </button>
-            );
-          })}
-        </div>
-      ), document.body)}
-    </>
-  );
-}

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

@@ -1,79 +0,0 @@
-.sidecar-banner {
-  background: var(--bg-elev-1);
-  border: 1px solid var(--hairline-2);
-  border-radius: var(--r-md);
-  padding: var(--sp-4);
-  display: flex;
-  flex-direction: column;
-  gap: var(--sp-3);
-  animation: banner-in var(--dur-base) var(--ease);
-}
-@keyframes banner-in {
-  from { opacity: 0; transform: translateY(-4px); }
-  to   { opacity: 1; transform: translateY(0); }
-}
-
-.sidecar-banner__head {
-  display: flex;
-  align-items: center;
-  gap: var(--sp-3);
-}
-
-.sidecar-banner__icon {
-  width: 36px; height: 36px;
-  display: grid; place-items: center;
-  background: var(--brand-soft);
-  color: var(--brand);
-  border-radius: var(--r-sm);
-  flex-shrink: 0;
-}
-.sidecar-banner.is-error .sidecar-banner__icon {
-  background: var(--danger-soft);
-  color: var(--danger);
-}
-
-.sidecar-banner__text { flex: 1; min-width: 0; }
-.sidecar-banner__title {
-  font-size: var(--t-md);
-  font-weight: 600;
-  color: var(--fg);
-}
-.sidecar-banner.is-error .sidecar-banner__title { color: var(--danger); }
-.sidecar-banner__subtitle {
-  font-size: var(--t-xs);
-  color: var(--fg-2);
-  font-family: var(--font-mono);
-  margin-top: 2px;
-}
-
-.sidecar-banner__actions { flex-shrink: 0; }
-
-.sidecar-banner__bar {
-  height: 4px;
-  background: var(--bg-elev-2);
-  border-radius: var(--r-pill);
-  overflow: hidden;
-  position: relative;
-}
-.sidecar-banner__bar-fill {
-  height: 100%;
-  background: linear-gradient(90deg, var(--brand), #7da4ff);
-  border-radius: inherit;
-  transition: width var(--dur-base) var(--ease);
-}
-.sidecar-banner__bar.is-indeterminate .sidecar-banner__bar-fill {
-  animation: banner-slide 1.4s linear infinite;
-  width: 30% !important;
-}
-@keyframes banner-slide {
-  0%   { transform: translateX(-100%); }
-  100% { transform: translateX(400%); }
-}
-
-.sidecar-banner__bar-meta {
-  display: flex;
-  justify-content: space-between;
-  font-family: var(--font-mono);
-  font-size: var(--t-xs);
-  color: var(--fg-3);
-}