create-walle 0.9.20 → 0.9.21

package/template/claude-task-manager/public/m/app.css

@@ -791,10 +791,10 @@ html[data-theme="light"] .nav-item.active {
   inset: 0;
   z-index: 40;
   display: none;
-  height: 100vh;
-  min-height: 100vh;
-  height: 100dvh;
-  min-height: 100dvh;
+  height: calc(100vh - var(--mobile-keyboard-offset, 0px));
+  min-height: calc(100vh - var(--mobile-keyboard-offset, 0px));
+  height: calc(100dvh - var(--mobile-keyboard-offset, 0px));
+  min-height: calc(100dvh - var(--mobile-keyboard-offset, 0px));
   padding: env(safe-area-inset-top) 0 0;
   overflow: hidden;
   overscroll-behavior: contain;
@@ -995,6 +995,7 @@ html[data-theme="light"] .nav-item.active {
   flex: 1;
   min-height: 0;
   overflow: auto;
+  overflow-x: hidden;
   padding: 12px 12px 32px;
   -webkit-overflow-scrolling: touch;
   overscroll-behavior: contain;
@@ -1034,6 +1035,14 @@ html[data-theme="light"] .nav-item.active {
   background: color-mix(in srgb, var(--purple, #bb9af7) 5%, var(--bg-elev));
 }
 
+.detail-messages .prompt-turn.live-prompt-turn {
+  border-color: color-mix(in srgb, var(--green) 34%, var(--line));
+  border-left-color: var(--green);
+  background:
+    linear-gradient(135deg, color-mix(in srgb, var(--green) 7%, var(--bg-elev)) 0%, var(--bg-elev) 82%),
+    var(--bg-elev);
+}
+
 .detail-messages .prompt-turn-header {
   display: grid;
   grid-template-columns: auto minmax(0, 1fr);
@@ -1110,6 +1119,30 @@ html[data-theme="light"] .nav-item.active {
   box-shadow: 0 1px 0 rgba(113, 167, 255, 0.08) inset;
 }
 
+.detail-messages .live-prompt-turn .prompt-turn-prompt.review-msg {
+  border-color: color-mix(in srgb, var(--green) 38%, var(--line));
+  background: color-mix(in srgb, var(--green) 11%, var(--bg-soft));
+  box-shadow: 0 1px 0 color-mix(in srgb, var(--green) 12%, transparent) inset;
+}
+
+.detail-messages .prompt-turn-live-title {
+  display: grid;
+  gap: 4px;
+  min-width: 0;
+  padding: 9px 10px;
+  border: 1px solid color-mix(in srgb, var(--green) 34%, var(--line));
+  border-radius: 8px;
+  background: color-mix(in srgb, var(--green) 8%, var(--bg-soft));
+}
+
+.detail-messages .prompt-turn-live-title > span:first-child {
+  color: var(--green);
+  font-size: 11px;
+  font-weight: 850;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+
 .detail-messages .prompt-turn-prompt .msg-header {
   margin-bottom: 5px;
 }
@@ -1162,6 +1195,34 @@ html[data-theme="light"] .nav-item.active {
   white-space: nowrap;
 }
 
+.detail-messages .prompt-turn-action {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 24px;
+  padding: 3px 9px;
+  border: 1px solid color-mix(in srgb, var(--blue) 42%, var(--line));
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--blue) 14%, var(--bg-soft));
+  color: var(--blue);
+  font: inherit;
+  font-size: 10px;
+  font-weight: 800;
+  line-height: 1;
+  white-space: nowrap;
+}
+
+.detail-messages .live-prompt-turn .prompt-turn-action {
+  border-color: color-mix(in srgb, var(--green) 45%, var(--line));
+  background: color-mix(in srgb, var(--green) 15%, var(--bg-soft));
+  color: var(--green);
+}
+
+.detail-messages .prompt-turn-action:focus-visible {
+  outline: 2px solid currentColor;
+  outline-offset: 2px;
+}
+
 .detail-messages .prompt-turn-alert.warning {
   color: var(--amber);
   border-color: rgba(229, 181, 103, 0.5);
@@ -1221,6 +1282,7 @@ html[data-theme="light"] .nav-item.active {
 }
 
 .message-row.self {
+  max-width: calc(100% - 28px);
   margin-left: 28px;
   border-color: rgba(113, 167, 255, 0.45);
   background: rgba(113, 167, 255, 0.11);
@@ -1229,6 +1291,7 @@ html[data-theme="light"] .nav-item.active {
 .message-row.assistant,
 .message-row.system,
 .message-row.tool {
+  max-width: calc(100% - 16px);
   margin-right: 16px;
 }
 
@@ -1270,7 +1333,7 @@ html[data-theme="light"] .nav-item.active {
 
 .terminal-tail-panel {
   box-sizing: border-box;
-  max-width: 100%;
+  max-width: calc(100% - 18px);
   margin: 12px 18px 12px 0;
   border: 1px solid color-mix(in srgb, var(--green) 34%, var(--line));
   border-radius: 14px 14px 14px 4px;
@@ -1864,6 +1927,10 @@ html[data-theme="light"] .nav-item.active {
   box-shadow: 0 -12px 28px rgba(0, 0, 0, 0.18);
 }
 
+.composer.has-model-picker {
+  grid-template-columns: minmax(0, 1fr) 58px 52px;
+}
+
 .composer-field {
   position: relative;
   align-self: start;
@@ -2008,6 +2075,81 @@ html[data-theme="light"] .nav-item.active {
   display: none;
 }
 
+.prompt-history-strip {
+  display: grid;
+  gap: 10px;
+  padding: 10px;
+  border: 1px solid color-mix(in srgb, var(--blue) 42%, var(--line));
+  border-radius: 16px;
+  background:
+    linear-gradient(135deg, color-mix(in srgb, var(--blue) 16%, transparent), transparent 58%),
+    color-mix(in srgb, var(--bg-elev) 94%, var(--blue));
+  box-shadow:
+    inset 0 1px 0 color-mix(in srgb, var(--fg) 8%, transparent),
+    0 8px 22px rgba(0, 0, 0, 0.2);
+}
+
+.prompt-history-strip[hidden] {
+  display: none;
+}
+
+.prompt-history-copy {
+  display: grid;
+  gap: 3px;
+  min-width: 0;
+}
+
+.prompt-history-copy strong {
+  color: var(--fg);
+  font-size: 12px;
+  font-weight: 900;
+  letter-spacing: 0.03em;
+  text-transform: uppercase;
+}
+
+.prompt-history-copy span {
+  color: var(--fg-dim);
+  font-size: 12px;
+  font-weight: 700;
+  line-height: 1.25;
+}
+
+.prompt-history-actions {
+  display: grid;
+  grid-template-columns: 1fr 1fr 0.85fr 44px;
+  gap: 7px;
+  align-items: center;
+}
+
+.prompt-history-actions button {
+  min-width: 0;
+  min-height: 40px;
+  padding: 0 8px;
+  border: 1px solid color-mix(in srgb, var(--blue) 34%, var(--line));
+  border-radius: 12px;
+  background: color-mix(in srgb, var(--bg-soft) 86%, var(--blue));
+  color: var(--fg);
+  font-size: 12px;
+  font-weight: 900;
+}
+
+.prompt-history-actions button:disabled {
+  opacity: 0.46;
+}
+
+#prompt-history-edit {
+  background: var(--blue);
+  color: #08111f;
+}
+
+#prompt-history-close {
+  padding: 0;
+  background: transparent;
+  color: var(--fg-dim);
+  font-size: 22px;
+  line-height: 1;
+}
+
 .mobile-skill-picker {
   position: absolute;
   left: 0;
@@ -2120,33 +2262,142 @@ html[data-theme="light"] .nav-item.active {
   border: 1px solid var(--line-strong);
 }
 
+.model-picker-btn {
+  align-self: start;
+  display: grid;
+  place-items: center;
+  align-content: center;
+  gap: 1px;
+  width: 58px;
+  min-width: 58px;
+  height: 52px;
+  min-height: 52px;
+  padding: 0 5px;
+  border: 1px solid color-mix(in srgb, var(--blue) 36%, var(--line-strong));
+  border-radius: 14px;
+  background:
+    linear-gradient(180deg, color-mix(in srgb, var(--blue) 12%, transparent), transparent),
+    color-mix(in srgb, var(--bg-elev-2) 92%, transparent);
+  color: var(--fg);
+  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--fg) 9%, transparent);
+}
+
+.model-picker-btn[hidden] {
+  display: none;
+}
+
+.model-picker-btn:active,
+.model-picker-btn:focus-visible,
+.model-picker-btn[aria-expanded="true"] {
+  outline: none;
+  border-color: var(--blue);
+  background:
+    linear-gradient(180deg, color-mix(in srgb, var(--blue) 22%, transparent), transparent),
+    color-mix(in srgb, var(--bg-elev-2) 88%, var(--blue));
+}
+
+.model-picker-btn-kicker,
+.model-picker-btn-label {
+  display: block;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  line-height: 1.05;
+  text-align: center;
+}
+
+.model-picker-btn-kicker {
+  color: var(--fg-muted);
+  font-size: 9px;
+  font-weight: 900;
+  text-transform: uppercase;
+  letter-spacing: 0;
+}
+
+.model-picker-btn-label {
+  color: var(--blue);
+  font-size: 11px;
+  font-weight: 950;
+}
+
 .send-menu {
-  position: absolute;
-  right: 12px;
-  bottom: calc(100% + 8px);
+  position: fixed;
+  left: max(12px, env(safe-area-inset-left));
+  right: max(12px, env(safe-area-inset-right));
+  bottom: calc(var(--mobile-keyboard-offset, 0px) + env(safe-area-inset-bottom) + 96px);
   z-index: 52;
-  min-width: 164px;
-  padding: 6px;
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 8px;
+  min-width: 0;
+  padding: 12px;
   border: 1px solid var(--line-strong);
-  border-radius: 8px;
-  background: rgba(21, 27, 34, 0.98);
-  box-shadow: 0 -16px 36px rgba(0, 0, 0, 0.36);
+  border-radius: 22px;
+  background:
+    linear-gradient(160deg, color-mix(in srgb, var(--blue) 10%, transparent), transparent 44%),
+    color-mix(in srgb, var(--bg-elev) 96%, #000);
+  box-shadow:
+    0 -20px 50px rgba(0, 0, 0, 0.42),
+    inset 0 1px 0 color-mix(in srgb, var(--fg) 8%, transparent);
+  -webkit-backdrop-filter: blur(18px);
+  backdrop-filter: blur(18px);
 }
 
 .send-menu[hidden] {
   display: none;
 }
 
+.send-menu::before {
+  content: "";
+  position: absolute;
+  top: 7px;
+  left: 50%;
+  width: 42px;
+  height: 4px;
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--fg-muted) 55%, transparent);
+  transform: translateX(-50%);
+}
+
+.send-menu-header {
+  grid-column: 1 / -1;
+  display: grid;
+  gap: 3px;
+  padding: 8px 6px 2px;
+}
+
+.send-menu-header strong,
+.send-menu-header span {
+  display: block;
+}
+
+.send-menu-header strong {
+  color: var(--fg);
+  font-size: 13px;
+  font-weight: 900;
+  letter-spacing: 0.02em;
+}
+
+.send-menu-header span {
+  color: var(--fg-dim);
+  font-size: 12px;
+  font-weight: 650;
+  line-height: 1.25;
+}
+
 .send-menu-item {
   width: 100%;
-  min-height: 44px;
+  min-height: 50px;
   padding: 0 12px;
-  border-radius: 6px;
-  background: transparent;
+  border: 1px solid color-mix(in srgb, var(--fg-muted) 18%, var(--line));
+  border-radius: 14px;
+  background: color-mix(in srgb, var(--bg-soft) 86%, transparent);
   color: var(--fg);
-  font-size: 14px;
-  font-weight: 800;
-  text-align: left;
+  font-size: 13px;
+  font-weight: 900;
+  line-height: 1.15;
+  text-align: center;
 }
 
 .send-menu-item.warn {
@@ -2166,12 +2417,12 @@ html[data-theme="light"] .nav-item.active {
 }
 
 .send-menu-item + .send-menu-item {
-  margin-top: 3px;
+  margin-top: 0;
 }
 
 .send-menu-item:active,
 .send-menu-item:focus-visible {
-  background: rgba(255, 95, 86, 0.14);
+  background: color-mix(in srgb, var(--blue) 16%, var(--bg-soft));
   outline: none;
 }
 
@@ -2796,6 +3047,10 @@ html[data-theme="light"] .nav-item.active {
   background: rgba(0, 0, 0, 0.54);
 }
 
+#stepup-sheet {
+  z-index: 70;
+}
+
 .modal-backdrop[hidden] {
   display: none;
 }
@@ -2814,6 +3069,141 @@ html[data-theme="light"] .nav-item.active {
   line-height: 1.45;
 }
 
+.model-picker-sheet {
+  width: 100%;
+  max-height: min(78vh, 720px);
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr);
+  padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
+  border-top: 1px solid var(--line);
+  border-radius: 18px 18px 0 0;
+  background:
+    linear-gradient(180deg, color-mix(in srgb, var(--blue) 8%, transparent), transparent 30%),
+    var(--bg-elev);
+  box-shadow: 0 -24px 60px rgba(0, 0, 0, 0.38);
+}
+
+.model-picker-head {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 44px;
+  gap: 12px;
+  align-items: start;
+  padding-bottom: 12px;
+}
+
+.model-picker-head h2,
+.model-picker-head p {
+  margin: 0;
+}
+
+.model-picker-head h2 {
+  color: var(--fg);
+  font-size: 18px;
+  font-weight: 950;
+}
+
+.model-picker-head p {
+  margin-top: 4px;
+  color: var(--fg-dim);
+  font-size: 13px;
+  line-height: 1.35;
+}
+
+.model-picker-close {
+  width: 44px;
+  height: 44px;
+  padding: 0;
+  border-radius: 14px;
+  background: var(--bg-soft);
+  color: var(--fg);
+  font-size: 22px;
+}
+
+.model-picker-list {
+  display: grid;
+  gap: 8px;
+  min-height: 120px;
+  max-height: 100%;
+  overflow-y: auto;
+  padding: 2px 0;
+  -webkit-overflow-scrolling: touch;
+}
+
+.model-picker-empty {
+  padding: 18px 4px;
+  color: var(--fg-dim);
+  font-size: 13px;
+  line-height: 1.4;
+}
+
+.model-picker-option {
+  width: 100%;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 10px;
+  align-items: center;
+  min-height: 60px;
+  padding: 10px 12px;
+  border: 1px solid color-mix(in srgb, var(--fg-muted) 18%, var(--line));
+  border-radius: 14px;
+  background: color-mix(in srgb, var(--bg-soft) 88%, transparent);
+  color: var(--fg);
+  text-align: left;
+}
+
+.model-picker-option[aria-selected="true"] {
+  border-color: color-mix(in srgb, var(--blue) 70%, var(--line-strong));
+  background:
+    linear-gradient(90deg, color-mix(in srgb, var(--blue) 18%, transparent), transparent 70%),
+    color-mix(in srgb, var(--bg-soft) 92%, var(--blue));
+}
+
+.model-picker-option:active,
+.model-picker-option:focus-visible {
+  outline: none;
+  border-color: var(--blue);
+  background: color-mix(in srgb, var(--blue) 16%, var(--bg-soft));
+}
+
+.model-picker-option-main {
+  display: grid;
+  gap: 3px;
+  min-width: 0;
+}
+
+.model-picker-option-title,
+.model-picker-option-meta {
+  display: block;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.model-picker-option-title {
+  color: var(--fg);
+  font-size: 14px;
+  font-weight: 950;
+}
+
+.model-picker-option-meta {
+  color: var(--fg-dim);
+  font-size: 12px;
+  font-weight: 750;
+}
+
+.model-picker-option-check {
+  display: grid;
+  place-items: center;
+  min-width: 28px;
+  height: 28px;
+  border: 1px solid var(--line-strong);
+  border-radius: 999px;
+  color: var(--blue);
+  font-size: 14px;
+  font-weight: 950;
+}
+
 .sheet-actions {
   display: grid;
   grid-template-columns: 1fr 1fr;
@@ -2943,4 +3333,10 @@ html[data-theme="light"] .nav-item.active {
   .stepup-sheet {
     width: 520px;
   }
+
+  .model-picker-sheet {
+    width: 520px;
+    border-left: 1px solid var(--line);
+    border-right: 1px solid var(--line);
+  }
 }