@profoundlogic/coderflow-server 0.2.1 → 0.2.4

package/dist/web-ui/public/environments.css

@@ -35,6 +35,29 @@
   margin-right: 6px;
 }
 
+.repo-auth-mode-badge {
+  margin-left: 6px;
+  padding: 2px 8px;
+  border-radius: 999px;
+  font-size: 11px;
+  font-weight: 600;
+  line-height: 1.3;
+  letter-spacing: 0.01em;
+  border: 1px solid transparent;
+}
+
+.repo-auth-mode-badge.auth-local {
+  background: rgba(100, 116, 139, 0.12);
+  border-color: rgba(100, 116, 139, 0.35);
+  color: var(--color-text-muted);
+}
+
+.repo-auth-mode-badge.auth-provider {
+  background: rgba(16, 185, 129, 0.12);
+  border-color: rgba(16, 185, 129, 0.35);
+  color: #0f766e;
+}
+
 /* ============================================================
    ENVIRONMENT TABS
    ============================================================ */
@@ -1776,11 +1799,12 @@ code {
   list-style: none;
   padding: 0;
   margin: 0;
-  max-height: 200px;
+  max-height: 60vh;
+  overflow-x: hidden;
   overflow-y: auto;
 }
 
-.modified-files-list li {
+.modified-files-list > li.changed-file-item {
   padding: 8px 12px;
   background: var(--color-surface-muted);
   border-radius: var(--radius-small);
@@ -1790,12 +1814,17 @@ code {
   margin-bottom: 6px;
 }
 
-.modified-files-list li::before {
+.modified-files-list > li.changed-file-item::before {
   content: '●';
   color: var(--color-warning);
   margin-right: 8px;
 }
 
+/* Hide the bullet when file is expanded to show diff */
+.modified-files-list > li.changed-file-item.diff-expanded::before {
+  color: var(--color-accent, #6366f1);
+}
+
 .checkbox-group {
   display: flex;
   flex-direction: column;
@@ -3940,3 +3969,144 @@ code {
   font-weight: 600;
   color: var(--color-text);
 }
+
+/* ============================================================
+   INLINE FILE DIFFS IN MODALS
+   ============================================================ */
+
+/* Prevent horizontal overflow on modals with inline diffs */
+#uncommitted-changes-modal .modal-content,
+#commit-modal .modal-content,
+#discard-modal .modal-content {
+  overflow: hidden;
+  max-width: 750px;
+}
+
+#uncommitted-changes-modal .modal-body,
+#commit-modal .modal-body,
+#discard-modal .modal-body {
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+/* Clickable changed files */
+.changed-file-clickable {
+  cursor: pointer;
+  transition: background 0.15s ease;
+  border-radius: var(--radius-small, 4px);
+}
+
+.changed-file-clickable:hover {
+  background: rgba(99, 102, 241, 0.08);
+}
+
+.changed-file-clickable.diff-expanded {
+  background: rgba(99, 102, 241, 0.1);
+  border-left: 3px solid var(--color-accent, #6366f1);
+  font-weight: 600;
+}
+
+/* Inline diff panel below a file in the list */
+.inline-file-diff {
+  list-style: none;
+  padding: 0;
+  margin: 4px 0 8px 0;
+  border-radius: var(--radius-small, 4px);
+  overflow: hidden;
+  background: none;
+}
+
+.inline-file-diff::before {
+  content: none;
+}
+
+/* Hide the redundant file header - filename is already shown in the list item */
+.inline-file-diff .file-diff-header {
+  display: none;
+}
+
+/* Always show diff content in inline context (header with toggle is hidden) */
+.inline-file-diff .file-diff-content.collapsed {
+  max-height: none;
+  overflow: auto;
+}
+
+.inline-file-diff .file-diff {
+  margin-top: 0;
+  border-radius: var(--radius-small, 4px);
+  border: 1px solid var(--color-border, #e2e8f0);
+  overflow: hidden;
+}
+
+.inline-file-diff .file-diff-content {
+  max-height: 350px;
+  overflow: auto;
+}
+
+/* Ensure diff content doesn't cause horizontal overflow on the modal */
+.inline-file-diff .diff-line {
+  min-width: 0;
+}
+
+.inline-file-diff .diff-line-content {
+  overflow-wrap: break-word;
+  word-break: break-all;
+  white-space: pre-wrap;
+}
+
+.inline-file-diff-loading {
+  padding: 12px;
+  color: var(--color-text-muted);
+  font-style: italic;
+  font-size: 13px;
+  background: none;
+}
+
+.inline-file-diff-loading::before {
+  content: none;
+}
+
+.inline-diff-empty {
+  padding: 12px;
+  color: var(--color-text-muted);
+  font-style: italic;
+  font-size: 13px;
+  background: var(--color-surface-muted, #f5f5f5);
+  border-radius: var(--radius-small, 4px);
+}
+
+/* File status badge (from git-history) */
+.file-status-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  border-radius: 4px;
+  font-size: 12px;
+  font-weight: 700;
+  flex-shrink: 0;
+  transition: transform 0.15s ease;
+}
+
+.file-diff-header:hover .file-status-badge {
+  transform: scale(1.1);
+}
+
+.file-status-badge.added {
+  background: linear-gradient(135deg, rgba(34, 197, 94, 0.2) 0%, rgba(34, 197, 94, 0.1) 100%);
+  color: var(--color-success);
+  border: 1px solid rgba(34, 197, 94, 0.25);
+}
+
+.file-status-badge.modified {
+  background: linear-gradient(135deg, rgba(251, 191, 36, 0.2) 0%, rgba(251, 191, 36, 0.1) 100%);
+  color: #f59e0b;
+  border: 1px solid rgba(251, 191, 36, 0.25);
+}
+
+.file-status-badge.deleted {
+  background: linear-gradient(135deg, rgba(239, 68, 68, 0.2) 0%, rgba(239, 68, 68, 0.1) 100%);
+  color: var(--color-danger);
+  border: 1px solid rgba(239, 68, 68, 0.25);
+}

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

@@ -23,14 +23,17 @@
     })();
   </script>
   <link rel="stylesheet" href="styles.css?v=84">
-  <link rel="stylesheet" href="environments.css?v=15">
+  <link rel="stylesheet" href="environments.css?v=17">
+  <!-- Syntax highlighting for inline diffs -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css">
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
   <!-- Markdown editor dependencies -->
   <script src="https://cdn.jsdelivr.net/npm/marked@11.1.1/marked.min.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/turndown@7.1.2/dist/turndown.js"></script>
   <script type="module" src="markdown-editor.js?v=1"></script>
   <script src="markdown-file-editor.js?v=1"></script>
   <script type="module" src="app.js?v=66"></script>
-  <script type="module" src="environments.js?v=43"></script>
+  <script type="module" src="environments.js?v=45"></script>
   <!-- Dev QA shortcut: Ctrl+Shift+Q to launch current page in QA mode -->
 </head>
 <body>
@@ -117,6 +120,7 @@
             <span id="repo-status-icon">⏳</span>
             <span id="repo-status-text">Loading...</span>
             <span id="repo-branch-text" class="repo-branch"></span>
+            <span id="repo-auth-mode-badge" class="repo-auth-mode-badge" hidden></span>
           </div>
           <button class="btn-secondary btn-small" id="save-btn" title="Save changes to files" disabled>
             <span>💾</span> Save
@@ -426,14 +430,15 @@
               </label>
             </div>
             <div class="card-body" id="server-config" hidden>
-              <div class="form-single-column">
+              <div class="form-single-column" style="max-width: none;">
                 <div class="form-row">
                   <label for="server-name">Server Name</label>
                   <input type="text" id="server-name" class="form-input">
                 </div>
                 <div class="form-row">
-                  <label for="server-command">Start Command</label>
-                  <input type="text" id="server-command" class="form-input code-font" placeholder="Optional - e.g., npm start">
+                  <label for="server-command">Start Command(s)</label>
+                  <div id="server-command-editor" style="height: 100px; border: 1px solid var(--color-border); border-radius: 4px;"></div>
+                  <small class="form-hint">Shell commands to start the application server. Use multiple lines for complex startup sequences.</small>
                 </div>
                 <div class="form-row">
                   <label for="server-proxy">Proxy URL</label>
@@ -854,7 +859,7 @@
     <!-- Commit Modal -->
     <div id="commit-modal" class="modal" hidden>
       <div class="modal-overlay"></div>
-      <div class="modal-content">
+      <div class="modal-content modal-large">
         <div class="modal-header">
           <h2>Commit Changes</h2>
           <button type="button" class="modal-close" aria-label="Close">&times;</button>
@@ -897,13 +902,13 @@
     <!-- Uncommitted Changes Modal -->
     <div id="uncommitted-changes-modal" class="modal" hidden>
       <div class="modal-overlay"></div>
-      <div class="modal-content">
+      <div class="modal-content modal-large">
         <div class="modal-header">
           <h2>Uncommitted Changes</h2>
           <button type="button" class="modal-close" aria-label="Close">&times;</button>
         </div>
         <div class="modal-body">
-          <p class="text-muted" style="margin-bottom: 12px;">The following files have uncommitted changes:</p>
+          <p class="text-muted" style="margin-bottom: 12px;">The following files have uncommitted changes. Click a file to view its diff.</p>
           <ul id="uncommitted-files-list" class="modified-files-list"></ul>
         </div>
         <div class="modal-actions">
@@ -915,7 +920,7 @@
     <!-- Discard Changes Modal -->
     <div id="discard-modal" class="modal" hidden>
       <div class="modal-overlay"></div>
-      <div class="modal-content">
+      <div class="modal-content modal-large">
         <div class="modal-header">
           <h2>⚠️ Discard Changes</h2>
           <button type="button" class="modal-close" aria-label="Close">&times;</button>
@@ -1095,6 +1100,14 @@
                 <label>Repository <span class="required">*</span></label>
                 <div id="new-env-repo-autocomplete-container"></div>
               </div>
+              <div class="form-row" style="margin-top: 16px;">
+                <label for="new-env-repo-credential-mode">Credential Mode</label>
+                <select id="new-env-repo-credential-mode" class="form-input">
+                  <option value="app" selected>App Credentials</option>
+                  <option value="user">User Credentials</option>
+                </select>
+                <small class="form-hint">For tasks and deployments. App: app/bot identity. User: personal Git account (requires connection).</small>
+              </div>
             </div>
 
             <div class="form-row">
@@ -1258,6 +1271,14 @@
                 <label for="new-repo-from-provider">Repository</label>
                 <div id="repo-autocomplete-container"></div>
               </div>
+              <div class="form-row" style="margin-top: 16px;">
+                <label for="new-repo-credential-mode">Credential Mode</label>
+                <select id="new-repo-credential-mode" class="form-input">
+                  <option value="app" selected>App Credentials</option>
+                  <option value="user">User Credentials</option>
+                </select>
+                <small class="form-hint">For tasks and deployments. App: app/bot identity. User: personal Git account (requires connection).</small>
+              </div>
             </div>
 
             <!-- Repository URL (shown when "Enter URL manually" is selected) -->