@ai-setting/roy-plugin-task-show 0.6.11 → 0.8.4

package/public/style.css

@@ -221,6 +221,28 @@ table.toolcalls .result {
   word-break: break-all;
 }
 
+/* v0.8.0+ tool-row collapsed / expanded / highlight states. The row
+   starts in `.collapsed` (input/output <details> closed) and gets
+   toggled to `.expanded` on click. The `.highlight` class is added
+   for 2s by the Mermaid `__toolClick` callback so the user sees a
+   yellow flash pointing at the target row. */
+table.toolcalls tr.tool-row {
+  transition: background 0.3s ease-out;
+}
+table.toolcalls tr.tool-row.collapsed .tool-detail summary {
+  color: var(--muted);
+}
+table.toolcalls tr.tool-row.expanded .tool-detail summary {
+  color: var(--link);
+}
+table.toolcalls tr.tool-row.highlight {
+  background: rgba(255, 200, 0, 0.30) !important;
+  transition: background 0.3s ease-out;
+}
+table.toolcalls tr.tool-row.highlight:hover {
+  background: rgba(255, 200, 0, 0.36) !important;
+}
+
 .status {
   font-size: 11px;
   font-weight: 600;
@@ -330,4 +352,678 @@ details summary {
     padding: 14px 14px;
     margin: 14px 10px;
   }
-}
+}
+/* ------------------------------------------------------------------------- */
+/* Task lifecycle pipeline (v0.7.0+)                                         */
+/* ------------------------------------------------------------------------- */
+
+.panel-pipeline {
+  /* keeps the existing panel rhythm */
+}
+
+.panel-lifecycle {
+  /* The "Task lifecycle + tools" Mermaid section in the detail page. */
+}
+
+.lifecycle-hint {
+  margin-left: 8px;
+  font-size: 11.5px;
+  color: var(--muted);
+  font-weight: normal;
+}
+
+.op-timeline {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  position: relative;
+}
+
+.op-timeline::before {
+  content: "";
+  position: absolute;
+  left: 11px;
+  top: 6px;
+  bottom: 6px;
+  width: 2px;
+  background: var(--border);
+}
+
+.op-node {
+  position: relative;
+  padding: 6px 0 14px 36px;
+  list-style: none;
+}
+
+.op-bullet {
+  position: absolute;
+  left: 4px;
+  top: 12px;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background: var(--panel-2);
+  border: 2px solid var(--border);
+  box-shadow: 0 0 0 3px var(--bg);
+}
+
+.op-body {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.op-row1 {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
+.op-seq {
+  color: var(--muted);
+  font-variant-numeric: tabular-nums;
+  min-width: 2.5em;
+}
+
+.op-time {
+  margin-left: auto;
+  color: var(--muted);
+  font-size: 12px;
+  font-variant-numeric: tabular-nums;
+}
+
+.op-title {
+  font-weight: 600;
+}
+
+.op-badge {
+  display: inline-block;
+  font-size: 11px;
+  padding: 2px 8px;
+  border-radius: 10px;
+  border: 1px solid var(--border);
+  background: var(--panel-2);
+  color: var(--text);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.op-details {
+  background: var(--panel-2);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  padding: 8px 10px;
+}
+
+.op-details summary {
+  cursor: pointer;
+  color: var(--muted);
+  font-size: 12px;
+}
+
+.op-desc {
+  white-space: pre-wrap;
+  word-break: break-word;
+  font-size: 13px;
+  line-height: 1.5;
+  margin-top: 6px;
+}
+
+.op-proc {
+  margin-top: 6px;
+  font-size: 12px;
+  color: var(--muted);
+}
+
+.op-proc-label {
+  display: inline-block;
+  background: var(--panel);
+  border: 1px solid var(--border);
+  padding: 0 6px;
+  border-radius: 4px;
+  margin-right: 4px;
+}
+
+/* v0.8.0+ always-visible description / process blocks (no <details>
+   collapse unless the description is > 600 chars, in which case the
+   legacy details fallback kicks in). The two blocks share a panel
+   rhythm and use a left-border accent so the eye can separate them
+   at a glance. */
+.op-desc-block,
+.op-proc-block {
+  background: var(--panel-2);
+  border: 1px solid var(--border);
+  border-left: 3px solid var(--border);
+  border-radius: 6px;
+  padding: 6px 10px 8px;
+  margin-top: 6px;
+  font-size: 13px;
+  line-height: 1.5;
+}
+
+.op-desc-block {
+  border-left-color: var(--accent);
+}
+
+.op-proc-block {
+  border-left-color: var(--muted);
+}
+
+.op-block-label {
+  display: inline-block;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  color: var(--muted);
+  text-transform: uppercase;
+  margin-bottom: 4px;
+}
+
+.op-desc-block .op-desc {
+  margin: 0;
+}
+
+.op-proc-block .op-proc-body {
+  font-size: 12.5px;
+  color: var(--text);
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.op-desc-empty,
+.op-proc-empty {
+  color: var(--muted);
+  font-style: italic;
+  font-size: 12px;
+}
+
+/* Status colors per canonical milestone type */
+.op-status-create .op-bullet { background: #1e40af; border-color: #3b82f6; }
+.op-status-create .op-badge { background: #1e3a8a; color: #dbeafe; border-color: #3b82f6; }
+
+.op-status-progress .op-bullet { background: #0e7490; border-color: #06b6d4; }
+.op-status-progress .op-badge { background: #164e63; color: #cffafe; border-color: #06b6d4; }
+
+.op-status-milestone .op-bullet { background: #15803d; border-color: #22c55e; }
+.op-status-milestone .op-badge { background: #14532d; color: #dcfce7; border-color: #22c55e; }
+
+.op-status-problem .op-bullet { background: #b91c1c; border-color: #ef4444; }
+.op-status-problem .op-badge { background: #7f1d1d; color: #fee2e2; border-color: #ef4444; }
+
+.op-status-solution .op-bullet { background: #a16207; border-color: #f59e0b; }
+.op-status-solution .op-badge { background: #78350f; color: #fef3c7; border-color: #f59e0b; }
+
+.op-status-decision .op-bullet { background: #6d28d9; border-color: #8b5cf6; }
+.op-status-decision .op-badge { background: #4c1d95; color: #ede9fe; border-color: #8b5cf6; }
+
+.op-status-review .op-bullet { background: #0f766e; border-color: #14b8a6; }
+.op-status-review .op-badge { background: #134e4a; color: #ccfbf1; border-color: #14b8a6; }
+
+.op-status-completed .op-bullet { background: #166534; border-color: #22c55e; }
+.op-status-completed .op-badge { background: #14532d; color: #dcfce7; border-color: #22c55e; }
+
+.op-status-unknown .op-bullet { background: #475569; border-color: #94a3b8; }
+.op-status-unknown .op-badge { background: #334155; color: #e2e8f0; border-color: #94a3b8; }
+
+.pipeline-stale {
+  display: inline-block;
+  background: var(--warn);
+  color: #1f2937;
+  padding: 1px 8px;
+  border-radius: 8px;
+  font-size: 11px;
+  margin-left: 8px;
+}
+
+.pipeline-error {
+  background: rgba(239, 68, 68, 0.08);
+  border: 1px solid var(--bad);
+  border-radius: 6px;
+  padding: 10px 12px;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.btn {
+  background: var(--panel-2);
+  color: var(--text);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  padding: 6px 12px;
+  cursor: pointer;
+  font-size: 13px;
+}
+
+.btn-retry:hover {
+  border-color: var(--accent);
+  color: var(--accent);
+}
+
+@media (max-width: 800px) {
+  .op-row1 {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 4px;
+  }
+  .op-time {
+    margin-left: 0;
+  }
+}
+
+/* ------------------------------------------------------------------------- */
+/* Tasks tree (v0.8.0+)                                                       */
+/* ------------------------------------------------------------------------- */
+
+.tree-controls {
+  border-left: 3px solid var(--accent);
+}
+.tree-controls-row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 8px;
+}
+.tree-search {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  background: var(--code-bg);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  padding: 4px 10px;
+  flex: 1 1 240px;
+  min-width: 220px;
+  max-width: 380px;
+}
+.tree-search input {
+  background: transparent;
+  border: none;
+  color: var(--text);
+  font-size: 13px;
+  outline: none;
+  flex: 1;
+  min-width: 0;
+}
+.tree-search input::placeholder {
+  color: var(--muted);
+  opacity: 0.7;
+}
+.tree-filter-group {
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  background: var(--code-bg);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  padding: 3px;
+}
+.tree-filter-btn {
+  background: transparent;
+  color: var(--muted);
+  border: 1px solid transparent;
+  border-radius: 4px;
+  padding: 4px 10px;
+  cursor: pointer;
+  font-size: 12px;
+  line-height: 1.4;
+  transition: all 120ms ease;
+}
+.tree-filter-btn:hover {
+  color: var(--text);
+  border-color: var(--border);
+}
+.tree-filter-btn.is-active {
+  background: var(--accent);
+  color: #0b1220;
+  font-weight: 600;
+  border-color: var(--accent);
+}
+
+.tree-summary {
+  margin-top: 8px;
+  font-size: 12.5px;
+}
+.tree-summary .stale-pill {
+  display: inline-block;
+  background: var(--warn);
+  color: #1a1300;
+  font-weight: 700;
+  padding: 1px 7px;
+  border-radius: 999px;
+  font-size: 10.5px;
+  margin-left: 4px;
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
+}
+
+.tree-panel {
+  border-left: 3px solid var(--good);
+}
+.tasks-tree {
+  min-height: 80px;
+  font-size: 13px;
+}
+.tree-list,
+.tree-children {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.tree-children {
+  margin-left: 0;
+}
+
+.tree-item {
+  position: relative;
+  margin: 2px 0;
+}
+.tree-item.tree-item-hidden {
+  display: none;
+}
+.tree-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 8px 6px 8px;
+  border-radius: 6px;
+  background: rgba(255, 255, 255, 0.015);
+  border: 1px solid transparent;
+  transition: background 120ms ease, border-color 120ms ease;
+}
+.tree-row:hover {
+  background: rgba(96, 165, 250, 0.06);
+  border-color: rgba(96, 165, 250, 0.25);
+}
+.tree-row-meta {
+  margin-top: 4px;
+  font-size: 11.5px;
+  color: var(--muted);
+  font-style: italic;
+}
+
+.tree-toggler {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  background: transparent;
+  color: var(--accent);
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 11px;
+  padding: 0;
+  flex-shrink: 0;
+  transition: background 120ms ease;
+}
+.tree-toggler:hover {
+  background: rgba(96, 165, 250, 0.12);
+}
+.tree-toggler-leaf {
+  border-color: transparent;
+  color: var(--muted);
+  cursor: default;
+}
+
+.tree-id {
+  font-family: "JetBrains Mono", Menlo, Monaco, monospace;
+  font-size: 12.5px;
+  font-weight: 600;
+  color: var(--accent);
+  flex-shrink: 0;
+  min-width: 52px;
+}
+.tree-id:hover {
+  text-decoration: underline;
+}
+
+.tree-type-badge {
+  display: inline-block;
+  font-size: 10.5px;
+  font-family: "JetBrains Mono", Menlo, Monaco, monospace;
+  text-transform: uppercase;
+  color: var(--muted);
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  padding: 1px 5px;
+  flex-shrink: 0;
+  letter-spacing: 0.04em;
+}
+
+.tree-title {
+  color: var(--text);
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.tree-title:hover {
+  text-decoration: underline;
+  color: var(--accent);
+}
+
+.tree-tags {
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: 3px;
+  flex-shrink: 0;
+}
+.tree-tag {
+  display: inline-block;
+  font-size: 10.5px;
+  background: rgba(96, 165, 250, 0.12);
+  color: #bfdbfe;
+  border: 1px solid rgba(96, 165, 250, 0.3);
+  border-radius: 999px;
+  padding: 1px 7px;
+  white-space: nowrap;
+}
+
+.tree-progress {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  flex-shrink: 0;
+  background: var(--code-bg);
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  padding: 2px 8px;
+  font-size: 10.5px;
+  color: var(--muted);
+  min-width: 80px;
+  position: relative;
+  overflow: hidden;
+}
+.tree-progress-bar {
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  background: rgba(34, 197, 94, 0.22);
+  border-right: 1px solid rgba(34, 197, 94, 0.45);
+}
+.tree-progress-label {
+  position: relative;
+  z-index: 1;
+  font-family: "JetBrains Mono", Menlo, Monaco, monospace;
+  font-weight: 600;
+  color: var(--text);
+}
+
+.tree-updated {
+  font-size: 10.5px;
+  color: var(--muted);
+  font-family: "JetBrains Mono", Menlo, Monaco, monospace;
+  flex-shrink: 0;
+  white-space: nowrap;
+}
+
+/* Branch lines — drawn as left borders on each child item so the tree
+   stays legible even with deep nesting. Each level offsets the lines by
+   the same 22px we use for indentation. v0.8.3: bumped the line weight
+   and contrast so the hierarchy is visible without squinting. */
+.tree-children .tree-item {
+  border-left: 2px solid rgba(148, 163, 184, 0.45);
+  margin-left: 11px;
+  padding-left: 0;
+}
+.tree-children .tree-item .tree-row {
+  border-left: 2px solid transparent;
+  margin-left: -2px;
+  padding-left: 2px;
+}
+
+/* v0.8.3: render-time indent is computed as `depth * 22` in JS, but we
+   also bump the depth-0 row padding so it lines up with the toggler
+   size — without this the leaf dots look detached from their row. */
+.tree-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 8px 6px 8px;
+  border-radius: 6px;
+  background: rgba(255, 255, 255, 0.015);
+  border: 1px solid transparent;
+  transition: background 120ms ease, border-color 120ms ease;
+}
+
+/* v0.8.3: parent rows get a subtle accent so the user can immediately
+   tell which rows have children — even before they click the chevron. */
+.tree-item-branch > .tree-row {
+  background: rgba(96, 165, 250, 0.04);
+  border-color: rgba(96, 165, 250, 0.18);
+}
+
+/* v0.8.3: depth-based indentation for visual scanning. We tag each
+   tree-row with its depth so the CSS can add a coloured left rail —
+   darker for roots, fading toward the leaves. */
+.tree-row[data-depth="0"] {
+  box-shadow: inset 3px 0 0 rgba(96, 165, 250, 0.55);
+}
+.tree-row[data-depth="1"] {
+  box-shadow: inset 3px 0 0 rgba(96, 165, 250, 0.30);
+}
+.tree-row[data-depth="2"] {
+  box-shadow: inset 3px 0 0 rgba(96, 165, 250, 0.18);
+}
+.tree-row[data-depth="3"] {
+  box-shadow: inset 3px 0 0 rgba(148, 163, 184, 0.30);
+}
+.tree-row[data-depth="4"],
+.tree-row[data-depth="5"],
+.tree-row[data-depth="6"] {
+  box-shadow: inset 3px 0 0 rgba(148, 163, 184, 0.20);
+}
+
+/* v0.8.3: per-depth depth pill in the summary line. */
+.tree-depth-breakdown {
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  margin-left: 4px;
+}
+.tree-depth-pill {
+  display: inline-block;
+  padding: 1px 7px;
+  border-radius: 999px;
+  font-size: 11px;
+  border: 1px solid rgba(148, 163, 184, 0.35);
+  background: rgba(96, 165, 250, 0.08);
+  color: #cbd5e1;
+}
+.tree-depth-pill[data-depth="0"] {
+  background: rgba(96, 165, 250, 0.18);
+  color: #bfdbfe;
+  border-color: rgba(96, 165, 250, 0.55);
+}
+.tree-depth-pill[data-depth="1"] {
+  background: rgba(96, 165, 250, 0.10);
+  color: #cbd5e1;
+  border-color: rgba(96, 165, 250, 0.30);
+}
+.tree-depth-pill[data-depth="2"] {
+  background: rgba(96, 165, 250, 0.06);
+  color: #cbd5e1;
+  border-color: rgba(96, 165, 250, 0.22);
+}
+
+/* v0.8.3: legacy sections stay hidden. The id="legacy-sessions" hook
+   lets a future debug toggle restore them without code changes. */
+.tree-legacy-hidden,
+.tree-legacy-hidden[hidden] {
+  display: none !important;
+}
+
+/* v0.8.3: condensed legend so it doesn't dominate the page above the
+   fold. Keeps the same content, tighter padding. */
+.tree-legend {
+  padding-top: 8px;
+  padding-bottom: 8px;
+  font-size: 12.5px;
+}
+.tree-legend h2 {
+  font-size: 13px;
+  margin-bottom: 4px;
+  color: var(--muted);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+.tree-legend ul {
+  margin: 0;
+  padding-left: 18px;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  gap: 2px 16px;
+}
+.tree-legend li {
+  margin: 0;
+}
+
+/* Status badge color tweaks — keep the existing palette, just make the
+   ones we use most in the tree (active / completed / todo) more vivid. */
+.badge.badge-active {
+  background: rgba(59, 130, 246, 0.18);
+  color: #93c5fd;
+  border: 1px solid rgba(59, 130, 246, 0.5);
+}
+.badge.badge-completed {
+  background: rgba(34, 197, 94, 0.18);
+  color: #86efac;
+  border: 1px solid rgba(34, 197, 94, 0.5);
+}
+.badge.badge-todo {
+  background: rgba(148, 163, 184, 0.18);
+  color: #cbd5e1;
+  border: 1px solid rgba(148, 163, 184, 0.4);
+}
+.badge.badge-paused {
+  background: rgba(245, 158, 11, 0.18);
+  color: #fcd34d;
+  border: 1px solid rgba(245, 158, 11, 0.45);
+}
+.badge.badge-cancelled {
+  background: rgba(239, 68, 68, 0.18);
+  color: #fca5a5;
+  border: 1px solid rgba(239, 68, 68, 0.45);
+}
+.badge.badge-priority-high {
+  background: rgba(239, 68, 68, 0.18);
+  color: #fca5a5;
+  border: 1px solid rgba(239, 68, 68, 0.45);
+}
+.badge.badge-priority-medium {
+  background: rgba(245, 158, 11, 0.18);
+  color: #fcd34d;
+  border: 1px solid rgba(245, 158, 11, 0.45);
+}
+.badge.badge-priority-low {
+  background: rgba(148, 163, 184, 0.18);
+  color: #cbd5e1;
+  border: 1px solid rgba(148, 163, 184, 0.4);
+}
+