coding-agent-harness 1.0.2 → 1.0.4

package/templates/dashboard/assets/app.css

@@ -176,6 +176,7 @@ button, input, select {
   letter-spacing: 0.08em;
   margin: 0 0 6px;
   text-transform: uppercase;
+  overflow-wrap: anywhere;
 }
 
 .hero-actions {
@@ -232,9 +233,15 @@ button, input, select {
   margin-top: 16px;
 }
 
-@media (min-width: 1024px) {
+.dashboard-main,
+.dashboard-sidebar,
+.status-card-group {
+  min-width: 0;
+}
+
+@media (min-width: 1280px) {
   .dashboard-grid {
-    grid-template-columns: minmax(0, 2fr) minmax(320px, 1fr);
+    grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
     align-items: start;
   }
 }
@@ -341,6 +348,20 @@ button, input, select {
   gap: 18px;
   align-items: center;
   margin-bottom: 16px;
+  min-width: 0;
+}
+
+.section-head > div {
+  min-width: 0;
+}
+
+.section-actions {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 10px;
+  min-width: 0;
 }
 
 .section-head h2,
@@ -351,6 +372,7 @@ button, input, select {
   font-size: 18px;
   font-weight: 800;
   letter-spacing: -0.015em;
+  overflow-wrap: anywhere;
 }
 
 .flow-panel,
@@ -568,6 +590,13 @@ button, input, select {
   gap: 16px;
 }
 
+.brief-scroll {
+  max-height: min(58vh, 620px);
+  overflow-y: auto;
+  padding: 2px 8px 2px 2px;
+  scrollbar-gutter: stable;
+}
+
 .brief-card {
   background: var(--paper);
   border: 1px solid var(--line);
@@ -597,6 +626,38 @@ button, input, select {
   border-color: var(--line);
 }
 
+.copy-task-name {
+  border: 1px solid var(--line);
+  background: var(--paper-2);
+  color: var(--muted);
+  border-radius: 6px;
+  padding: 5px 8px;
+  font-size: 11px;
+  font-weight: 800;
+  line-height: 1.2;
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+.copy-task-name:hover {
+  color: var(--accent);
+  border-color: color-mix(in srgb, var(--accent) 38%, var(--line));
+}
+
+.copy-task-name.compact,
+.copy-task-name.row-copy {
+  padding: 4px 7px;
+}
+
+.copy-task-name.row-copy {
+  margin-top: 8px;
+  width: fit-content;
+}
+
+.copy-task-name.detail-copy {
+  margin-top: 10px;
+}
+
 .card-head {
   display: flex;
   justify-content: space-between;
@@ -676,6 +737,8 @@ button, input, select {
 
 /* Premium Typography & Markdown Rendering */
 .markdown {
+  min-width: 0;
+  max-width: 100%;
   line-height: 1.6;
   overflow-wrap: anywhere;
   font-size: 14px;
@@ -710,6 +773,7 @@ button, input, select {
 }
 
 .markdown pre {
+  max-width: 100%;
   overflow: auto;
   background: var(--paper-2);
   border: 1px solid var(--line);
@@ -738,6 +802,7 @@ button, input, select {
 }
 
 .rendered-table-wrap {
+  max-width: 100%;
   overflow: auto;
   border: 1px solid var(--line);
   border-radius: 8px;
@@ -1153,6 +1218,12 @@ button, input, select {
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
 }
 
+.sort-toggle-group .layout-btn {
+  min-width: 0;
+  white-space: normal;
+  line-height: 1.25;
+}
+
 /* Beautiful taskstatsbar metrics strip */
 .task-stats-bar {
   display: flex;
@@ -1296,6 +1367,7 @@ button, input, select {
   background: var(--paper);
   transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
   position: relative;
+  cursor: pointer;
 }
 
 .task-row-card:hover {
@@ -1555,109 +1627,6 @@ button, input, select {
   border: 1px solid var(--line);
 }
 
-.review-queue-stats {
-  display: grid;
-  grid-template-columns: 1fr;
-  gap: 10px;
-}
-
-.review-queue-stats .metric {
-  min-height: 82px;
-  padding: 14px;
-}
-
-.review-queue-summary {
-  display: grid;
-  gap: 14px;
-}
-
-.review-queue-card {
-  gap: 14px;
-}
-
-.review-queue-card .side-panel {
-  box-shadow: none;
-  background: var(--bg);
-  padding: 14px;
-}
-
-.review-queue-actions {
-  display: flex;
-  gap: 10px;
-  flex-wrap: wrap;
-  align-items: center;
-}
-
-.review-queue-actions a,
-.review-queue-actions button {
-  border: 1px solid var(--line);
-  background: var(--paper-2);
-  color: var(--ink);
-  border-radius: 8px;
-  padding: 8px 12px;
-  font-size: 12px;
-  font-weight: 800;
-  text-decoration: none;
-  cursor: pointer;
-}
-
-.review-queue-actions a:hover,
-.review-queue-actions button:hover {
-  border-color: var(--accent);
-}
-
-.runtime-banner {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 10px;
-  align-items: center;
-  margin: 14px 0;
-  padding: 12px 16px;
-  border: 1px solid rgba(217, 119, 6, 0.22);
-  border-radius: 10px;
-  background: rgba(217, 119, 6, 0.08);
-  color: var(--ink);
-}
-
-.runtime-banner span {
-  color: var(--muted);
-}
-
-.runtime-banner code {
-  font-family: var(--font-mono);
-  font-size: 12px;
-}
-
-.review-workspace {
-  display: grid;
-  gap: 20px;
-}
-
-.review-workspace-grid {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr);
-  gap: 20px;
-}
-
-@media (min-width: 1180px) {
-  .review-workspace-grid {
-    grid-template-columns: minmax(0, 2fr) minmax(320px, 420px);
-    align-items: start;
-  }
-}
-
-.review-workspace-side {
-  position: sticky;
-  top: 16px;
-}
-
-.review-hero-tags {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: flex-end;
-  gap: 8px;
-}
-
 /* Beautiful Group Header styling */
 .task-group {
   background: var(--paper);
@@ -1748,85 +1717,605 @@ button, input, select {
   color: var(--accent);
 }
 
-/* Detail view panels */
-.detail-hero {
-  display: flex;
-  justify-content: space-between;
-  gap: 18px;
-  padding: 24px;
-  margin-bottom: 20px;
+.review-queue-stats {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 10px;
 }
 
-.detail-hero > div {
-  min-width: 0;
+.review-queue-stats .metric {
+  min-height: 82px;
+  padding: 14px;
 }
 
-.crumbs,
-.eyebrow {
-  overflow-wrap: anywhere;
+.review-queue-summary {
+  display: grid;
+  gap: 14px;
 }
 
-.detail-score {
-  font-size: 42px;
+.review-queue-tabs {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+  gap: 8px;
+  margin-top: 18px;
+}
+
+.review-queue-tab {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 10px;
+  min-height: 44px;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background: var(--paper-2);
+  color: var(--ink);
+  padding: 10px 12px;
   font-weight: 800;
-  color: var(--accent);
-  line-height: 1;
+  text-align: left;
+  cursor: pointer;
 }
 
-.phase-timeline {
+.review-queue-tab strong {
+  font-family: var(--font-mono);
+  color: var(--muted);
+}
+
+.review-queue-tab.active {
+  border-color: var(--accent);
+  background: color-mix(in srgb, var(--accent) 10%, var(--paper));
+}
+
+.review-queue-toolbar {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  grid-template-columns: minmax(240px, 1fr) minmax(180px, 240px) minmax(160px, 220px);
   gap: 12px;
-  margin-bottom: 24px;
+  align-items: end;
+  margin-top: 18px;
+  padding: 12px;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background: var(--paper-2);
 }
 
-.phase-timeline h2 {
-  grid-column: 1 / -1;
-  margin: 0 0 4px;
-  font-size: 16px;
+.review-queue-toolbar .input-group,
+.review-queue-toolbar .select-group {
+  display: grid;
+  gap: 6px;
+  min-width: 0;
 }
 
-.phase-step {
-  background: var(--paper);
+.review-queue-toolbar label {
+  font-size: 11px;
+  font-weight: 800;
+  color: var(--muted);
+  text-transform: uppercase;
+}
+
+.review-queue-toolbar input,
+.review-queue-toolbar select {
+  width: 100%;
+  min-width: 0;
   border: 1px solid var(--line);
-  border-radius: 12px;
-  padding: 16px;
-  box-shadow: var(--shadow);
-  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+  background: var(--paper);
+  color: var(--ink);
+  border-radius: 8px;
+  padding: 9px 12px;
+  font-size: 13px;
+  font-weight: 650;
+  line-height: 1.25;
 }
 
-.phase-step:hover {
-  transform: translateY(-2px);
-  box-shadow: var(--shadow-hover);
+.review-queue-toolbar input:focus,
+.review-queue-toolbar select:focus {
+  outline: 2px solid color-mix(in srgb, var(--accent) 28%, transparent);
+  outline-offset: 1px;
+  border-color: color-mix(in srgb, var(--accent) 54%, var(--line));
 }
 
-.phase-step strong {
-  font-size: 14px;
-  font-weight: 800;
+.review-queue-list-shell {
+  margin-top: 18px;
+  max-height: clamp(560px, 72vh, 920px);
+  overflow: auto;
+  overscroll-behavior: contain;
+  padding: 2px 8px 2px 2px;
+  border-radius: 10px;
+  scrollbar-gutter: stable;
 }
 
-.phase-step p {
-  color: var(--muted);
-  min-height: 42px;
-  font-size: 12px;
-  margin: 8px 0;
-  line-height: 1.4;
+.review-queue-list-shell:focus {
+  outline: 2px solid color-mix(in srgb, var(--accent) 45%, transparent);
+  outline-offset: 3px;
 }
 
-.detail-grid {
+.review-queue-list {
   display: grid;
-  grid-template-columns: minmax(0, 1.8fr) minmax(280px, 360px);
-  gap: 20px;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
+  gap: 14px;
   align-items: start;
 }
 
-.detail-main {
+.review-queue-list > .empty-state {
+  grid-column: 1 / -1;
+}
+
+.review-queue-card {
+  gap: 12px;
+  min-width: 0;
+  max-height: clamp(520px, 68vh, 680px);
+  overflow: auto;
+  scrollbar-gutter: stable;
+}
+
+.review-queue-card .card-header {
+  flex-wrap: wrap;
+  align-items: flex-start;
+  justify-content: flex-start;
+}
+
+.review-queue-card .card-id,
+.review-queue-card .card-title,
+.review-queue-card .subtle,
+.review-reason span {
+  overflow-wrap: anywhere;
+}
+
+.review-queue-card .subtle,
+.review-reason span {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+}
+
+.review-queue-card .side-panel {
+  box-shadow: none;
+  background: var(--bg);
+  padding: 14px;
+}
+
+.review-queue-actions {
+  display: flex;
+  gap: 10px;
+  flex-wrap: wrap;
+  align-items: center;
+}
+
+.review-queue-actions a,
+.review-queue-actions button {
+  border: 1px solid var(--line);
+  background: var(--paper-2);
+  color: var(--ink);
+  border-radius: 8px;
+  padding: 8px 12px;
+  font-size: 12px;
+  font-weight: 800;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.review-queue-actions a:hover,
+.review-queue-actions button:hover {
+  border-color: var(--accent);
+}
+
+.review-queue-actions button:disabled {
+  cursor: not-allowed;
+  opacity: 0.55;
+}
+
+.review-reasons {
+  display: grid;
+  gap: 8px;
+}
+
+.review-reason {
+  display: grid;
+  gap: 3px;
+  padding: 10px 12px;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background: var(--paper-2);
+}
+
+.review-reason strong {
+  font-size: 12px;
+  color: var(--ink);
+}
+
+.review-reason span {
+  color: var(--muted);
+  font-size: 12px;
+  line-height: 1.45;
+}
+
+.lesson-candidate-panel {
+  display: grid;
+  gap: 10px;
+  min-width: 0;
+  padding: 12px;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background: var(--paper);
+  overflow: hidden;
+}
+
+.lesson-candidate-panel.compact {
+  background: var(--paper-2);
+}
+
+.lesson-candidate-panel-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: start;
+  gap: 10px;
+  min-width: 0;
+}
+
+.lesson-candidate-panel-head h3 {
+  margin: 2px 0 0;
+  font-size: 14px;
+  line-height: 1.25;
+}
+
+.lesson-action-note {
+  margin: 0;
+  color: var(--muted);
+  font-size: 12px;
+  line-height: 1.45;
+}
+
+.lesson-candidate-actions {
+  display: grid;
+  gap: 8px;
+  max-height: clamp(190px, 32vh, 320px);
+  overflow: auto;
+  min-width: 0;
+  scrollbar-gutter: stable;
+}
+
+.lesson-candidate-action {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: 6px;
+  padding: 10px 12px;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background: var(--paper-2);
+}
+
+.lesson-candidate-panel.compact .lesson-candidate-action {
+  background: var(--paper);
+}
+
+.lesson-candidate-main {
+  display: grid;
+  gap: 4px;
+  min-width: 0;
+}
+
+.lesson-candidate-action strong,
+.lesson-candidate-action span,
+.lesson-candidate-action small {
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+.lesson-candidate-action small {
+  color: var(--muted);
+  font-size: 12px;
+}
+
+.lesson-candidate-command-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  align-items: center;
+  min-width: 0;
+}
+
+.lesson-candidate-action a,
+.lesson-candidate-action button {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  border: 1px solid var(--line);
+  background: var(--paper);
+  color: var(--ink);
+  border-radius: 8px;
+  padding: 7px 10px;
+  font-size: 12px;
+  font-weight: 800;
+  text-decoration: none;
+}
+
+.lesson-candidate-action button:disabled {
+  cursor: not-allowed;
+  opacity: 0.55;
+}
+
+.lesson-candidate-action .review-result {
+  display: block;
+  min-width: 0;
+}
+
+.lesson-candidate-action .review-result:empty {
+  display: none;
+}
+
+.lesson-candidate-more {
+  display: block;
+  border: 1px dashed var(--line);
+  border-radius: 8px;
+  padding: 8px 10px;
+  color: var(--muted);
+  font-size: 12px;
+  font-weight: 700;
+  background: var(--paper);
+  text-decoration: none;
+}
+
+.task-queue-reasons {
+  grid-column: 1 / -1;
+}
+
+.task-queue-reasons .review-reasons {
+  margin-top: 8px;
+  max-height: 220px;
+  overflow: auto;
+}
+
+.review-queue-pager {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 16px;
+}
+
+.review-queue-contract {
+  display: grid;
+  gap: 8px;
+  margin: 0;
+}
+
+.review-queue-contract div {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+  border-top: 1px solid var(--line);
+  padding-top: 8px;
+}
+
+.review-queue-contract dt,
+.review-queue-contract dd {
+  margin: 0;
+}
+
+.review-queue-contract dt {
+  color: var(--muted);
+}
+
+.review-queue-contract dd {
+  font-family: var(--font-mono);
+  color: var(--ink);
+}
+
+.runtime-banner {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  align-items: center;
+  margin: 14px 0;
+  padding: 12px 16px;
+  border: 1px solid rgba(217, 119, 6, 0.22);
+  border-radius: 10px;
+  background: rgba(217, 119, 6, 0.08);
+  color: var(--ink);
+}
+
+.runtime-banner span {
+  color: var(--muted);
+}
+
+.runtime-banner code {
+  font-family: var(--font-mono);
+  font-size: 12px;
+}
+
+.review-workspace {
+  display: grid;
+  gap: 20px;
+  min-width: 0;
+  max-width: 100%;
+}
+
+.review-workspace-grid {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: 20px;
+  min-width: 0;
+  max-width: 100%;
+}
+
+.review-workspace-main,
+.review-workspace-side,
+.review-doc-panel {
+  min-width: 0;
+  max-width: 100%;
+}
+
+.review-doc-scroll {
+  max-height: min(58vh, 560px);
+  overflow: auto;
+  overscroll-behavior: contain;
+  scrollbar-gutter: stable;
+  border-radius: 8px;
+}
+
+.workbench-action-result {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 7px;
+  margin-top: 2px;
+  padding: 9px 10px;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background: var(--paper);
+  font-size: 12px;
+  line-height: 1.45;
+}
+
+.workbench-action-result strong,
+.workbench-action-result span,
+.workbench-action-result ul {
+  flex: 1 0 100%;
+}
+
+.workbench-action-result.success {
+  border-color: color-mix(in srgb, var(--ok) 45%, var(--line));
+}
+
+.workbench-action-result.failed {
+  border-color: color-mix(in srgb, var(--danger) 42%, var(--line));
+}
+
+.workbench-action-result a,
+.workbench-action-result button {
+  margin: 0;
+}
+
+.workbench-action-result ul {
+  margin: 0;
+  padding-left: 18px;
+  color: var(--muted);
+}
+
+@media (min-width: 1280px) {
+  .review-workspace-grid {
+    grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
+    align-items: start;
+  }
+}
+
+.review-workspace-side {
+  position: sticky;
+  top: 16px;
+}
+
+.review-hero-tags {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: 8px;
+}
+
+@media (max-width: 900px) {
+  .review-queue-toolbar {
+    grid-template-columns: 1fr;
+  }
+
+  .review-queue-list {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (min-width: 901px) and (max-width: 1279px) {
+  .review-queue-list {
+    grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
+  }
+}
+
+/* Detail view panels */
+.detail-hero {
+  display: flex;
+  justify-content: space-between;
+  gap: 18px;
+  padding: 24px;
+  margin-bottom: 20px;
+}
+
+.detail-hero > div {
+  min-width: 0;
+}
+
+.crumbs,
+.eyebrow {
+  overflow-wrap: anywhere;
+}
+
+.detail-score {
+  font-size: 42px;
+  font-weight: 800;
+  color: var(--accent);
+  line-height: 1;
+}
+
+.phase-timeline {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 12px;
+  margin-bottom: 24px;
+}
+
+.phase-timeline h2 {
+  grid-column: 1 / -1;
+  margin: 0 0 4px;
+  font-size: 16px;
+}
+
+.phase-step {
+  background: var(--paper);
+  border: 1px solid var(--line);
+  border-radius: 12px;
+  padding: 16px;
+  box-shadow: var(--shadow);
+  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+  cursor: pointer;
+}
+
+.card-header-actions {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 8px;
+  min-width: 0;
+}
+
+.phase-step:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-hover);
+}
+
+.phase-step strong {
+  font-size: 14px;
+  font-weight: 800;
+}
+
+.phase-step p {
+  color: var(--muted);
+  min-height: 42px;
+  font-size: 12px;
+  margin: 8px 0;
+  line-height: 1.4;
+}
+
+.detail-grid {
+  display: grid;
+  grid-template-columns: minmax(0, 1.8fr) minmax(280px, 360px);
+  gap: 20px;
+  align-items: start;
+}
+
+.detail-main {
   display: grid;
   gap: 20px;
 }
 
 .doc-section {
   padding: 24px;
+  min-width: 0;
+  max-width: 100%;
+  overflow: hidden;
 }
 
 .doc-library {
@@ -1914,13 +2403,15 @@ button, input, select {
 
 .side-panel {
   padding: 20px;
+  min-width: 0;
+  max-width: 100%;
 }
 
 .side-panel a {
   display: inline-flex;
   margin: 6px 6px 0 0;
   padding: 6px 12px;
-  border-radius: 999px; /* Pill */
+  border-radius: 8px;
   background: var(--paper-2);
   border: 1px solid var(--line);
   font-size: 12px;
@@ -1932,7 +2423,6 @@ button, input, select {
   background: var(--accent);
   color: var(--paper);
   border-color: var(--accent);
-  transform: scale(1.03);
 }
 
 .finding {
@@ -2264,7 +2754,7 @@ details summary {
 .task-drawer {
   position: fixed;
   top: 0;
-  right: -67vw;
+  right: 0;
   width: 65vw;
   max-width: 100%;
   height: 100%;
@@ -2274,15 +2764,15 @@ details summary {
   z-index: 1001;
   display: flex;
   flex-direction: column;
-  transition: right 0.35s cubic-bezier(0.16, 1, 0.3, 1);
+  transform: translateX(105%);
+  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
 }
 .task-drawer.active {
-  right: 0;
+  transform: translateX(0);
 }
 @media (max-width: 768px) {
   .task-drawer {
     width: 100%;
-    right: -102%;
   }
 }
 
@@ -2322,6 +2812,35 @@ details summary {
   padding: 24px;
 }
 
+.drawer-task-summary {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 18px;
+  background: var(--paper-2);
+  border: 1px solid var(--line);
+  padding: 12px 14px;
+  border-radius: 8px;
+}
+
+.drawer-task-summary span {
+  display: block;
+  margin-bottom: 3px;
+  color: var(--muted);
+  font-size: 11px;
+  font-weight: 800;
+  text-transform: uppercase;
+}
+
+.drawer-task-summary strong {
+  display: block;
+  font-size: 22px;
+  font-weight: 850;
+  color: var(--accent);
+  line-height: 1;
+}
+
 /* Compact brief card teaser styles */
 .brief-teaser {
   font-size: 13px;
@@ -2336,6 +2855,8 @@ details summary {
 }
 .card-actions {
   display: flex;
+  flex-wrap: wrap;
+  align-items: center;
   gap: 10px;
   margin-top: auto;
 }
@@ -2579,6 +3100,7 @@ details summary {
   border: 1px solid var(--line);
   border-radius: 8px;
   padding: 10px;
+  min-width: 0;
 }
 .task-state-summary span:first-child {
   display: block;
@@ -2588,6 +3110,15 @@ details summary {
   margin-bottom: 6px;
   text-transform: uppercase;
 }
+.task-state-summary .tag {
+  display: flex;
+  width: 100%;
+  min-width: 0;
+  max-width: 100%;
+  white-space: normal;
+  text-align: center;
+  overflow-wrap: anywhere;
+}
 .review-actions {
   display: grid;
   gap: 10px;
@@ -2617,6 +3148,17 @@ details summary {
   padding: 9px 10px;
   font: inherit;
 }
+.review-confirm-copy {
+  display: flex;
+  justify-content: flex-start;
+}
+.review-actions .copy-task-name.review-copy-task-name {
+  width: fit-content;
+  background: var(--paper-2);
+  color: var(--ink);
+  border: 1px solid var(--line);
+  padding: 6px 10px;
+}
 .review-actions button {
   width: 100%;
   border: 0;