create-walle 0.9.21 → 0.9.23

package/template/claude-task-manager/public/css/walle-session.css

@@ -468,6 +468,80 @@ body.walle-composer-resizing {
   outline: none;
 }
 
+.walle-history-loading-state {
+  margin: auto;
+  width: min(420px, calc(100% - 32px));
+  padding: 22px 22px 20px;
+  border: 1px solid rgba(122,162,247,0.26);
+  border-radius: 10px;
+  background:
+    linear-gradient(180deg, rgba(36,40,59,0.92), rgba(26,27,38,0.86)),
+    var(--bg-card, #24283b);
+  box-shadow: 0 18px 46px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.03);
+  text-align: left;
+  user-select: none;
+}
+.walle-history-loading-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  margin-bottom: 12px;
+  padding: 4px 9px;
+  border-radius: 999px;
+  border: 1px solid rgba(122,162,247,0.28);
+  background: rgba(122,162,247,0.10);
+  color: #9ab5ff;
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
+}
+.walle-history-loading-spinner {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  border: 2px solid rgba(154,181,255,0.25);
+  border-top-color: #9ab5ff;
+  animation: walle-history-spin 0.85s linear infinite;
+}
+.walle-history-loading-title {
+  color: var(--fg, #c0caf5);
+  font-size: 16px;
+  font-weight: 700;
+  line-height: 1.3;
+  margin-bottom: 6px;
+}
+.walle-history-loading-copy {
+  color: var(--fg-muted, #8f98c7);
+  font-size: 13px;
+  line-height: 1.45;
+}
+.walle-history-loading-skeleton {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-top: 16px;
+}
+.walle-history-loading-line {
+  display: block;
+  height: 8px;
+  border-radius: 999px;
+  background: linear-gradient(90deg, rgba(122,162,247,0.08), rgba(122,162,247,0.22), rgba(122,162,247,0.08));
+  background-size: 180% 100%;
+  animation: walle-history-sheen 1.4s ease-in-out infinite;
+}
+.walle-history-loading-line:nth-child(1) { width: 88%; }
+.walle-history-loading-line:nth-child(2) { width: 68%; animation-delay: 0.12s; }
+.walle-history-loading-line:nth-child(3) { width: 78%; animation-delay: 0.24s; }
+
+@keyframes walle-history-spin {
+  to { transform: rotate(360deg); }
+}
+@keyframes walle-history-sheen {
+  0% { background-position: 130% 0; }
+  100% { background-position: -60% 0; }
+}
+
 .walle-msg {
   display: flex;
   gap: 10px;
@@ -549,6 +623,69 @@ body.walle-composer-resizing {
   font-size: 11px;
   color: var(--fg-dim, #565f89);
 }
+.walle-msg-actions {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  margin-left: 4px;
+  opacity: 0;
+  transition: opacity 120ms ease;
+}
+.walle-msg:hover .walle-msg-actions,
+.walle-msg:focus-within .walle-msg-actions {
+  opacity: 1;
+}
+.walle-msg-action,
+.walle-branch-btn {
+  height: 22px;
+  border: 1px solid rgba(122,162,247,0.28);
+  border-radius: 4px;
+  background: rgba(26,27,38,0.72);
+  color: var(--accent, #7aa2f7);
+  font-size: 11px;
+  font-weight: 600;
+  line-height: 20px;
+  padding: 0 7px;
+  cursor: pointer;
+}
+.walle-msg-action:hover,
+.walle-msg-action:focus-visible,
+.walle-branch-btn:hover,
+.walle-branch-btn:focus-visible {
+  border-color: rgba(122,162,247,0.68);
+  background: rgba(65,72,104,0.78);
+  color: var(--fg, #c0caf5);
+  outline: none;
+}
+.walle-msg-action.danger {
+  color: var(--red, #f7768e);
+  border-color: rgba(247,118,142,0.28);
+}
+.walle-msg-action.danger:hover,
+.walle-msg-action.danger:focus-visible {
+  border-color: rgba(247,118,142,0.7);
+}
+.walle-branch-nav {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  margin-right: 2px;
+}
+.walle-branch-btn {
+  width: 22px;
+  padding: 0;
+}
+.walle-branch-btn:disabled {
+  opacity: 0.42;
+  cursor: default;
+}
+.walle-branch-label {
+  min-width: 32px;
+  text-align: center;
+  font-size: 11px;
+  font-weight: 700;
+  color: var(--fg-dim, #565f89);
+}
 .walle-msg-model {
   font-size: 10px;
   background: rgba(167,139,250,0.15);
@@ -661,6 +798,41 @@ body.walle-composer-resizing {
   margin: 6px 0;
   color: var(--fg-dim, #565f89);
 }
+.walle-edit-card {
+  border: 1px solid rgba(122,162,247,0.34);
+  background: rgba(26,27,38,0.56);
+  border-radius: 6px;
+  padding: 8px;
+}
+.walle-edit-input {
+  width: 100%;
+  min-height: 86px;
+  resize: vertical;
+  border: 1px solid var(--border, #3b4261);
+  border-radius: 5px;
+  background: rgba(15,17,26,0.78);
+  color: var(--fg, #c0caf5);
+  font: inherit;
+  line-height: 1.5;
+  padding: 8px 10px;
+  outline: none;
+}
+.walle-edit-input:focus {
+  border-color: var(--accent, #7aa2f7);
+  box-shadow: 0 0 0 2px rgba(122,162,247,0.18);
+}
+.walle-edit-hint {
+  margin-top: 6px;
+  font-size: 11px;
+  line-height: 1.35;
+  color: var(--fg-dim, #565f89);
+}
+.walle-edit-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  margin-top: 8px;
+}
 
 /* --- Tool cards (Sprint 2: per-tool left-rail color for fast scannability) --- */
 .walle-tool-card {
@@ -688,16 +860,24 @@ body.walle-composer-resizing {
 .walle-tool-card[data-tool-name="think"] { border-left-color: #e0af68; }
 .walle-tool-card[data-tool-name="search_memories"] { border-left-color: #bb9af7; }
 .walle-tool-header {
+  width: 100%;
   display: flex;
   align-items: center;
   gap: 6px;
   padding: 6px 10px;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  text-align: left;
   cursor: pointer;
   user-select: none;
   transition: background 0.15s;
 }
-.walle-tool-header:hover {
+.walle-tool-header:hover,
+.walle-tool-header:focus-visible {
   background: rgba(255,255,255,0.03);
+  outline: none;
 }
 .walle-tool-arrow {
   font-size: 10px;
@@ -752,24 +932,100 @@ body.walle-composer-resizing {
   background: rgba(247,118,142,0.15);
   color: #f7768e;
 }
-.walle-tool-output {
+.walle-tool-output,
+.walle-tool-detail {
   display: none;
   padding: 8px 10px;
   border-top: 1px solid var(--border, #3b4261);
-  background: #16161e;
+  background: linear-gradient(180deg, rgba(22,22,30,0.96), rgba(18,19,28,0.98));
   font-size: 12px;
   line-height: 1.45;
-  font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
-  white-space: pre-wrap;
-  word-break: break-word;
-  max-height: 220px;
-  overflow-y: auto;
   color: var(--fg, #c0caf5);
 }
 .walle-tool-output:empty { display: none !important; }
-.walle-tool-card[data-expanded="true"] .walle-tool-output {
+.walle-tool-card[data-expanded="true"] .walle-tool-output,
+.walle-tool-card[data-expanded="true"] > .walle-tool-detail,
+.walle-live-activity-item[open] > .walle-tool-detail {
   display: block;
 }
+.walle-tool-detail-meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-bottom: 7px;
+}
+.walle-tool-detail-chip {
+  display: inline-flex;
+  align-items: center;
+  min-height: 20px;
+  padding: 1px 7px;
+  border: 1px solid rgba(122,162,247,0.18);
+  border-radius: 999px;
+  background: rgba(122,162,247,0.08);
+  color: var(--fg-dim, #565f89);
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
+}
+.walle-tool-detail-chip.name {
+  color: #a78bfa;
+}
+.walle-tool-detail-chip.done {
+  border-color: rgba(158,206,106,0.28);
+  background: rgba(158,206,106,0.10);
+  color: #9ece6a;
+}
+.walle-tool-detail-chip.working {
+  border-color: rgba(224,175,104,0.32);
+  background: rgba(224,175,104,0.12);
+  color: #e0af68;
+}
+.walle-tool-detail-chip.error {
+  border-color: rgba(247,118,142,0.34);
+  background: rgba(247,118,142,0.12);
+  color: #f7768e;
+}
+.walle-tool-detail-summary {
+  margin: 2px 0 8px;
+  color: var(--fg, #c0caf5);
+  font-size: 12px;
+}
+.walle-tool-detail-section {
+  margin-top: 8px;
+}
+.walle-tool-detail-label {
+  margin-bottom: 4px;
+  color: var(--fg-dim, #565f89);
+  font-size: 10px;
+  font-weight: 800;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+.walle-tool-detail-pre {
+  margin: 0;
+  padding: 10px 12px;
+  border: 1px solid rgba(122,162,247,0.18);
+  border-radius: 7px;
+  background:
+    linear-gradient(180deg, rgba(15,17,26,0.95), rgba(12,14,22,0.96)),
+    radial-gradient(circle at 0 0, rgba(122,162,247,0.12), transparent 34%);
+  color: var(--fg, #c0caf5);
+  font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
+  font-size: 12px;
+  line-height: 1.55;
+  white-space: pre-wrap;
+  word-break: break-word;
+  overflow: auto;
+  max-height: 260px;
+}
+.walle-tool-detail-pre.output {
+  max-height: 320px;
+}
+.walle-tool-detail-empty {
+  color: var(--fg-dim, #565f89);
+  font-size: 12px;
+}
 
 .walle-live-activity {
   margin: 10px 0 8px;
@@ -804,12 +1060,38 @@ body.walle-composer-resizing {
   gap: 5px;
   margin-top: 7px;
 }
+.walle-live-activity-item {
+  display: block;
+}
+.walle-live-activity-item > summary {
+  list-style: none;
+}
+.walle-live-activity-item > summary::-webkit-details-marker {
+  display: none;
+}
 .walle-live-activity-row {
   display: grid;
-  grid-template-columns: 8px minmax(0, 1fr) auto;
+  grid-template-columns: 12px 8px minmax(0, 1fr) auto;
   align-items: center;
   gap: 8px;
   min-height: 22px;
+  border-radius: 5px;
+  cursor: pointer;
+  padding: 1px 2px;
+}
+.walle-live-activity-row:hover,
+.walle-live-activity-row:focus-visible,
+.walle-live-activity-item[open] > .walle-live-activity-row {
+  background: rgba(255,255,255,0.035);
+  outline: none;
+}
+.walle-live-activity-arrow {
+  color: var(--fg-dim, #565f89);
+  font-size: 9px;
+  transition: transform 0.16s ease;
+}
+.walle-live-activity-item[open] .walle-live-activity-arrow {
+  transform: rotate(90deg);
 }
 .walle-live-activity-dot {
   width: 7px;
@@ -862,6 +1144,37 @@ body.walle-composer-resizing {
 .walle-live-activity-row.error .walle-live-activity-meta {
   color: #f7768e;
 }
+.walle-live-activity-hidden {
+  display: grid;
+  gap: 5px;
+}
+.walle-live-activity-hidden[hidden] {
+  display: none !important;
+}
+.walle-live-activity-more {
+  width: max-content;
+  max-width: 100%;
+  border: 0;
+  border-radius: 999px;
+  padding: 2px 7px;
+  background: rgba(122,162,247,0.08);
+  color: var(--fg-dim, #565f89);
+  font: inherit;
+  font-size: 11px;
+  font-weight: 700;
+  cursor: pointer;
+}
+.walle-live-activity-more:hover,
+.walle-live-activity-more:focus-visible {
+  background: rgba(122,162,247,0.16);
+  color: var(--fg, #c0caf5);
+  outline: none;
+}
+.walle-live-activity-detail {
+  margin: 3px 0 5px 20px;
+  border: 1px solid rgba(122,162,247,0.16);
+  border-radius: 8px;
+}
 
 .walle-tool-group {
   background: var(--bg, #1a1b26);
@@ -974,6 +1287,388 @@ body.walle-composer-resizing {
 .walle-composer-attachments {
   display: flex;
 }
+.walle-queue-preview {
+  display: none;
+}
+.walle-workbar-slot {
+  flex: 0 0 auto;
+  padding: 0 16px;
+  background:
+    linear-gradient(180deg, rgba(15,19,36,0), rgba(15,19,36,0.26)),
+    var(--bg, #1a1b26);
+}
+.walle-workbar {
+  margin: 0 0 8px;
+  border: 1px solid rgba(122,162,247,0.24);
+  border-radius: 14px;
+  background:
+    radial-gradient(circle at 18px 10px, rgba(245,158,11,0.18), transparent 140px),
+    linear-gradient(135deg, rgba(22,28,49,0.96), rgba(19,22,38,0.94));
+  box-shadow: 0 12px 32px rgba(0,0,0,0.24), inset 0 1px 0 rgba(255,255,255,0.04);
+  color: var(--fg, #c0caf5);
+  display: grid;
+  grid-template-columns: minmax(0, auto) minmax(0, 1fr) auto;
+  gap: 10px;
+  align-items: center;
+  padding: 8px 10px;
+}
+.walle-workbar.expanded {
+  grid-template-columns: 1fr auto;
+}
+.walle-workbar-rail {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+  flex-wrap: wrap;
+}
+.walle-workbar-kicker {
+  color: #f6c177;
+  font-size: 10px;
+  font-weight: 900;
+  letter-spacing: 0.14em;
+}
+.walle-work-chip {
+  display: inline-flex;
+  align-items: center;
+  height: 22px;
+  padding: 0 8px;
+  border: 1px solid rgba(122,162,247,0.22);
+  border-radius: 999px;
+  background: rgba(122,162,247,0.09);
+  color: #b9c8ff;
+  font-size: 11px;
+  font-weight: 800;
+  white-space: nowrap;
+}
+.walle-work-chip.active { color: #bbf7d0; border-color: rgba(34,197,94,0.34); background: rgba(34,197,94,0.12); }
+.walle-work-chip.shell { color: #fde68a; border-color: rgba(245,158,11,0.34); background: rgba(245,158,11,0.11); }
+.walle-work-chip.agent { color: #a5f3fc; border-color: rgba(34,211,238,0.30); background: rgba(34,211,238,0.10); }
+.walle-work-chip.tool { color: #bfdbfe; border-color: rgba(96,165,250,0.30); background: rgba(96,165,250,0.10); }
+.walle-work-chip.skill { color: #ddd6fe; border-color: rgba(167,139,250,0.30); background: rgba(167,139,250,0.10); }
+.walle-work-chip.queued { color: #fed7aa; border-color: rgba(251,146,60,0.30); background: rgba(251,146,60,0.10); }
+.walle-work-chip.done,
+.walle-work-chip.isolated {
+  color: var(--fg-dim, #7f849c);
+  border-color: rgba(127,132,156,0.22);
+  background: rgba(127,132,156,0.08);
+}
+.walle-workbar-summary {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--fg, #c0caf5);
+  font-size: 12px;
+  font-weight: 650;
+}
+.walle-workbar-actions {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  justify-self: end;
+}
+.walle-workbar-actions button,
+.walle-work-row-actions button {
+  height: 28px;
+  padding: 0 10px;
+  border: 1px solid rgba(122,162,247,0.34);
+  border-radius: 9px;
+  background: rgba(122,162,247,0.12);
+  color: var(--fg, #c0caf5);
+  font-size: 11px;
+  font-weight: 800;
+  cursor: pointer;
+}
+.walle-workbar-actions button:hover,
+.walle-workbar-actions button:focus-visible,
+.walle-work-row-actions button:hover,
+.walle-work-row-actions button:focus-visible {
+  border-color: rgba(122,162,247,0.72);
+  outline: none;
+}
+.walle-workbar-actions button.danger,
+.walle-workbar-stop,
+.walle-work-row-actions button.danger {
+  border-color: rgba(247,118,142,0.38);
+  background: rgba(247,118,142,0.12);
+  color: #fecdd3;
+}
+.walle-work-drawer {
+  grid-column: 1 / -1;
+  margin-top: 2px;
+  padding-top: 10px;
+  border-top: 1px solid rgba(122,162,247,0.16);
+}
+.walle-work-drawer-head {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 10px;
+  margin-bottom: 8px;
+}
+.walle-work-drawer-head strong {
+  font-size: 12px;
+  letter-spacing: 0.02em;
+}
+.walle-work-drawer-head span {
+  color: var(--fg-dim, #565f89);
+  font-size: 11px;
+}
+.walle-work-group {
+  display: grid;
+  gap: 6px;
+  margin-top: 8px;
+}
+.walle-work-group-title {
+  color: #f6c177;
+  font-size: 10px;
+  font-weight: 900;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+}
+.walle-work-row {
+  display: grid;
+  grid-template-columns: 10px minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 9px;
+  padding: 9px;
+  border: 1px solid rgba(122,162,247,0.14);
+  border-radius: 11px;
+  background: rgba(12,15,29,0.42);
+}
+.walle-work-row.completed {
+  opacity: 0.72;
+}
+.walle-work-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 999px;
+  background: #a3e635;
+  box-shadow: 0 0 0 4px rgba(163,230,53,0.08);
+}
+.walle-work-row.failed .walle-work-dot,
+.walle-work-row.cancelled .walle-work-dot,
+.walle-work-row.stopped .walle-work-dot {
+  background: #f7768e;
+  box-shadow: 0 0 0 4px rgba(247,118,142,0.10);
+}
+.walle-work-row.completed .walle-work-dot {
+  background: #7aa2f7;
+  box-shadow: 0 0 0 4px rgba(122,162,247,0.08);
+}
+.walle-work-row-body {
+  display: grid;
+  gap: 2px;
+  min-width: 0;
+}
+.walle-work-row-title,
+.walle-work-row-preview {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.walle-work-row-title {
+  font-size: 12px;
+  font-weight: 800;
+}
+.walle-work-row-meta,
+.walle-work-row-preview,
+.walle-work-empty {
+  color: var(--fg-dim, #7f849c);
+  font-size: 11px;
+}
+.walle-work-focus {
+  outline: 2px solid rgba(245,158,11,0.75);
+  outline-offset: 3px;
+}
+.walle-queued-card {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 9px 10px;
+  border: 1px solid rgba(245,158,11,0.34);
+  border-left: 3px solid #f59e0b;
+  border-radius: 8px;
+  background: rgba(245,158,11,0.08);
+}
+.walle-queued-body {
+  min-width: 0;
+}
+.walle-queued-label {
+  color: #fbbf24;
+  font-size: 10px;
+  font-weight: 800;
+  letter-spacing: 0;
+  text-transform: uppercase;
+}
+.walle-queued-title {
+  margin-top: 2px;
+  color: var(--fg, #c0caf5);
+  font-size: 12px;
+  font-weight: 650;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.walle-queued-reason {
+  margin-top: 2px;
+  color: var(--fg-dim, #565f89);
+  font-size: 11px;
+  line-height: 1.35;
+}
+.walle-queued-actions {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex-shrink: 0;
+}
+.walle-queued-actions button {
+  height: 26px;
+  padding: 0 9px;
+  border: 1px solid rgba(122,162,247,0.34);
+  border-radius: 7px;
+  background: rgba(122,162,247,0.10);
+  color: var(--fg, #c0caf5);
+  font-size: 11px;
+  font-weight: 700;
+  cursor: pointer;
+}
+.walle-queued-actions button:hover,
+.walle-queued-actions button:focus-visible {
+  border-color: rgba(122,162,247,0.70);
+  outline: none;
+}
+.walle-queued-actions button.danger {
+  border-color: rgba(247,118,142,0.34);
+  background: rgba(247,118,142,0.10);
+  color: #fca5a5;
+}
+
+/* ── Inline queued-prompt bubbles (pinned to the bottom of the message list) ── */
+.walle-pending-queue {
+  order: 9999; /* flex column → always render last, even while Wall-E streams */
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  margin-top: 2px;
+}
+.walle-pending-queue::before {
+  content: "";
+  display: block;
+  border-top: 1px dashed var(--border, #3b4261);
+  opacity: 0.6;
+  margin: 2px 8px 0;
+}
+.walle-msg-pending {
+  opacity: 0.74;
+  border-left: 2px dashed rgba(122, 162, 247, 0.55);
+  background: rgba(122, 162, 247, 0.05);
+}
+.walle-msg-pending.sending {
+  opacity: 0.9;
+  border-left-style: solid;
+}
+.walle-msg-pending[draggable="true"] { cursor: grab; }
+.walle-msg-pending.dragging {
+  opacity: 0.4;
+  cursor: grabbing;
+  border-left-color: #7aa2f7;
+}
+.walle-pending-badge {
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.03em;
+  text-transform: uppercase;
+  color: #7aa2f7;
+  background: rgba(122, 162, 247, 0.12);
+  border-radius: 999px;
+  padding: 1px 7px;
+  margin-left: 6px;
+}
+.walle-pending-actions {
+  margin-left: auto;
+  display: inline-flex;
+  gap: 4px;
+}
+.walle-pending-action {
+  border: 1px solid var(--border, #3b4261);
+  background: transparent;
+  color: var(--text-dim, #a9b1d6);
+  border-radius: 5px;
+  width: 22px;
+  height: 20px;
+  font-size: 12px;
+  line-height: 1;
+  cursor: pointer;
+  padding: 0;
+}
+.walle-pending-action:hover,
+.walle-pending-action:focus-visible {
+  border-color: #7aa2f7;
+  color: #c0caf5;
+  outline: none;
+}
+.walle-pending-action.danger:hover,
+.walle-pending-action.danger:focus-visible {
+  border-color: rgba(247, 118, 142, 0.6);
+  color: #fca5a5;
+}
+.walle-pending-content {
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+/* ── Thin one-line queue status above the composer (replaces the yellow card) ── */
+.walle-queue-status {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 5px 10px;
+  border: 1px solid rgba(122, 162, 247, 0.28);
+  background: rgba(122, 162, 247, 0.07);
+  border-radius: 7px;
+  font-size: 12px;
+  color: var(--text-dim, #a9b1d6);
+}
+.walle-queue-status.waiting {
+  border-color: rgba(245, 158, 11, 0.4);
+  background: rgba(245, 158, 11, 0.08);
+  color: #fcd34d;
+}
+.walle-queue-status-label {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.walle-queue-status-actions {
+  display: inline-flex;
+  gap: 6px;
+  flex: 0 0 auto;
+}
+.walle-queue-status-btn {
+  border: 1px solid var(--border, #3b4261);
+  background: rgba(122, 162, 247, 0.10);
+  color: #c0caf5;
+  border-radius: 5px;
+  padding: 2px 9px;
+  font-size: 11px;
+  font-weight: 600;
+  cursor: pointer;
+}
+.walle-queue-status-btn:hover,
+.walle-queue-status-btn:focus-visible {
+  border-color: #7aa2f7;
+  outline: none;
+}
+.walle-queue-status-btn.danger {
+  border-color: rgba(247, 118, 142, 0.34);
+  background: rgba(247, 118, 142, 0.10);
+  color: #fca5a5;
+}
 .walle-composer-shell {
   width: 100%;
   min-width: 0;
@@ -1079,6 +1774,31 @@ body.walle-composer-resizing {
   height: 100%;
   object-fit: cover;
 }
+.walle-attachment-thumb--pending {
+  cursor: progress;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.walle-attachment-thumb--pending:hover,
+.walle-attachment-thumb--pending:focus-visible {
+  border-color: var(--border, #3b4261);
+  box-shadow: none;
+}
+.walle-attachment-spinner {
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  border: 2px solid rgba(122, 162, 247, 0.25);
+  border-top-color: #7aa2f7;
+  animation: walle-attachment-spin 0.7s linear infinite;
+}
+@keyframes walle-attachment-spin {
+  to { transform: rotate(360deg); }
+}
+@media (prefers-reduced-motion: reduce) {
+  .walle-attachment-spinner { animation-duration: 1.6s; }
+}
 .walle-attachment-token {
   position: absolute;
   left: 3px;
@@ -1244,6 +1964,23 @@ body.walle-composer-resizing {
     min-height: 48px;
     max-height: 32vh;
   }
+  .walle-workbar-slot {
+    padding: 0 10px;
+  }
+  .walle-workbar {
+    grid-template-columns: 1fr auto;
+    gap: 8px;
+  }
+  .walle-workbar-summary {
+    grid-column: 1 / -1;
+    white-space: normal;
+  }
+  .walle-work-row {
+    grid-template-columns: 10px minmax(0, 1fr);
+  }
+  .walle-work-row-actions {
+    grid-column: 2;
+  }
   .walle-send-btn {
     min-height: 40px;
     padding: 8px 13px;
@@ -1508,6 +2245,62 @@ html[data-theme="light"] .walle-composer-shell:focus-within {
     0 8px 22px rgba(34,49,73,0.08),
     inset 0 1px 0 rgba(255,255,255,0.72);
 }
+html[data-theme="light"] .walle-queued-card {
+  background: rgba(146,64,14,0.06);
+  border-color: rgba(146,64,14,0.22);
+  border-left-color: #b45309;
+}
+html[data-theme="light"] .walle-workbar-slot {
+  background: var(--bg);
+}
+html[data-theme="light"] .walle-workbar {
+  background:
+    radial-gradient(circle at 18px 10px, rgba(180,83,9,0.10), transparent 150px),
+    linear-gradient(135deg, rgba(255,255,255,0.96), rgba(246,248,252,0.94));
+  border-color: rgba(59,102,224,0.20);
+  box-shadow: 0 12px 28px rgba(34,49,73,0.10), inset 0 1px 0 rgba(255,255,255,0.9);
+}
+html[data-theme="light"] .walle-workbar-kicker,
+html[data-theme="light"] .walle-work-group-title {
+  color: #92400e;
+}
+html[data-theme="light"] .walle-work-chip {
+  background: rgba(59,102,224,0.06);
+  color: #334155;
+}
+html[data-theme="light"] .walle-work-chip.active { color: #166534; background: rgba(22,163,74,0.08); border-color: rgba(22,163,74,0.22); }
+html[data-theme="light"] .walle-work-chip.shell { color: #92400e; background: rgba(180,83,9,0.08); border-color: rgba(180,83,9,0.22); }
+html[data-theme="light"] .walle-work-chip.done,
+html[data-theme="light"] .walle-work-chip.isolated {
+  color: #64748b;
+  background: rgba(100,116,139,0.06);
+}
+html[data-theme="light"] .walle-work-row {
+  background: rgba(255,255,255,0.66);
+  border-color: rgba(59,102,224,0.14);
+}
+html[data-theme="light"] .walle-workbar-actions button,
+html[data-theme="light"] .walle-work-row-actions button {
+  background: rgba(59,102,224,0.08);
+  color: var(--accent);
+}
+html[data-theme="light"] .walle-workbar-actions button.danger,
+html[data-theme="light"] .walle-workbar-stop,
+html[data-theme="light"] .walle-work-row-actions button.danger {
+  background: rgba(185,28,28,0.08);
+  color: var(--red);
+}
+html[data-theme="light"] .walle-queued-label {
+  color: #92400e;
+}
+html[data-theme="light"] .walle-queued-actions button {
+  background: rgba(59,102,224,0.08);
+  color: var(--accent);
+}
+html[data-theme="light"] .walle-queued-actions button.danger {
+  background: rgba(185,28,28,0.08);
+  color: var(--red);
+}
 html[data-theme="light"] .walle-md-toolbar {
   border-bottom-color: var(--border);
 }
@@ -1525,11 +2318,52 @@ html[data-theme="light"] .walle-model-picker-menu,
 html[data-theme="light"] .walle-tool-card,
 html[data-theme="light"] .walle-tool-group,
 html[data-theme="light"] .walle-empty-chip,
+html[data-theme="light"] .walle-history-loading-state,
 html[data-theme="light"] .walle-input,
+html[data-theme="light"] .walle-edit-card,
 html[data-theme="light"] .walle-session-header .model-select,
 html[data-theme="light"] .walle-model-picker-btn {
   background: var(--bg-card);
 }
+html[data-theme="light"] .walle-history-loading-state {
+  border-color: rgba(37,99,235,0.18);
+  background:
+    linear-gradient(180deg, rgba(255,255,255,0.94), rgba(246,248,252,0.92)),
+    var(--bg-card);
+  box-shadow: 0 18px 38px rgba(34,49,73,0.10), inset 0 1px 0 rgba(255,255,255,0.9);
+}
+html[data-theme="light"] .walle-history-loading-badge {
+  border-color: rgba(37,99,235,0.22);
+  background: rgba(37,99,235,0.07);
+  color: #2454c6;
+}
+html[data-theme="light"] .walle-history-loading-spinner {
+  border-color: rgba(37,99,235,0.18);
+  border-top-color: #2563eb;
+}
+html[data-theme="light"] .walle-history-loading-copy {
+  color: var(--fg-muted);
+}
+html[data-theme="light"] .walle-history-loading-line {
+  background: linear-gradient(90deg, rgba(37,99,235,0.06), rgba(37,99,235,0.18), rgba(37,99,235,0.06));
+  background-size: 180% 100%;
+}
+html[data-theme="light"] .walle-edit-input {
+  background: var(--bg-input);
+  color: var(--fg);
+}
+html[data-theme="light"] .walle-msg-action,
+html[data-theme="light"] .walle-branch-btn {
+  background: rgba(255,255,255,0.88);
+  color: var(--accent);
+}
+html[data-theme="light"] .walle-msg-action:hover,
+html[data-theme="light"] .walle-msg-action:focus-visible,
+html[data-theme="light"] .walle-branch-btn:hover,
+html[data-theme="light"] .walle-branch-btn:focus-visible {
+  background: var(--bg-hover);
+  color: var(--fg);
+}
 html[data-theme="light"] .walle-msg[data-walle-role="assistant"] {
   background: rgba(146,64,14,0.045);
   border-left-color: rgba(146,64,14,0.28);
@@ -1539,11 +2373,32 @@ html[data-theme="light"] .walle-msg-body code {
 }
 html[data-theme="light"] .walle-msg-body pre,
 html[data-theme="light"] .walle-tool-output,
+html[data-theme="light"] .walle-tool-detail,
 html[data-theme="light"] .walle-tool-group-body,
 html[data-theme="light"] .walle-perm-detail code {
   background: #f1f3f6;
   border: 1px solid rgba(15,23,42,0.06);
 }
+html[data-theme="light"] .walle-tool-detail-pre {
+  background:
+    linear-gradient(180deg, rgba(255,255,255,0.96), rgba(248,250,252,0.98)),
+    radial-gradient(circle at 0 0, rgba(37,99,235,0.08), transparent 34%);
+  border-color: rgba(15,23,42,0.10);
+  color: #1e293b;
+}
+html[data-theme="light"] .walle-live-activity-row:hover,
+html[data-theme="light"] .walle-live-activity-row:focus-visible,
+html[data-theme="light"] .walle-live-activity-item[open] > .walle-live-activity-row {
+  background: rgba(15,23,42,0.045);
+}
+html[data-theme="light"] .walle-live-activity-more {
+  background: rgba(37,99,235,0.08);
+}
+html[data-theme="light"] .walle-live-activity-more:hover,
+html[data-theme="light"] .walle-live-activity-more:focus-visible {
+  background: rgba(37,99,235,0.14);
+  color: var(--fg);
+}
 html[data-theme="light"] .walle-msg-body th {
   background: var(--bg-lighter);
 }