From b025047cbfb8ea2480d5e8774092a45e1849422e Mon Sep 17 00:00:00 2001
From: Codeman maintainer <noreply@anthropic.com>
Date: Mon, 10 Aug 2026 11:54:10 +0200
Subject: [PATCH] feat(settings): size up the two task modals, lead Respawn
 with auto-resume

The shared surface is tuned for App Settings: a long, dense document you scan.
Add Case and Session Options are the opposite - a handful of short panels you
act on once - and at that density they read as a few small fields marooned in a
large empty frame, with rail entries too small to aim at.

Both now take the same size-up while App Settings stays tight: 900px wide, a
236px rail with 0.9rem entries and 19px icons, 0.88rem row labels, 0.82rem
fields, and `height: auto` between a 560px floor and 88vh - so the shell is as
tall as the panel showing instead of a fixed box the content rattles in
(Summary opened two thirds empty before).

Respawn is reordered around what people come to it for:

- Auto-resume is a CALLOUT again, not the first row of a list. It is what turns
  a limit-halted overnight run back on, so it gets an accent card, an icon, and
  a hit target covering the whole card (the label wraps its own switch - no
  `for`, since nesting already associates them and the pair has historically
  double-fired). The armed "resumes at HH:MM" note renders inside it.
- Loop control (status + Enable/Stop) moves ABOVE the loop configuration. A
  running loop is the thing you open this tab to see or stop, and Enable is the
  point of the tab either way; it was previously below three groups of config.
- Enable/Stop and the status pill scale with the rows around them.

The Context tab is renamed Session, since "context" only described one of its
three groups, and those groups become Identity / Context window / Behavior.
---
 src/web/public/index.html |  76 ++++-----
 src/web/public/styles.css | 333 ++++++++++++++++++++++++++++++++++++++
 2 files changed, 372 insertions(+), 37 deletions(-)

diff --git a/src/web/public/index.html b/src/web/public/index.html
index 7e0035f6..5e9f17a7 100644
--- a/src/web/public/index.html
+++ b/src/web/public/index.html
@@ -1004,7 +1004,7 @@
               </button>
               <button type="button" class="set-rail-item" data-tab="context" onclick="app.switchOptionsTab('context')">
                 <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><ellipse cx="12" cy="6" rx="8" ry="3"/><path d="M4 6v6c0 1.7 3.6 3 8 3s8-1.3 8-3V6"/><path d="M4 12v6c0 1.7 3.6 3 8 3s8-1.3 8-3v-6"/></svg>
-                <span>Context</span>
+                <span>Session</span>
               </button>
               <button type="button" class="set-rail-item" data-tab="ralph" data-claude-only onclick="app.switchOptionsTab('ralph')">
                 <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 6h11"/><path d="M9 12h11"/><path d="M9 18h11"/><polyline points="3 6 4 7 6 5"/><polyline points="3 12 4 13 6 11"/><polyline points="3 18 4 19 6 17"/></svg>
@@ -1027,23 +1027,43 @@
               </div>
               <p class="set-section-blurb">One autonomous work cycle, plus what to do when a usage limit pauses the session.</p>
 
-              <div class="set-group">
-                <div class="set-group-head"><h4>Usage limits</h4></div>
-                <div class="set-group-body">
-                  <div class="set-row">
-                    <div class="set-row-text">
-                      <span class="set-row-label">Auto-resume when the limit resets</span>
-                      <span class="set-row-desc">If Claude pauses on a subscription limit ("limit reached &middot; resets 3pm"), Codeman waits for the reset and continues on its own. Independent of the respawn loop below.</span>
-                      <span class="auto-resume-status" id="autoResumeStatus"></span>
-                    </div>
-                    <label class="switch switch-sm"><input type="checkbox" id="modalAutoResumeEnabled" onchange="app.autoSaveAutoResume()"><span class="slider"></span></label>
-                  </div>
-                </div>
-              </div>
+              <!-- The one setting on this tab worth reading before anything
+                   else, so it is a callout rather than the first row of a list:
+                   it is what turns a limit-halted overnight run back on. -->
+              <label class="set-callout">
+                <span class="set-callout-ico" aria-hidden="true">
+                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><polyline points="12 7 12 12 15 14"/></svg>
+                </span>
+                <span class="set-callout-text">
+                  <span class="set-callout-title">Auto-resume when the usage limit resets</span>
+                  <span class="set-callout-desc">Claude stops on a subscription limit ("limit reached &middot; resets 3pm") and sits there until you come back. Switch this on and Codeman waits out the reset, then continues the work on its own. Independent of the respawn loop below.</span>
+                  <span class="auto-resume-status" id="autoResumeStatus"></span>
+                </span>
+                <span class="switch switch-sm set-callout-switch"><input type="checkbox" id="modalAutoResumeEnabled" onchange="app.autoSaveAutoResume()"><span class="slider"></span></span>
+              </label>
 
               <!-- Hidden wholesale for non-claude sessions and for a session with
                    no live process (session-ui.js: openSessionOptions). -->
               <div id="sessionRespawnSection">
+                <div class="set-group">
+                  <div class="set-group-head"><h4>Loop control</h4></div>
+                  <div class="set-group-body">
+                    <div class="set-row">
+                      <div class="set-row-text">
+                        <span class="set-row-label">Status</span>
+                        <div class="session-respawn-status" id="sessionRespawnStatus">
+                          <span class="respawn-status-indicator"></span>
+                          <span class="respawn-status-text">Not active</span>
+                        </div>
+                      </div>
+                      <div class="set-row-actions">
+                        <button class="btn-toolbar btn-success btn-sm" onclick="app.enableRespawnFromModal()" id="modalEnableRespawnBtn">Enable</button>
+                        <button class="btn-toolbar btn-danger btn-sm" onclick="app.stopRespawnFromModal()" id="modalStopRespawnBtn" style="display: none;">Stop</button>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+
                 <div class="set-group">
                   <div class="set-group-head"><h4>Respawn loop</h4></div>
                   <p class="set-group-hint">Whenever Claude goes idle, Codeman sends the update prompt, optionally runs /clear + /init, and kickstarts the next round &mdash; repeating for the chosen duration. Configure it here, then press Enable.</p>
@@ -1122,34 +1142,16 @@
                   </div>
                 </div>
 
-                <div class="set-group">
-                  <div class="set-group-head"><h4>Loop control</h4></div>
-                  <div class="set-group-body">
-                    <div class="set-row">
-                      <div class="set-row-text">
-                        <span class="set-row-label">Status</span>
-                        <div class="session-respawn-status" id="sessionRespawnStatus">
-                          <span class="respawn-status-indicator"></span>
-                          <span class="respawn-status-text">Not active</span>
-                        </div>
-                      </div>
-                      <div class="set-row-actions">
-                        <button class="btn-toolbar btn-success btn-sm" onclick="app.enableRespawnFromModal()" id="modalEnableRespawnBtn">Enable</button>
-                        <button class="btn-toolbar btn-danger btn-sm" onclick="app.stopRespawnFromModal()" id="modalStopRespawnBtn" style="display: none;">Stop</button>
-                      </div>
-                    </div>
-                  </div>
-                </div>
               </div><!-- End sessionRespawnSection -->
             </section>
 
             <!-- ══ Context ══════════════════════════════════════════════════ -->
-            <section class="set-section hidden" id="context-tab" data-label="Context">
+            <section class="set-section hidden" id="context-tab" data-label="Session">
               <div class="set-section-head">
                 <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><ellipse cx="12" cy="6" rx="8" ry="3"/><path d="M4 6v6c0 1.7 3.6 3 8 3s8-1.3 8-3V6"/><path d="M4 12v6c0 1.7 3.6 3 8 3s8-1.3 8-3v-6"/></svg>
-                <h2>Context</h2>
+                <h2>Session</h2>
               </div>
-              <p class="set-section-blurb">What this tab is called, and how its context window is kept from filling up.</p>
+              <p class="set-section-blurb">What this tab is called, how its context window is kept from filling up, and what it watches.</p>
 
               <div class="set-group">
                 <div class="set-group-head"><h4>Identity</h4></div>
@@ -1200,7 +1202,7 @@
               </div>
 
               <div class="set-group">
-                <div class="set-group-head"><h4>Token management</h4></div>
+                <div class="set-group-head"><h4>Context window</h4></div>
                 <div class="set-group-body">
                   <div class="set-row">
                     <div class="set-row-text">
@@ -1235,7 +1237,7 @@
               </div>
 
               <div class="set-group">
-                <div class="set-group-head"><h4>This session</h4></div>
+                <div class="set-group-head"><h4>Behavior</h4></div>
                 <div class="set-group-body">
                   <div class="set-row">
                     <div class="set-row-text">
diff --git a/src/web/public/styles.css b/src/web/public/styles.css
index 671e1fe7..356694d8 100644
--- a/src/web/public/styles.css
+++ b/src/web/public/styles.css
@@ -15782,3 +15782,336 @@ html[data-skin="daylight-blue"] .welcome-btn-tunnel.active:hover {
   font-size: 0.645rem;
   color: var(--text-muted);
 }
+
+/* ── Add Case is a task, not a settings list ──────────────────────────────
+   The shared surface is tuned for App Settings: a long, dense document you
+   scan. Add Case is the opposite - six short forms you fill in once - so on
+   the tight surface it read as a few small fields marooned in a large empty
+   frame. It keeps the same language, one size up: a wider rail with entries
+   you can hit without aiming, bigger fields, and a shell that is only as tall
+   as the panel showing, instead of a fixed box the content has to rattle in.
+   ─────────────────────────────────────────────────────────────────────────── */
+#createCaseModal .modal-content.modal-lg {
+  max-width: min(900px, 96vw);
+  width: min(900px, 96vw);
+  height: auto;
+  min-height: min(560px, 80vh);
+  max-height: 88vh;
+}
+
+#createCaseModal .set-body {
+  grid-template-columns: 236px minmax(0, 1fr);
+}
+
+#createCaseModal .set-rail {
+  padding: 14px 12px;
+}
+
+#createCaseModal .set-rail-items {
+  gap: 3px;
+}
+
+#createCaseModal .set-rail-item {
+  gap: 12px;
+  padding: 11px 13px;
+  border-radius: 10px;
+  font-size: 0.9rem;
+  font-weight: 540;
+}
+
+#createCaseModal .set-rail-item svg {
+  width: 19px;
+  height: 19px;
+}
+
+#createCaseModal .set-rail-item.active::before {
+  top: 9px;
+  bottom: 9px;
+  width: 3px;
+}
+
+#createCaseModal .set-rail-foot {
+  padding: 12px 8px 2px;
+  font-size: 0.68rem;
+}
+
+#createCaseModal .set-doc {
+  padding: 0 22px 22px;
+}
+
+#createCaseModal .set-section {
+  padding-top: 18px;
+}
+
+#createCaseModal .set-section-head svg {
+  padding: 6px;
+}
+
+#createCaseModal .set-section-head h2 {
+  font-size: 1.08rem;
+}
+
+#createCaseModal .set-section-blurb {
+  margin: 0 0 13px 40px;
+  font-size: 0.75rem;
+}
+
+#createCaseModal .set-doc .form-row {
+  margin: 0 0 7px;
+  padding: 11px 14px;
+  border-radius: 11px;
+}
+
+#createCaseModal .set-doc .form-row > label {
+  margin: 0 0 6px;
+  font-size: 0.88rem;
+  font-weight: 540;
+}
+
+#createCaseModal .set-doc .form-row .form-hint {
+  margin: 6px 0 0;
+  font-size: 0.72rem;
+  line-height: 1.45;
+}
+
+#createCaseModal .set-doc .form-row > input[type='text'],
+#createCaseModal .set-doc .form-row > input[type='url'],
+#createCaseModal .set-doc .form-row > input[type='number'],
+#createCaseModal .set-doc .form-row > input[type='password'],
+#createCaseModal .set-doc .form-row > select,
+#createCaseModal .set-doc .form-row > textarea {
+  font-size: 0.84rem;
+  padding: 9px 12px;
+  border-radius: 9px;
+}
+
+#createCaseModal .set-doc .form-row > label.checkbox-row {
+  font-size: 0.88rem;
+  gap: 9px;
+}
+
+#createCaseModal .set-doc .form-row > label.checkbox-row input {
+  width: 16px;
+  height: 16px;
+}
+
+#createCaseModal .set-doc .advanced-options > summary {
+  padding: 8px 2px;
+  font-size: 0.7rem;
+}
+
+#createCaseModal .set-doc .set-section > .form-hint {
+  font-size: 0.72rem;
+}
+
+#createCaseModal .form-actions.set-foot {
+  padding: 12px 22px;
+}
+
+/* ── Session Options is a task too ────────────────────────────────────────
+   Same reasoning as Add Case: four short panels you act on, not a document
+   you scan, so it takes the same size-up. Height follows the panel showing,
+   which is what keeps Summary from opening as a mostly-empty box.
+   ─────────────────────────────────────────────────────────────────────────── */
+#sessionOptionsModal .modal-content.modal-lg {
+  max-width: min(900px, 96vw);
+  width: min(900px, 96vw);
+  height: auto;
+  min-height: min(560px, 80vh);
+  max-height: 88vh;
+}
+
+#sessionOptionsModal .set-body {
+  grid-template-columns: 236px minmax(0, 1fr);
+}
+
+#sessionOptionsModal .set-rail {
+  padding: 14px 12px;
+}
+
+#sessionOptionsModal .set-rail-items {
+  gap: 3px;
+}
+
+#sessionOptionsModal .set-rail-item {
+  gap: 12px;
+  padding: 11px 13px;
+  border-radius: 10px;
+  font-size: 0.9rem;
+  font-weight: 540;
+}
+
+#sessionOptionsModal .set-rail-item svg {
+  width: 19px;
+  height: 19px;
+}
+
+#sessionOptionsModal .set-rail-item.active::before {
+  top: 9px;
+  bottom: 9px;
+  width: 3px;
+}
+
+#sessionOptionsModal .set-rail-foot {
+  padding: 12px 8px 2px;
+  font-size: 0.68rem;
+}
+
+#sessionOptionsModal .set-doc {
+  padding: 0 22px 22px;
+}
+
+#sessionOptionsModal .set-section {
+  padding-top: 18px;
+}
+
+#sessionOptionsModal .set-section-head svg {
+  padding: 6px;
+}
+
+#sessionOptionsModal .set-section-head h2 {
+  font-size: 1.08rem;
+}
+
+#sessionOptionsModal .set-section-blurb {
+  margin: 0 0 13px 40px;
+  font-size: 0.75rem;
+}
+
+#sessionOptionsModal .set-group + .set-group {
+  margin-top: 16px;
+}
+
+#sessionOptionsModal .set-group-body {
+  gap: 5px;
+}
+
+#sessionOptionsModal .set-row {
+  padding: 10px 14px;
+  border-radius: 11px;
+}
+
+#sessionOptionsModal .set-row-label {
+  font-size: 0.88rem;
+  font-weight: 540;
+}
+
+#sessionOptionsModal .set-row-desc {
+  font-size: 0.72rem;
+  line-height: 1.45;
+}
+
+#sessionOptionsModal .set-input,
+#sessionOptionsModal .set-select,
+#sessionOptionsModal .set-num,
+#sessionOptionsModal .set-textarea {
+  font-size: 0.82rem;
+  padding: 8px 11px;
+  border-radius: 9px;
+}
+
+#sessionOptionsModal .set-num {
+  width: 76px;
+}
+
+#sessionOptionsModal .set-num-wide {
+  width: 102px;
+}
+
+#sessionOptionsModal .set-check {
+  font-size: 0.82rem;
+}
+
+#sessionOptionsModal .set-check input {
+  width: 15px;
+  height: 15px;
+}
+
+/* ── callout ──────────────────────────────────────────────────────────────
+   For the one setting on a panel that is worth reading before the rest. It is
+   a label wrapping its own switch, so the whole card is the hit target: the
+   complaint about the flat list was that auto-resume no longer looked like
+   something you were meant to turn on.
+   ─────────────────────────────────────────────────────────────────────────── */
+:is(#appSettingsModal, #sessionOptionsModal, #createCaseModal) .set-callout {
+  display: flex;
+  align-items: flex-start;
+  gap: 13px;
+  margin: 0 0 16px;
+  padding: 14px 16px;
+  border-radius: 12px;
+  cursor: pointer;
+  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.14), rgba(var(--accent-rgb), 0.05));
+  border: 1px solid rgba(var(--accent-rgb), 0.42);
+  transition: border-color 0.15s, background 0.15s;
+}
+
+:is(#appSettingsModal, #sessionOptionsModal, #createCaseModal) .set-callout:hover {
+  border-color: rgba(var(--accent-rgb), 0.68);
+  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.19), rgba(var(--accent-rgb), 0.08));
+}
+
+:is(#appSettingsModal, #sessionOptionsModal, #createCaseModal) .set-callout-ico {
+  display: grid;
+  place-items: center;
+  width: 32px;
+  height: 32px;
+  flex-shrink: 0;
+  border-radius: 9px;
+  color: var(--accent);
+  background: rgba(var(--accent-rgb), 0.16);
+  border: 1px solid rgba(var(--accent-rgb), 0.3);
+}
+
+:is(#appSettingsModal, #sessionOptionsModal, #createCaseModal) .set-callout-text {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  min-width: 0;
+  flex: 1;
+}
+
+:is(#appSettingsModal, #sessionOptionsModal, #createCaseModal) .set-callout-title {
+  font-size: 0.92rem;
+  font-weight: 600;
+  color: var(--text);
+}
+
+:is(#appSettingsModal, #sessionOptionsModal, #createCaseModal) .set-callout-desc {
+  font-size: 0.73rem;
+  line-height: 1.5;
+  color: var(--text-dim);
+}
+
+:is(#appSettingsModal, #sessionOptionsModal, #createCaseModal) .set-callout-switch {
+  margin-top: 3px;
+}
+
+/* Armed: the pause is scheduled, so the card states the time it will resume. */
+#sessionOptionsModal .set-callout .auto-resume-status {
+  margin-top: 5px;
+  font-size: 0.72rem;
+  font-weight: 600;
+  color: var(--accent);
+}
+
+/* Action buttons on this surface follow the rows they sit in; at the small
+   toolbar size they read as an afterthought next to a 0.88rem label. */
+#sessionOptionsModal .set-row-actions .btn-toolbar,
+#createCaseModal .set-doc .btn-toolbar {
+  font-size: 0.8rem;
+  padding: 7px 14px;
+  border-radius: 8px;
+}
+
+#sessionOptionsModal .set-row-actions #modalEnableRespawnBtn,
+#sessionOptionsModal .set-row-actions #modalStopRespawnBtn {
+  font-size: 0.85rem;
+  font-weight: 600;
+  padding: 8px 20px;
+}
+
+#sessionOptionsModal .session-respawn-status {
+  font-size: 0.8rem;
+  padding: 4px 9px;
+}