anentrypoint-design 0.0.188 → 0.0.191

package/app-shell.css

@@ -1962,11 +1962,13 @@ table tr.clickable:focus-visible td { background: var(--bg-2); }
     .chat-composer textarea { padding: 10px 12px; }
 }
 
-/* ── landscape orientation: reduce vertical space for composer ──────────── */
+/* --- landscape orientation: reduce vertical space for composer --- */
 @media (max-height: 500px) and (orientation: landscape) {
     .chat-composer { padding: 6px 0; }
-    .chat-composer textarea { min-height: 36px; max-height: 120px; }
-    .chat-composer .send, .chat-composer button { width: 36px; height: 36px; font-size: 14px; }
+    .chat-composer textarea { min-height: 44px; max-height: 120px; }
+    /* Keep the send button at the 44x44 minimum tap target even in the
+       space-constrained landscape layout. */
+    .chat-composer .send, .chat-composer button { width: 44px; height: 44px; font-size: 14px; }
 }
 
 /* ============================================================
@@ -2636,9 +2638,11 @@ input[type="password"]:not(:placeholder-shown) + .input-clear {
 /* Mobile nav toggle (hamburger) — hidden on desktop, shown ≤900px */
 .app-side-toggle {
   display: none;
-  position: fixed; top: calc((var(--app-topbar-h) - 32px) / 2); left: 10px;
+  position: fixed; top: calc((var(--app-topbar-h) - 44px) / 2); left: 10px;
   z-index: 51;
-  width: 36px; height: 36px;
+  /* 44x44 minimum hit area (WCAG 2.5.5 / Apple HIG) - 36px is below the
+     reliable-tap threshold on touch. */
+  width: 44px; height: 44px;
   align-items: center; justify-content: center;
   font-size: 18px; line-height: 1;
   background: var(--bg-2); color: var(--fg);

package/chat.css

@@ -19,6 +19,22 @@
 }
 .agentchat-controls .select,
 .agentchat-controls [role="combobox"] { min-width: 130px; max-width: 240px; }
+.agentchat-controls .ds-select { min-width: 130px; max-width: 240px; }
+
+/* Narrow viewports: let the agent/model selects share the row two-up, then
+   stack full-width on the smallest screens, and drop the status to its own
+   line so nothing is squeezed below a usable tap size. */
+@media (max-width: 640px) {
+  .agentchat-controls .select,
+  .agentchat-controls .ds-select,
+  .agentchat-controls [role="combobox"] { flex: 1 1 45%; max-width: none; }
+  .agentchat-status { margin-left: 0; flex-basis: 100%; }
+}
+@media (max-width: 360px) {
+  .agentchat-controls .select,
+  .agentchat-controls .ds-select,
+  .agentchat-controls [role="combobox"] { flex-basis: 100%; }
+}
 
 .agentchat-status {
   display: inline-flex;
@@ -60,7 +76,9 @@
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  max-width: 60ch;
+  /* 60ch overflows narrow phones; clamp to the viewport so the path ellipsizes
+     instead of pushing the row wider than the screen. */
+  max-width: min(60ch, 60vw);
 }
 .agentchat-cwd-btn {
   background: none;
@@ -72,6 +90,7 @@
   font: inherit;
 }
 .agentchat-cwd-btn:hover { border-color: var(--accent); }
+.agentchat-cwd-btn:focus-visible { outline: 2px solid var(--accent, var(--fg)); outline-offset: 2px; }
 .agentchat-cwd-input {
   flex: 1;
   min-width: 12ch;
@@ -99,3 +118,77 @@
   flex-direction: column;
   gap: var(--space-2, 8px);
 }
+
+/* Empty state: a fresh thread is an invitation, not a void. */
+.agentchat-empty {
+  margin: auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: .4em;
+  text-align: center;
+  padding: var(--space-6, 32px) var(--space-4, 16px);
+  color: var(--fg-3);
+  max-width: 46ch;
+}
+.agentchat-empty-title { margin: 0; font-size: 1.05em; color: var(--fg-2, var(--fg)); }
+.agentchat-empty-sub { margin: 0; font-size: .9em; }
+.agentchat-empty-suggestions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: .5em;
+  justify-content: center;
+  margin-top: .5em;
+}
+.agentchat-empty-suggestion {
+  cursor: pointer;
+  font: inherit;
+  font-size: .85em;
+  padding: .4em .8em;
+  border-radius: 999px;
+  border: 1px solid color-mix(in srgb, var(--fg) 16%, transparent);
+  background: color-mix(in srgb, var(--fg) 5%, transparent);
+  color: var(--fg-2, var(--fg));
+}
+.agentchat-empty-suggestion:hover { background: color-mix(in srgb, var(--accent, var(--fg)) 12%, transparent); }
+.agentchat-empty-suggestion:focus-visible { outline: 2px solid var(--accent, var(--fg)); outline-offset: 2px; }
+
+/* "working" tail: a long silent tool call shouldn't read as frozen. */
+.agentchat-working {
+  display: flex;
+  align-items: center;
+  gap: .5em;
+  padding: .3em .2em;
+  color: var(--fg-3);
+  font-size: .85em;
+}
+.agentchat-working-text { color: var(--fg-3); }
+/* Self-contained dots (chat-thinking-dots lives in a kit sheet not bundled
+   into this DS distribution, so the agentchat tail draws its own). */
+.agentchat-working .chat-thinking-dots { display: inline-flex; gap: 3px; }
+.agentchat-working .chat-thinking-dots span {
+  width: 5px; height: 5px; border-radius: 50%;
+  background: var(--fg); opacity: .4;
+  animation: agentchat-dot-bounce 1.2s infinite ease-in-out;
+}
+.agentchat-working .chat-thinking-dots span:nth-child(2) { animation-delay: .15s; }
+.agentchat-working .chat-thinking-dots span:nth-child(3) { animation-delay: .3s; }
+@keyframes agentchat-dot-bounce {
+  0%, 80%, 100% { transform: scale(.6); opacity: .3; }
+  40% { transform: scale(1); opacity: .9; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .agentchat-working .chat-thinking-dots span { animation: none; opacity: .7; }
+}
+
+/* Responsive: the control cluster + cwd bar must stay usable on phones/tablets.
+   The cwd path can't eat the row beside its label + buttons on a narrow screen. */
+.agentchat-controls { flex-wrap: wrap; }
+.agentchat-cwd-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: min(60ch, 60vw); }
+@media (max-width: 900px) {
+  .agentchat-controls .ds-select { min-width: 110px; max-width: 180px; }
+}
+@media (max-width: 640px) {
+  .agentchat-cwd-text { max-width: 42vw; }
+  .agentchat-controls { gap: .4em; }
+}

package/dist/247420.css

@@ -2363,11 +2363,13 @@
     .ds-247420 .chat-composer textarea { padding: 10px 12px; }
 }
 
-/* ── landscape orientation: reduce vertical space for composer ──────────── */
+/* --- landscape orientation: reduce vertical space for composer --- */
 @media (max-height: 500px) and (orientation: landscape) {
     .ds-247420 .chat-composer { padding: 6px 0; }
-    .ds-247420 .chat-composer textarea { min-height: 36px; max-height: 120px; }
-    .ds-247420 .chat-composer .send, .ds-247420 .chat-composer button { width: 36px; height: 36px; font-size: 14px; }
+    .ds-247420 .chat-composer textarea { min-height: 44px; max-height: 120px; }
+    /* Keep the send button at the 44x44 minimum tap target even in the
+       space-constrained landscape layout. */
+    .ds-247420 .chat-composer .send, .ds-247420 .chat-composer button { width: 44px; height: 44px; font-size: 14px; }
 }
 
 /* ============================================================
@@ -3028,9 +3030,11 @@
 /* Mobile nav toggle (hamburger) — hidden on desktop, shown ≤900px */
 .ds-247420 .app-side-toggle {
   display: none;
-  position: fixed; top: calc((var(--app-topbar-h) - 32px) / 2); left: 10px;
+  position: fixed; top: calc((var(--app-topbar-h) - 44px) / 2); left: 10px;
   z-index: 51;
-  width: 36px; height: 36px;
+  /* 44x44 minimum hit area (WCAG 2.5.5 / Apple HIG) - 36px is below the
+     reliable-tap threshold on touch. */
+  width: 44px; height: 44px;
   align-items: center; justify-content: center;
   font-size: 18px; line-height: 1;
   background: var(--bg-2); color: var(--fg);
@@ -4631,6 +4635,22 @@
 }
 .ds-247420 .agentchat-controls .select,
 .ds-247420 .agentchat-controls [role="combobox"] { min-width: 130px; max-width: 240px; }
+.ds-247420 .agentchat-controls .ds-select { min-width: 130px; max-width: 240px; }
+
+/* Narrow viewports: let the agent/model selects share the row two-up, then
+   stack full-width on the smallest screens, and drop the status to its own
+   line so nothing is squeezed below a usable tap size. */
+@media (max-width: 640px) {
+  .ds-247420 .agentchat-controls .select,
+  .ds-247420 .agentchat-controls .ds-select,
+  .ds-247420 .agentchat-controls [role="combobox"] { flex: 1 1 45%; max-width: none; }
+  .ds-247420 .agentchat-status { margin-left: 0; flex-basis: 100%; }
+}
+@media (max-width: 360px) {
+  .ds-247420 .agentchat-controls .select,
+  .ds-247420 .agentchat-controls .ds-select,
+  .ds-247420 .agentchat-controls [role="combobox"] { flex-basis: 100%; }
+}
 
 .ds-247420 .agentchat-status {
   display: inline-flex;
@@ -4672,7 +4692,9 @@
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  max-width: 60ch;
+  /* 60ch overflows narrow phones; clamp to the viewport so the path ellipsizes
+     instead of pushing the row wider than the screen. */
+  max-width: min(60ch, 60vw);
 }
 .ds-247420 .agentchat-cwd-btn {
   background: none;
@@ -4684,6 +4706,7 @@
   font: inherit;
 }
 .ds-247420 .agentchat-cwd-btn:hover { border-color: var(--accent); }
+.ds-247420 .agentchat-cwd-btn:focus-visible { outline: 2px solid var(--accent, var(--fg)); outline-offset: 2px; }
 .ds-247420 .agentchat-cwd-input {
   flex: 1;
   min-width: 12ch;
@@ -4712,6 +4735,80 @@
   gap: var(--space-2, 8px);
 }
 
+/* Empty state: a fresh thread is an invitation, not a void. */
+.ds-247420 .agentchat-empty {
+  margin: auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: .4em;
+  text-align: center;
+  padding: var(--space-6, 32px) var(--space-4, 16px);
+  color: var(--fg-3);
+  max-width: 46ch;
+}
+.ds-247420 .agentchat-empty-title { margin: 0; font-size: 1.05em; color: var(--fg-2, var(--fg)); }
+.ds-247420 .agentchat-empty-sub { margin: 0; font-size: .9em; }
+.ds-247420 .agentchat-empty-suggestions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: .5em;
+  justify-content: center;
+  margin-top: .5em;
+}
+.ds-247420 .agentchat-empty-suggestion {
+  cursor: pointer;
+  font: inherit;
+  font-size: .85em;
+  padding: .4em .8em;
+  border-radius: 999px;
+  border: 1px solid color-mix(in srgb, var(--fg) 16%, transparent);
+  background: color-mix(in srgb, var(--fg) 5%, transparent);
+  color: var(--fg-2, var(--fg));
+}
+.ds-247420 .agentchat-empty-suggestion:hover { background: color-mix(in srgb, var(--accent, var(--fg)) 12%, transparent); }
+.ds-247420 .agentchat-empty-suggestion:focus-visible { outline: 2px solid var(--accent, var(--fg)); outline-offset: 2px; }
+
+/* "working" tail: a long silent tool call shouldn't read as frozen. */
+.ds-247420 .agentchat-working {
+  display: flex;
+  align-items: center;
+  gap: .5em;
+  padding: .3em .2em;
+  color: var(--fg-3);
+  font-size: .85em;
+}
+.ds-247420 .agentchat-working-text { color: var(--fg-3); }
+/* Self-contained dots (chat-thinking-dots lives in a kit sheet not bundled
+   into this DS distribution, so the agentchat tail draws its own). */
+.ds-247420 .agentchat-working .chat-thinking-dots { display: inline-flex; gap: 3px; }
+.ds-247420 .agentchat-working .chat-thinking-dots span {
+  width: 5px; height: 5px; border-radius: 50%;
+  background: var(--fg); opacity: .4;
+  animation: agentchat-dot-bounce 1.2s infinite ease-in-out;
+}
+.ds-247420 .agentchat-working .chat-thinking-dots span:nth-child(2) { animation-delay: .15s; }
+.ds-247420 .agentchat-working .chat-thinking-dots span:nth-child(3) { animation-delay: .3s; }
+@keyframes agentchat-dot-bounce {
+  0%, 80%, 100% { transform: scale(.6); opacity: .3; }
+  40% { transform: scale(1); opacity: .9; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .ds-247420 .agentchat-working .chat-thinking-dots span { animation: none; opacity: .7; }
+}
+
+/* Responsive: the control cluster + cwd bar must stay usable on phones/tablets.
+   The cwd path can't eat the row beside its label + buttons on a narrow screen. */
+.ds-247420 .agentchat-controls { flex-wrap: wrap; }
+.ds-247420 .agentchat-cwd-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: min(60ch, 60vw); }
+@media (max-width: 900px) {
+  .ds-247420 .agentchat-controls .ds-select { min-width: 110px; max-width: 180px; }
+}
+@media (max-width: 640px) {
+  .ds-247420 .agentchat-cwd-text { max-width: 42vw; }
+  .ds-247420 .agentchat-controls { gap: .4em; }
+}
+
 /* editor-primitives.css */
 /* editor-primitives.css — chrome for in-engine editors, inspectors, IDEs,
    debug HUDs. All rules under .ds-247420 scope (build prefixes). Tokens