openclacky 1.4.0 → 1.5.0

data/lib/clacky/web/app.css

@@ -152,6 +152,163 @@
   --shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.48), 0 4px 8px rgba(0, 0, 0, 0.32);
 }
 
+/* ── Dim theme (mid-dark, softer than pure dark) ─────────────────────────
+   Design stance: desaturated dark grey, less eye strain than near-black.
+   Accent is the same run-time variable — not touched here.             */
+[data-theme="dim"] {
+  --color-bg-primary:   #21262d;   /* sidebar / shell — deep slate */
+  --color-bg-secondary: #2b3038;   /* main content — slightly lighter */
+  --color-bg-tertiary:  #2b3038;
+  --color-bg-hover:     #333b44;
+  --color-bg-input:     #2b3038;
+  --color-bg-card:      #2b3038;
+  --color-bg-overlay:   rgba(0, 0, 0, 0.52);
+
+  --color-border-primary:   #363d47;
+  --color-border-secondary: #2e353f;
+  --color-border-strong:    #4a5260;
+
+  --color-text-primary:   #cdd9e5;
+  --color-text-secondary: #8b98a8;
+  --color-text-tertiary:  #5d6875;
+  --color-text-muted:     #4a535e;
+  --color-text-inverse:   #ffffff;
+  --live:                 #3ed47e;
+
+  --color-accent-primary: #818cf8;
+  --color-accent-hover:   #6366f1;
+  --color-accent-soft:    color-mix(in srgb, var(--color-accent-primary) 14%, transparent);
+
+  --color-success: #34d399;
+  --color-success-bg: #0d2a22;
+  --color-success-border: #1a4033;
+
+  --color-error: #f87171;
+  --color-error-bg: #2d1818;
+  --color-error-border: #4d2020;
+
+  --color-warning: #fbbf24;
+  --color-warning-bg: #2d1f00;
+  --color-warning-border: #4d3200;
+
+  --color-info: #38bdf8;
+  --color-secondary: #34d399;
+  --color-accent-alt: #fbbf24;
+
+  --color-button-primary: var(--color-accent-primary);
+  --color-button-primary-hover: var(--color-accent-hover);
+  --color-button-primary-text: #ffffff;
+
+  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.28);
+  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.30), 0 1px 2px rgba(0, 0, 0, 0.22);
+  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35), 0 2px 4px rgba(0, 0, 0, 0.20);
+  --shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.44), 0 4px 8px rgba(0, 0, 0, 0.28);
+}
+
+/* ── Warm theme (warm off-white, sepia feel) ─────────────────────────────
+   Design stance: warm paper tones, easier on eyes than cold white.     */
+[data-theme="warm"] {
+  --color-bg-primary:   #f5f0e8;   /* warm parchment */
+  --color-bg-secondary: #fdf8f0;   /* warmer white */
+  --color-bg-tertiary:  #fdf8f0;
+  --color-bg-hover:     #ece5d8;
+  --color-bg-input:     #fdf8f0;
+  --color-bg-card:      #fdf8f0;
+  --color-bg-overlay:   rgba(30, 20, 10, 0.40);
+
+  --color-border-primary:   #e0d6c4;
+  --color-border-secondary: #ede6d6;
+  --color-border-strong:    #c8bba8;
+
+  --color-text-primary:   #2c2416;
+  --color-text-secondary: #5c4e38;
+  --color-text-tertiary:  #8a7a62;
+  --color-text-muted:     #a89880;
+  --color-text-inverse:   #ffffff;
+  --live:                 #2e9e5b;
+
+  --color-accent-primary: #4f46e5;
+  --color-accent-hover:   #4338ca;
+  --color-accent-soft:    color-mix(in srgb, var(--color-accent-primary) 10%, transparent);
+
+  --color-success: #10b981;
+  --color-success-bg: #f0fdf4;
+  --color-success-border: #bbf7d0;
+
+  --color-error: #ef4444;
+  --color-error-bg: #fef2f2;
+  --color-error-border: #fecaca;
+
+  --color-warning: #f59e0b;
+  --color-warning-bg: #fffbeb;
+  --color-warning-border: #fcd34d;
+
+  --color-info: #0ea5e9;
+  --color-secondary: #10b981;
+  --color-accent-alt: #f59e0b;
+
+  --color-button-primary: var(--color-accent-primary);
+  --color-button-primary-hover: var(--color-accent-hover);
+  --color-button-primary-text: #ffffff;
+
+  --shadow-xs: 0 1px 2px rgba(30, 20, 10, 0.05);
+  --shadow-sm: 0 1px 3px rgba(30, 20, 10, 0.07), 0 1px 2px rgba(30, 20, 10, 0.05);
+  --shadow-md: 0 4px 12px rgba(30, 20, 10, 0.09), 0 2px 4px rgba(30, 20, 10, 0.05);
+  --shadow-lg: 0 12px 28px rgba(30, 20, 10, 0.13), 0 4px 8px rgba(30, 20, 10, 0.07);
+}
+
+/* ── Blue-dark theme (VS Code / Apifox style blue-grey dark) ────────────
+   Design stance: blue-tinted dark surfaces, familiar dev-tool aesthetic. */
+[data-theme="bluedark"] {
+  --color-bg-primary:   #1e2228;   /* sidebar / shell — blue-grey dark */
+  --color-bg-secondary: #252b33;   /* main content — slightly lighter */
+  --color-bg-tertiary:  #252b33;
+  --color-bg-hover:     #2e3540;
+  --color-bg-input:     #252b33;
+  --color-bg-card:      #252b33;
+  --color-bg-overlay:   rgba(0, 0, 0, 0.60);
+
+  --color-border-primary:   #30373f;
+  --color-border-secondary: #282f38;
+  --color-border-strong:    #44515f;
+
+  --color-text-primary:   #d4dbe6;
+  --color-text-secondary: #8b97a8;
+  --color-text-tertiary:  #5a6678;
+  --color-text-muted:     #44505e;
+  --color-text-inverse:   #ffffff;
+  --live:                 #3ed47e;
+
+  --color-accent-primary: #818cf8;
+  --color-accent-hover:   #6366f1;
+  --color-accent-soft:    color-mix(in srgb, var(--color-accent-primary) 14%, transparent);
+
+  --color-success: #34d399;
+  --color-success-bg: #0d2a22;
+  --color-success-border: #1a4033;
+
+  --color-error: #f87171;
+  --color-error-bg: #2d1818;
+  --color-error-border: #4d2020;
+
+  --color-warning: #fbbf24;
+  --color-warning-bg: #2d1f00;
+  --color-warning-border: #4d3200;
+
+  --color-info: #38bdf8;
+  --color-secondary: #34d399;
+  --color-accent-alt: #fbbf24;
+
+  --color-button-primary: var(--color-accent-primary);
+  --color-button-primary-hover: var(--color-accent-hover);
+  --color-button-primary-text: #ffffff;
+
+  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.40);
+  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.42), 0 1px 2px rgba(0, 0, 0, 0.32);
+  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.48), 0 2px 4px rgba(0, 0, 0, 0.30);
+  --shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.60), 0 4px 8px rgba(0, 0, 0, 0.40);
+}
+
 /* ── Font Size Presets ────────────────────────────────────────────────────
    Controlled via html[data-font-size]: small / medium / large.
    Mechanism: change root font-size, which 1rem inherits from. Every CSS
@@ -240,6 +397,33 @@ html { font-size: 16px; }
   background-size: 200% 100%;
   animation: skel-shimmer 1.8s infinite linear;
 }
+[data-theme="dim"] .skel {
+  background: linear-gradient(90deg,
+    #2e343c 25%,
+    #3c444e 50%,
+    #2e343c 75%
+  );
+  background-size: 200% 100%;
+  animation: skel-shimmer 1.8s infinite linear;
+}
+[data-theme="warm"] .skel {
+  background: linear-gradient(90deg,
+    #ece5d8 25%,
+    #ddd5c5 50%,
+    #ece5d8 75%
+  );
+  background-size: 200% 100%;
+  animation: skel-shimmer 1.8s infinite linear;
+}
+[data-theme="bluedark"] .skel {
+  background: linear-gradient(90deg,
+    #272e38 25%,
+    #333d4a 50%,
+    #272e38 75%
+  );
+  background-size: 200% 100%;
+  animation: skel-shimmer 1.8s infinite linear;
+}
 /* Generic size helpers */
 .skel-icon     { width: 2rem;   height: 2rem;    border-radius: 50%; flex-shrink: 0; }
 .skel-title    { height: 1.25rem;  width: 6rem;  }
@@ -266,8 +450,10 @@ body {
   display: flex;
   overflow: hidden;
   transition: background-color 0.3s ease, color 0.3s ease;
+  padding: 0 8px 8px;
+  box-sizing: border-box;
 }
-#app { display: flex; flex-direction: column; width: 100%; height: 100vh; height: 100dvh; }
+#app { display: flex; flex-direction: column; width: 100%; height: 100%; overflow: hidden; }
 
 /* ── Offline Banner ───────────────────────────────────────────────────── */
 #offline-banner {
@@ -291,6 +477,8 @@ body {
   display: flex;
   flex: 1;
   overflow: hidden;
+  border: 1px solid var(--color-border-primary);
+  border-radius: 8px;
 }
 
 /* ── Top Header ───────────────────────────────────────────────────────── */
@@ -298,7 +486,6 @@ body {
   height: 3rem;
   min-height: 3rem;
   background: var(--color-bg-primary);
-  border-bottom: 1px solid var(--color-border-primary);
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -662,11 +849,15 @@ body {
 }
 
 /* ── New Session button ──────────────────────────────────────────────────── */
+.btn-split-wrap {
+  display: flex;
+  align-items: stretch;
+}
 .btn-split-main {
   height: 1.5rem;
-  padding: 0 0.625rem;
+  padding: 0 0.6rem;
   border: none;
-  border-radius: 6px;
+  border-radius: 6px 0 0 6px;
   background: var(--color-accent-primary);
   color: #fff;
   font-size: 0.75rem;
@@ -674,12 +865,85 @@ body {
   white-space: nowrap;
   line-height: 1;
   cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 0.3rem;
   transition: background 0.15s, box-shadow 0.15s;
 }
 .btn-split-main:hover {
   background: var(--color-button-primary-hover);
   box-shadow: 0 2px 6px rgba(0,0,0,0.15);
 }
+.btn-split-arrow {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 1.5rem;
+  width: 1.375rem;
+  padding: 0;
+  border: none;
+  border-left: 1px solid rgba(255,255,255,0.2);
+  border-radius: 0 6px 6px 0;
+  background: var(--color-accent-primary);
+  color: #fff;
+  cursor: pointer;
+  transition: background 0.15s, box-shadow 0.15s;
+  flex-shrink: 0;
+}
+.btn-split-arrow:hover {
+  background: var(--color-button-primary-hover);
+  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
+}
+.btn-split-dropdown {
+  position: relative;
+  display: flex;
+}
+.btn-split-menu {
+  display: none;
+  position: absolute;
+  top: calc(100% + 4px);
+  right: 0;
+  min-width: 9rem;
+  background: var(--color-bg-elevated, var(--color-bg-secondary));
+  border: 1px solid var(--color-border-secondary);
+  border-radius: 8px;
+  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
+  padding: 0.25rem;
+  z-index: 200;
+  white-space: nowrap;
+}
+/* Bridge the 4px gap so hover doesn't break when moving to the menu */
+.btn-split-menu::before {
+  content: "";
+  position: absolute;
+  top: -8px;
+  left: 0;
+  right: 0;
+  height: 8px;
+}
+.btn-split-dropdown:hover .btn-split-menu {
+  display: block;
+}
+.btn-split-menu-item {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  width: 100%;
+  padding: 0.375rem 0.75rem;
+  border: none;
+  border-radius: 5px;
+  background: transparent;
+  color: var(--color-text-secondary);
+  font-size: 0.8125rem;
+  font-family: var(--font-sans);
+  text-align: left;
+  cursor: pointer;
+  transition: background 0.12s, color 0.12s;
+}
+.btn-split-menu-item:hover {
+  background: var(--color-bg-hover);
+  color: var(--color-text-primary);
+}
 
 /* ── Session source badge ────────────────────────────────────────────────── */
 /* Design: compact neutral chips — the visual weight is carried by the
@@ -2375,7 +2639,7 @@ body {
   flex-shrink: 0;
   margin-bottom: -9px;
   display: flex;
-  padding-inline: 12px;
+  padding-inline: 24px;
 }
 .session-composer > * {
   justify-content: flex-start !important;
@@ -2466,7 +2730,7 @@ body {
    Designed to be quiet and low-contrast so it guides without distracting. */
 .chat-empty-hint {
   margin: auto;                /* vertical + horizontal centering inside flex column */
-  max-width: 26.25rem;
+  max-width: 30rem;
   padding: 1.5rem 1rem;
   display: flex;
   flex-direction: column;
@@ -2475,47 +2739,43 @@ body {
   color: var(--color-text-secondary);
   user-select: none;
   pointer-events: none;        /* purely decorative — don't block clicks/scroll */
-  opacity: 0.85;
 }
 .chat-empty-hint .chat-empty-icon {
-  color: var(--color-text-tertiary);
-  margin-bottom: 0.875rem;
-  opacity: 0.55;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 4rem;
+  height: 4rem;
+  margin-bottom: 1.125rem;
+  border-radius: 50%;
+  color: var(--color-accent-primary);
+  background: color-mix(in srgb, var(--color-accent-primary) 10%, transparent);
 }
 .chat-empty-hint .chat-empty-title {
   color: var(--color-text-primary);
-  font-size: 0.9375rem;
-  font-weight: 600;
-  margin-bottom: 0.25rem;
+  font-size: 1.25rem;
+  font-weight: 500;
+  line-height: 1.3;
+  margin-bottom: 0.5rem;
 }
 .chat-empty-hint .chat-empty-subtitle {
-  color: var(--color-text-secondary);
-  font-size: 0.8125rem;
-  margin-bottom: 1.125rem;
-  opacity: 0.85;
+  color: var(--color-text-tertiary);
+  font-size: 0.875rem;
+  line-height: 1.5;
 }
 .chat-empty-hint .chat-empty-tips {
   list-style: none;
   padding: 0;
-  margin: 0;
+  margin: 1.5rem 0 0;
   display: flex;
   flex-direction: column;
-  gap: 0.375rem;
-  font-size: 0.75rem;
+  gap: 0.5rem;
+  font-size: 0.8125rem;
   color: var(--color-text-tertiary);
 }
 .chat-empty-hint .chat-empty-tips li {
-  position: relative;
-  padding-left: 0.875rem;
   line-height: 1.5;
 }
-.chat-empty-hint .chat-empty-tips li::before {
-  content: "·";
-  position: absolute;
-  left: 0.25rem;
-  top: -1px;
-  opacity: 0.6;
-}
 
 /* New message notification banner */
 .new-message-banner {
@@ -3234,7 +3494,7 @@ body {
   max-height: 18rem;
   overflow-y: auto;
 }
-.tool-item-status { margin-left: auto; font-size: 0.6875rem; flex-shrink: 0; }
+.tool-item-status { font-size: 0.6875rem; flex-shrink: 0; }
 .tool-item-status.ok     { color: var(--color-success); }
 .tool-item-status.err    { color: var(--color-error); }
 .tool-item-status.running { color: var(--live); animation: pulse 1.6s ease-in-out infinite; }
@@ -3481,7 +3741,7 @@ body {
   opacity: 0.45;
 }
 [data-theme="dark"] #sib-id {
-  opacity: 0.6;
+  opacity: 1;
 }
 [data-theme="dark"] #sib-dir {
   opacity: 0.85;
@@ -3493,7 +3753,7 @@ body {
 }
 
 #sib-id {
-  opacity: 0.45;       /* tier 3 — glanceable */
+  opacity: 1;
   font-size: 0.625rem;
   letter-spacing: 0.03em;
   flex-shrink: 0;
@@ -3508,7 +3768,6 @@ body {
 }
 .sib-id-clickable {
   cursor: pointer;
-  padding: 1px 0.25rem;
   border-radius: 3px;
   transition: all 0.15s ease;
 }
@@ -7199,7 +7458,7 @@ body {
 .extension-card:hover { border-color: var(--color-text-muted); }
 .extension-card-main {
   display: flex;
-  align-items: stretch;
+  align-items: center;
   gap: 0.75rem;
 }
 .extension-emoji {
@@ -7348,6 +7607,38 @@ body {
   letter-spacing: 0.04em;
   margin: 0 0 0.75rem;
 }
+/* Readme rendered Markdown */
+.extension-readme-body {
+  font-size: 0.875rem;
+  line-height: 1.7;
+  color: var(--color-text-primary);
+  overflow-wrap: break-word;
+}
+.extension-readme-body h1,
+.extension-readme-body h2,
+.extension-readme-body h3 { margin: 1em 0 0.4em; font-weight: 600; }
+.extension-readme-body h1 { font-size: 1.2em; }
+.extension-readme-body h2 { font-size: 1.05em; }
+.extension-readme-body h3 { font-size: 0.95em; }
+.extension-readme-body p  { margin: 0 0 0.75em; }
+.extension-readme-body ul,
+.extension-readme-body ol { padding-left: 1.4em; margin: 0 0 0.75em; }
+.extension-readme-body pre {
+  background: var(--color-bg-secondary);
+  border-radius: 6px;
+  padding: 0.75em 1em;
+  overflow-x: auto;
+  font-size: 0.8em;
+}
+.extension-readme-body code {
+  background: var(--color-bg-secondary);
+  padding: 0.1em 0.3em;
+  border-radius: 3px;
+  font-size: 0.85em;
+}
+.extension-readme-body pre code { background: none; padding: 0; }
+.extension-readme-body a { color: var(--color-accent); }
+.extension-readme-body img { max-width: 100%; height: auto; border-radius: 6px; display: block; margin: 8px 0; }
 .extension-detail-section { margin-bottom: 0.875rem; }
 .extension-detail-section-title {
   font-size: 0.6875rem;
@@ -11432,12 +11723,11 @@ body.setup-mode[data-theme="dark"] {
   color: var(--color-danger, #c33);
 }
 .mcp-tools-header {
-  font-size: 0.6875rem;
+  font-size: 0.8125rem;
   font-weight: 600;
   color: var(--color-text-secondary);
   margin-bottom: 0.5rem;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
+  letter-spacing: 0.01em;
 }
 .mcp-tool-list {
   list-style: none;
@@ -11449,10 +11739,9 @@ body.setup-mode[data-theme="dark"] {
 }
 .mcp-tool-item {
   display: flex;
-  align-items: baseline;
-  gap: 0.625rem;
-  font-size: 0.8125rem;
-  padding: 0.4375rem 0;
+  flex-direction: column;
+  gap: 0.3rem;
+  padding: 0.625rem 0;
   border-bottom: 1px solid var(--color-border-primary, var(--color-border));
 }
 .mcp-tool-item:last-child {
@@ -11460,18 +11749,15 @@ body.setup-mode[data-theme="dark"] {
 }
 .mcp-tool-name {
   font-family: var(--font-mono);
-  background: var(--color-bg-elevated, var(--color-bg-secondary));
-  padding: 0.125rem 0.4375rem;
-  border-radius: 4px;
-  font-size: 0.75rem;
+  font-size: 0.8125rem;
+  font-weight: 600;
   color: var(--color-text-primary, var(--color-text));
-  flex-shrink: 0;
-  border: 1px solid var(--color-border-primary, var(--color-border));
 }
 .mcp-tool-desc {
   color: var(--color-text-secondary);
-  flex: 1;
   line-height: 1.5;
+  font-size: 0.8125rem;
+  opacity: 0.6;
 }
 
 /* ── MCP CTA banner & action buttons ─────────────────────────────────── */
@@ -11670,6 +11956,113 @@ body.setup-mode[data-theme="dark"] {
 .swatch-sunrise-orange { background: #F59E0B; }
 .swatch-rose-violet    { background: #8B5CF6; }
 .swatch-coral-red      { background: #EF4444; }
+.swatch-sky-blue       { background: #38BDF8; }
+.swatch-hot-pink       { background: #EC4899; }
+.swatch-warm-brown     { background: #92745A; }
+.swatch-slate-gray     { background: #6B7280; }
+
+/* ── Background Theme Cards ─────────────────────────────────────────── */
+.settings-bg-theme-cards {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+  padding: 0.25rem 0;
+}
+
+.settings-bg-theme-card {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.375rem;
+  cursor: pointer;
+  border: none;
+  background: transparent;
+  padding: 0;
+  flex-shrink: 0;
+}
+
+/* The thumbnail preview box */
+.settings-bg-theme-card .bg-card-preview {
+  width: 4.5rem;
+  height: 3rem;
+  border-radius: 0.5rem;
+  border: 2px solid var(--color-border-primary);
+  position: relative;
+  overflow: hidden;
+  transition: border-color 0.15s, transform 0.15s;
+  display: flex;
+  flex-direction: row;
+}
+
+.settings-bg-theme-card:hover .bg-card-preview {
+  border-color: var(--color-border-strong);
+  transform: translateY(-1px);
+}
+
+.settings-bg-theme-card.active .bg-card-preview {
+  border-color: var(--color-accent-primary);
+  box-shadow: 0 0 0 2px var(--color-accent-soft);
+}
+
+/* Active checkmark badge */
+.settings-bg-theme-card.active .bg-card-preview::after {
+  content: "✓";
+  position: absolute;
+  top: 0.2rem;
+  right: 0.3rem;
+  font-size: 0.625rem;
+  font-weight: 700;
+  color: white;
+  background: var(--color-accent-primary);
+  border-radius: 50%;
+  width: 0.875rem;
+  height: 0.875rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 1;
+}
+
+/* Sidebar strip (left 35%) */
+.settings-bg-theme-card .bg-card-sidebar {
+  width: 35%;
+  height: 100%;
+  border-radius: 0;
+}
+
+/* Main area (right 65%) */
+.settings-bg-theme-card .bg-card-main {
+  width: 65%;
+  height: 100%;
+}
+
+/* Per-theme colors */
+.bg-theme-light    .bg-card-sidebar { background: #f5f5f3; }
+.bg-theme-light    .bg-card-main    { background: #ffffff; }
+
+.bg-theme-dark     .bg-card-sidebar { background: #101114; }
+.bg-theme-dark     .bg-card-main    { background: #16181d; }
+
+.bg-theme-dim      .bg-card-sidebar { background: #21262d; }
+.bg-theme-dim      .bg-card-main    { background: #2b3038; }
+
+.bg-theme-warm     .bg-card-sidebar { background: #f5f0e8; }
+.bg-theme-warm     .bg-card-main    { background: #fdf8f0; }
+
+.bg-theme-black    .bg-card-sidebar { background: #1e2228; }
+.bg-theme-black    .bg-card-main    { background: #252b33; }
+
+/* Label under card */
+.settings-bg-theme-card .bg-card-label {
+  font-size: 0.6875rem;
+  color: var(--color-text-secondary);
+  white-space: nowrap;
+}
+
+.settings-bg-theme-card.active .bg-card-label {
+  color: var(--color-accent-primary);
+  font-weight: 600;
+}
 
 /* ── Sessions List ───────────────────────────────────────────────────── */
 .billing-sessions-row {

data/lib/clacky/web/app.js

@@ -436,7 +436,34 @@ const Modal = (() => {
     });
   }
 
-  /** Show a text input prompt dialog. Returns a Promise<string|null>. */
+  /**
+   * Like confirm(), but shows an extra opt-in checkbox (unchecked by default).
+   * Resolves { ok, checked } so the caller can act on both the decision and
+   * the checkbox state.
+   */
+  function confirmWithCheckbox(message, checkboxLabel) {
+    return new Promise(resolve => {
+      const overlay = $("modal-overlay");
+      $("modal-message").textContent   = message;
+      $("modal-skip-text").textContent = checkboxLabel;
+      $("modal-skip-cb").checked       = false;
+      $("modal-skip-label").style.display = "flex";
+      if (overlay.parentNode !== document.body || overlay.nextSibling) {
+        document.body.appendChild(overlay);
+      }
+      overlay.style.display = "flex";
+
+      const cleanup = (ok) => {
+        overlay.style.display = "none";
+        $("modal-skip-label").style.display = "none";
+        $("modal-yes").onclick = null;
+        $("modal-no").onclick  = null;
+        resolve({ ok, checked: ok && $("modal-skip-cb").checked });
+      };
+      $("modal-yes").onclick = () => cleanup(true);
+      $("modal-no").onclick  = () => cleanup(false);
+    });
+  }
   function prompt(message, defaultValue = "") {
     return new Promise(resolve => {
       const overlay = $("prompt-modal-overlay");
@@ -530,7 +557,7 @@ const Modal = (() => {
     });
   }
 
-  return { confirm, confirmOnce, prompt, rename };
+  return { confirm, confirmOnce, confirmWithCheckbox, prompt, rename };
 })();
 
 Clacky.Modal = Modal;
@@ -714,10 +741,6 @@ window.mobileCloseSidebar = _mobileCloseSidebar;
 
 // ── Theme / session-scoped message panel bindings ──────────────────────────
 
-// Theme toggle in header
-if ($("theme-toggle-header")) {
-  $("theme-toggle-header").addEventListener("click", () => Theme.toggle());
-}
 // btn-delete-session, #messages scroll-to-top (load history), and btn-interrupt
 // moved to sessions.js (_initMessageHistory in Sessions.init()).