feat: Pipeline Settings M3 — assembled-instructions preview + prompt version history/diff (#173, v0.25.0)

Read-only assembled-instructions preview (last-run rendered prompt) with Template-vs-Preview guardrail; per-prompt version history + LCS diff. Stage-list-driven. QA APPROVE df92ed3; CI green. Agent-Session: pipeline-settings-m3-merge
2026-06-23 13:33:18 +07:00
parent 8b789b3f1b
commit 2569b08862
16 changed files with 1634 additions and 107 deletions
--- a/assets/css/pipeline-settings.css
+++ b/assets/css/pipeline-settings.css
@@ -179,3 +179,201 @@
    font-size: 12px;
    margin-bottom: 8px;
 }
+
+/* ── M3: Template / Preview toggle ────────────────────────────────────────── */
+.pab-tp-toggle-row {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    margin-bottom: 12px;
+}
+.pab-tp-toggle {
+    display: flex;
+    border: 1px solid #d0d5dd;
+    border-radius: 4px;
+    overflow: hidden;
+    flex-shrink: 0;
+}
+.pab-tp-btn {
+    padding: 6px 14px;
+    font-size: 12px;
+    font-weight: 600;
+    color: #646970;
+    background: #fff;
+    border: none;
+    border-right: 1px solid #d0d5dd;
+    cursor: pointer;
+    font-family: inherit;
+    transition: background .12s, color .12s;
+}
+.pab-tp-btn:last-child { border-right: none; }
+.pab-tp-btn--active { background: #1B8A92; color: #fff; }
+.pab-tp-btn:not(.pab-tp-btn--active):hover { background: #f5f9fa; color: #1d2327; }
+.pab-tp-hint { font-size: 12px; color: #646970; }
+
+/* ── M3: Prompt editor toolbar ─────────────────────────────────────────────── */
+.pab-prompt-editor-wrap { margin-bottom: 8px; }
+.pab-prompt-editor-toolbar {
+    display: flex;
+    align-items: center;
+    background: #f7f9fa;
+    border: 1px solid #d0d5dd;
+    border-bottom: none;
+    border-radius: 4px 4px 0 0;
+    padding: 6px 12px;
+}
+.pab-prompt-editor-title {
+    font-size: 11px;
+    font-family: 'IBM Plex Mono', 'Courier New', monospace;
+    font-weight: 600;
+    color: #646970;
+}
+.pab-prompt-form .pab-prompt-editor { border-radius: 0 0 4px 4px; }
+
+/* ── M3: Preview block ─────────────────────────────────────────────────────── */
+.pab-preview-block {
+    border: 1px solid #d0d5dd;
+    border-radius: 4px;
+    overflow: hidden;
+    background: #f7f9fa;
+    max-width: 820px;
+    margin-bottom: 8px;
+}
+.pab-preview-header {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 8px 14px;
+    background: #f0f4f5;
+    border-bottom: 1px solid #d0d5dd;
+}
+.pab-preview-label {
+    font-size: 11px;
+    font-weight: 600;
+    color: #646970;
+    text-transform: uppercase;
+    letter-spacing: .04em;
+}
+.pab-preview-readonly-badge {
+    font-size: 11px;
+    font-family: 'IBM Plex Mono', 'Courier New', monospace;
+    font-weight: 600;
+    color: #646970;
+    background: #fff;
+    border: 1px solid #d0d5dd;
+    padding: 1px 8px;
+    border-radius: 10px;
+}
+.pab-preview-source-note {
+    font-size: 11px;
+    color: #646970;
+    margin-left: auto;
+}
+.pab-preview-body {
+    padding: 14px;
+    font-family: 'IBM Plex Mono', 'Courier New', monospace;
+    font-size: 12px;
+    line-height: 1.7;
+    color: #3d3d3d;
+    background: #f7f9fa;
+    white-space: pre-wrap;
+    word-break: break-word;
+    margin: 0;
+    max-height: 400px;
+    overflow-y: auto;
+}
+.pab-preview-loading { color: #9ca3af; font-style: italic; }
+.pab-preview-notice {
+    display: flex;
+    align-items: flex-start;
+    gap: 8px;
+    padding: 8px 14px;
+    background: #fffbeb;
+    border-top: 1px solid #fde68a;
+    font-size: 12px;
+    color: #78350f;
+}
+.pab-preview-notice .dashicons { font-size: 14px; flex-shrink: 0; margin-top: 1px; color: #92400e; }
+
+/* ── M3: Version history accordion ─────────────────────────────────────────── */
+.pab-history-accordion { margin-top: 12px; }
+.pab-history-trigger {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    background: none;
+    border: none;
+    font-size: 12px;
+    font-weight: 600;
+    color: #646970;
+    cursor: pointer;
+    padding: 4px 0;
+    font-family: inherit;
+}
+.pab-history-trigger:hover { color: #1B8A92; }
+.pab-history-arrow { font-size: 14px !important; transition: transform .15s; }
+.pab-history-body {
+    margin-top: 6px;
+    border: 1px solid #e0e0e0;
+    border-radius: 4px;
+    overflow: hidden;
+}
+.pab-version-row {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 9px 14px;
+    border-bottom: 1px solid #f0f0f1;
+    font-size: 12px;
+}
+.pab-version-row:last-child { border-bottom: none; }
+.pab-version-num {
+    font-family: 'IBM Plex Mono', 'Courier New', monospace;
+    font-weight: 600;
+    color: #1B8A92;
+    min-width: 28px;
+}
+.pab-version-author { color: #1d2327; font-weight: 500; }
+.pab-version-date { font-family: 'IBM Plex Mono', 'Courier New', monospace; font-size: 11px; color: #646970; }
+.pab-version-current { margin-left: 4px; }
+
+/* ── M3: Diff panel ─────────────────────────────────────────────────────────── */
+.pab-diff-panel {
+    margin-top: 12px;
+    background: #f7f9fa;
+    border: 1px solid #e0e0e0;
+    border-radius: 4px;
+    overflow: hidden;
+    max-width: 820px;
+}
+.pab-diff-header {
+    font-size: 12px;
+    font-weight: 600;
+    color: #1d2327;
+    padding: 8px 14px;
+    border-bottom: 1px solid #e0e0e0;
+    background: #f0f4f5;
+    font-family: 'IBM Plex Mono', 'Courier New', monospace;
+}
+.pab-diff-block {
+    font-family: 'IBM Plex Mono', 'Courier New', monospace;
+    font-size: 12px;
+    line-height: 1.5;
+    padding: 4px 0;
+    max-height: 360px;
+    overflow-y: auto;
+}
+.pab-diff-line {
+    display: block;
+    padding: 1px 14px;
+    white-space: pre-wrap;
+    word-break: break-word;
+}
+.pab-diff-line--added   { background: #ecfdf5; color: #065f46; }
+.pab-diff-line--removed { background: #fef2f2; color: #9b1c1c; }
+.pab-diff-line--context { color: #3d3d3d; }
+.pab-diff-line--omitted { color: #9ca3af; font-style: italic; }
+.pab-diff-close {
+    display: block;
+    margin: 8px 14px 10px;
+}