anentrypoint-design 0.0.232 → 0.0.234

package/app-shell.css

@@ -2297,6 +2297,12 @@ table tr.clickable:focus-visible td { background: var(--bg-2); }
      leaving the primary input near-invisible at rest - use the strong rule. */
   border: var(--bw-hair) solid var(--rule-strong);
   border-radius: var(--r-2);
+  /* A flat hairline box on a flat background is the single most-repeated
+     "looks unfinished" tell in the chat surface - the one control the user
+     types into every turn had no more visual weight than a settings card.
+     --shadow-1 (already defined kit-wide, just unused here) lifts it a hair
+     off the page at rest; the existing focus-within box-shadow overrides it. */
+  box-shadow: var(--shadow-1);
   flex-shrink: 0;
   transition: border-color var(--dur-snap) var(--ease), box-shadow var(--dur-snap) var(--ease);
 }
@@ -3348,7 +3354,14 @@ input[type="password"]:not(:placeholder-shown) + .input-clear {
 .ws-sessions {
   grid-area: sessions;
   min-height: 0; display: flex; flex-direction: column;
-  background: var(--bg); border-right: var(--bw-hair) solid var(--bg-3);
+  /* Rail and pane both sit on --bg-2 (a recessed plane framing the elevated
+     --bg content column); sessions used flat --bg instead, so the
+     conversation list and the chat thread read as the SAME surface with only
+     a 1px hairline between them - the flattest, most "one big beige box"
+     tell in the shell. --bg-2 restores the three-plane depth (rail/sessions
+     recessed either side, content elevated in the middle) the design
+     already establishes everywhere else. */
+  background: var(--bg-2); border-right: var(--bw-hair) solid var(--bg-3);
   overflow: hidden;
 }
 .ws-no-sessions .ws-sessions { display: none; }

package/chat.css

@@ -8,6 +8,14 @@
   min-height: 0;
   flex: 1;
   gap: var(--space-2, 8px);
+  /* The chat tab opts out of .ws-main's padding (mainFlush) so the thread can
+     manage its own --measure centering, but that left every direct child -
+     controls row, heading, empty-state, composer - flush against the column
+     edge with zero gutter (the crumb bar above keeps its own padding, so the
+     content below visibly touched the edge the crumb text did not). A
+     uniform inline gutter here restores breathing room for every row without
+     disturbing --measure centering (it centers within this padded box). */
+  padding-inline: var(--space-5);
 }
 
 /* agent + model picker, new/stop, status — wraps on narrow widths */
@@ -502,6 +510,23 @@
   padding: var(--space-3); background: color-mix(in oklab, var(--fg) 4%, transparent);
 }
 
+/* --- reply-preview banner shown above the composer while replying to a message. --- */
+.cm-composer-wrap { display: flex; flex-direction: column; width: 100%; }
+.cm-reply-preview {
+  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
+  padding: var(--space-1) var(--space-3); border-bottom: var(--bw-hair) solid var(--rule);
+  background: color-mix(in oklab, var(--accent) 6%, transparent);
+  font-family: var(--ff-mono); font-size: var(--fs-tiny); color: var(--fg-2);
+}
+.cm-reply-preview-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.cm-reply-preview-close {
+  display: inline-flex; align-items: center; justify-content: center;
+  background: none; border: none; color: var(--fg-3); cursor: pointer; padding: var(--space-1);
+  border-radius: var(--r-1); flex: 0 0 auto;
+}
+.cm-reply-preview-close:hover { color: var(--fg); background: color-mix(in oklab, var(--fg) 8%, transparent); }
+.cm-reply-preview-close:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); }
+
 /* --- A5: composer context line (agent / model / cwd at point of typing). --- */
 .chat-composer-context {
   display: block; width: 100%; text-align: left; padding: 4px var(--space-3) 0;

package/dist/247420.css

@@ -2797,6 +2797,12 @@
      leaving the primary input near-invisible at rest - use the strong rule. */
   border: var(--bw-hair) solid var(--rule-strong);
   border-radius: var(--r-2);
+  /* A flat hairline box on a flat background is the single most-repeated
+     "looks unfinished" tell in the chat surface - the one control the user
+     types into every turn had no more visual weight than a settings card.
+     --shadow-1 (already defined kit-wide, just unused here) lifts it a hair
+     off the page at rest; the existing focus-within box-shadow overrides it. */
+  box-shadow: var(--shadow-1);
   flex-shrink: 0;
   transition: border-color var(--dur-snap) var(--ease), box-shadow var(--dur-snap) var(--ease);
 }
@@ -3839,7 +3845,14 @@
 .ds-247420 .ws-sessions {
   grid-area: sessions;
   min-height: 0; display: flex; flex-direction: column;
-  background: var(--bg); border-right: var(--bw-hair) solid var(--bg-3);
+  /* Rail and pane both sit on --bg-2 (a recessed plane framing the elevated
+     --bg content column); sessions used flat --bg instead, so the
+     conversation list and the chat thread read as the SAME surface with only
+     a 1px hairline between them - the flattest, most "one big beige box"
+     tell in the shell. --bg-2 restores the three-plane depth (rail/sessions
+     recessed either side, content elevated in the middle) the design
+     already establishes everywhere else. */
+  background: var(--bg-2); border-right: var(--bw-hair) solid var(--bg-3);
   overflow: hidden;
 }
 .ds-247420 .ws-no-sessions .ws-sessions { display: none; }
@@ -5615,6 +5628,14 @@
   min-height: 0;
   flex: 1;
   gap: var(--space-2, 8px);
+  /* The chat tab opts out of .ws-main's padding (mainFlush) so the thread can
+     manage its own --measure centering, but that left every direct child -
+     controls row, heading, empty-state, composer - flush against the column
+     edge with zero gutter (the crumb bar above keeps its own padding, so the
+     content below visibly touched the edge the crumb text did not). A
+     uniform inline gutter here restores breathing room for every row without
+     disturbing --measure centering (it centers within this padded box). */
+  padding-inline: var(--space-5);
 }
 
 /* agent + model picker, new/stop, status — wraps on narrow widths */
@@ -6108,6 +6129,23 @@
   padding: var(--space-3); background: color-mix(in oklab, var(--fg) 4%, transparent);
 }
 
+/* --- reply-preview banner shown above the composer while replying to a message. --- */
+.ds-247420 .cm-composer-wrap { display: flex; flex-direction: column; width: 100%; }
+.ds-247420 .cm-reply-preview {
+  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
+  padding: var(--space-1) var(--space-3); border-bottom: var(--bw-hair) solid var(--rule);
+  background: color-mix(in oklab, var(--accent) 6%, transparent);
+  font-family: var(--ff-mono); font-size: var(--fs-tiny); color: var(--fg-2);
+}
+.ds-247420 .cm-reply-preview-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ds-247420 .cm-reply-preview-close {
+  display: inline-flex; align-items: center; justify-content: center;
+  background: none; border: none; color: var(--fg-3); cursor: pointer; padding: var(--space-1);
+  border-radius: var(--r-1); flex: 0 0 auto;
+}
+.ds-247420 .cm-reply-preview-close:hover { color: var(--fg); background: color-mix(in oklab, var(--fg) 8%, transparent); }
+.ds-247420 .cm-reply-preview-close:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); }
+
 /* --- A5: composer context line (agent / model / cwd at point of typing). --- */
 .ds-247420 .chat-composer-context {
   display: block; width: 100%; text-align: left; padding: 4px var(--space-3) 0;