@profoundlogic/coderflow-server 0.2.3 → 0.2.5

package/dist/web-ui/public/task.html

@@ -177,6 +177,13 @@
                 </svg>
                 <span class="option-text">Resubmit Task...</span>
               </button>
+              <button class="dropdown-item" id="more-save-as-objective" data-action="save-as-objective">
+                <svg class="option-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                  <circle cx="12" cy="12" r="10"></circle>
+                  <circle cx="12" cy="12" r="3"></circle>
+                </svg>
+                <span class="option-text">Save as Objective...</span>
+              </button>
               <button class="dropdown-item" id="more-pull-changes" data-action="pull-changes">
                 <svg class="option-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                   <path d="M12 5v14"></path>
@@ -1128,6 +1135,101 @@
     </div>
   </div>
 
+  <!-- Save as Objective Modal -->
+  <div id="save-as-objective-modal" class="modal" hidden>
+    <div class="modal-overlay"></div>
+    <div class="modal-content">
+      <div class="modal-header">
+        <h2>Save as Objective</h2>
+        <button class="modal-close" id="close-save-as-objective-modal">&times;</button>
+      </div>
+      <div class="modal-body">
+        <div class="modal-section">
+          <p class="field-hint">Create a reusable objective from this task's configuration.</p>
+        </div>
+
+        <!-- Name Field -->
+        <div class="modal-section">
+          <label for="save-objective-name" class="field-label" style="display: block; margin-bottom: 6px; font-size: 13px; color: var(--color-text-secondary);">Name</label>
+          <input type="text" id="save-objective-name" class="text-input" placeholder="Objective name" style="width: 100%; padding: 8px 12px; border: 1px solid var(--color-border); border-radius: var(--radius-small); background: var(--color-bg-secondary); color: var(--color-text); font-size: 14px;">
+        </div>
+
+        <!-- Environment (read-only display) -->
+        <div class="modal-section" id="save-objective-env-section">
+          <label class="field-label" style="display: block; margin-bottom: 6px; font-size: 13px; color: var(--color-text-secondary);">Environment</label>
+          <div id="save-objective-environment" style="padding: 8px 12px; background: var(--color-bg-tertiary); border-radius: var(--radius-small); font-size: 14px; color: var(--color-text-secondary);"></div>
+        </div>
+
+        <!-- Agent Selection -->
+        <div class="modal-section">
+          <label class="field-label" style="display: block; margin-bottom: 6px; font-size: 13px; color: var(--color-text-secondary);">Agents</label>
+          <div style="display: flex; align-items: center; gap: 8px;">
+            <div class="agent-selector" role="group" aria-label="Agent selection" id="save-objective-agent-selector">
+              <div class="agent-card" data-agent="claude" data-count="0">
+                <button type="button" class="agent-btn-decrement" data-counter="down" aria-label="Decrease Claude count" title="Remove Claude">&#8722;</button>
+                <div class="agent-icon" role="button" tabindex="0" aria-label="Claude" title="Claude (click to add, right-click to remove)">
+                  <svg viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+                    <path d="m3.127 10.604 3.135-1.76.053-.153-.053-.085H6.11l-.525-.032-1.791-.048-1.554-.065-1.505-.08-.38-.081L0 7.832l.036-.234.32-.214.455.04 1.009.069 1.513.105 1.097.064 1.626.17h.259l.036-.105-.089-.065-.068-.064-1.566-1.062-1.695-1.121-.887-.646-.48-.327-.243-.306-.104-.67.435-.48.585.04.15.04.593.456 1.267.981 1.654 1.218.242.202.097-.068.012-.049-.109-.181-.9-1.626-.96-1.655-.428-.686-.113-.411a2 2 0 0 1-.068-.484l.496-.674L4.446 0l.662.089.279.242.411.94.666 1.48 1.033 2.014.302.597.162.553.06.17h.105v-.097l.085-1.134.157-1.392.154-1.792.052-.504.25-.605.497-.327.387.186.319.456-.045.294-.19 1.23-.37 1.93-.243 1.29h.142l.161-.16.654-.868 1.097-1.372.484-.545.565-.601.363-.287h.686l.505.751-.226.775-.707.895-.585.759-.839 1.13-.524.904.048.072.125-.012 1.897-.403 1.024-.186 1.223-.21.553.258.06.263-.218.536-1.307.323-1.533.307-2.284.54-.028.02.032.04 1.029.098.44.024h1.077l2.005.15.525.346.315.424-.053.323-.807.411-3.631-.863-.872-.218h-.12v.073l.726.71 1.331 1.202 1.667 1.55.084.383-.214.302-.226-.032-1.464-1.101-.565-.497-1.28-1.077h-.084v.113l.295.432 1.557 2.34.08.718-.112.234-.404.141-.444-.08-.911-1.28-.94-1.44-.759-1.291-.093.053-.448 4.821-.21.246-.484.186-.403-.307-.214-.496.214-.98.258-1.28.21-1.016.19-1.263.112-.42-.008-.028-.092.012-.953 1.307-1.448 1.957-1.146 1.227-.274.109-.477-.247.045-.44.266-.39 1.586-2.018.956-1.25.617-.723-.004-.105h-.036l-4.212 4.212z"/>
+                  </svg>
+                </div>
+                <button type="button" class="agent-btn-increment" data-counter="up" aria-label="Increase Claude count" title="Add Claude">+</button>
+                <div class="agent-count-badge" id="save-objective-claude-count-display">0</div>
+                <input type="number" min="0" max="5" step="1" id="save-objective-claude-count" value="0" hidden readonly aria-label="Number of Claude agents">
+              </div>
+              <div class="agent-card" data-agent="codex" data-count="0">
+                <button type="button" class="agent-btn-decrement" data-counter="down" aria-label="Decrease Codex count" title="Remove Codex">&#8722;</button>
+                <div class="agent-icon" role="button" tabindex="0" aria-label="Codex" title="Codex (click to add, right-click to remove)">
+                  <svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M22.2819 9.8211a5.9847 5.9847 0 0 0-.5157-4.9108 6.0462 6.0462 0 0 0-6.5098-2.9A6.0651 6.0651 0 0 0 4.9807 4.1818a5.9847 5.9847 0 0 0-3.9977 2.9 6.0462 6.0462 0 0 0 .7427 7.0966 5.98 5.98 0 0 0 .511 4.9107 6.051 6.051 0 0 0 6.5146 2.9001A5.9847 5.9847 0 0 0 13.2599 24a6.0557 6.0557 0 0 0 5.7718-4.2058 5.9894 5.9894 0 0 0 3.9977-2.9001 6.0557 6.0557 0 0 0-.7475-7.0729zm-9.022 12.6081a4.4755 4.4755 0 0 1-2.8764-1.0408l.1419-.0804 4.7783-2.7582a.7948.7948 0 0 0 .3927-.6813v-6.7369l2.02 1.1686a.071.071 0 0 1 .038.052v5.5826a4.504 4.504 0 0 1-4.4945 4.4944zm-9.6607-4.1254a4.4708 4.4708 0 0 1-.5346-3.0137l.142.0852 4.783 2.7582a.7712.7712 0 0 0 .7806 0l5.8428-3.3685v2.3324a.0804.0804 0 0 1-.0332.0615L9.74 19.9502a4.4992 4.4992 0 0 1-6.1408-1.6464zM2.3408 7.8956a4.485 4.485 0 0 1 2.3655-1.9728V11.6a.7664.7664 0 0 0 .3879.6765l5.8144 3.3543-2.0201 1.1685a.0757.0757 0 0 1-.071 0l-4.8303-2.7865A4.504 4.504 0 0 1 2.3408 7.872zm16.5963 3.8558L13.1038 8.364 15.1192 7.2a.0757.0757 0 0 1 .071 0l4.8303 2.7913a4.4944 4.4944 0 0 1-.6765 8.1042v-5.6772a.79.79 0 0 0-.407-.667zm2.0107-3.0231l-.142-.0852-4.7735-2.7818a.7759.7759 0 0 0-.7854 0L9.409 9.2297V6.8974a.0662.0662 0 0 1 .0284-.0615l4.8303-2.7866a4.4992 4.4992 0 0 1 6.6802 4.66zM8.3065 12.863l-2.02-1.1638a.0804.0804 0 0 1-.038-.0567V6.0742a4.4992 4.4992 0 0 1 7.3757-3.4537l-.142.0805L8.704 5.459a.7948.7948 0 0 0-.3927.6813zm1.0976-2.3654l2.602-1.4998 2.6069 1.4998v2.9994l-2.5974 1.4997-2.6067-1.4997Z"/>
+                  </svg>
+                </div>
+                <button type="button" class="agent-btn-increment" data-counter="up" aria-label="Increase Codex count" title="Add Codex">+</button>
+                <div class="agent-count-badge" id="save-objective-codex-count-display">0</div>
+                <input type="number" min="0" max="5" step="1" id="save-objective-codex-count" value="0" hidden readonly aria-label="Number of Codex agents">
+              </div>
+              <div class="agent-card" data-agent="gemini" data-count="0">
+                <button type="button" class="agent-btn-decrement" data-counter="down" aria-label="Decrease Gemini count" title="Remove Gemini">&#8722;</button>
+                <div class="agent-icon" role="button" tabindex="0" aria-label="Gemini" title="Gemini (click to add, right-click to remove)">
+                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                    <path d="M12 2L9.09 9.09 2 12l7.09 2.91L12 22l2.91-7.09L22 12l-7.09-2.91z"></path>
+                  </svg>
+                </div>
+                <button type="button" class="agent-btn-increment" data-counter="up" aria-label="Increase Gemini count" title="Add Gemini">+</button>
+                <div class="agent-count-badge" id="save-objective-gemini-count-display">0</div>
+                <input type="number" min="0" max="5" step="1" id="save-objective-gemini-count" value="0" hidden readonly aria-label="Number of Gemini agents">
+              </div>
+            </div>
+            <div class="agent-hint" id="save-objective-agent-hint" data-visible="true">
+              <span class="agent-hint-arrow">&larr;</span>
+              <span class="agent-hint-text">Select Agents</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- Instructions Section -->
+        <div class="modal-section">
+          <label for="save-objective-instructions" class="field-label" style="display: block; margin-bottom: 6px; font-size: 13px; color: var(--color-text-secondary);">Instructions</label>
+          <div class="resubmit-markdown-editor-container">
+            <textarea
+              id="save-objective-instructions"
+              class="resubmit-instructions-textarea"
+              placeholder="Enter instructions for this objective..."
+              rows="3"></textarea>
+          </div>
+        </div>
+
+        <!-- Error Message Container -->
+        <div class="modal-section" id="save-objective-error-section" hidden>
+          <div id="save-objective-error-message" style="color: var(--color-danger); font-size: 13px; padding: 8px 12px; background: rgba(229,83,104,0.08); border-radius: 4px; border-left: 3px solid var(--color-danger);"></div>
+        </div>
+      </div>
+      <div class="modal-footer">
+        <button class="btn-ghost" id="cancel-save-as-objective">Cancel</button>
+        <button class="btn-primary" id="confirm-save-as-objective">Save Objective</button>
+      </div>
+    </div>
+  </div>
+
   <!-- Follow-Up History Modal (Read-Only) -->
   <div id="follow-up-history-modal" class="modal" hidden>
     <div class="modal-overlay"></div>