coding-agent-harness 1.0.2 → 1.0.5

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;
   }
 }
@@ -287,6 +294,10 @@ button, input, select {
   animation: pulse-warn 4s infinite;
 }
 
+.status-primary.snapshot {
+  border-color: rgba(71, 85, 105, 0.3);
+}
+
 .status-primary.fail {
   border-color: rgba(225, 29, 72, 0.3);
   animation: pulse-fail 4s infinite;
@@ -341,6 +352,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 +376,7 @@ button, input, select {
   font-size: 18px;
   font-weight: 800;
   letter-spacing: -0.015em;
+  overflow-wrap: anywhere;
 }
 
 .flow-panel,
@@ -568,6 +594,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 +630,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 +741,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 +777,7 @@ button, input, select {
 }
 
 .markdown pre {
+  max-width: 100%;
   overflow: auto;
   background: var(--paper-2);
   border: 1px solid var(--line);
@@ -738,6 +806,7 @@ button, input, select {
 }
 
 .rendered-table-wrap {
+  max-width: 100%;
   overflow: auto;
   border: 1px solid var(--line);
   border-radius: 8px;
@@ -1153,6 +1222,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 +1371,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 +1631,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,419 +1721,1519 @@ 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 {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-  gap: 12px;
-  margin-bottom: 24px;
+.review-queue-tab strong {
+  font-family: var(--font-mono);
+  color: var(--muted);
 }
 
-.phase-timeline h2 {
-  grid-column: 1 / -1;
-  margin: 0 0 4px;
-  font-size: 16px;
+.review-queue-tab.active {
+  border-color: var(--accent);
+  background: color-mix(in srgb, var(--accent) 10%, var(--paper));
 }
 
-.phase-step {
-  background: var(--paper);
+.review-queue-toolbar {
+  display: grid;
+  grid-template-columns: minmax(240px, 1fr) minmax(180px, 240px) minmax(160px, 220px);
+  gap: 12px;
+  align-items: end;
+  margin-top: 18px;
+  padding: 12px;
   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);
+  border-radius: 8px;
+  background: var(--paper-2);
 }
 
-.phase-step:hover {
-  transform: translateY(-2px);
-  box-shadow: var(--shadow-hover);
+.review-queue-toolbar .input-group,
+.review-queue-toolbar .select-group {
+  display: grid;
+  gap: 6px;
+  min-width: 0;
 }
 
-.phase-step strong {
-  font-size: 14px;
+.review-queue-toolbar label {
+  font-size: 11px;
   font-weight: 800;
-}
-
-.phase-step p {
   color: var(--muted);
-  min-height: 42px;
-  font-size: 12px;
-  margin: 8px 0;
-  line-height: 1.4;
+  text-transform: uppercase;
 }
 
-.detail-grid {
-  display: grid;
-  grid-template-columns: minmax(0, 1.8fr) minmax(280px, 360px);
-  gap: 20px;
-  align-items: start;
+.review-queue-toolbar input,
+.review-queue-toolbar select {
+  width: 100%;
+  min-width: 0;
+  border: 1px solid var(--line);
+  background: var(--paper);
+  color: var(--ink);
+  border-radius: 8px;
+  padding: 9px 12px;
+  font-size: 13px;
+  font-weight: 650;
+  line-height: 1.25;
 }
 
-.detail-main {
-  display: grid;
-  gap: 20px;
+.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));
 }
 
-.doc-section {
-  padding: 24px;
+.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;
 }
 
-.doc-library {
-  padding: 22px;
+.review-queue-list-shell:focus {
+  outline: 2px solid color-mix(in srgb, var(--accent) 45%, transparent);
+  outline-offset: 3px;
 }
 
-.doc-accordion-list {
+.review-queue-list {
   display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
+  gap: 14px;
+  align-items: start;
+}
+
+.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;
 }
 
-.doc-accordion {
+.review-queue-actions a,
+.review-queue-actions button {
   border: 1px solid var(--line);
-  border-radius: 10px;
   background: var(--paper-2);
-  overflow: clip;
+  color: var(--ink);
+  border-radius: 8px;
+  padding: 8px 12px;
+  font-size: 12px;
+  font-weight: 800;
+  text-decoration: none;
+  cursor: pointer;
 }
 
-.doc-accordion[open] {
-  background: var(--paper);
-  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
+.review-queue-actions a:hover,
+.review-queue-actions button:hover {
+  border-color: var(--accent);
 }
 
-.doc-accordion summary {
-  cursor: pointer;
-  display: grid;
-  grid-template-columns: minmax(120px, max-content) minmax(0, 1fr);
-  gap: 12px;
-  align-items: center;
-  padding: 14px 16px;
-  list-style: none;
+.review-queue-actions button:disabled {
+  cursor: not-allowed;
+  opacity: 0.55;
 }
 
-.doc-accordion summary::-webkit-details-marker {
-  display: none;
+.review-reasons {
+  display: grid;
+  gap: 8px;
 }
 
-.doc-accordion summary::before {
-  content: "›";
-  width: 20px;
-  height: 20px;
-  display: inline-grid;
-  place-items: center;
-  grid-column: 1;
-  grid-row: 1;
-  margin-right: 8px;
-  color: var(--accent);
-  transform: rotate(0deg);
-  transition: transform 0.2s ease;
+.review-reason {
+  display: grid;
+  gap: 3px;
+  padding: 10px 12px;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background: var(--paper-2);
 }
 
-.doc-accordion[open] summary::before {
-  transform: rotate(90deg);
+.review-reason strong {
+  font-size: 12px;
+  color: var(--ink);
 }
 
-.doc-accordion summary span {
-  grid-column: 1;
-  grid-row: 1;
-  padding-left: 28px;
-  font-weight: 850;
-  color: var(--ink);
+.review-reason span {
+  color: var(--muted);
+  font-size: 12px;
+  line-height: 1.45;
 }
 
-.doc-accordion summary small {
+.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;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+}
+
+.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-family: var(--font-mono);
-  font-size: 11px;
+  font-size: 12px;
+  line-height: 1.45;
 }
 
-.doc-accordion .markdown {
-  border-top: 1px solid var(--line);
-  padding: 18px 22px 22px;
+.lesson-candidate-actions {
+  display: grid;
+  gap: 8px;
+  max-height: clamp(190px, 32vh, 320px);
+  overflow: auto;
+  min-width: 0;
+  scrollbar-gutter: stable;
 }
 
-.detail-side {
+.lesson-candidate-action {
   display: grid;
-  gap: 16px;
-  position: sticky;
-  top: 16px;
+  grid-template-columns: minmax(0, 1fr);
+  gap: 6px;
+  padding: 10px 12px;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background: var(--paper-2);
 }
 
-.side-panel {
-  padding: 20px;
+.lesson-candidate-panel.compact .lesson-candidate-action {
+  background: var(--paper);
 }
 
-.side-panel a {
+.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;
-  margin: 6px 6px 0 0;
-  padding: 6px 12px;
-  border-radius: 999px; /* Pill */
-  background: var(--paper-2);
+  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;
-  transition: all 0.2s ease;
+  background: var(--paper);
+  text-decoration: none;
 }
 
-.side-panel a:hover {
-  background: var(--accent);
-  color: var(--paper);
-  border-color: var(--accent);
-  transform: scale(1.03);
+.task-queue-reasons {
+  grid-column: 1 / -1;
 }
 
-.finding {
+.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: 4px;
-  padding: 10px 0;
-  border-bottom: 1px solid var(--line);
+  gap: 8px;
+  margin: 0;
 }
 
-.finding:last-child {
-  border-bottom: none;
+.review-queue-contract div {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+  border-top: 1px solid var(--line);
+  padding-top: 8px;
 }
 
-.finding.open {
-  color: var(--danger);
-  border-left: 2px solid var(--danger);
-  padding-left: 8px;
+.review-queue-contract dt,
+.review-queue-contract dd {
+  margin: 0;
 }
 
-.finding strong {
-  font-size: 12px;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
+.review-queue-contract dt {
+  color: var(--muted);
 }
 
-.finding span {
-  font-size: 13px;
-  font-weight: 500;
+.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-kind-group {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  grid-column: 1 / -1;
+  gap: 12px;
+}
+
+.phase-kind-group h3 {
+  grid-column: 1 / -1;
+  margin: 4px 0 0;
+  color: var(--muted);
+  font-size: 12px;
+  font-weight: 800;
+  text-transform: uppercase;
+  letter-spacing: 0;
+}
+
+.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;
+}
+
+.phase-step.init {
+  border-left: 4px solid #64748b;
+}
+
+.phase-step.execution {
+  border-left: 4px solid var(--accent);
+}
+
+.phase-step.gate {
+  border-left: 4px solid #9f7aea;
+}
+
+.phase-step.other {
+  border-left: 4px solid var(--warn);
+}
+
+.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-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.phase-step-head span {
+  color: var(--muted);
+  font-size: 12px;
+  white-space: nowrap;
+}
+
+.phase-step p {
+  color: var(--muted);
+  min-height: 42px;
+  font-size: 12px;
+  margin: 8px 0;
+  line-height: 1.4;
+}
+
+.phase-meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-top: 8px;
+}
+
+.phase-exit-command {
+  display: block;
+  margin-top: 10px;
+  overflow-wrap: anywhere;
+  color: var(--ink);
+  font-size: 11px;
+  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 {
+  padding: 22px;
+}
+
+.doc-accordion-list {
+  display: grid;
+  gap: 10px;
+}
+
+.doc-accordion {
+  border: 1px solid var(--line);
+  border-radius: 10px;
+  background: var(--paper-2);
+  overflow: clip;
+}
+
+.doc-accordion[open] {
+  background: var(--paper);
+  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
+}
+
+.doc-accordion summary {
+  cursor: pointer;
+  display: grid;
+  grid-template-columns: minmax(120px, max-content) minmax(0, 1fr);
+  gap: 12px;
+  align-items: center;
+  padding: 14px 16px;
+  list-style: none;
+}
+
+.doc-accordion summary::-webkit-details-marker {
+  display: none;
+}
+
+.doc-accordion summary::before {
+  content: "›";
+  width: 20px;
+  height: 20px;
+  display: inline-grid;
+  place-items: center;
+  grid-column: 1;
+  grid-row: 1;
+  margin-right: 8px;
+  color: var(--accent);
+  transform: rotate(0deg);
+  transition: transform 0.2s ease;
+}
+
+.doc-accordion[open] summary::before {
+  transform: rotate(90deg);
+}
+
+.doc-accordion summary span {
+  grid-column: 1;
+  grid-row: 1;
+  padding-left: 28px;
+  font-weight: 850;
+  color: var(--ink);
+}
+
+.doc-accordion summary small {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--muted);
+  font-family: var(--font-mono);
+  font-size: 11px;
+}
+
+.doc-accordion .markdown {
+  border-top: 1px solid var(--line);
+  padding: 18px 22px 22px;
+}
+
+.detail-side {
+  display: grid;
+  gap: 16px;
+  position: sticky;
+  top: 16px;
+}
+
+.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: 8px;
+  background: var(--paper-2);
+  border: 1px solid var(--line);
+  font-size: 12px;
+  font-weight: 700;
+  transition: all 0.2s ease;
+}
+
+.side-panel a:hover {
+  background: var(--accent);
+  color: var(--paper);
+  border-color: var(--accent);
+}
+
+.finding {
+  display: grid;
+  gap: 4px;
+  padding: 10px 0;
+  border-bottom: 1px solid var(--line);
+}
+
+.finding:last-child {
+  border-bottom: none;
+}
+
+.finding.open {
+  color: var(--danger);
+  border-left: 2px solid var(--danger);
+  padding-left: 8px;
+}
+
+.finding strong {
+  font-size: 12px;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.finding span {
+  font-size: 13px;
+  font-weight: 500;
+}
+
+/* Module Grid */
+.module-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
+  gap: 16px;
+}
+
+.module-card {
+  padding: 24px;
+}
+
+.module-more {
+  display: inline-flex;
+  margin-top: 14px;
+  padding: 8px 16px;
+  border-radius: 999px;
+  background: var(--paper-2);
+  border: 1px solid var(--line);
+  font-size: 12px;
+  font-weight: 700;
+  transition: all 0.2s ease;
+}
+
+.module-more:hover {
+  background: var(--accent);
+  color: var(--paper);
+  border-color: var(--accent);
+}
+
+/* Migration workbench */
+.migration-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+  gap: 12px;
+  margin-bottom: 16px;
+}
+
+.migration-grid > div,
+.migration-grid > button,
+.lesson {
+  background: var(--paper-2);
+  color: var(--ink);
+  border: 1px solid var(--line);
+  border-radius: 10px;
+  padding: 16px;
+  text-align: left;
+  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.migration-grid > button {
+  cursor: pointer;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.01);
+}
+
+.migration-grid > button.active,
+.migration-grid > button:hover {
+  border-color: var(--accent);
+  background: var(--paper);
+  transform: translateY(-2px);
+  box-shadow: var(--shadow);
+}
+
+.migration-grid p {
+  margin: 6px 0 0;
+  color: var(--muted);
+  font-size: 12px;
+}
+
+.warning-workbench {
+  border-top: 1px solid var(--line);
+  padding-top: 20px;
+}
+
+.warning-toolbar,
+.pager {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
+.warning-toolbar {
+  justify-content: space-between;
+  margin-bottom: 14px;
+  color: var(--muted);
+  font-size: 13px;
+  font-weight: 500;
+}
+
+.pager button {
+  border: 1px solid var(--line);
+  background: var(--paper);
+  color: var(--ink);
+  border-radius: 999px;
+  padding: 6px 14px;
+  font-size: 12px;
+  font-weight: 700;
+  cursor: pointer;
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.pager button:disabled {
+  opacity: 0.3;
+  cursor: not-allowed;
+}
+
+.pager button:hover:not(:disabled) {
+  background: var(--paper-2);
+  border-color: var(--muted);
+}
+
+.warning-list {
+  display: grid;
+  border: 1px solid var(--line);
+  border-radius: 12px;
+  overflow: hidden;
+  box-shadow: var(--shadow);
+}
+
+.warning-row {
+  display: grid;
+  grid-template-columns: minmax(220px, 1.2fr) auto 80px 120px 140px minmax(220px, 1.5fr);
+  gap: 12px;
+  align-items: center;
+  padding: 14px 18px;
+  background: var(--paper);
+  border-bottom: 1px solid var(--line);
+  transition: all 0.2s ease;
+}
+
+.warning-row:last-child {
+  border-bottom: 0;
+}
+
+.warning-row:hover {
+  background: var(--paper-2);
+}
+
+.warning-row p {
+  margin: 0;
+  color: var(--muted);
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 1.4;
+}
+
+.warning-row strong {
+  font-size: 13px;
+  font-weight: 800;
+}
+
+.lesson + .lesson {
+  margin-top: 10px;
+}
+
+.lesson:hover {
+  transform: translateY(-1px);
+  box-shadow: var(--shadow);
+}
+
+.health-panel {
+  display: grid;
+  grid-template-columns: 280px minmax(0, 1fr);
+  gap: 24px;
+}
+
+.health-lists {
+  display: grid;
+  gap: 10px;
+}
+
+details {
+  background: var(--paper-2);
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  padding: 12px 16px;
+  transition: all 0.2s ease;
+}
+
+details[open] {
+  background: var(--paper);
+  border-color: var(--accent);
+}
+
+details summary {
+  font-weight: 700;
+  cursor: pointer;
+  font-size: 13px;
+}
+
+.empty {
+  color: var(--muted);
+  border: 2px dashed var(--line);
+  border-radius: 8px;
+  padding: 24px;
+  text-align: center;
+  font-weight: 500;
+  font-size: 13px;
+}
+
+/* Preset Workbench */
+.presets-page {
+  min-width: 0;
+}
+
+.preset-command-center,
+.preset-collection-panel,
+.preset-detail-panel,
+.preset-layer-panel,
+.preset-context-actions,
+.preset-context-actions .side-panel {
+  min-width: 0;
+}
+
+.preset-count-pill {
+  border: 1px solid var(--line);
+  border-radius: 999px;
+  background: var(--paper-2);
+  color: var(--muted);
+  font-size: 12px;
+  font-weight: 800;
+  padding: 7px 11px;
+}
+
+.preset-priority-strip {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 10px;
+  margin: 18px 0;
+}
+
+.preset-priority-step {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background: var(--paper-2);
+  padding: 10px 12px;
+  min-width: 0;
+}
+
+.preset-priority-step span {
+  display: inline-grid;
+  place-items: center;
+  width: 22px;
+  height: 22px;
+  border-radius: 999px;
+  background: var(--accent);
+  color: white;
+  font-size: 12px;
+  font-weight: 900;
+  flex: 0 0 auto;
+}
+
+.preset-priority-step strong {
+  font-size: 13px;
+  overflow-wrap: anywhere;
+}
+
+.preset-toolbar {
+  display: grid;
+  grid-template-columns: minmax(220px, 1fr) auto;
+  gap: 14px;
+  align-items: center;
+}
+
+.preset-source-tabs {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  justify-content: flex-end;
+}
+
+.preset-source-tabs button {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  border: 1px solid var(--line);
+  background: var(--paper);
+  color: var(--ink);
+  border-radius: 8px;
+  padding: 9px 12px;
+  font-size: 12px;
+  font-weight: 800;
+}
+
+.preset-source-tabs button.active {
+  border-color: var(--accent);
+  background: var(--paper-2);
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 20%, transparent);
+}
+
+.preset-workspace {
+  display: grid;
+  grid-template-columns: minmax(300px, 0.82fr) minmax(420px, 1.25fr) minmax(300px, 0.86fr);
+  gap: 18px;
+  align-items: start;
+}
+
+.preset-panel-heading {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+  align-items: flex-start;
+  margin-bottom: 14px;
+}
+
+.preset-panel-heading h3 {
+  margin: 0;
+  font-size: 16px;
+  line-height: 1.2;
+}
+
+.preset-panel-heading p,
+.preset-helper,
+.preset-action-group p {
+  margin: 4px 0 0;
+  color: var(--muted);
+  font-size: 12px;
+  line-height: 1.45;
+}
+
+.preset-catalog-list {
+  display: grid;
+  gap: 12px;
+}
+
+.preset-card {
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background: var(--paper);
+  padding: 14px;
+  display: grid;
+  gap: 10px;
+  min-width: 0;
+}
+
+.preset-card.active {
+  border-color: var(--accent);
+  background: var(--paper-2);
+  box-shadow: inset 3px 0 0 var(--accent);
+}
+
+.preset-card.shadowed {
+  opacity: 0.78;
+}
+
+.preset-card-topline {
+  display: flex;
+  justify-content: space-between;
+  gap: 10px;
+  align-items: flex-start;
+  min-width: 0;
+}
+
+.preset-card-tools,
+.preset-detail-badges {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  justify-content: flex-end;
+  flex: 0 1 auto;
+}
+
+.preset-card-select,
+.preset-card-body,
+.preset-layer-row {
+  appearance: none;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  padding: 0;
+  text-align: left;
+  cursor: pointer;
+  min-width: 0;
+}
+
+.preset-card-select {
+  flex: 1 1 auto;
+}
+
+.card-id {
+  display: block;
+  font-size: 15px;
+  font-weight: 850;
+  line-height: 1.25;
+  overflow-wrap: anywhere;
+}
+
+.preset-card-body {
+  display: block;
+  width: 100%;
+}
+
+.preset-card-body span,
+.preset-detail-panel p {
+  display: block;
+  margin: 0;
+  color: var(--muted);
+  font-size: 13px;
+  line-height: 1.55;
+  overflow-wrap: anywhere;
+}
+
+.preset-card-meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  color: var(--muted);
+  font-size: 11px;
+  font-weight: 800;
+}
+
+.preset-source-badge.project {
+  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
+}
+
+.copy-inline {
+  appearance: none;
+  border: 1px solid var(--line);
+  background: var(--paper);
+  color: var(--ink);
+  border-radius: 7px;
+  padding: 5px 8px;
+  font-size: 11px;
+  font-weight: 800;
+  line-height: 1.1;
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+.copy-inline:hover,
+.preset-card-select:hover .card-id,
+.preset-card-body:hover span,
+.preset-layer-row:hover strong {
+  color: var(--accent);
+}
+
+.preset-detail-hero {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 18px;
+  align-items: start;
+  padding-bottom: 16px;
+  border-bottom: 1px solid var(--line);
+}
+
+.preset-detail-title-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  align-items: center;
+}
+
+.preset-detail-title-row h3 {
+  margin: 0;
+  font-size: 22px;
+  line-height: 1.15;
+  overflow-wrap: anywhere;
+}
+
+.preset-detail-list {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 0;
+  margin: 16px 0;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.preset-detail-list div {
+  display: grid;
+  gap: 4px;
+  padding: 11px 12px;
+  border-right: 1px solid var(--line);
+  border-bottom: 1px solid var(--line);
+  min-width: 0;
+}
+
+.preset-detail-list div:nth-child(2n) {
+  border-right: 0;
+}
+
+.preset-detail-list dt {
+  color: var(--muted);
+  font-size: 11px;
+  font-weight: 800;
+}
+
+.preset-detail-list dd {
+  margin: 0;
+  font-size: 14px;
+  font-weight: 850;
+  line-height: 1.3;
+  overflow-wrap: anywhere;
 }
 
-/* Module Grid */
-.module-grid {
+.preset-path-block {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
-  gap: 16px;
+  gap: 8px;
+  margin-top: 14px;
 }
 
-.module-card {
-  padding: 24px;
+.preset-path-block > span {
+  color: var(--muted);
+  font-size: 11px;
+  font-weight: 800;
 }
 
-.module-more {
-  display: inline-flex;
-  margin-top: 14px;
-  padding: 8px 16px;
-  border-radius: 999px;
-  background: var(--paper-2);
+.preset-manifest-path {
+  display: block;
+  max-width: 100%;
+  white-space: normal;
+  overflow-wrap: anywhere;
+  word-break: break-word;
   border: 1px solid var(--line);
-  font-size: 12px;
-  font-weight: 700;
-  transition: all 0.2s ease;
-}
-
-.module-more:hover {
-  background: var(--accent);
-  color: var(--paper);
-  border-color: var(--accent);
+  background: var(--paper-2);
+  border-radius: 8px;
+  padding: 8px;
+  color: var(--muted);
+  font-size: 11px;
+  line-height: 1.45;
 }
 
-/* Migration workbench */
-.migration-grid {
+.preset-command-list {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
-  gap: 12px;
-  margin-bottom: 16px;
+  gap: 8px;
+  margin-top: 14px;
 }
 
-.migration-grid > div,
-.migration-grid > button,
-.lesson {
-  background: var(--paper-2);
-  color: var(--ink);
+.preset-command-row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 8px;
+  align-items: center;
   border: 1px solid var(--line);
-  border-radius: 10px;
-  padding: 16px;
-  text-align: left;
-  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.migration-grid > button {
-  cursor: pointer;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.01);
+  background: var(--paper-2);
+  border-radius: 8px;
+  padding: 8px;
+  min-width: 0;
 }
 
-.migration-grid > button.active,
-.migration-grid > button:hover {
-  border-color: var(--accent);
-  background: var(--paper);
-  transform: translateY(-2px);
-  box-shadow: var(--shadow);
+.preset-command-row code {
+  white-space: normal;
+  overflow-wrap: anywhere;
 }
 
-.migration-grid p {
-  margin: 6px 0 0;
+.preset-command-warning,
+.preset-confirm-warning {
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background: var(--paper-2);
   color: var(--muted);
   font-size: 12px;
+  line-height: 1.45;
+  padding: 10px;
 }
 
-.warning-workbench {
-  border-top: 1px solid var(--line);
-  padding-top: 20px;
+.preset-confirm-warning {
+  color: #b91c1c;
 }
 
-.warning-toolbar,
-.pager {
-  display: flex;
-  align-items: center;
+.preset-layer-list {
+  display: grid;
+  gap: 8px;
+}
+
+.preset-layer-row {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
   gap: 10px;
-  flex-wrap: wrap;
+  align-items: center;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background: var(--paper);
+  padding: 10px;
 }
 
-.warning-toolbar {
-  justify-content: space-between;
-  margin-bottom: 14px;
-  color: var(--muted);
-  font-size: 13px;
-  font-weight: 500;
+.preset-layer-row.active {
+  border-color: var(--accent);
+  background: var(--paper-2);
 }
 
-.pager button {
-  border: 1px solid var(--line);
-  background: var(--paper);
-  color: var(--ink);
+.preset-layer-rank {
+  display: inline-grid;
+  place-items: center;
+  width: 24px;
+  height: 24px;
   border-radius: 999px;
-  padding: 6px 14px;
+  background: var(--paper-2);
+  color: var(--muted);
   font-size: 12px;
-  font-weight: 700;
-  cursor: pointer;
-  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  font-weight: 900;
 }
 
-.pager button:disabled {
-  opacity: 0.3;
-  cursor: not-allowed;
+.preset-layer-row strong,
+.preset-layer-row small {
+  display: block;
+  overflow-wrap: anywhere;
 }
 
-.pager button:hover:not(:disabled) {
-  background: var(--paper-2);
-  border-color: var(--muted);
+.preset-layer-row small {
+  color: var(--muted);
+  font-size: 11px;
+  margin-top: 2px;
 }
 
-.warning-list {
+.preset-roots {
   display: grid;
-  border: 1px solid var(--line);
-  border-radius: 12px;
-  overflow: hidden;
-  box-shadow: var(--shadow);
+  gap: 10px;
+  margin-top: 14px;
 }
 
-.warning-row {
+.preset-roots div {
   display: grid;
-  grid-template-columns: minmax(220px, 1.2fr) auto 80px 120px 140px minmax(220px, 1.5fr);
-  gap: 12px;
-  align-items: center;
-  padding: 14px 18px;
-  background: var(--paper);
-  border-bottom: 1px solid var(--line);
-  transition: all 0.2s ease;
+  gap: 6px;
+  min-width: 0;
 }
 
-.warning-row:last-child {
-  border-bottom: 0;
+.preset-roots strong {
+  font-size: 12px;
 }
 
-.warning-row:hover {
-  background: var(--paper-2);
+.preset-action-panel {
+  display: grid;
+  gap: 12px;
 }
 
-.warning-row p {
-  margin: 0;
-  color: var(--muted);
-  font-size: 12px;
-  font-weight: 500;
-  line-height: 1.4;
+.preset-action-group {
+  display: grid;
+  gap: 10px;
+  border-top: 1px solid var(--line);
+  padding-top: 14px;
+  min-width: 0;
 }
 
-.warning-row strong {
+.preset-action-group h4 {
+  margin: 0;
   font-size: 13px;
+  font-weight: 850;
+}
+
+.preset-action-group label {
+  display: grid;
+  gap: 6px;
+  font-size: 12px;
   font-weight: 800;
+  color: var(--muted);
 }
 
-.lesson + .lesson {
-  margin-top: 10px;
+.preset-action-group input,
+.preset-action-group select {
+  width: 100%;
+  min-width: 0;
 }
 
-.lesson:hover {
-  transform: translateY(-1px);
-  box-shadow: var(--shadow);
+.preset-action-group .check-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
 }
 
-.health-panel {
-  display: grid;
-  grid-template-columns: 280px minmax(0, 1fr);
-  gap: 24px;
+.preset-action-group .check-row input {
+  width: auto;
 }
 
-.health-lists {
+.preset-confirm-row {
   display: grid;
-  gap: 10px;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 8px;
+  align-items: end;
 }
 
-details {
-  background: var(--paper-2);
-  border: 1px solid var(--line);
-  border-radius: 8px;
-  padding: 12px 16px;
-  transition: all 0.2s ease;
+.preset-action-group.danger button:not(:disabled):last-child {
+  border-color: #b91c1c;
+  color: #b91c1c;
 }
 
-details[open] {
-  background: var(--paper);
-  border-color: var(--accent);
-}
+@media (max-width: 1400px) {
+  .preset-workspace {
+    grid-template-columns: minmax(280px, 0.9fr) minmax(0, 1.1fr);
+  }
 
-details summary {
-  font-weight: 700;
-  cursor: pointer;
-  font-size: 13px;
+  .preset-context-actions {
+    grid-column: 1 / -1;
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 14px;
+  }
 }
 
-.empty {
-  color: var(--muted);
-  border: 2px dashed var(--line);
-  border-radius: 8px;
-  padding: 24px;
-  text-align: center;
-  font-weight: 500;
-  font-size: 13px;
+@media (max-width: 760px) {
+  .preset-toolbar,
+  .preset-priority-strip,
+  .preset-workspace,
+  .preset-context-actions,
+  .preset-detail-hero,
+  .preset-detail-list,
+  .preset-command-row,
+  .preset-confirm-row {
+    grid-template-columns: 1fr;
+  }
+
+  .preset-source-tabs,
+  .preset-card-tools,
+  .preset-detail-badges {
+    justify-content: flex-start;
+  }
+
+  .preset-detail-list div,
+  .preset-detail-list div:nth-child(2n) {
+    border-right: 0;
+  }
 }
 
 /* Mobile Responsiveness Rules */
@@ -2264,7 +3337,7 @@ details summary {
 .task-drawer {
   position: fixed;
   top: 0;
-  right: -67vw;
+  right: 0;
   width: 65vw;
   max-width: 100%;
   height: 100%;
@@ -2274,15 +3347,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 +3395,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 +3438,8 @@ details summary {
 }
 .card-actions {
   display: flex;
+  flex-wrap: wrap;
+  align-items: center;
   gap: 10px;
   margin-top: auto;
 }
@@ -2579,6 +3683,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 +3693,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 +3731,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;