@ai-setting/roy-plugin-task-show 1.1.0 → 2.0.0

package/public/style.css

@@ -1090,3 +1090,569 @@ details summary {
   border: 1px solid rgba(148, 163, 184, 0.4);
 }
 
+/* ---------- Session forest metadata ---------- */
+.session-forest > ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.session-row {
+  min-width: 0;
+  margin: 8px 0;
+  padding: 10px 12px;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: rgba(24, 36, 66, 0.45);
+}
+.session-row .session-title {
+  display: inline-block;
+  font-weight: 600;
+  overflow-wrap: anywhere;
+}
+.session-toggle {
+  margin-left: 10px;
+}
+.session-details {
+  margin-top: 8px;
+}
+.session-details dl {
+  display: grid;
+  grid-template-columns: minmax(10rem, 15rem) minmax(0, 1fr);
+  gap: 6px 12px;
+  margin: 10px 0 0;
+}
+.session-details dt {
+  color: var(--muted);
+  font-weight: 600;
+  overflow-wrap: anywhere;
+}
+.session-details dd {
+  min-width: 0;
+  margin: 0;
+  overflow-wrap: anywhere;
+}
+.session-details pre.metadata-json,
+.session-details pre.metadata-text {
+  max-height: 24rem;
+  margin: 0;
+  white-space: pre-wrap;
+  overflow: auto;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+}
+.session-operations {
+  list-style: none;
+  margin: 12px 0 0;
+  padding: 0;
+}
+@media (max-width: 700px) {
+  .session-details dl {
+    grid-template-columns: 1fr;
+    gap: 2px;
+  }
+  .session-details dd {
+    margin-bottom: 8px;
+  }
+}
+
+/* ============================================================================
+ * v2.0.0: Monaco Editor + File Tree + Diff + Mermaid jump
+ *
+ * Sections (search for the header to navigate):
+ *   - .task-v2-layout        — sidebar + main grid
+ *   - .file-tree-panel       — left sidebar
+ *   - .file-tree             — collapsible nested list
+ *   - .file-tree-node        — individual rows
+ *   - .file-tree-chevron     — directory expand/collapse
+ *   - .tool-call-detail      — right-hand detail panel
+ *   - .monaco-editor         — Monaco container
+ *   - .diff-body / .diff-line — LCS diff rendering
+ *   - .v2-hint               — small inline hints
+ * ========================================================================== */
+
+/* ---------- v2.0.0 layout (sidebar + main) ---------- */
+.task-v2-layout {
+  display: grid;
+  grid-template-columns: minmax(220px, 280px) 1fr;
+  gap: 16px;
+  margin: 0 auto;
+  max-width: 1400px;
+  padding: 0 16px;
+}
+.task-v2-layout > .task-v2-main {
+  min-width: 0; /* allow grid item to shrink */
+}
+.file-tree-panel {
+  position: sticky;
+  top: 12px;
+  align-self: start;
+  max-height: calc(100vh - 24px);
+  overflow: auto;
+  border: 1px solid var(--border, #e5e7eb);
+  border-radius: 6px;
+  padding: 12px 14px;
+  background: var(--bg-panel, #fafafa);
+}
+.file-tree-panel h2 {
+  font-size: 14px;
+  margin: 0 0 6px;
+  letter-spacing: 0.02em;
+}
+.file-tree-summary {
+  font-size: 11px;
+  color: var(--fg-muted, #6b7280);
+  margin: 0 0 8px;
+}
+@media (max-width: 900px) {
+  .task-v2-layout {
+    grid-template-columns: 1fr;
+  }
+  .file-tree-panel {
+    position: static;
+    max-height: none;
+  }
+}
+
+/* ---------- file tree sidebar ---------- */
+.file-tree {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  font-family: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Code", Menlo, monospace;
+  font-size: 12px;
+  line-height: 1.5;
+}
+.file-tree-node {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 1px 4px 1px calc(4px + var(--depth, 0) * 12px);
+  border-radius: 3px;
+  cursor: pointer;
+  user-select: none;
+}
+.file-tree-node[data-collapsed="true"] {
+  display: none;
+}
+.file-tree-node:hover {
+  background: rgba(99, 102, 241, 0.08);
+}
+.file-tree-node.is-active {
+  background: rgba(99, 102, 241, 0.18);
+  outline: 1px solid rgba(99, 102, 241, 0.45);
+  font-weight: 600;
+}
+.file-tree-node.is-affected .file-tree-name::after {
+  content: " ●";
+  color: rgba(220, 38, 38, 0.8);
+  font-size: 10px;
+}
+.file-tree-chevron {
+  display: inline-block;
+  width: 12px;
+  text-align: center;
+  font-size: 9px;
+  color: var(--fg-muted, #6b7280);
+  flex: 0 0 12px;
+}
+.file-tree-spacer {
+  display: inline-block;
+  width: 12px;
+  flex: 0 0 12px;
+}
+.file-tree-name {
+  flex: 1 1 auto;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.file-tree-empty {
+  list-style: none;
+  color: var(--fg-muted, #6b7280);
+  font-style: italic;
+  padding: 4px;
+}
+
+/* ---------- tool-call detail panel ---------- */
+.tool-call-detail-panel {
+  border-left: 4px solid rgba(99, 102, 241, 0.55);
+  padding-left: 14px;
+  margin-top: 18px;
+}
+.tool-call-detail-panel .v2-hint {
+  font-size: 12px;
+  font-weight: 400;
+  color: var(--fg-muted, #6b7280);
+  margin-left: 8px;
+}
+.tool-call-detail {
+  border: 1px solid var(--border, #e5e7eb);
+  border-radius: 6px;
+  padding: 10px 12px;
+  margin-top: 8px;
+  background: #ffffff;
+}
+.tool-call-header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-size: 13px;
+  margin-bottom: 6px;
+}
+.tool-call-header .tool-name code {
+  background: rgba(99, 102, 241, 0.08);
+  padding: 1px 6px;
+  border-radius: 3px;
+}
+.tool-call-header .tool-path {
+  color: var(--fg-muted, #6b7280);
+  font-family: ui-monospace, Menlo, monospace;
+  font-size: 11px;
+  margin-left: auto;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: 1 1 auto;
+}
+.tool-call-detail-empty {
+  color: var(--fg-muted, #6b7280);
+  font-style: italic;
+  padding: 8px 0;
+}
+
+/* ---------- Monaco container ---------- */
+.monaco-editor {
+  width: 100%;
+  height: 280px;
+  border: 1px solid var(--border, #d1d5db);
+  border-radius: 4px;
+  margin: 6px 0 0;
+  position: relative;
+  background: #fafafa;
+  overflow: hidden;
+}
+.monaco-editor .monaco-placeholder {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  color: var(--fg-muted, #6b7280);
+  font-family: ui-monospace, Menlo, monospace;
+  font-size: 12px;
+}
+.monaco-editor .monaco-error {
+  color: rgba(220, 38, 38, 0.9);
+  background: rgba(254, 226, 226, 0.5);
+}
+.monaco-editor .monaco-truncation-note {
+  position: absolute;
+  bottom: 4px;
+  right: 8px;
+  font-size: 10px;
+  color: var(--fg-muted, #6b7280);
+  background: rgba(255, 255, 255, 0.85);
+  padding: 1px 6px;
+  border-radius: 3px;
+}
+
+/* ---------- LCS diff body ---------- */
+.diff-body {
+  list-style: none;
+  margin: 6px 0 0;
+  padding: 6px 8px;
+  border: 1px solid var(--border, #e5e7eb);
+  border-radius: 4px;
+  background: #fafafa;
+  font-family: ui-monospace, "SF Mono", Menlo, monospace;
+  font-size: 12px;
+  line-height: 1.5;
+  max-height: 320px;
+  overflow: auto;
+}
+.diff-line {
+  display: flex;
+  gap: 8px;
+  padding: 0 4px;
+  white-space: pre;
+}
+.diff-line .diff-gutter {
+  flex: 0 0 14px;
+  text-align: center;
+  font-weight: 600;
+}
+.diff-line.diff-line-added {
+  background: rgba(220, 252, 231, 0.6);
+}
+.diff-line.diff-line-added .diff-gutter {
+  color: #15803d;
+}
+.diff-line.diff-line-removed {
+  background: rgba(254, 226, 226, 0.6);
+}
+.diff-line.diff-line-removed .diff-gutter {
+  color: #b91c1c;
+}
+.diff-line.diff-line-context .diff-gutter {
+  color: var(--fg-muted, #9ca3af);
+}
+.diff-line .diff-text {
+  flex: 1 1 auto;
+  white-space: pre;
+}
+
+/* ---------- v2 small inline hint ---------- */
+.v2-hint {
+  font-size: 11px;
+  color: var(--fg-muted, #6b7280);
+}
+
+/* ============================================================================
+ * v2.0.0: Monaco Editor + File Tree + Diff + Mermaid jump
+ *
+ * Sections (search for the header to navigate):
+ *   - .task-v2-layout        — sidebar + main grid
+ *   - .file-tree-panel       — left sidebar
+ *   - .file-tree             — collapsible nested list
+ *   - .file-tree-node        — individual rows
+ *   - .file-tree-chevron     — directory expand/collapse
+ *   - .tool-call-detail      — right-hand detail panel
+ *   - .monaco-editor         — Monaco container
+ *   - .diff-body / .diff-line — LCS diff rendering
+ *   - .v2-hint               — small inline hints
+ * ========================================================================== */
+
+/* ---------- v2.0.0 layout (sidebar + main) ---------- */
+.task-v2-layout {
+  display: grid;
+  grid-template-columns: minmax(220px, 280px) 1fr;
+  gap: 16px;
+  margin: 0 auto;
+  max-width: 1400px;
+  padding: 0 16px;
+}
+.task-v2-layout > .task-v2-main {
+  min-width: 0; /* allow grid item to shrink */
+}
+.file-tree-panel {
+  position: sticky;
+  top: 12px;
+  align-self: start;
+  max-height: calc(100vh - 24px);
+  overflow: auto;
+  border: 1px solid var(--border, #e5e7eb);
+  border-radius: 6px;
+  padding: 12px 14px;
+  background: var(--bg-panel, #fafafa);
+}
+.file-tree-panel h2 {
+  font-size: 14px;
+  margin: 0 0 6px;
+  letter-spacing: 0.02em;
+}
+.file-tree-summary {
+  font-size: 11px;
+  color: var(--fg-muted, #6b7280);
+  margin: 0 0 8px;
+}
+@media (max-width: 900px) {
+  .task-v2-layout {
+    grid-template-columns: 1fr;
+  }
+  .file-tree-panel {
+    position: static;
+    max-height: none;
+  }
+}
+
+/* ---------- file tree sidebar ---------- */
+.file-tree {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  font-family: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Code", Menlo, monospace;
+  font-size: 12px;
+  line-height: 1.5;
+}
+.file-tree-node {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 1px 4px 1px calc(4px + var(--depth, 0) * 12px);
+  border-radius: 3px;
+  cursor: pointer;
+  user-select: none;
+}
+.file-tree-node[data-collapsed="true"] {
+  display: none;
+}
+.file-tree-node:hover {
+  background: rgba(99, 102, 241, 0.08);
+}
+.file-tree-node.is-active {
+  background: rgba(99, 102, 241, 0.18);
+  outline: 1px solid rgba(99, 102, 241, 0.45);
+  font-weight: 600;
+}
+.file-tree-node.is-affected .file-tree-name::after {
+  content: " ●";
+  color: rgba(220, 38, 38, 0.8);
+  font-size: 10px;
+}
+.file-tree-chevron {
+  display: inline-block;
+  width: 12px;
+  text-align: center;
+  font-size: 9px;
+  color: var(--fg-muted, #6b7280);
+  flex: 0 0 12px;
+}
+.file-tree-spacer {
+  display: inline-block;
+  width: 12px;
+  flex: 0 0 12px;
+}
+.file-tree-name {
+  flex: 1 1 auto;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.file-tree-empty {
+  list-style: none;
+  color: var(--fg-muted, #6b7280);
+  font-style: italic;
+  padding: 4px;
+}
+
+/* ---------- tool-call detail panel ---------- */
+.tool-call-detail-panel {
+  border-left: 4px solid rgba(99, 102, 241, 0.55);
+  padding-left: 14px;
+  margin-top: 18px;
+}
+.tool-call-detail-panel .v2-hint {
+  font-size: 12px;
+  font-weight: 400;
+  color: var(--fg-muted, #6b7280);
+  margin-left: 8px;
+}
+.tool-call-detail {
+  border: 1px solid var(--border, #e5e7eb);
+  border-radius: 6px;
+  padding: 10px 12px;
+  margin-top: 8px;
+  background: #ffffff;
+}
+.tool-call-header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-size: 13px;
+  margin-bottom: 6px;
+}
+.tool-call-header .tool-name code {
+  background: rgba(99, 102, 241, 0.08);
+  padding: 1px 6px;
+  border-radius: 3px;
+}
+.tool-call-header .tool-path {
+  color: var(--fg-muted, #6b7280);
+  font-family: ui-monospace, Menlo, monospace;
+  font-size: 11px;
+  margin-left: auto;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: 1 1 auto;
+}
+.tool-call-detail-empty {
+  color: var(--fg-muted, #6b7280);
+  font-style: italic;
+  padding: 8px 0;
+}
+
+/* ---------- Monaco container ---------- */
+.monaco-editor {
+  width: 100%;
+  height: 280px;
+  border: 1px solid var(--border, #d1d5db);
+  border-radius: 4px;
+  margin: 6px 0 0;
+  position: relative;
+  background: #fafafa;
+  overflow: hidden;
+}
+.monaco-editor .monaco-placeholder {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  color: var(--fg-muted, #6b7280);
+  font-family: ui-monospace, Menlo, monospace;
+  font-size: 12px;
+}
+.monaco-editor .monaco-error {
+  color: rgba(220, 38, 38, 0.9);
+  background: rgba(254, 226, 226, 0.5);
+}
+.monaco-editor .monaco-truncation-note {
+  position: absolute;
+  bottom: 4px;
+  right: 8px;
+  font-size: 10px;
+  color: var(--fg-muted, #6b7280);
+  background: rgba(255, 255, 255, 0.85);
+  padding: 1px 6px;
+  border-radius: 3px;
+}
+
+/* ---------- LCS diff body ---------- */
+.diff-body {
+  list-style: none;
+  margin: 6px 0 0;
+  padding: 6px 8px;
+  border: 1px solid var(--border, #e5e7eb);
+  border-radius: 4px;
+  background: #fafafa;
+  font-family: ui-monospace, "SF Mono", Menlo, monospace;
+  font-size: 12px;
+  line-height: 1.5;
+  max-height: 320px;
+  overflow: auto;
+}
+.diff-line {
+  display: flex;
+  gap: 8px;
+  padding: 0 4px;
+  white-space: pre;
+}
+.diff-line .diff-gutter {
+  flex: 0 0 14px;
+  text-align: center;
+  font-weight: 600;
+}
+.diff-line.diff-line-added {
+  background: rgba(220, 252, 231, 0.6);
+}
+.diff-line.diff-line-added .diff-gutter {
+  color: #15803d;
+}
+.diff-line.diff-line-removed {
+  background: rgba(254, 226, 226, 0.6);
+}
+.diff-line.diff-line-removed .diff-gutter {
+  color: #b91c1c;
+}
+.diff-line.diff-line-context .diff-gutter {
+  color: var(--fg-muted, #9ca3af);
+}
+.diff-line .diff-text {
+  flex: 1 1 auto;
+  white-space: pre;
+}
+
+/* ---------- v2 small inline hint ---------- */
+.v2-hint {
+  font-size: 11px;
+  color: var(--fg-muted, #6b7280);
+}