create-walle 0.9.21 → 0.9.23

package/template/claude-task-manager/public/css/setup.css

@@ -385,6 +385,49 @@
   color: var(--fg);
   font-size: 11px;
 }
+#setup-panel .setup-ms-private-warning {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  gap: 12px;
+  align-items: center;
+  margin-top: 12px;
+  padding: 12px;
+  border: 1px solid rgba(247,118,142,0.34);
+  border-radius: 12px;
+  background:
+    linear-gradient(135deg, rgba(247,118,142,0.14), rgba(224,175,104,0.08)),
+    rgba(26,27,38,0.72);
+  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
+}
+#setup-panel .setup-ms-private-warning-icon {
+  display: grid;
+  place-items: center;
+  width: 28px;
+  height: 28px;
+  border: 1px solid rgba(247,118,142,0.42);
+  border-radius: 999px;
+  background: rgba(247,118,142,0.14);
+  color: var(--red, #f7768e);
+  font-weight: 800;
+}
+#setup-panel .setup-ms-private-warning-copy {
+  display: grid;
+  gap: 4px;
+  min-width: 0;
+}
+#setup-panel .setup-ms-private-warning-copy strong {
+  color: var(--fg);
+  font-size: 13px;
+}
+#setup-panel .setup-ms-private-warning-copy span {
+  color: var(--fg-dim);
+  font-size: 12px;
+  line-height: 1.45;
+}
+#setup-panel .setup-ms-private-warning-action {
+  white-space: nowrap;
+  box-shadow: 0 8px 24px rgba(247,118,142,0.18);
+}
 #setup-panel .setup-access-method-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(205px, 1fr));
@@ -474,6 +517,45 @@
   border-color: rgba(248,81,73,0.28);
   color: var(--red, #f7768e);
 }
+/* Live-broken (offline / expired / error) — solid red so "Reconnect" stands out. */
+#setup-panel .setup-method-badge.error {
+  background: rgba(229,72,77,0.18);
+  border-color: rgba(229,72,77,0.55);
+  color: #ff6b6b;
+  font-weight: 700;
+}
+
+/* Action-required banner: lists currently-broken connections with a Reconnect button. */
+#setup-panel .setup-access-alert {
+  margin: 8px 0 4px;
+  padding: 8px 12px;
+  border: 1px solid rgba(229,72,77,0.45);
+  border-radius: 8px;
+  background: rgba(229,72,77,0.10);
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+#setup-panel .setup-access-alert-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-size: 12.5px;
+  color: var(--fg, #c0caf5);
+}
+#setup-panel .setup-access-alert-row span { flex: 1; }
+#setup-panel .setup-access-alert-row strong { color: #ff8a8a; }
+
+/* "Other ways to connect" disclosure for non-recommended methods (declutter). */
+#setup-panel .setup-other-methods { margin-top: 10px; }
+#setup-panel .setup-other-methods > summary {
+  cursor: pointer;
+  font-size: 12px;
+  color: var(--fg-dim, #8b949e);
+  padding: 4px 0;
+  user-select: none;
+}
+#setup-panel .setup-other-methods[open] > summary { margin-bottom: 8px; }
 #setup-panel .setup-access-panel {
   margin-top: 10px;
   border: 1px solid rgba(122,162,247,0.22);
@@ -553,12 +635,69 @@
   font-size: 11px;
   line-height: 1.35;
 }
+#setup-panel .setup-tunnel-actions {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  align-items: stretch;
+}
 #setup-panel .setup-tunnel-primary {
   min-width: 116px;
   min-height: 38px;
   padding: 8px 14px;
   white-space: nowrap;
 }
+#setup-panel .setup-tunnel-secondary {
+  min-width: 116px;
+  min-height: 32px;
+  padding: 6px 10px;
+  font-size: 12px;
+  white-space: nowrap;
+}
+#setup-panel .setup-tunnel-access-mode {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 8px;
+  margin-top: 12px;
+}
+#setup-panel .setup-tunnel-mode-option {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: 4px;
+  min-height: 82px;
+  padding: 10px 12px;
+  border: 1px solid rgba(139,148,158,0.18);
+  border-radius: 8px;
+  background: rgba(139,148,158,0.05);
+  color: var(--fg);
+  text-align: left;
+  cursor: pointer;
+}
+#setup-panel .setup-tunnel-mode-option:hover {
+  border-color: rgba(122,162,247,0.42);
+  background: rgba(122,162,247,0.07);
+}
+#setup-panel .setup-tunnel-mode-option[aria-pressed="true"] {
+  border-color: rgba(122,162,247,0.58);
+  background: rgba(122,162,247,0.12);
+  box-shadow: inset 0 0 0 1px rgba(122,162,247,0.25);
+}
+#setup-panel .setup-tunnel-mode-option:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}
+#setup-panel .setup-tunnel-mode-option strong {
+  display: block;
+  font-size: 12px;
+  line-height: 1.35;
+}
+#setup-panel .setup-tunnel-mode-option small {
+  display: block;
+  margin-top: 4px;
+  color: var(--fg-dim);
+  font-size: 11px;
+  line-height: 1.4;
+}
 #setup-panel .setup-tunnel-steps {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
@@ -815,6 +954,10 @@
   cursor: pointer;
   font-size: 12px;
 }
+#setup-panel .setup-tunnel-code-regenerate {
+  border-color: rgba(125,162,255,0.45);
+  color: var(--accent);
+}
 #setup-panel .setup-tunnel-progress-log {
   max-height: 150px;
   margin: 0;
@@ -1082,6 +1225,7 @@
     min-height: auto;
   }
   #setup-panel .setup-tunnel-quickstart,
+  #setup-panel .setup-tunnel-access-mode,
   #setup-panel .setup-tunnel-steps {
     grid-template-columns: 1fr;
   }
@@ -1091,6 +1235,13 @@
   #setup-panel .setup-tunnel-ready div {
     grid-template-columns: 1fr;
   }
+  #setup-panel .setup-ms-private-warning {
+    grid-template-columns: auto minmax(0, 1fr);
+  }
+  #setup-panel .setup-ms-private-warning-action {
+    grid-column: 1 / -1;
+    justify-self: stretch;
+  }
   #setup-panel .setup-tunnel-availability-head,
   #setup-panel .setup-tunnel-connectivity-head {
     grid-template-columns: 1fr;
@@ -1123,6 +1274,18 @@
 #setup-panel .embed-row-desc { font-size: 11px; color: var(--fg-dim); margin-top: 1px; }
 #setup-panel .embed-row-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
 #setup-panel .embed-count { font-size: 11px; color: var(--fg-dim); }
+#setup-panel .embed-auto-panel { margin: 0 0 12px; padding: 12px; border: 1px solid var(--border); border-radius: 8px; background: rgba(88,166,255,0.04); }
+#setup-panel .embed-auto-panel.embed-auto-cloud_opt_in_available { border-color: rgba(224,175,104,0.35); background: rgba(224,175,104,0.06); }
+#setup-panel .embed-auto-panel.embed-auto-off { opacity: 0.9; background: rgba(139,148,158,0.05); }
+#setup-panel .embed-auto-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
+#setup-panel .embed-auto-title { font-size: 13px; font-weight: 600; color: var(--fg); }
+#setup-panel .embed-auto-body { font-size: 12px; line-height: 1.45; color: var(--fg-dim); }
+#setup-panel .embed-optin-warning { margin-top: 8px; padding: 8px 10px; border-radius: 6px; background: rgba(224,175,104,0.08); border: 1px solid rgba(224,175,104,0.2); color: var(--fg); font-size: 12px; line-height: 1.45; }
+#setup-panel .embed-learn-more { margin-top: 8px; color: var(--fg-dim); font-size: 12px; }
+#setup-panel .embed-learn-more summary { cursor: pointer; color: var(--accent); }
+#setup-panel .embed-learn-more ul { margin: 8px 0 0 18px; padding: 0; line-height: 1.45; }
+#setup-panel .embed-policy-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
+#setup-panel .embed-policy-actions .setup-btn.active { color: var(--accent); border-color: rgba(122,162,247,0.55); background: rgba(122,162,247,0.12); }
 
 /* Tab navigation within setup */
 #setup-panel .setup-tab {
@@ -1408,6 +1571,22 @@ html[data-theme="light"] #setup-panel .setup-access-method[aria-pressed="true"]
   box-shadow: inset 0 0 0 1px rgba(59,102,224,0.22), 0 10px 24px rgba(59,102,224,0.10);
 }
 
+html[data-theme="light"] #setup-panel .setup-tunnel-mode-option {
+  border-color: rgba(15,23,42,0.10);
+  background: rgba(255,255,255,0.72);
+}
+
+html[data-theme="light"] #setup-panel .setup-tunnel-mode-option:hover {
+  border-color: rgba(59,102,224,0.28);
+  background: #f8faff;
+}
+
+html[data-theme="light"] #setup-panel .setup-tunnel-mode-option[aria-pressed="true"] {
+  border-color: rgba(59,102,224,0.44);
+  background: #eef4ff;
+  box-shadow: inset 0 0 0 1px rgba(59,102,224,0.18);
+}
+
 html[data-theme="light"] #setup-panel .setup-access-panel {
   border-color: rgba(59,102,224,0.18);
   background: #ffffff;
@@ -1426,6 +1605,18 @@ html[data-theme="light"] #setup-panel .setup-scope-status {
   background: rgba(255,255,255,0.72);
 }
 
+html[data-theme="light"] #setup-panel .setup-ms-private-warning {
+  border-color: rgba(190,18,60,0.24);
+  background:
+    linear-gradient(135deg, rgba(255,228,230,0.96), rgba(255,247,237,0.94)),
+    #ffffff;
+  box-shadow: 0 12px 28px rgba(190,18,60,0.08);
+}
+
+html[data-theme="light"] #setup-panel .setup-ms-private-warning-copy span {
+  color: #5f677a;
+}
+
 html[data-theme="light"] #setup-panel .cf-login-status.warn {
   color: var(--yellow);
   background: var(--warning-soft);