@jhizzard/termdeck 0.8.0 → 0.9.0

package/packages/client/public/style.css

@@ -762,6 +762,275 @@
       filter: none;
     }
 
+    /* ===== Orchestration preview button + modal (Sprint 37 T3) ===== */
+    .prompt-preview-project {
+      background: transparent;
+      border: 1px solid var(--tg-border);
+      color: var(--tg-text-dim);
+      font-size: 11px;
+      font-weight: 600;
+      padding: 6px 10px;
+      border-radius: 4px;
+      cursor: pointer;
+      font-family: var(--tg-sans);
+      letter-spacing: 0.4px;
+      text-transform: lowercase;
+    }
+    .prompt-preview-project:hover:not(:disabled) {
+      color: var(--tg-text);
+      border-color: var(--tg-accent-dim);
+    }
+    .prompt-preview-project:disabled {
+      opacity: 0.4;
+      cursor: not-allowed;
+    }
+
+    .preview-project-modal {
+      display: none;
+      position: fixed;
+      inset: 0;
+      z-index: 3000;
+      align-items: center;
+      justify-content: center;
+    }
+    .preview-project-modal.open { display: flex; }
+    .preview-project-backdrop {
+      position: absolute;
+      inset: 0;
+      background: rgba(0, 0, 0, 0.72);
+    }
+    .preview-project-card {
+      position: relative;
+      background: var(--tg-surface);
+      border: 1px solid var(--tg-accent-dim);
+      border-radius: 10px;
+      padding: 18px 22px 16px;
+      width: 760px;
+      max-width: calc(100vw - 40px);
+      max-height: calc(100vh - 60px);
+      display: flex;
+      flex-direction: column;
+      box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55);
+      font-family: var(--tg-sans);
+      color: var(--tg-text);
+    }
+    .ppm-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: flex-start;
+      gap: 16px;
+      margin-bottom: 6px;
+    }
+    .ppm-header h3 {
+      margin: 0 0 2px;
+      font-size: 16px;
+      color: var(--tg-accent);
+    }
+    .ppm-help {
+      margin: 0;
+      font-size: 12px;
+      color: var(--tg-text-dim);
+    }
+    .ppm-help code {
+      background: var(--tg-bg);
+      padding: 1px 5px;
+      border-radius: 3px;
+      font-family: var(--tg-mono);
+      font-size: 11px;
+    }
+    .ppm-close {
+      background: transparent;
+      border: none;
+      color: var(--tg-text-dim);
+      font-size: 22px;
+      line-height: 1;
+      cursor: pointer;
+      padding: 0 6px;
+    }
+    .ppm-close:hover { color: var(--tg-text); }
+    .ppm-meta {
+      font-family: var(--tg-mono);
+      font-size: 11px;
+      color: var(--tg-text-dim);
+      padding: 6px 8px;
+      background: var(--tg-bg);
+      border-radius: 4px;
+      margin: 8px 0 6px;
+      word-break: break-all;
+    }
+    .ppm-meta b { color: var(--tg-text); font-weight: 600; }
+    .ppm-meta .ppm-meta-tag {
+      display: inline-block;
+      font-size: 10px;
+      text-transform: uppercase;
+      letter-spacing: 0.6px;
+      padding: 1px 6px;
+      border-radius: 3px;
+      margin-left: 6px;
+    }
+    .ppm-meta .ppm-meta-tag.exists { background: rgba(255, 191, 105, 0.18); color: var(--tg-amber); }
+    .ppm-meta .ppm-meta-tag.fresh { background: rgba(158, 206, 106, 0.18); color: var(--tg-green); }
+    .ppm-status {
+      font-size: 12px;
+      min-height: 16px;
+      margin: 2px 0 6px;
+      color: var(--tg-text-dim);
+    }
+    .ppm-status.error { color: var(--tg-red); }
+    .ppm-status.ok { color: var(--tg-green); }
+    .ppm-tree {
+      flex: 1 1 auto;
+      overflow-y: auto;
+      border: 1px solid var(--tg-border);
+      border-radius: 6px;
+      background: var(--tg-bg);
+      padding: 4px;
+      margin-bottom: 12px;
+      min-height: 200px;
+    }
+    .ppm-empty {
+      padding: 18px;
+      font-size: 12px;
+      color: var(--tg-text-dim);
+      text-align: center;
+    }
+    .ppm-section {
+      margin: 4px 0;
+    }
+    .ppm-section-label {
+      font-size: 10px;
+      text-transform: uppercase;
+      letter-spacing: 0.6px;
+      color: var(--tg-text-dim);
+      padding: 4px 8px;
+    }
+    .ppm-row {
+      display: block;
+      padding: 0;
+      margin: 2px 0;
+      border-radius: 4px;
+      border: 1px solid transparent;
+    }
+    .ppm-row.create { border-color: rgba(158, 206, 106, 0.18); }
+    .ppm-row.skip { border-color: rgba(255, 191, 105, 0.18); opacity: 0.85; }
+    .ppm-row-header {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 6px 10px;
+      cursor: pointer;
+      user-select: none;
+      background: transparent;
+      border: none;
+      width: 100%;
+      text-align: left;
+      color: var(--tg-text);
+      font-family: var(--tg-mono);
+      font-size: 12px;
+    }
+    .ppm-row-header:hover { background: var(--tg-surface); }
+    .ppm-row-icon {
+      flex: 0 0 auto;
+      width: 12px;
+      text-align: center;
+      color: var(--tg-text-dim);
+      font-size: 10px;
+    }
+    .ppm-row-path {
+      flex: 1 1 auto;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    .ppm-row-meta {
+      flex: 0 0 auto;
+      font-size: 10px;
+      color: var(--tg-text-dim);
+    }
+    .ppm-row-tag {
+      flex: 0 0 auto;
+      font-size: 9px;
+      text-transform: uppercase;
+      letter-spacing: 0.6px;
+      padding: 1px 5px;
+      border-radius: 3px;
+    }
+    .ppm-row-tag.create { background: rgba(158, 206, 106, 0.18); color: var(--tg-green); }
+    .ppm-row-tag.skip { background: rgba(255, 191, 105, 0.18); color: var(--tg-amber); }
+    .ppm-row-body {
+      display: none;
+      max-height: 240px;
+      overflow: auto;
+      padding: 6px 10px 10px;
+      background: rgba(0, 0, 0, 0.2);
+      border-top: 1px solid var(--tg-border);
+    }
+    .ppm-row.expanded .ppm-row-body { display: block; }
+    .ppm-row-body pre {
+      margin: 0;
+      font-family: var(--tg-mono);
+      font-size: 11px;
+      color: var(--tg-text);
+      white-space: pre-wrap;
+      word-break: break-word;
+    }
+    .ppm-row-body .ppm-row-truncated {
+      margin-top: 6px;
+      font-size: 10px;
+      color: var(--tg-text-dim);
+      font-style: italic;
+    }
+    .ppm-row-body .ppm-row-skip-reason {
+      margin-bottom: 6px;
+      font-size: 11px;
+      color: var(--tg-amber);
+    }
+    .ppm-actions {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      gap: 12px;
+    }
+    .ppm-force {
+      font-size: 11px;
+      color: var(--tg-text-dim);
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      cursor: pointer;
+    }
+    .ppm-force input { cursor: pointer; }
+    .ppm-action-buttons { display: flex; gap: 8px; }
+    .ppm-cancel,
+    .ppm-generate {
+      font-size: 12px;
+      font-weight: 600;
+      padding: 6px 16px;
+      border-radius: 4px;
+      cursor: pointer;
+      font-family: var(--tg-sans);
+      border: 1px solid var(--tg-border);
+    }
+    .ppm-cancel {
+      background: transparent;
+      color: var(--tg-text-dim);
+    }
+    .ppm-cancel:hover {
+      color: var(--tg-text);
+      border-color: var(--tg-border-active);
+    }
+    .ppm-generate {
+      background: var(--tg-accent);
+      color: var(--tg-bg);
+      border-color: var(--tg-accent);
+    }
+    .ppm-generate:hover:not(:disabled) { filter: brightness(1.1); }
+    .ppm-generate:disabled {
+      opacity: 0.4;
+      cursor: not-allowed;
+      filter: none;
+    }
+
     /* ===== Rumen insights badge + briefing modal ===== */
     .rumen-badge {
       display: none;
@@ -2465,3 +2734,492 @@
     @media (min-width: 1920px) {
       .term-panel { min-height: 200px; min-width: 300px; }
     }
+
+    /* ===== ORCHESTRATOR GUIDE RIGHT-RAIL (Sprint 37 T1) =====
+       Fixed-position rail so it doesn't disrupt the grid flow. Default
+       collapsed: a 32px tab strip on the right edge. Expanded: 360px panel
+       sliding in from the right, overlaying the rightmost grid area. The
+       grid keeps its full width — overlap is by design so we don't have
+       to reflow .grid-container or the orchestrator-grid CSS at lines
+       315-344. */
+    .guide-rail {
+      position: fixed;
+      top: 74px;          /* below two-row topbar (42 + 32) */
+      right: 0;
+      bottom: 50px;       /* above prompt-bar */
+      width: 32px;
+      z-index: 50;        /* above grid, below modals (>=1000) */
+      display: flex;
+      pointer-events: none;
+      font-family: var(--tg-sans);
+      transition: width 180ms ease;
+    }
+    .guide-rail[data-collapsed="false"] {
+      width: 360px;
+    }
+    .guide-rail-toggle {
+      pointer-events: auto;
+      flex: 0 0 32px;
+      writing-mode: vertical-rl;
+      transform: rotate(180deg);
+      background: var(--tg-surface);
+      border: 1px solid var(--tg-border);
+      border-right: none;
+      border-radius: var(--tg-radius-sm) 0 0 var(--tg-radius-sm);
+      color: var(--tg-text-dim);
+      cursor: pointer;
+      padding: 12px 6px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 8px;
+      font-size: 11px;
+      letter-spacing: 0.4px;
+      text-transform: uppercase;
+      transition: background 0.15s, color 0.15s, border-color 0.15s;
+      align-self: stretch;
+    }
+    .guide-rail-toggle:hover {
+      background: var(--tg-surface-hover);
+      color: var(--tg-text-bright);
+      border-color: var(--tg-border-active);
+    }
+    .guide-rail[data-collapsed="false"] .guide-rail-toggle {
+      color: var(--tg-accent);
+    }
+    .guide-rail-toggle .grt-icon {
+      writing-mode: horizontal-tb;
+      transform: rotate(180deg);
+      font-size: 13px;
+      opacity: 0.85;
+    }
+    .guide-rail-body {
+      pointer-events: auto;
+      flex: 1 1 auto;
+      background: var(--tg-surface);
+      border: 1px solid var(--tg-border);
+      border-right: none;
+      border-radius: var(--tg-radius) 0 0 var(--tg-radius);
+      display: flex;
+      flex-direction: column;
+      min-width: 0;
+      box-shadow: -4px 0 16px rgba(0, 0, 0, 0.25);
+      opacity: 0;
+      visibility: hidden;
+      transform: translateX(8px);
+      transition: opacity 180ms ease, transform 180ms ease, visibility 0s linear 180ms;
+    }
+    .guide-rail[data-collapsed="false"] .guide-rail-body {
+      opacity: 1;
+      visibility: visible;
+      transform: translateX(0);
+      transition: opacity 180ms ease, transform 180ms ease, visibility 0s;
+    }
+    .guide-rail-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 10px 14px;
+      border-bottom: 1px solid var(--tg-border);
+      flex-shrink: 0;
+    }
+    .guide-rail-header h3 {
+      margin: 0;
+      font-size: 13px;
+      font-weight: 600;
+      color: var(--tg-text-bright);
+      letter-spacing: -0.2px;
+    }
+    .guide-rail-close {
+      background: none;
+      border: none;
+      color: var(--tg-text-dim);
+      font-size: 14px;
+      cursor: pointer;
+      padding: 2px 6px;
+      border-radius: 3px;
+      line-height: 1;
+    }
+    .guide-rail-close:hover {
+      color: var(--tg-text-bright);
+      background: var(--tg-bg);
+    }
+    .guide-rail-search {
+      padding: 8px 12px;
+      border-bottom: 1px solid var(--tg-border);
+      flex-shrink: 0;
+    }
+    .guide-rail-search input {
+      width: 100%;
+      background: var(--tg-bg);
+      border: 1px solid var(--tg-border);
+      border-radius: var(--tg-radius-sm);
+      color: var(--tg-text);
+      font-family: var(--tg-sans);
+      font-size: 12px;
+      padding: 6px 10px;
+      outline: none;
+    }
+    .guide-rail-search input:focus {
+      border-color: var(--tg-accent-dim);
+    }
+    .guide-rail-toc {
+      flex-shrink: 0;
+      max-height: 168px;
+      overflow-y: auto;
+      padding: 6px 8px;
+      border-bottom: 1px solid var(--tg-border);
+      display: flex;
+      flex-direction: column;
+      gap: 1px;
+    }
+    .guide-rail-toc a {
+      color: var(--tg-text-dim);
+      text-decoration: none;
+      font-size: 11.5px;
+      padding: 4px 8px;
+      border-radius: 3px;
+      cursor: pointer;
+      display: block;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+    .guide-rail-toc a:hover {
+      color: var(--tg-text-bright);
+      background: var(--tg-bg);
+    }
+    .guide-rail-toc a.active {
+      color: var(--tg-accent);
+      background: var(--tg-bg);
+    }
+    .guide-rail-toc a.hidden { display: none; }
+    .guide-rail-content {
+      flex: 1 1 auto;
+      overflow-y: auto;
+      padding: 14px 16px 24px;
+      font-size: 12.5px;
+      line-height: 1.55;
+      color: var(--tg-text);
+      min-height: 0;
+      outline: none;
+    }
+    .guide-rail-content.has-filter section.guide-section.hidden { display: none; }
+    .guide-rail-content section.guide-section { margin: 0 0 18px; }
+    .guide-rail-content section.guide-section.expanded { background: var(--tg-bg); border-radius: var(--tg-radius-sm); padding: 8px 10px; }
+    .guide-rail-content h1 {
+      font-size: 15px;
+      color: var(--tg-text-bright);
+      margin: 0 0 10px;
+      font-weight: 600;
+    }
+    .guide-rail-content h2 {
+      font-size: 13.5px;
+      color: var(--tg-text-bright);
+      margin: 16px 0 6px;
+      font-weight: 600;
+      scroll-margin-top: 8px;
+    }
+    .guide-rail-content h3 {
+      font-size: 12.5px;
+      color: var(--tg-text-bright);
+      margin: 12px 0 4px;
+      font-weight: 600;
+    }
+    .guide-rail-content p { margin: 0 0 8px; }
+    .guide-rail-content ul,
+    .guide-rail-content ol { margin: 4px 0 10px 18px; }
+    .guide-rail-content li { margin: 2px 0; }
+    .guide-rail-content code {
+      background: var(--tg-bg);
+      border: 1px solid var(--tg-border);
+      border-radius: 3px;
+      padding: 1px 4px;
+      font-family: var(--tg-mono);
+      font-size: 11px;
+      color: var(--tg-cyan);
+    }
+    .guide-rail-content pre {
+      background: var(--tg-bg);
+      border: 1px solid var(--tg-border);
+      border-radius: var(--tg-radius-sm);
+      padding: 8px 10px;
+      margin: 6px 0 10px;
+      overflow-x: auto;
+    }
+    .guide-rail-content pre code {
+      background: none;
+      border: none;
+      padding: 0;
+      color: var(--tg-text);
+      font-size: 11px;
+    }
+    .guide-rail-content a {
+      color: var(--tg-accent);
+      text-decoration: none;
+    }
+    .guide-rail-content a:hover { text-decoration: underline; }
+    .guide-rail-content blockquote {
+      border-left: 2px solid var(--tg-accent-dim);
+      padding-left: 10px;
+      color: var(--tg-text-dim);
+      margin: 6px 0 10px;
+      font-style: italic;
+    }
+    .guide-rail-content table {
+      border-collapse: collapse;
+      width: 100%;
+      margin: 6px 0 10px;
+      font-size: 11.5px;
+    }
+    .guide-rail-content th,
+    .guide-rail-content td {
+      border: 1px solid var(--tg-border);
+      padding: 4px 8px;
+      text-align: left;
+      vertical-align: top;
+    }
+    .guide-rail-content th {
+      background: var(--tg-bg);
+      color: var(--tg-text-bright);
+      font-weight: 600;
+    }
+    .guide-rail-content hr {
+      border: none;
+      border-top: 1px solid var(--tg-border);
+      margin: 14px 0;
+    }
+    .guide-rail-content em.no-match {
+      display: block;
+      text-align: center;
+      color: var(--tg-text-dim);
+      padding: 24px 12px;
+      font-style: normal;
+    }
+    .guide-loading {
+      color: var(--tg-text-dim);
+      font-size: 12px;
+      padding: 8px 0;
+      font-style: italic;
+    }
+
+    /* On narrow viewports the rail would eat the whole grid — keep the tab
+       always visible but cap expanded width. */
+    @media (max-width: 900px) {
+      .guide-rail[data-collapsed="false"] { width: min(360px, 80vw); }
+    }
+
+    /* ===== SPRINT RUNNER MODAL (Sprint 37 T4) ===== */
+    .sprint-modal {
+      display: none;
+      position: fixed;
+      inset: 0;
+      z-index: 3100;
+      align-items: center;
+      justify-content: center;
+    }
+    .sprint-modal.open { display: flex; }
+    .sprint-backdrop {
+      position: absolute;
+      inset: 0;
+      background: rgba(0, 0, 0, 0.72);
+    }
+    .sprint-card {
+      position: relative;
+      background: var(--tg-surface);
+      border: 1px solid var(--tg-accent-dim);
+      border-radius: 10px;
+      padding: 22px 24px 18px;
+      width: 720px;
+      max-width: calc(100vw - 40px);
+      max-height: calc(100vh - 60px);
+      overflow-y: auto;
+      box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55);
+      font-family: var(--tg-sans);
+      color: var(--tg-text);
+    }
+    .sprint-card h3 {
+      margin: 0 0 4px;
+      font-size: 16px;
+      color: var(--tg-accent);
+    }
+    .sprint-help {
+      margin: 0 0 16px;
+      font-size: 12px;
+      color: var(--tg-text-dim);
+      line-height: 1.5;
+    }
+    .sprint-help code {
+      background: var(--tg-bg);
+      padding: 1px 5px;
+      border-radius: 3px;
+      font-family: var(--tg-mono);
+      font-size: 11px;
+    }
+    .sprint-row {
+      display: grid;
+      grid-template-columns: 1fr 1fr 1fr;
+      gap: 10px;
+      margin-bottom: 10px;
+    }
+    .sprint-card label {
+      display: block;
+      margin-bottom: 10px;
+    }
+    .sprint-card label > span {
+      display: block;
+      font-size: 11px;
+      color: var(--tg-text-dim);
+      margin-bottom: 3px;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+    }
+    .sprint-card label > span em {
+      font-style: normal;
+      text-transform: none;
+      color: var(--tg-text-dim);
+      opacity: 0.7;
+      font-size: 10px;
+      margin-left: 4px;
+    }
+    .sprint-full { display: block; margin-bottom: 14px; }
+    .sprint-card input[type="text"],
+    .sprint-card select {
+      width: 100%;
+      background: var(--tg-bg);
+      border: 1px solid var(--tg-border);
+      color: var(--tg-text);
+      font-size: 13px;
+      padding: 7px 10px;
+      border-radius: var(--tg-radius-sm);
+      font-family: var(--tg-mono);
+      box-sizing: border-box;
+    }
+    .sprint-card input[type="text"]:focus,
+    .sprint-card select:focus {
+      outline: none;
+      border-color: var(--tg-accent-dim);
+    }
+    .sprint-lanes {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 10px;
+      margin: 4px 0 14px;
+    }
+    .sprint-lane {
+      background: var(--tg-bg);
+      border: 1px solid var(--tg-border);
+      border-radius: var(--tg-radius-sm);
+      padding: 10px 12px;
+    }
+    .sprint-lane h4 {
+      margin: 0 0 6px;
+      font-size: 11px;
+      color: var(--tg-accent);
+      letter-spacing: 0.5px;
+    }
+    .sprint-lane .sprint-lane-name { margin-bottom: 6px; }
+    .sprint-options { margin: 8px 0 12px; }
+    .sprint-check {
+      display: flex;
+      align-items: flex-start;
+      gap: 8px;
+      font-size: 12px;
+      color: var(--tg-text-dim);
+      margin-bottom: 6px;
+    }
+    .sprint-check input { margin-top: 2px; }
+    .sprint-check em { font-style: normal; opacity: 0.7; margin-left: 4px; }
+    .sprint-status {
+      font-size: 12px;
+      min-height: 16px;
+      margin: 4px 0 8px;
+      color: var(--tg-text-dim);
+    }
+    .sprint-status.error { color: var(--tg-red); }
+    .sprint-status.ok { color: var(--tg-green); }
+    .sprint-actions {
+      display: flex;
+      justify-content: flex-end;
+      gap: 8px;
+      margin-top: 8px;
+    }
+    .sprint-cancel,
+    .sprint-kickoff {
+      padding: 7px 14px;
+      border-radius: var(--tg-radius-sm);
+      border: 1px solid var(--tg-border);
+      background: var(--tg-bg);
+      color: var(--tg-text);
+      font-family: var(--tg-sans);
+      font-size: 12px;
+      cursor: pointer;
+    }
+    .sprint-kickoff {
+      border-color: var(--tg-accent-dim);
+      background: var(--tg-accent-dim);
+      color: var(--tg-bg);
+      font-weight: 600;
+    }
+    .sprint-kickoff:disabled { opacity: 0.55; cursor: not-allowed; }
+    .sprint-cancel:hover { border-color: var(--tg-accent-dim); }
+
+    .sprint-result h4 {
+      margin: 4px 0 8px;
+      font-size: 14px;
+      color: var(--tg-accent);
+    }
+    .sprint-result-meta {
+      font-family: var(--tg-mono);
+      font-size: 11px;
+      color: var(--tg-text-dim);
+      margin-bottom: 12px;
+      line-height: 1.5;
+    }
+    .sprint-lanes-status {
+      display: grid;
+      grid-template-columns: 1fr 1fr 1fr 1fr;
+      gap: 8px;
+      margin-bottom: 14px;
+    }
+    .sprint-lane-status {
+      background: var(--tg-bg);
+      border: 1px solid var(--tg-border);
+      border-radius: var(--tg-radius-sm);
+      padding: 8px 10px;
+      font-family: var(--tg-mono);
+    }
+    .sprint-lane-status h4 {
+      margin: 0 0 4px;
+      font-size: 11px;
+      color: var(--tg-accent);
+    }
+    .sprint-lane-status .counts {
+      font-size: 12px;
+      color: var(--tg-text);
+    }
+    .sprint-lane-status .last-entry {
+      font-size: 10px;
+      color: var(--tg-text-dim);
+      margin-top: 2px;
+    }
+    .sprint-tail-wrap h5 {
+      margin: 0 0 4px;
+      font-size: 11px;
+      color: var(--tg-text-dim);
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+    }
+    .sprint-tail {
+      background: var(--tg-bg);
+      border: 1px solid var(--tg-border);
+      border-radius: var(--tg-radius-sm);
+      padding: 10px 12px;
+      font-family: var(--tg-mono);
+      font-size: 11px;
+      color: var(--tg-text);
+      max-height: 240px;
+      overflow: auto;
+      white-space: pre-wrap;
+      margin: 0 0 12px;
+    }