create-walle 0.9.21 → 0.9.22

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

@@ -3,7 +3,9 @@ html[data-theme="dark"] {
   color-scheme: dark;
   --bg: #101419;
   --bg-elev: #151b22;
+  --bg-elev-2: #111820;
   --bg-soft: #1d252d;
+  --panel: #151b22;
   --line: #33404d;
   --line-strong: #4b5a67;
   --fg: #edf2f7;
@@ -21,7 +23,9 @@ html[data-theme="light"] {
   color-scheme: light;
   --bg: #f6f7f9;
   --bg-elev: #ffffff;
+  --bg-elev-2: #f8fafc;
   --bg-soft: #eceef2;
+  --panel: #ffffff;
   --line: rgba(15,23,42,0.10);
   --line-strong: rgba(15,23,42,0.18);
   --fg: #0f172a;
@@ -130,6 +134,56 @@ body.detail-sheet-open .app-topbar {
   backdrop-filter: blur(12px);
 }
 
+.app-reload-banner {
+  position: fixed;
+  top: calc(env(safe-area-inset-top) + 72px);
+  left: 10px;
+  right: 10px;
+  z-index: 80;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 10px 14px;
+  border: 1px solid var(--line-strong);
+  border-radius: 12px;
+  background: color-mix(in srgb, var(--amber) 14%, var(--bg-elev));
+  color: var(--fg);
+  box-shadow: 0 10px 30px rgba(0,0,0,0.28);
+}
+
+.app-reload-banner[hidden] {
+  display: none;
+}
+
+.app-reload-banner div {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.app-reload-banner strong {
+  display: block;
+  font-size: 13px;
+  line-height: 1.2;
+}
+
+.app-reload-banner span {
+  display: block;
+  margin-top: 2px;
+  color: var(--fg-dim);
+  font-size: 12px;
+  line-height: 1.3;
+}
+
+.app-reload-banner button {
+  min-height: 36px;
+  padding: 0 12px;
+  border: 1px solid var(--line-strong);
+  border-radius: 999px;
+  background: var(--blue);
+  color: #fff;
+  font-weight: 800;
+}
+
 .app-kicker {
   color: var(--fg-muted);
   font-size: 11px;
@@ -307,6 +361,122 @@ h3 {
   border-color: rgba(113, 167, 255, 0.4);
 }
 
+.worktree-summary {
+  margin: 4px 0 8px;
+  padding: 10px 16px 8px;
+  border-top: 1px solid var(--line);
+  border-bottom: 1px solid var(--line);
+  background: color-mix(in srgb, var(--bg-elev) 70%, transparent);
+}
+
+.worktree-summary-head {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 6px;
+}
+
+.worktree-summary-head > span:first-child {
+  min-width: 0;
+}
+
+.worktree-summary-kicker {
+  display: block;
+  color: var(--fg-muted);
+  font-size: 10px;
+  font-weight: 900;
+  line-height: 1.1;
+  text-transform: uppercase;
+}
+
+.worktree-summary-head strong {
+  display: block;
+  margin-top: 2px;
+  color: var(--fg);
+  font-size: 14px;
+  line-height: 1.15;
+}
+
+.worktree-summary-stats,
+.worktree-summary-more {
+  color: var(--fg-dim);
+  font-size: 11px;
+  font-weight: 800;
+  line-height: 1.2;
+  white-space: nowrap;
+}
+
+.worktree-summary-list {
+  display: grid;
+}
+
+.worktree-summary-row {
+  appearance: none;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  min-height: 48px;
+  padding: 9px 0;
+  border: 0;
+  border-top: 1px solid rgba(120, 135, 180, 0.16);
+  background: transparent;
+  color: inherit;
+  text-align: left;
+  cursor: pointer;
+  touch-action: manipulation;
+}
+
+.worktree-summary-row:first-child {
+  border-top: 0;
+}
+
+.worktree-summary-row:active {
+  background: color-mix(in srgb, var(--blue) 8%, transparent);
+}
+
+.worktree-summary-copy {
+  display: grid;
+  gap: 3px;
+  min-width: 0;
+}
+
+.worktree-summary-title {
+  min-width: 0;
+  color: var(--fg);
+  font-size: 13px;
+  font-weight: 900;
+  line-height: 1.2;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.worktree-summary-row.main .worktree-summary-title {
+  color: #f6c177;
+}
+
+.worktree-summary-meta {
+  min-width: 0;
+  color: var(--fg-dim);
+  font-size: 11px;
+  line-height: 1.25;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.worktree-summary-row .session-diff-tags {
+  justify-content: flex-end;
+  margin-top: 0;
+}
+
+.worktree-summary-more {
+  padding-top: 5px;
+}
+
 .home-search {
   display: grid;
   gap: 6px;
@@ -659,6 +829,16 @@ h3 {
 }
 
 @media (max-width: 380px) {
+  .worktree-summary-row {
+    grid-template-columns: 1fr;
+    gap: 6px;
+    align-items: start;
+  }
+
+  .worktree-summary-row .session-diff-tags {
+    justify-content: flex-start;
+  }
+
   .session-diff-tags {
     gap: 5px;
   }
@@ -1153,6 +1333,7 @@ html[data-theme="light"] .nav-item.active {
   cursor: text;
   user-select: text;
   -webkit-user-select: text;
+  -webkit-touch-callout: default;
 }
 
 .detail-messages .prompt-turn-header .prompt-turn-meta,
@@ -2404,6 +2585,44 @@ html[data-theme="light"] .nav-item.active {
   color: var(--red);
 }
 
+.send-menu-model {
+  grid-column: 1 / -1;
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  align-items: center;
+  gap: 10px;
+  min-height: 54px;
+  color: var(--blue);
+  text-align: left;
+}
+
+.send-menu-model[hidden] {
+  display: none;
+}
+
+.send-menu-item-kicker,
+.send-menu-item-main {
+  display: block;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.send-menu-item-kicker {
+  color: var(--fg-dim);
+  font-size: 10px;
+  font-weight: 950;
+  letter-spacing: 0;
+  text-transform: uppercase;
+}
+
+.send-menu-item-main {
+  color: var(--blue);
+  font-size: 14px;
+  font-weight: 950;
+}
+
 .send-menu-item[data-send-menu-attach] {
   color: var(--blue);
 }
@@ -2650,6 +2869,11 @@ html[data-theme="light"] .nav-item.active {
   min-width: 0;
 }
 
+.more-row > div,
+.more-row > span {
+  min-width: 0;
+}
+
 .more-action-row {
   align-items: center;
   gap: 14px;
@@ -2947,6 +3171,240 @@ html[data-theme="light"] .nav-item.active {
   padding-bottom: 14px;
 }
 
+.mobile-health-card {
+  margin: 10px 12px 0;
+  border: 1px solid color-mix(in srgb, var(--blue) 26%, var(--line));
+  border-radius: 10px;
+  background: color-mix(in srgb, var(--bg-elev) 88%, var(--blue) 6%);
+  overflow: hidden;
+}
+
+.mobile-health-card.error {
+  border-color: color-mix(in srgb, var(--red) 44%, var(--line));
+  background: color-mix(in srgb, var(--bg-elev) 90%, var(--red) 7%);
+}
+
+.mobile-health-card.warning {
+  border-color: color-mix(in srgb, var(--amber) 42%, var(--line));
+  background: color-mix(in srgb, var(--bg-elev) 90%, var(--amber) 7%);
+}
+
+.mobile-health-header {
+  display: grid;
+  grid-template-columns: 10px minmax(0, 1fr);
+  gap: 10px;
+  padding: 12px;
+}
+
+.mobile-health-dot {
+  width: 8px;
+  height: 8px;
+  margin-top: 6px;
+  border-radius: 999px;
+  background: var(--green);
+  box-shadow: 0 0 0 4px color-mix(in srgb, var(--green) 14%, transparent);
+}
+
+.mobile-health-card.error .mobile-health-dot {
+  background: var(--red);
+  box-shadow: 0 0 0 4px color-mix(in srgb, var(--red) 14%, transparent);
+}
+
+.mobile-health-card.warning .mobile-health-dot {
+  background: var(--amber);
+  box-shadow: 0 0 0 4px color-mix(in srgb, var(--amber) 16%, transparent);
+}
+
+.mobile-health-kicker {
+  color: var(--fg-muted);
+  font-size: 11px;
+  font-weight: 900;
+  letter-spacing: 0;
+  text-transform: uppercase;
+}
+
+.mobile-health-copy h3 {
+  margin: 2px 0 0;
+  color: var(--fg);
+  font-size: 14px;
+  line-height: 1.25;
+}
+
+.mobile-health-copy p {
+  margin: 4px 0 0;
+  color: var(--fg-dim);
+  font-size: 12px;
+  line-height: 1.42;
+}
+
+.mobile-health-meta,
+.mobile-health-current-meta,
+.mobile-health-more {
+  margin-top: 6px;
+  color: var(--fg-muted);
+  font-size: 11px;
+  font-weight: 800;
+  line-height: 1.3;
+}
+
+.mobile-health-current {
+  margin: 0 12px 12px;
+  padding: 10px;
+  border: 1px solid color-mix(in srgb, var(--red) 32%, var(--line));
+  border-radius: 9px;
+  background: color-mix(in srgb, var(--bg) 62%, transparent);
+}
+
+.mobile-health-actions {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto auto;
+  gap: 8px;
+  margin-top: 10px;
+  align-items: center;
+}
+
+.mobile-health-btn,
+.mobile-health-icon-btn {
+  min-height: 40px;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background: var(--bg-soft);
+  color: var(--fg);
+  font-size: 12px;
+  font-weight: 900;
+  text-decoration: none;
+}
+
+.mobile-health-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 12px;
+}
+
+.mobile-health-btn.primary {
+  border-color: color-mix(in srgb, var(--blue) 42%, var(--line));
+  background: var(--blue);
+  color: #07111f;
+}
+
+.mobile-health-icon-btn {
+  width: 40px;
+  min-width: 40px;
+  padding: 0;
+  color: var(--fg-dim);
+  font-size: 20px;
+}
+
+.mobile-health-test {
+  margin: 0 12px 12px;
+  padding: 8px 10px;
+  border: 1px solid color-mix(in srgb, var(--green) 34%, var(--line));
+  border-radius: 8px;
+  color: var(--fg);
+  font-size: 12px;
+  font-weight: 800;
+}
+
+.mobile-health-test.error {
+  border-color: color-mix(in srgb, var(--red) 40%, var(--line));
+}
+
+.mobile-health-group {
+  border-top: 1px solid var(--line);
+}
+
+.mobile-health-group summary {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  min-height: 42px;
+  padding: 0 12px;
+  color: var(--fg);
+  font-size: 12px;
+  font-weight: 900;
+  list-style: none;
+}
+
+.mobile-health-group summary::-webkit-details-marker {
+  display: none;
+}
+
+.mobile-health-group summary span {
+  min-width: 0;
+}
+
+.mobile-health-group summary strong {
+  display: inline-grid;
+  min-width: 22px;
+  height: 22px;
+  place-items: center;
+  border: 1px solid var(--line);
+  border-radius: 999px;
+  color: var(--fg-dim);
+  font-size: 11px;
+}
+
+.mobile-health-group-body {
+  display: grid;
+  gap: 6px;
+  padding: 0 12px 12px;
+}
+
+.mobile-health-row {
+  display: grid;
+  grid-template-columns: 8px minmax(0, 1fr) auto;
+  gap: 8px;
+  align-items: start;
+  color: var(--fg-dim);
+  font-size: 12px;
+  line-height: 1.35;
+}
+
+.mobile-health-row-dot {
+  width: 5px;
+  height: 5px;
+  margin-top: 6px;
+  border-radius: 999px;
+  background: var(--fg-muted);
+}
+
+.mobile-health-row-copy {
+  overflow-wrap: anywhere;
+}
+
+.mobile-health-row-action {
+  min-height: 30px;
+  padding: 0 10px;
+  border: 1px solid color-mix(in srgb, var(--blue) 32%, var(--line));
+  border-radius: 7px;
+  background: color-mix(in srgb, var(--blue) 14%, var(--bg-soft));
+  color: var(--fg);
+  font-size: 11px;
+  font-weight: 900;
+  text-decoration: none;
+  white-space: nowrap;
+}
+
+a.mobile-health-row-action {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.mobile-health-footer {
+  padding: 10px 12px 12px;
+  border-top: 1px solid var(--line);
+}
+
+.mobile-health-link {
+  color: var(--blue);
+  font-size: 12px;
+  font-weight: 900;
+  text-decoration: none;
+}
+
 .walle-chat-composer {
   position: sticky;
   bottom: calc(var(--nav-h) + env(safe-area-inset-bottom));
@@ -3020,15 +3478,31 @@ html[data-theme="light"] .nav-item.active {
 
 .walle-empty-chat {
   display: grid;
-  gap: 6px;
-  padding: 42px 20px;
+  justify-items: center;
+  gap: 10px;
+  max-width: 380px;
+  margin: 0 auto;
+  padding: 56px 22px;
   text-align: center;
 }
 
+.walle-empty-icon {
+  display: inline-grid;
+  place-items: center;
+  width: 48px;
+  height: 48px;
+  border: 1px solid color-mix(in srgb, var(--blue) 36%, var(--line));
+  border-radius: 12px;
+  background: color-mix(in srgb, var(--blue) 12%, var(--bg-soft));
+  color: var(--blue);
+  font-size: 16px;
+}
+
 .walle-empty-chat h3 {
   margin: 0;
   color: var(--fg);
-  font-size: 18px;
+  font-size: 19px;
+  line-height: 1.2;
 }
 
 .walle-empty-chat p {
@@ -3038,6 +3512,17 @@ html[data-theme="light"] .nav-item.active {
   line-height: 1.4;
 }
 
+.walle-empty-actions {
+  width: min(100%, 240px);
+  padding-top: 8px;
+}
+
+.walle-empty-note {
+  padding: 0 8px;
+  color: var(--fg-muted);
+  font-size: 12px;
+}
+
 .modal-backdrop {
   position: fixed;
   inset: 0;
@@ -3300,43 +3785,336 @@ html[data-theme="light"] .nav-item.active {
   color: var(--red);
 }
 
-@media (min-width: 720px) {
+@media (min-width: 720px) and (max-width: 899.98px) {
   .mobile-app {
-    max-width: 520px;
+    max-width: min(680px, 100vw);
     margin: 0 auto;
     border-left: 1px solid var(--line);
     border-right: 1px solid var(--line);
   }
 
-  .bottom-nav,
   .app-topbar,
   .detail-topbar {
+    left: auto;
+    right: auto;
+    width: auto;
+    transform: none;
+  }
+
+  .bottom-nav {
     left: 50%;
     right: auto;
-    width: 520px;
+    width: min(680px, 100vw);
     transform: translateX(-50%);
   }
 
+  .status-summary {
+    gap: 10px;
+  }
+
+  .session-row,
+  .result-row,
+  .device-row,
+  .walle-row,
+  .more-row {
+    padding-inline: 20px;
+  }
+
+  .section-block,
+  .home-search,
+  .worktree-summary,
+  .view-heading {
+    padding-inline: 20px;
+  }
+
   .detail-view {
     left: 50%;
     right: auto;
-    width: 520px;
+    width: min(680px, 100vw);
     transform: translateX(-50%);
     border-left: 1px solid var(--line);
     border-right: 1px solid var(--line);
   }
 
+  .detail-messages {
+    padding-inline: 18px;
+  }
+
   .modal-backdrop {
     justify-content: center;
   }
 
-  .stepup-sheet {
-    width: 520px;
+  .stepup-sheet,
+  .model-picker-sheet {
+    width: min(640px, calc(100vw - 32px));
   }
 
   .model-picker-sheet {
-    width: 520px;
     border-left: 1px solid var(--line);
     border-right: 1px solid var(--line);
   }
 }
+
+@media (min-width: 900px) and (min-height: 650px) {
+  :root {
+    --tablet-list-w: clamp(372px, 37vw, 468px);
+    --tablet-single-w: min(680px, 100vw);
+    --tablet-topbar-h: 72px;
+  }
+
+  html {
+    height: 100%;
+    overflow: hidden;
+    background:
+      linear-gradient(90deg, var(--bg) 0, var(--bg) var(--tablet-list-w), color-mix(in srgb, var(--bg-elev) 72%, var(--bg)) var(--tablet-list-w), var(--bg) 100%);
+  }
+
+  html:not(.detail-open) {
+    background: var(--bg);
+  }
+
+  body.mobile-app {
+    width: 100%;
+    max-width: none;
+    min-height: 100vh;
+    min-height: 100dvh;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    overflow: hidden;
+  }
+
+  body.detail-sheet-open {
+    position: static !important;
+    top: auto !important;
+    left: auto !important;
+    right: auto !important;
+    width: 100% !important;
+  }
+
+  body.detail-sheet-open .app-main,
+  body.detail-sheet-open .bottom-nav,
+  body.detail-sheet-open .app-topbar {
+    pointer-events: auto;
+    user-select: auto;
+  }
+
+  .app-topbar {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: auto;
+    width: var(--tablet-list-w);
+    min-height: calc(var(--tablet-topbar-h) + env(safe-area-inset-top));
+    padding: calc(12px + env(safe-area-inset-top)) 18px 12px;
+    border-right: 1px solid var(--line);
+    border-bottom: 1px solid var(--line);
+    transform: none;
+  }
+
+  body.mobile-app:not(.detail-open) .app-topbar {
+    left: 50%;
+    width: var(--tablet-single-w);
+    border-left: 1px solid var(--line);
+    transform: translateX(-50%);
+  }
+
+  .app-main {
+    position: fixed;
+    top: calc(var(--tablet-topbar-h) + env(safe-area-inset-top));
+    left: 0;
+    bottom: calc(var(--nav-h) + env(safe-area-inset-bottom));
+    width: var(--tablet-list-w);
+    min-height: 0;
+    overflow: auto;
+    border-right: 1px solid var(--line);
+    -webkit-overflow-scrolling: touch;
+  }
+
+  body.mobile-app:not(.detail-open) .app-main {
+    left: 50%;
+    width: var(--tablet-single-w);
+    border-left: 1px solid var(--line);
+    transform: translateX(-50%);
+  }
+
+  .mobile-view {
+    padding: 16px 0 22px;
+  }
+
+  .status-summary {
+    gap: 10px;
+    padding: 14px 18px 8px;
+  }
+
+  .summary-tile {
+    min-height: 76px;
+  }
+
+  .home-search,
+  .view-heading,
+  .worktree-summary,
+  .section-block {
+    padding-inline: 18px;
+  }
+
+  .session-row,
+  .result-row,
+  .device-row {
+    grid-template-columns: 8px minmax(0, 1fr);
+    padding: 14px 18px;
+  }
+
+  .walle-row,
+  .more-row {
+    grid-template-columns: minmax(0, 1fr) auto;
+    padding: 14px 18px;
+  }
+
+  .push-row,
+  .restart-row {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .session-row.selected,
+  .result-row.selected {
+    background:
+      linear-gradient(90deg, color-mix(in srgb, var(--blue) 13%, transparent), transparent 54%),
+      var(--bg-elev);
+    box-shadow:
+      inset 0 0 0 1px color-mix(in srgb, var(--blue) 28%, transparent),
+      inset 4px 0 0 var(--blue);
+  }
+
+  .row-actions {
+    grid-column: 2;
+    flex-direction: row;
+    align-items: center;
+    margin-top: 10px;
+  }
+
+  .row-action {
+    min-height: 34px;
+    min-width: 92px;
+  }
+
+  .bottom-nav {
+    position: fixed;
+    left: 0;
+    right: auto;
+    bottom: 0;
+    width: var(--tablet-list-w);
+    border-right: 1px solid var(--line);
+    transform: none;
+  }
+
+  body.mobile-app:not(.detail-open) .bottom-nav {
+    left: 50%;
+    width: var(--tablet-single-w);
+    border-left: 1px solid var(--line);
+    transform: translateX(-50%);
+  }
+
+  .detail-view {
+    top: 0;
+    left: var(--tablet-list-w);
+    right: 0;
+    bottom: 0;
+    width: auto;
+    height: 100vh;
+    min-height: 100vh;
+    height: 100dvh;
+    min-height: 100dvh;
+    padding: 0;
+    border-left: 0;
+    border-right: 0;
+    transform: none;
+    background:
+      linear-gradient(180deg, color-mix(in srgb, var(--bg-elev) 56%, transparent), transparent 260px),
+      var(--bg);
+  }
+
+  .detail-view.active {
+    display: flex;
+  }
+
+  .detail-topbar {
+    position: sticky;
+    top: 0;
+    left: auto;
+    right: auto;
+    width: auto;
+    min-height: calc(var(--tablet-topbar-h) + env(safe-area-inset-top));
+    padding: calc(12px + env(safe-area-inset-top)) clamp(20px, 3vw, 34px) 12px;
+    transform: none;
+  }
+
+  .detail-alert,
+  .detail-controls {
+    padding-inline: clamp(20px, 3vw, 34px);
+  }
+
+  .detail-messages {
+    padding: 18px clamp(20px, 3vw, 36px) 36px;
+  }
+
+  .detail-messages .msg,
+  .detail-messages .review-msg,
+  .detail-messages .turn,
+  .detail-messages .prompt-turn,
+  .detail-messages .thought-group,
+  .message-row {
+    max-width: min(920px, 100%);
+  }
+
+  .composer {
+    grid-template-columns: minmax(0, 1fr) 60px;
+    gap: 10px;
+    padding: 12px clamp(20px, 3vw, 36px) calc(12px + env(safe-area-inset-bottom));
+  }
+
+  .composer.has-model-picker {
+    grid-template-columns: minmax(0, 1fr) 86px 60px;
+  }
+
+  .composer-editor {
+    min-height: 56px;
+    max-height: min(32vh, 220px);
+  }
+
+  .send-btn {
+    width: 60px;
+    min-width: 60px;
+    height: 56px;
+    min-height: 56px;
+  }
+
+  .model-picker-btn {
+    width: 86px;
+    min-width: 86px;
+    height: 56px;
+    min-height: 56px;
+  }
+
+  .send-menu {
+    left: calc(var(--tablet-list-w) + clamp(20px, 3vw, 36px));
+    right: clamp(20px, 3vw, 36px);
+    bottom: calc(var(--mobile-keyboard-offset, 0px) + env(safe-area-inset-bottom) + 104px);
+    max-width: 680px;
+  }
+
+  .mobile-skill-picker {
+    right: -70px;
+    max-height: min(44vh, 340px);
+  }
+
+  .modal-backdrop {
+    left: var(--tablet-list-w);
+    justify-content: center;
+  }
+
+  .stepup-sheet,
+  .model-picker-sheet {
+    width: min(640px, calc(100vw - var(--tablet-list-w) - 48px));
+  }
+}