coding-agent-harness 1.0.1 → 1.0.4

package/templates/dashboard/assets/css-src/20-briefs-controls.css

@@ -0,0 +1,398 @@
+/* Active Task Briefs */
+.task-briefs {
+  display: grid;
+  gap: 16px;
+}
+
+.brief-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
+  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);
+  border-radius: 12px;
+  box-shadow: var(--shadow);
+  padding: 20px;
+  overflow: hidden;
+  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.brief-card:hover {
+  transform: translateY(-3px);
+  box-shadow: var(--shadow-hover);
+  border-color: var(--accent);
+}
+
+.brief-card.compact {
+  box-shadow: none;
+  background: transparent;
+  border-color: var(--line);
+  padding: 16px 0;
+}
+
+.brief-card.compact:hover {
+  transform: none;
+  box-shadow: none;
+  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;
+  gap: 14px;
+  margin-bottom: 14px;
+}
+
+.card-head a {
+  font-size: 15px;
+  font-weight: 800;
+  color: var(--ink);
+}
+
+.card-head a:hover {
+  color: var(--accent);
+}
+
+.card-head p {
+  margin: 4px 0 0;
+  font-family: var(--font-mono);
+  font-size: 11px;
+}
+
+/* Beautiful Shimmering Progress Bar */
+.progress {
+  height: 8px;
+  border-radius: 999px;
+  background: var(--paper-2);
+  overflow: hidden;
+  margin: 14px 0;
+}
+
+.progress i {
+  display: block;
+  height: 100%;
+  border-radius: 999px;
+  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-2) 50%, var(--accent) 100%);
+  background-size: 200% 100%;
+  animation: shimmer-flow 3s infinite linear;
+}
+
+/* Translucent Tags & Status Pills */
+.tag {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: fit-content;
+  border-radius: 999px; /* Pill */
+  padding: 4px 10px;
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.02em;
+  background: var(--paper-2);
+  color: var(--muted);
+  white-space: nowrap;
+  border: 1px solid transparent;
+  transition: all 0.2s ease;
+}
+
+.tag.pass {
+  color: var(--ok);
+  background: rgba(22, 163, 74, 0.08);
+  border-color: rgba(22, 163, 74, 0.2);
+}
+
+.tag.warn {
+  color: var(--warn);
+  background: rgba(217, 119, 6, 0.08);
+  border-color: rgba(217, 119, 6, 0.2);
+}
+
+.tag.fail {
+  color: var(--danger);
+  background: rgba(225, 29, 72, 0.08);
+  border-color: rgba(225, 29, 72, 0.2);
+}
+
+/* Premium Typography & Markdown Rendering */
+.markdown {
+  min-width: 0;
+  max-width: 100%;
+  line-height: 1.6;
+  overflow-wrap: anywhere;
+  font-size: 14px;
+}
+
+.markdown h1 {
+  font-size: 24px;
+  font-weight: 800;
+  letter-spacing: -0.02em;
+  margin-bottom: 16px;
+}
+
+.markdown h2 {
+  font-size: 18px;
+  font-weight: 800;
+  letter-spacing: -0.015em;
+  margin-top: 24px;
+  margin-bottom: 12px;
+  border-bottom: 1px solid var(--line);
+  padding-bottom: 6px;
+}
+
+.markdown h3 {
+  font-size: 15px;
+  font-weight: 700;
+  margin-top: 18px;
+  margin-bottom: 8px;
+}
+
+.markdown p, .markdown ul, .markdown ol {
+  margin-bottom: 16px;
+}
+
+.markdown pre {
+  max-width: 100%;
+  overflow: auto;
+  background: var(--paper-2);
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  padding: 14px;
+  font-family: var(--font-mono);
+  font-size: 13px;
+}
+
+.markdown code {
+  font-family: var(--font-mono);
+  background: var(--paper-2);
+  border: 1px solid var(--line);
+  border-radius: 4px;
+  padding: 2px 5px;
+  font-size: 12px;
+}
+
+.markdown blockquote {
+  border-left: 4px solid var(--accent);
+  padding: 8px 16px;
+  margin: 0 0 16px;
+  background: var(--paper-2);
+  border-radius: 0 8px 8px 0;
+  color: var(--muted);
+}
+
+.rendered-table-wrap {
+  max-width: 100%;
+  overflow: auto;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.01);
+  margin-bottom: 16px;
+}
+
+.rendered-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 13px;
+}
+
+.rendered-table th {
+  background: var(--paper-2);
+  font-weight: 700;
+  color: var(--ink);
+  border-bottom: 2px solid var(--line);
+  padding: 10px 12px;
+}
+
+.rendered-table td {
+  border-bottom: 1px solid var(--line);
+  padding: 10px 12px;
+  vertical-align: top;
+}
+
+.rendered-table tr:last-child td {
+  border-bottom: none;
+}
+
+.rendered-table tr:hover {
+  background: var(--paper-2);
+}
+
+.missing-brief {
+  border-left: 3px solid var(--warn);
+  padding: 12px 16px;
+  background: rgba(217, 119, 6, 0.04);
+  border-radius: 0 8px 8px 0;
+  color: var(--muted);
+}
+
+/* Linear-style Form Controls & Search bar */
+.index-toolbar {
+  display: grid;
+  grid-template-columns: minmax(220px, 1.8fr) 170px 170px auto;
+  gap: 12px;
+  align-items: center;
+  padding: 16px;
+  box-shadow: var(--shadow);
+}
+
+.index-toolbar input,
+.index-toolbar select,
+.warning-toolbar select {
+  border: 1px solid var(--line);
+  background: var(--paper);
+  color: var(--ink);
+  border-radius: 8px;
+  padding: 10px 14px;
+  font-size: 13px;
+  font-weight: 600;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.01);
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.index-toolbar input:focus,
+.index-toolbar select:focus,
+.warning-toolbar select:focus {
+  border-color: var(--accent);
+  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
+  outline: none;
+}
+
+.task-group {
+  overflow: hidden;
+}
+
+.task-group .section-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px 20px;
+  border-bottom: 1px solid var(--line);
+  border-left: 4px solid var(--accent);
+  margin: 0;
+  background: var(--paper-2);
+}
+
+.task-group .section-head h2 {
+  font-size: 15px;
+  font-weight: 800;
+}
+
+.task-group .section-head .group-actions {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.task-group .section-head .group-progress {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 12px;
+  font-weight: 700;
+  color: var(--muted);
+}
+
+.task-group .section-head .group-progress-track {
+  width: 80px;
+  height: 6px;
+  background: var(--paper);
+  border-radius: 3px;
+  overflow: hidden;
+  border: 1px solid var(--line);
+}
+
+.task-group .section-head .group-progress-fill {
+  height: 100%;
+  border-radius: 3px;
+  background: linear-gradient(90deg, var(--accent), var(--accent-2));
+  transition: width 0.4s ease;
+}
+
+.task-list {
+  display: grid;
+}
+
+/* Legacy task-row (kept for compatibility) */
+.task-row {
+  display: grid;
+  grid-template-columns: minmax(0, 1.8fr) 130px 100px 140px;
+  gap: 12px;
+  align-items: center;
+  padding: 14px 20px;
+  border-bottom: 1px solid var(--line);
+  text-decoration: none;
+  background: var(--paper);
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.task-row-head {
+  color: var(--muted);
+  font-size: 11px;
+  font-weight: 800;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  background: var(--paper-2);
+}
+
+.task-row:hover:not(.task-row-head) {
+  background: var(--paper-2);
+  transform: translateX(4px);
+}
+
+.task-row span:first-child {
+  min-width: 0;
+}
+
+.task-row strong {
+  font-size: 14px;
+  font-weight: 700;
+  color: var(--ink);
+}
+
+.task-row small {
+  display: block;
+  font-family: var(--font-mono);
+  font-size: 11px;
+  margin-top: 4px;
+}