npm - @profoundlogic/coderflow-server - Versions diffs - 0.2.1 - Mend

@profoundlogic/coderflow-server 0.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (202) hide show

package/LICENSE.txt +322 -0
package/README.md +158 -0
package/dist/LICENSE.txt +322 -0
package/dist/README.md +158 -0
package/dist/base-image/Dockerfile +184 -0
package/dist/base-image/agent-wrapper.sh +143 -0
package/dist/base-image/apply-local-state.sh +357 -0
package/dist/base-image/coder-git-credential-helper +307 -0
package/dist/base-image/entrypoint.sh +942 -0
package/dist/base-image/ssh_config_template +41 -0
package/dist/base-image/start-code-server.sh +76 -0
package/dist/base-image/sync-repos.sh +170 -0
package/dist/base-image/vscode-extensions.txt +10 -0
package/dist/base-image/vscode-settings.json +41 -0
package/dist/coder-server.js +2 -0
package/dist/config/cli-models.json +45 -0
package/dist/config/imported-skills.schema.json +83 -0
package/dist/config/skill-catalog.json +18 -0
package/dist/config/skill-catalog.schema.json +140 -0
package/dist/config.js +1 -0
package/dist/examples/oidc.json.example +11 -0
package/dist/lib/agent-keepalive.js +1 -0
package/dist/lib/api-keys.js +1 -0
package/dist/lib/apiKeys.js +1 -0
package/dist/lib/auto-judge.js +1 -0
package/dist/lib/basic-auth.js +1 -0
package/dist/lib/build-history.js +1 -0
package/dist/lib/build-output-service.js +1 -0
package/dist/lib/build-scheduler.js +1 -0
package/dist/lib/build-service.js +1 -0
package/dist/lib/claude-oauth-refresh.js +1 -0
package/dist/lib/cli/build.js +1 -0
package/dist/lib/cli/config-command.js +1 -0
package/dist/lib/cli/config.js +1 -0
package/dist/lib/cli/create-user.js +1 -0
package/dist/lib/cli/init.js +1 -0
package/dist/lib/cli/jira.js +1 -0
package/dist/lib/cli/license.js +1 -0
package/dist/lib/cli/server-manager.js +1 -0
package/dist/lib/container-tokens.js +1 -0
package/dist/lib/data-dir.js +1 -0
package/dist/lib/deployment-history.js +1 -0
package/dist/lib/deployment-service.js +1 -0
package/dist/lib/docker-utils.js +1 -0
package/dist/lib/email.js +1 -0
package/dist/lib/emailTemplates.js +1 -0
package/dist/lib/entitlement.js +1 -0
package/dist/lib/fetch-utils.js +1 -0
package/dist/lib/git-provider-service.js +1 -0
package/dist/lib/git-provider-setup/assets/coderflow_github_app.png +0 -0
package/dist/lib/git-provider-setup/github-setup-handler.js +1 -0
package/dist/lib/git-provider-setup/index.js +1 -0
package/dist/lib/git-provider-setup/setup-factory.js +1 -0
package/dist/lib/git-provider-setup/setup-interface.js +1 -0
package/dist/lib/git-providers/azure-devops-provider.js +1 -0
package/dist/lib/git-providers/github-app-provider.js +1 -0
package/dist/lib/git-providers/index.js +1 -0
package/dist/lib/git-providers/provider-factory.js +1 -0
package/dist/lib/git-providers/provider-interface.js +1 -0
package/dist/lib/jira-client.js +1 -0
package/dist/lib/logger.js +1 -0
package/dist/lib/model-fetcher.js +1 -0
package/dist/lib/notifications.js +1 -0
package/dist/lib/oidc-auth.js +1 -0
package/dist/lib/oidc-device-flow.js +1 -0
package/dist/lib/passwordTokens.js +1 -0
package/dist/lib/pin-cascade.js +1 -0
package/dist/lib/provider-accounts.js +1 -0
package/dist/lib/provider-oauth.js +1 -0
package/dist/lib/provider-profile.js +1 -0
package/dist/lib/provider-token-refresh.js +1 -0
package/dist/lib/roles.js +1 -0
package/dist/lib/secrets.js +1 -0
package/dist/lib/state-capture.js +1 -0
package/dist/lib/static-files.js +1 -0
package/dist/lib/task-name-generator.js +1 -0
package/dist/lib/users.js +1 -0
package/dist/middleware/requireAuth.js +1 -0
package/dist/middleware/requireInit.js +1 -0
package/dist/middleware/requirePermission.js +1 -0
package/dist/package-lock.json +4151 -0
package/dist/package.json +50 -0
package/dist/routes/apiKeys.js +1 -0
package/dist/routes/auth-oidc.js +1 -0
package/dist/routes/auth.js +1 -0
package/dist/routes/build.js +1 -0
package/dist/routes/containers.js +1 -0
package/dist/routes/deploy-task.js +1 -0
package/dist/routes/environment-management.js +1 -0
package/dist/routes/environments.js +1 -0
package/dist/routes/external-skills.js +1 -0
package/dist/routes/git-credentials.js +1 -0
package/dist/routes/git-provider-setup.js +1 -0
package/dist/routes/health.js +1 -0
package/dist/routes/jira.js +1 -0
package/dist/routes/objective-management.js +1 -0
package/dist/routes/password.js +1 -0
package/dist/routes/prompt.js +1 -0
package/dist/routes/provider-auth.js +1 -0
package/dist/routes/qa.js +1 -0
package/dist/routes/settings.js +1 -0
package/dist/routes/skill-management.js +1 -0
package/dist/routes/skills.js +1 -0
package/dist/routes/tasks.js +2 -0
package/dist/routes/templates.js +1 -0
package/dist/routes/test-task.js +1 -0
package/dist/routes/test.js +1 -0
package/dist/routes/users.js +1 -0
package/dist/routes/visualizations.js +1 -0
package/dist/schemas/template-metadata.schema.json +178 -0
package/dist/scripts/create-user.js +2 -0
package/dist/shipped-skills/environment-instructions/SKILL.md +154 -0
package/dist/shipped-skills/environment-templates/SKILL.md +282 -0
package/dist/shipped-skills/objective-management/SKILL.md +238 -0
package/dist/shipped-skills/skill-editor/SKILL.md +326 -0
package/dist/start.js +2 -0
package/dist/web-ui/public/activity-detail-modal.js +1 -0
package/dist/web-ui/public/activity-feed.js +1 -0
package/dist/web-ui/public/activity-formatters.js +1 -0
package/dist/web-ui/public/agent-event-parser.js +1 -0
package/dist/web-ui/public/app.js +1 -0
package/dist/web-ui/public/approve-dialog.js +1 -0
package/dist/web-ui/public/coderflow-logo-reversed.svg +46 -0
package/dist/web-ui/public/coderflow-logo.svg +46 -0
package/dist/web-ui/public/comments-widget.js +1 -0
package/dist/web-ui/public/docs/.nojekyll +0 -0
package/dist/web-ui/public/docs/README.md +26 -0
package/dist/web-ui/public/docs/_sidebar.md +47 -0
package/dist/web-ui/public/docs/admin/ai-providers.md +132 -0
package/dist/web-ui/public/docs/admin/email-notifications.md +69 -0
package/dist/web-ui/public/docs/admin/environments.md +215 -0
package/dist/web-ui/public/docs/admin/git-providers.md +147 -0
package/dist/web-ui/public/docs/admin/installation.md +313 -0
package/dist/web-ui/public/docs/admin/skills.md +35 -0
package/dist/web-ui/public/docs/admin/sso.md +241 -0
package/dist/web-ui/public/docs/admin/users-and-roles.md +57 -0
package/dist/web-ui/public/docs/code/cli.md +102 -0
package/dist/web-ui/public/docs/code/files-and-editing.md +86 -0
package/dist/web-ui/public/docs/code/terminal-access.md +110 -0
package/dist/web-ui/public/docs/code/vscode-extension.md +58 -0
package/dist/web-ui/public/docs/getting-started/core-concepts.md +129 -0
package/dist/web-ui/public/docs/getting-started/overview.md +46 -0
package/dist/web-ui/public/docs/index.html +151 -0
package/dist/web-ui/public/docs/integrations/custom.md +58 -0
package/dist/web-ui/public/docs/integrations/ibmi/overview.md +58 -0
package/dist/web-ui/public/docs/integrations/overview.md +48 -0
package/dist/web-ui/public/docs/objectives/qa-mode.md +90 -0
package/dist/web-ui/public/docs/objectives/staged-tasks.md +60 -0
package/dist/web-ui/public/docs/objectives/working-with-objectives.md +102 -0
package/dist/web-ui/public/docs/tasks/approval-and-deployment.md +83 -0
package/dist/web-ui/public/docs/tasks/creating-tasks.md +111 -0
package/dist/web-ui/public/docs/tasks/judging.md +114 -0
package/dist/web-ui/public/docs/tasks/providing-feedback.md +41 -0
package/dist/web-ui/public/docs/tasks/task-groups.md +73 -0
package/dist/web-ui/public/docs/tasks/winner-selection.md +75 -0
package/dist/web-ui/public/docs/templates/batch-processing.md +152 -0
package/dist/web-ui/public/docs/templates/task-templates.md +44 -0
package/dist/web-ui/public/docs/templates/template-examples.md +93 -0
package/dist/web-ui/public/docs/testing/profound-automated-testing.md +77 -0
package/dist/web-ui/public/docs/testing/task-visualizations.md +42 -0
package/dist/web-ui/public/docs/testing/testing-menu.md +118 -0
package/dist/web-ui/public/environments.css +3942 -0
package/dist/web-ui/public/environments.html +1791 -0
package/dist/web-ui/public/environments.js +1 -0
package/dist/web-ui/public/favicon-16.png +0 -0
package/dist/web-ui/public/favicon-32.png +0 -0
package/dist/web-ui/public/favicon.ico +0 -0
package/dist/web-ui/public/feedback-widget.css +3133 -0
package/dist/web-ui/public/feedback-widget.js +1 -0
package/dist/web-ui/public/git-history.css +2663 -0
package/dist/web-ui/public/git-history.html +272 -0
package/dist/web-ui/public/git-history.js +1 -0
package/dist/web-ui/public/git-status.js +1 -0
package/dist/web-ui/public/index.html +1459 -0
package/dist/web-ui/public/index.js +1 -0
package/dist/web-ui/public/login.html +346 -0
package/dist/web-ui/public/login.js +1 -0
package/dist/web-ui/public/markdown-editor.js +1 -0
package/dist/web-ui/public/markdown-file-editor.js +1 -0
package/dist/web-ui/public/modal-maximize.js +1 -0
package/dist/web-ui/public/notifications.js +1 -0
package/dist/web-ui/public/server-health.js +1 -0
package/dist/web-ui/public/settings.css +761 -0
package/dist/web-ui/public/settings.html +1044 -0
package/dist/web-ui/public/settings.js +1 -0
package/dist/web-ui/public/setup-password.html +355 -0
package/dist/web-ui/public/setup-password.js +1 -0
package/dist/web-ui/public/skills.css +1949 -0
package/dist/web-ui/public/skills.html +820 -0
package/dist/web-ui/public/skills.js +1 -0
package/dist/web-ui/public/sse-client.js +1 -0
package/dist/web-ui/public/sse-shared-worker.js +1 -0
package/dist/web-ui/public/styles.css +18614 -0
package/dist/web-ui/public/task.html +1779 -0
package/dist/web-ui/public/task.js +1 -0
package/dist/web-ui/public/terminal.html +45 -0
package/dist/web-ui/public/terminal.js +1 -0
package/dist/web-ui/public/theme.js +1 -0
package/dist/web-ui/public/users.html +298 -0
package/dist/web-ui/public/users.js +1 -0
package/dist/web-ui/public/variant-grouping.js +1 -0
package/package.json +63 -0

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

@@ -0,0 +1,1791 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Environment Management - CoderFlow</title>
+  <link rel="icon" href="/favicon.svg" type="image/svg+xml">
+  <link rel="icon" href="/favicon-32.png" type="image/png" sizes="32x32">
+  <link rel="icon" href="/favicon-16.png" type="image/png" sizes="16x16">
+  <link rel="icon" href="/favicon.ico">
+  <script>
+    (() => {
+      const key = 'profound-coder-theme';
+      try {
+        const stored = localStorage.getItem(key);
+        const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+        const theme = stored === 'dark' || stored === 'light' ? stored : (prefersDark ? 'dark' : 'light');
+        document.documentElement.dataset.theme = theme;
+        document.documentElement.style.colorScheme = theme === 'dark' ? 'dark' : 'light';
+      } catch (error) {
+        document.documentElement.dataset.theme = 'light';
+      }
+    })();
+  </script>
+  <link rel="stylesheet" href="styles.css?v=84">
+  <link rel="stylesheet" href="environments.css?v=15">
+  <!-- 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>
+  <!-- Dev QA shortcut: Ctrl+Shift+Q to launch current page in QA mode -->
+</head>
+<body>
+  <main class="task-detail">
+    <div class="task-hero">
+      <div class="hero-top">
+        <nav class="breadcrumb" aria-label="Breadcrumb">
+          <a class="breadcrumb-link" href="index.html">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+              <path d="M3 11.5L12 4l9 7.5"></path>
+              <path d="M5 10.5V20h5v-5h4v5h5v-9.5"></path>
+            </svg>
+            <span>Home</span>
+          </a>
+          <span class="breadcrumb-separator" aria-hidden="true">/</span>
+          <span class="breadcrumb-current">Environments</span>
+        </nav>
+        <span class="task-context">Administration</span>
+        <!-- Admin Menu (gear icon) -->
+        <div class="admin-menu-container" id="admin-menu-container" hidden>
+          <button class="btn-icon-admin" id="admin-menu-btn" title="Admin">
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <circle cx="12" cy="12" r="3"></circle>
+              <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path>
+            </svg>
+          </button>
+          <div class="dropdown-menu admin-dropdown" id="admin-menu" hidden>
+            <button type="button" class="dropdown-item admin-menu-item" onclick="window.location.href='users.html'">
+              <svg class="option-icon icon-users" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
+                <circle cx="9" cy="7" r="4"></circle>
+                <path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
+                <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
+              </svg>
+              <span class="option-text">Users</span>
+            </button>
+            <button type="button" class="dropdown-item admin-menu-item" onclick="window.location.href='skills.html'">
+              <svg class="option-icon icon-skills" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"></path>
+              </svg>
+              <span class="option-text">Skills</span>
+            </button>
+            <button type="button" class="dropdown-item admin-menu-item" onclick="window.location.href='settings.html'">
+              <svg class="option-icon icon-server-settings" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <line x1="4" y1="21" x2="4" y2="14"></line>
+                <line x1="4" y1="10" x2="4" y2="3"></line>
+                <line x1="12" y1="21" x2="12" y2="12"></line>
+                <line x1="12" y1="8" x2="12" y2="3"></line>
+                <line x1="20" y1="21" x2="20" y2="16"></line>
+                <line x1="20" y1="12" x2="20" y2="3"></line>
+                <line x1="1" y1="14" x2="7" y2="14"></line>
+                <line x1="9" y1="8" x2="15" y2="8"></line>
+                <line x1="17" y1="16" x2="23" y2="16"></line>
+              </svg>
+              <span class="option-text">Server Settings</span>
+            </button>
+            <button type="button" class="dropdown-item admin-menu-item" id="server-health-btn">
+              <svg class="option-icon icon-health" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M22 12h-4l-3 9L9 3l-3 9H2"></path>
+              </svg>
+              <span class="option-text">Server Health</span>
+            </button>
+            <button type="button" class="dropdown-item admin-menu-item" onclick="window.location.href='git-history.html'">
+              <svg class="option-icon icon-git-history" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <circle cx="6" cy="6" r="2"></circle>
+                <circle cx="6" cy="18" r="2"></circle>
+                <circle cx="18" cy="12" r="2"></circle>
+                <path d="M6 8v8"></path>
+                <path d="M6 12h10"></path>
+              </svg>
+              <span class="option-text">Git History</span>
+            </button>
+          </div>
+        </div>
+        <div id="theme-toggle-container"></div>
+      </div>
+      <div class="status-hero">
+        <div class="status-copy">
+          <h1>Environment Management</h1>
+          <p class="task-subtitle">Manage development environments and configurations</p>
+        </div>
+        <div class="status-actions">
+          <div id="repo-status" class="repo-status-indicator" title="Repository git status">
+            <span id="repo-status-icon">⏳</span>
+            <span id="repo-status-text">Loading...</span>
+            <span id="repo-branch-text" class="repo-branch"></span>
+          </div>
+          <button class="btn-secondary btn-small" id="save-btn" title="Save changes to files" disabled>
+            <span>💾</span> Save
+          </button>
+          <div class="dropdown-container">
+            <button class="btn-ghost btn-small" id="actions-menu-btn" title="Additional actions">
+              Actions ▼
+            </button>
+            <div class="dropdown-menu" id="actions-menu" hidden>
+              <button class="dropdown-item" id="repo-pull-btn">
+                <span>🔄</span> Pull from Git
+              </button>
+              <button class="dropdown-item" id="repo-commit-btn" disabled>
+                <span>📤</span> Commit & Push...
+              </button>
+              <button class="dropdown-item" id="repo-discard-btn" disabled>
+                <span>⚠️</span> Discard Changes...
+              </button>
+              <div class="dropdown-divider"></div>
+              <button class="dropdown-item" id="new-env-btn">
+                <span>+</span> New Environment...
+              </button>
+              <button class="dropdown-item" id="delete-env-btn">
+                <span>🗑</span> Delete Environment
+              </button>
+              <div class="dropdown-divider"></div>
+              <button class="dropdown-item" id="build-base-image-btn">
+                <span>📦</span> Build Base Image...
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- Environment Tabs -->
+    <section class="env-tabs-container">
+      <button class="env-tabs-scroll-btn env-tabs-scroll-left" id="env-tabs-scroll-left" aria-label="Scroll tabs left">
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <polyline points="15 18 9 12 15 6"></polyline>
+        </svg>
+      </button>
+      <div class="env-tabs-wrapper" id="env-tabs-wrapper">
+        <div id="env-tabs" class="env-tabs">
+          <!-- Environment tabs will be populated here -->
+        </div>
+      </div>
+      <button class="env-tabs-scroll-btn env-tabs-scroll-right" id="env-tabs-scroll-right" aria-label="Scroll tabs right">
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <polyline points="9 18 15 12 9 6"></polyline>
+        </svg>
+      </button>
+    </section>
+    <!-- Environment Content -->
+    <div id="env-empty-state" class="empty-state-card">
+      <div class="empty-state-icon">🌍</div>
+      <h2>Select an Environment</h2>
+      <p>Choose an environment from the tabs above to view and manage its configuration</p>
+    </div>
+    <section id="env-details" class="env-details-section" hidden>
+      <!-- Environment Header -->
+      <div class="env-header-card">
+        <div class="env-header-content">
+          <div class="env-title-row">
+            <h2 class="env-title" id="env-name-display">-</h2>
+            <button class="env-rename-btn" id="env-rename-btn" title="Rename environment">
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path>
+                <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path>
+              </svg>
+            </button>
+          </div>
+          <p class="env-description-display" id="env-description-display"></p>
+        </div>
+      </div>
+      <!-- Navigation Tabs -->
+      <div class="content-nav-container">
+        <button class="content-nav-scroll-btn content-nav-scroll-left" id="content-nav-scroll-left" aria-label="Scroll tabs left">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <polyline points="15 18 9 12 15 6"></polyline>
+          </svg>
+        </button>
+        <nav class="content-nav" id="content-nav" role="tablist">
+          <button class="content-tab active" data-tab="overview" role="tab">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-right: 4px; vertical-align: text-bottom;">
+            <rect x="3" y="3" width="7" height="7"></rect>
+            <rect x="14" y="3" width="7" height="7"></rect>
+            <rect x="14" y="14" width="7" height="7"></rect>
+            <rect x="3" y="14" width="7" height="7"></rect>
+          </svg>
+          Overview
+        </button>
+        <button class="content-tab" data-tab="repos" role="tab">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-right: 4px; vertical-align: text-bottom;">
+            <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path>
+            <polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline>
+            <line x1="12" y1="22.08" x2="12" y2="12"></line>
+          </svg>
+          Repos
+        </button>
+        <button class="content-tab" data-tab="server" role="tab">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-right: 4px; vertical-align: text-bottom;">
+            <rect x="2" y="2" width="20" height="8" rx="2" ry="2"></rect>
+            <rect x="2" y="14" width="20" height="8" rx="2" ry="2"></rect>
+            <line x1="6" y1="6" x2="6.01" y2="6"></line>
+            <line x1="6" y1="18" x2="6.01" y2="18"></line>
+          </svg>
+          Server
+        </button>
+        <button class="content-tab" data-tab="agents" role="tab">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-right: 4px; vertical-align: text-bottom;">
+            <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
+            <polyline points="14 2 14 8 20 8"></polyline>
+            <line x1="16" y1="13" x2="8" y2="13"></line>
+            <line x1="16" y1="17" x2="8" y2="17"></line>
+            <polyline points="10 9 9 9 8 9"></polyline>
+          </svg>
+          Instructions
+        </button>
+        <!-- Files tab removed - content moved to Build tab -->
+        <button class="content-tab" data-tab="env-vars" role="tab">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-right: 4px; vertical-align: text-bottom;">
+            <rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
+            <path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
+          </svg>
+          Secrets
+        </button>
+        <button class="content-tab" data-tab="build" role="tab">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-right: 4px; vertical-align: text-bottom;">
+            <polyline points="21 8 21 21 3 21 3 8"></polyline>
+            <rect x="1" y="3" width="22" height="5"></rect>
+            <line x1="10" y1="12" x2="14" y2="12"></line>
+          </svg>
+          Build
+        </button>
+        <button class="content-tab" data-tab="deploy" role="tab">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-right: 4px; vertical-align: text-bottom;">
+              <polygon points="12 2 2 7 12 12 22 7 12 2"></polygon>
+              <polyline points="2 17 12 22 22 17"></polyline>
+              <polyline points="2 12 12 17 22 12"></polyline>
+          </svg>
+          Deploy
+        </button>
+        <button class="content-tab" data-tab="tests" role="tab">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-right: 4px; vertical-align: text-bottom;">
+            <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
+            <polyline points="22 4 12 14.01 9 11.01"></polyline>
+          </svg>
+          Tests
+        </button>
+        <button class="content-tab" data-tab="templates" role="tab">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-right: 4px; vertical-align: text-bottom;">
+            <path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path>
+            <rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect>
+          </svg>
+          Templates
+        </button>
+        </nav>
+        <button class="content-nav-scroll-btn content-nav-scroll-right" id="content-nav-scroll-right" aria-label="Scroll tabs right">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <polyline points="9 18 15 12 9 6"></polyline>
+          </svg>
+        </button>
+      </div>
+      <!-- Tab Content -->
+      <div class="tab-content-wrapper">
+        <!-- Overview Tab -->
+        <div id="tab-overview" class="tab-panel active" role="tabpanel">
+          <div class="content-card">
+            <div class="card-header">
+              <h3>Environment Information</h3>
+            </div>
+            <div class="card-body">
+              <div class="form-single-column">
+                <div class="form-row">
+                  <label for="env-description">Description</label>
+                  <input type="text" id="env-description" class="form-input" placeholder="Environment description">
+                </div>
+                <div class="form-row">
+                  <label for="env-default-agent">Default Agent</label>
+                  <div id="env-default-agent-wrapper"></div>
+                </div>
+                <div class="form-row">
+                  <label>Skills</label>
+                  <div class="skills-form-controls">
+                    <div class="skills-form-row">
+                      <div id="env-skills-chips" class="skills-chip-grid skills-chip-grid-inline"></div>
+                      <span id="env-skills-empty" class="skills-empty" hidden>No skills assigned.</span>
+                      <button class="skills-add-btn" id="env-skills-manage-btn" aria-label="Add skills" title="Add skills">
+                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                          <line x1="12" y1="5" x2="12" y2="19"></line>
+                          <line x1="5" y1="12" x2="19" y2="12"></line>
+                        </svg>
+                      </button>
+                    </div>
+                  </div>
+                </div>
+                <div class="form-row">
+                  <label for="env-image-name">Docker Image</label>
+                  <input type="text" id="env-image-name" class="form-input" placeholder="Image name">
+                </div>
+                <div class="form-row">
+                  <label for="env-timezone">Timezone</label>
+                  <input type="text" id="env-timezone" class="form-input" placeholder="e.g., America/New_York">
+                </div>
+                <div class="form-row">
+                  <label for="env-screen-render-url">Screen Render URL</label>
+                  <input type="text" id="env-screen-render-url" class="form-input code-font" placeholder="e.g., http://host:port/profoundui/genie">
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="content-card">
+            <div class="card-header">
+              <h3>README</h3>
+              <button class="btn-secondary btn-small" id="preview-readme-btn" onclick="toggleReadmePreview()">
+                <span>✏️</span> Edit
+              </button>
+            </div>
+            <div class="card-body">
+              <div id="readme-preview" class="markdown-preview-container">
+                <p class="text-muted">No README content yet.</p>
+              </div>
+              <div id="readme-editor" style="height: 400px; border: 1px solid var(--color-border);" hidden></div>
+            </div>
+          </div>
+          <div class="stats-grid">
+            <div class="stat-card clickable" onclick="switchTab('repos')" title="View repositories">
+              <div class="stat-icon">📦</div>
+              <div class="stat-content">
+                <div class="stat-value" id="stat-repos">-</div>
+                <div class="stat-label" id="stat-repos-label">Repos</div>
+              </div>
+            </div>
+            <div class="stat-card clickable" onclick="switchTab('tests')" title="View test commands">
+              <div class="stat-icon">✅</div>
+              <div class="stat-content">
+                <div class="stat-value" id="stat-tests">-</div>
+                <div class="stat-label" id="stat-tests-label">Test Commands</div>
+              </div>
+            </div>
+            <div class="stat-card clickable" onclick="switchTab('templates')" title="View templates">
+              <div class="stat-icon">📝</div>
+              <div class="stat-content">
+                <div class="stat-value" id="stat-templates">-</div>
+                <div class="stat-label" id="stat-templates-label">Templates</div>
+              </div>
+            </div>
+            <div class="stat-card clickable" onclick="switchTab('deploy')" title="View deployment profiles">
+              <div class="stat-icon stat-icon-svg">
+                <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                  <polygon points="12 2 2 7 12 12 22 7 12 2"></polygon>
+                  <polyline points="2 17 12 22 22 17"></polyline>
+                  <polyline points="2 12 12 17 22 12"></polyline>
+                </svg>
+              </div>
+              <div class="stat-content">
+                <div class="stat-value" id="stat-deploy-profiles">-</div>
+                <div class="stat-label" id="stat-deploy-profiles-label">Deploy Profiles</div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <!-- Repos Tab -->
+        <div id="tab-repos" class="tab-panel" role="tabpanel" hidden>
+          <div class="content-card repos-card">
+            <div class="repos-layout">
+              <div class="repos-sidebar">
+                <!-- Repository tabs will be populated here -->
+                <button class="repo-tab" data-repo="new" id="new-repo-tab">
+                  <span class="repo-icon">➕</span>
+                  <span>Add Repository</span>
+                </button>
+              </div>
+              <div class="repos-content">
+                <div class="repo-header">
+                  <h4 id="current-repo-name">Select a Repository</h4>
+                  <div class="repo-actions">
+                    <button class="btn-ghost btn-small" id="delete-repo-btn" hidden>
+                      <span>🗑</span> Remove
+                    </button>
+                  </div>
+                </div>
+                <div id="repo-details-container">
+                  <p class="text-muted">Select a repository from the sidebar to view details, or add a new one.</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <!-- Server Tab -->
+        <div id="tab-server" class="tab-panel" role="tabpanel" hidden>
+          <div class="content-card">
+            <div class="card-header">
+              <h3>App Server</h3>
+              <label class="toggle-switch">
+                <input type="checkbox" id="server-enabled">
+                <span class="toggle-slider"></span>
+              </label>
+            </div>
+            <div class="card-body" id="server-config" hidden>
+              <div class="form-single-column">
+                <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">
+                </div>
+                <div class="form-row">
+                  <label for="server-proxy">Proxy URL</label>
+                  <input type="text" id="server-proxy" class="form-input code-font" placeholder="Optional - e.g., http://host:port">
+                </div>
+                <div class="form-row">
+                  <label for="server-qa-url">QA URL</label>
+                  <input type="text" id="server-qa-url" class="form-input code-font" placeholder="e.g., http://host:port or {{origin}}">
+                  <small class="form-hint">Use <code>{{origin}}</code>, <code>{{host}}</code>, or <code>{{hostname}}</code> for dynamic resolution</small>
+                </div>
+              </div>
+              <div class="subsection">
+                <div class="subsection-header">
+                  <h4>Port-Specific QA URLs</h4>
+                  <button class="btn-secondary btn-small" id="add-port-qa-url-btn">+ Add Override</button>
+                </div>
+                <p class="text-muted" style="margin-top: 4px; margin-bottom: 12px;">Override the default QA URL for specific ports (e.g., port 3001 → https://production.example.com)</p>
+                <div id="port-qa-urls-list" class="config-list"></div>
+              </div>
+              <div class="subsection">
+                <h4>Basic Authentication</h4>
+                <p class="text-muted" style="margin-top: 4px; margin-bottom: 12px;">Load HTTP Basic credentials from secrets (must have <code>available_for: ['tasks']</code>)</p>
+                <div class="form-single-column">
+                  <div class="form-row">
+                    <label for="server-auth-user-property">User Secret Name</label>
+                    <input type="text" id="server-auth-user-property" class="form-input code-font" placeholder="Secret name for username - e.g., IBMI_USER">
+                  </div>
+                  <div class="form-row">
+                    <label for="server-auth-password-property">Password Secret Name</label>
+                    <input type="text" id="server-auth-password-property" class="form-input code-font" placeholder="Secret name for password - e.g., IBMI_PASSWORD">
+                  </div>
+                </div>
+              </div>
+              <div class="subsection">
+                <div class="subsection-header">
+                  <h4>Proxy Headers</h4>
+                  <button class="btn-secondary btn-small" id="add-proxy-header-btn">+ Add Header</button>
+                </div>
+                <div id="proxy-headers-list" class="config-list"></div>
+              </div>
+              <div class="subsection">
+                <div class="subsection-header">
+                  <h4>Ports</h4>
+                  <button class="btn-secondary btn-small" id="add-port-btn">+ Add Port</button>
+                </div>
+                <div id="ports-list" class="config-list"></div>
+              </div>
+              <div class="subsection">
+                <div class="subsection-header">
+                  <h4>Launch URLs</h4>
+                  <div class="subsection-actions">
+                    <button class="btn-ghost btn-small" id="clear-primary-url-btn" title="Remove the primary launch URL">Clear Primary</button>
+                    <button class="btn-secondary btn-small" id="add-url-btn">+ Add URL</button>
+                  </div>
+                </div>
+                <p class="text-muted" style="margin-bottom: 12px;">Mark one URL as Primary to open it when users click the Testing button in tasks.</p>
+                <div id="urls-list" class="config-list"></div>
+              </div>
+              <div class="subsection">
+                <div class="subsection-header">
+                  <h4>Volume Mounts</h4>
+                  <button class="btn-secondary btn-small" id="add-volume-mount-btn">+ Add Mount</button>
+                </div>
+                <p class="text-muted" style="margin-bottom: 12px;">Mount host directories into containers for testing with host data</p>
+                <div id="volume-mounts-list" class="config-list"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <!-- Instructions Tab -->
+        <div id="tab-agents" class="tab-panel" role="tabpanel" hidden>
+          <div class="content-card">
+            <div class="card-header">
+              <h3>Instructions (AGENTS.md)</h3>
+              <button class="btn-secondary btn-small" id="preview-agents-btn">
+                <span>👁</span> Preview
+              </button>
+            </div>
+            <div class="card-body">
+              <div id="agents-editor" style="height: 500px; border: 1px solid var(--color-border);"></div>
+              <div id="agents-preview" class="markdown-preview-container" hidden></div>
+              <div class="editor-footer">
+                <span id="agents-stats" class="text-muted"></span>
+              </div>
+            </div>
+          </div>
+        </div>
+        <!-- Files Tab removed - content moved to Build tab -->
+        <!-- Build Tab -->
+        <div id="tab-build" class="tab-panel" role="tabpanel" hidden>
+          <!-- Schedule -->
+          <div class="content-card">
+            <div class="card-header">
+              <h3>Schedule</h3>
+            </div>
+            <div class="card-body">
+              <div class="form-single-column">
+                <div class="form-row">
+                  <label class="toggle-switch">
+                    <input type="checkbox" id="rebuild-schedule-enabled-build-tab">
+                    <span class="toggle-slider"></span>
+                    <span class="toggle-label">Enable Scheduled Rebuilds</span>
+                  </label>
+                  <p class="text-muted" style="margin-top: 4px;">Automatically rebuild this environment's Docker image on a schedule</p>
+                </div>
+                <div id="rebuild-schedule-config-build-tab" hidden>
+                  <div class="form-row">
+                    <label for="rebuild-interval-build-tab">Rebuild Interval (hours)</label>
+                    <input type="number" id="rebuild-interval-build-tab" class="form-input" min="1" max="168" value="24" placeholder="24" style="max-width: 120px;">
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <!-- Scripts Section (Collapsible) -->
+          <div class="content-card collapsible-card">
+            <div class="card-header collapsible-header" id="scripts-section-header">
+              <div class="collapsible-title">
+                <svg class="collapse-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                  <polyline points="6 9 12 15 18 9"></polyline>
+                </svg>
+                <h3>Scripts</h3>
+                <span class="badge badge-muted">Advanced</span>
+              </div>
+            </div>
+            <div class="card-body collapsible-body" id="scripts-section-body" hidden>
+              <p class="text-muted" style="margin-bottom: 16px;">
+                Optional scripts for customizing the build and task lifecycle. Leave blank to use defaults.
+              </p>
+              <div class="scripts-tabs-container">
+                <div class="scripts-tabs">
+                  <button class="script-tab active" data-script="pre-clone">
+                    pre-clone
+                  </button>
+                  <button class="script-tab" data-script="post-clone">
+                    post-clone
+                  </button>
+                  <button class="script-tab" data-script="setup.sh">
+                    setup.sh
+                  </button>
+                  <button class="script-tab" data-script="cleanup.sh">
+                    cleanup.sh
+                  </button>
+                </div>
+                <div class="script-description" id="script-description">
+                  <span class="script-desc-pre-clone">Docker build instructions to run BEFORE repositories are cloned.</span>
+                  <span class="script-desc-post-clone" hidden>Docker build instructions to run AFTER repositories are cloned.</span>
+                  <span class="script-desc-setup" hidden>Shell script that runs when a task container starts.</span>
+                  <span class="script-desc-cleanup" hidden>Shell script that runs when a task completes.</span>
+                </div>
+              </div>
+              <div id="script-editor" style="height: 300px; border: 1px solid var(--color-border); border-radius: var(--radius-medium);"></div>
+            </div>
+          </div>
+          <!-- Build History -->
+          <div class="content-card">
+            <div class="card-header">
+              <h3>Build History</h3>
+              <div style="display: flex; gap: 8px;">
+                <button class="btn-secondary btn-small" id="preview-dockerfile-btn" title="View the auto-generated Dockerfile">
+                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-right: 4px;">
+                    <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
+                    <circle cx="12" cy="12" r="3"></circle>
+                  </svg>
+                  Preview Dockerfile
+                </button>
+                <button class="btn-primary btn-small" id="build-now-btn" onclick="showBuildConfirmation()">
+                  Build Now
+                </button>
+                <button class="btn-ghost btn-small" id="refresh-build-history-btn" onclick="loadBuildHistory()" title="Refresh">
+                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                    <polyline points="23 4 23 10 17 10"></polyline>
+                    <path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"></path>
+                  </svg>
+                </button>
+              </div>
+            </div>
+            <div class="card-body">
+              <div id="build-status-message" style="margin-bottom: 12px;" hidden>
+                <!-- Build status message will appear here -->
+              </div>
+              <div id="build-output-container" style="margin-bottom: 16px;" hidden>
+                <div class="build-output-header" style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;">
+                  <span style="font-weight: 500;">Build Output</span>
+                  <button class="btn-ghost btn-small" onclick="toggleBuildOutput()" id="build-output-toggle">
+                    <span id="build-output-toggle-icon">&#9660;</span>
+                  </button>
+                </div>
+                <div id="build-output-content" style="background: var(--color-bg-secondary); border: 1px solid var(--color-border); border-radius: 6px; max-height: 400px; overflow-y: auto;">
+                  <pre id="build-output-text" style="margin: 0; padding: 12px; font-family: var(--font-mono); font-size: 12px; white-space: pre-wrap; word-break: break-all; color: var(--color-text);"></pre>
+                </div>
+              </div>
+              <div id="build-history-container">
+                <p class="text-muted">Loading build history...</p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <!-- Secrets Tab -->
+        <div id="tab-env-vars" class="tab-panel" role="tabpanel" hidden>
+          <div class="content-card">
+            <div class="card-header">
+              <h3>Secrets</h3>
+              <div class="card-header-actions">
+                <label for="secrets-filter" class="filter-label">Show:</label>
+                <select id="secrets-filter" class="secrets-filter-dropdown" title="Filter by availability">
+                  <option value="all">All</option>
+                  <option value="build">Build</option>
+                  <option value="tasks">Tasks</option>
+                  <option value="deploy">Deploy</option>
+                </select>
+                <button class="btn-secondary btn-small" id="add-secret-btn">+ Add Secret</button>
+              </div>
+            </div>
+            <div class="card-body">
+              <div id="secrets-list" class="secrets-list">
+                <!-- Secrets will be rendered here -->
+              </div>
+              <div id="secrets-empty" class="secrets-empty">
+                <p>No secrets configured.</p>
+                <p class="text-muted">Secrets can be referenced in builds, tasks, and deployment profiles and exposed as environment variables or mounted files.</p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <!-- Tests Tab -->
+        <div id="tab-tests" class="tab-panel" role="tabpanel" hidden>
+          <div class="content-card tests-card">
+            <div class="tests-layout">
+              <div class="tests-sidebar">
+                <!-- Test tabs will be populated here -->
+                <button class="test-tab" data-test="new" id="new-test-tab">
+                  <span class="test-icon">➕</span>
+                  <span>Add Test</span>
+                </button>
+              </div>
+              <div class="tests-content">
+                <div class="test-header">
+                  <h4 id="current-test-name">Select a Test</h4>
+                  <div class="test-actions">
+                    <button class="btn-ghost btn-small" id="delete-test-btn" hidden>
+                      <span>🗑</span> Remove
+                    </button>
+                  </div>
+                </div>
+                <div id="test-details-container">
+                  <p class="text-muted">Select a test from the sidebar to view details, or add a new one.</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <!-- Templates Tab -->
+        <div id="tab-templates" class="tab-panel" role="tabpanel" hidden>
+          <div class="content-card templates-card">
+            <div class="templates-layout">
+              <div class="templates-sidebar">
+                <!-- Template tabs will be populated here -->
+                <button class="template-tab" data-template="new" id="new-template-tab">
+                  <span class="template-icon">➕</span>
+                  <span>New Template</span>
+                </button>
+              </div>
+              <div class="templates-content">
+                <div class="template-header">
+                  <h4 id="current-template-name">Select a Template</h4>
+                  <div class="template-actions">
+                    <button class="btn-secondary btn-small" id="preview-template-btn" hidden>
+                      <span>✏️</span> Edit
+                    </button>
+                    <button class="btn-ghost btn-small" id="delete-template-btn" hidden>
+                      <span>🗑</span> Delete
+                    </button>
+                  </div>
+                </div>
+                <div id="template-editor-container">
+                  <p class="text-muted">Select a template from the sidebar to edit, or create a new one.</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <!-- Deploy Tab -->
+        <div id="tab-deploy" class="tab-panel" role="tabpanel" hidden>
+          <div class="content-card deploy-card">
+            <div class="deploy-layout">
+              <div class="deploy-sidebar">
+                <!-- Deploy profile tabs will be populated here -->
+                <button class="deploy-profile-tab" data-profile="new" id="new-deploy-profile-tab">
+                  <span class="deploy-add-icon">➕</span>
+                  <span>Add Profile</span>
+                </button>
+              </div>
+              <div class="deploy-content">
+                <div class="deploy-header">
+                  <h4 id="current-deploy-profile-name">Select a Profile</h4>
+                  <div class="deploy-actions">
+                    <button class="btn-primary btn-small" id="run-deploy-profile-btn" hidden>
+                      <span>▶</span> Run
+                    </button>
+                    <button class="btn-ghost btn-small" id="delete-deploy-profile-btn" hidden>
+                      <span>🗑</span> Delete
+                    </button>
+                  </div>
+                </div>
+                <div id="deployment-progress-panel" class="deployment-progress" hidden>
+                  <div class="deployment-progress-header">
+                    <h4>Deploying: <span id="deployment-progress-profile"></span></h4>
+                    <button class="btn-ghost btn-small" id="cancel-deployment-btn">Cancel</button>
+                  </div>
+                  <div class="deployment-progress-status">
+                    <span class="deployment-status-badge running" id="deployment-progress-badge">Running</span>
+                    <span id="deployment-progress-duration">0:00</span>
+                  </div>
+                  <div class="deployment-output-container">
+                    <pre id="deployment-output"></pre>
+                  </div>
+                </div>
+                <div id="deploy-profile-details-container">
+                  <p class="text-muted">Select a deployment profile to view details, or add a new one.</p>
+                  <p class="text-muted" style="margin-top: 8px; font-size: 12px;">
+                    Deployment profiles define scripts that can be run to deploy your application to different environments (e.g., QA, Production).
+                  </p>
+                </div>
+                <!-- Profile Editor (hidden until a profile is selected) -->
+                <div id="deploy-profile-editor" class="profile-editor" hidden>
+                  <div class="deploy-section">
+                    <div class="deploy-section-header">
+                      <button class="deploy-section-toggle" type="button" aria-expanded="false" aria-controls="deploy-profile-details-section">
+                        <span class="deploy-section-title">Profile Details</span>
+                      </button>
+                    </div>
+                    <div class="deploy-section-body" id="deploy-profile-details-section" hidden>
+                      <div class="profile-section">
+                        <div class="form-row">
+                          <label for="profile-description">Description</label>
+                          <input type="text" id="profile-description" class="form-input" placeholder="Describe what this profile does">
+                        </div>
+                      </div>
+                      <div class="profile-section">
+                        <div class="section-header">
+                          <h5>Deployment Script</h5>
+                          <span class="script-filename" id="profile-script-filename"></span>
+                        </div>
+                        <div id="profile-script-editor" class="monaco-editor-container"></div>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="deploy-section">
+                    <div class="deploy-section-header">
+                      <button class="deploy-section-toggle" type="button" aria-expanded="false" aria-controls="deploy-profile-secrets-section">
+                        <span class="deploy-section-title">Secrets</span>
+                        <span class="deploy-section-count" id="deploy-secrets-count">0</span>
+                      </button>
+                      <button class="btn-secondary btn-small" id="add-profile-secret-btn">+ Add</button>
+                    </div>
+                    <div class="deploy-section-body" id="deploy-profile-secrets-section" hidden>
+                      <div id="profile-secrets-list" class="profile-list"></div>
+                      <p class="text-muted small">Reference secrets from the Secrets tab to expose as environment variables or mounted files.</p>
+                    </div>
+                  </div>
+                  <div class="deploy-section">
+                    <div class="deploy-section-header">
+                      <button class="deploy-section-toggle" type="button" aria-expanded="false" aria-controls="deploy-profile-parameters-section">
+                        <span class="deploy-section-title">Parameters</span>
+                        <span class="deploy-section-count" id="deploy-parameters-count">0</span>
+                      </button>
+                      <button class="btn-secondary btn-small" id="add-profile-parameter-btn">+ Add</button>
+                    </div>
+                    <div class="deploy-section-body" id="deploy-profile-parameters-section" hidden>
+                      <div id="profile-parameters-list" class="profile-list"></div>
+                      <p class="text-muted small">User-provided values prompted when running this deployment.</p>
+                    </div>
+                  </div>
+                  <div class="deploy-section deploy-history-section">
+                    <div class="deploy-section-header">
+                      <button class="deploy-section-toggle" type="button" aria-expanded="false" aria-controls="deploy-history-section-body">
+                        <span class="deploy-section-title">Recent Deployments</span>
+                        <span class="deploy-section-count" id="deploy-history-count">0</span>
+                      </button>
+                      <button class="btn-secondary btn-small" id="refresh-deploy-history-btn">Refresh</button>
+                    </div>
+                    <div class="deploy-section-body" id="deploy-history-section-body" hidden>
+                      <div id="deployment-history-list"></div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+    <!-- Commit Modal -->
+    <div id="commit-modal" class="modal" hidden>
+      <div class="modal-overlay"></div>
+      <div class="modal-content">
+        <div class="modal-header">
+          <h2>Commit Changes</h2>
+          <button type="button" class="modal-close" aria-label="Close">&times;</button>
+        </div>
+        <div class="modal-body">
+          <div id="commit-error" class="modal-error" hidden></div>
+          <div class="commit-author">
+            Committing as: <strong id="commit-user-name"></strong> &lt;<span id="commit-user-email"></span>&gt;
+          </div>
+          <div class="form-group">
+            <label>Modified files:</label>
+            <ul id="commit-files-list" class="modified-files-list"></ul>
+          </div>
+          <div class="form-group">
+            <label for="commit-message">Commit message</label>
+            <textarea id="commit-message" class="form-textarea" rows="3" placeholder="Describe your changes..." required></textarea>
+          </div>
+          <div class="checkbox-group">
+            <label class="checkbox-label">
+              <input type="checkbox" id="commit-pull-first" checked>
+              <span>Pull latest changes before committing (recommended)</span>
+            </label>
+            <label class="checkbox-label">
+              <input type="checkbox" id="commit-push" checked>
+              <span>Push to remote immediately</span>
+            </label>
+          </div>
+        </div>
+        <div class="modal-actions">
+          <button type="button" class="btn-secondary" id="commit-cancel-btn">Cancel</button>
+          <button type="button" class="btn-primary" id="commit-confirm-btn">Commit & Push</button>
+        </div>
+      </div>
+    </div>
+    <!-- Uncommitted Changes Modal -->
+    <div id="uncommitted-changes-modal" class="modal" hidden>
+      <div class="modal-overlay"></div>
+      <div class="modal-content">
+        <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>
+          <ul id="uncommitted-files-list" class="modified-files-list"></ul>
+        </div>
+        <div class="modal-actions">
+          <button type="button" class="btn-secondary" id="uncommitted-changes-close-btn">Close</button>
+        </div>
+      </div>
+    </div>
+    <!-- Discard Changes Modal -->
+    <div id="discard-modal" class="modal" hidden>
+      <div class="modal-overlay"></div>
+      <div class="modal-content">
+        <div class="modal-header">
+          <h2>⚠️ Discard Changes</h2>
+          <button type="button" class="modal-close" aria-label="Close">&times;</button>
+        </div>
+        <div class="modal-body">
+          <div class="warning-message">
+            <p><strong>This will permanently discard all uncommitted changes.</strong></p>
+            <p>This action cannot be undone.</p>
+          </div>
+          <div class="form-group">
+            <label>Files that will be affected:</label>
+            <ul id="discard-files-list" class="modified-files-list"></ul>
+          </div>
+        </div>
+        <div class="modal-actions">
+          <button type="button" class="btn-secondary" id="discard-cancel-btn">Cancel</button>
+          <button type="button" class="btn-danger" id="discard-confirm-btn">Discard Changes</button>
+        </div>
+      </div>
+    </div>
+    <!-- Build Confirmation Modal -->
+    <div id="build-confirm-modal" class="modal" hidden>
+      <div class="modal-overlay"></div>
+      <div class="modal-content">
+        <div class="modal-header">
+          <h2>📦 Build Environment</h2>
+          <button type="button" class="modal-close" aria-label="Close">&times;</button>
+        </div>
+        <div class="modal-body">
+          <p>Build environment <strong id="build-confirm-env-name"></strong>?</p>
+          <p class="text-muted" style="margin-top: 8px;">This will rebuild the Docker image with <code>--no-cache</code>. The build process typically takes a few minutes.</p>
+        </div>
+        <div class="modal-actions">
+          <button type="button" class="btn-secondary" id="build-confirm-cancel-btn">Cancel</button>
+          <button type="button" class="btn-primary" id="build-confirm-start-btn">
+            <span>📦</span> Start Build
+          </button>
+        </div>
+      </div>
+    </div>
+    <!-- Dockerfile Preview Modal -->
+    <div id="dockerfile-preview-modal" class="modal" hidden>
+      <div class="modal-overlay"></div>
+      <div class="modal-content modal-large">
+        <div class="modal-header">
+          <h2>Generated Dockerfile</h2>
+          <button type="button" class="modal-close" aria-label="Close">&times;</button>
+        </div>
+        <div class="modal-body">
+          <p class="text-muted" style="margin-bottom: 16px;">
+            This Dockerfile is automatically generated based on your environment configuration.
+            It includes repository cloning, authentication handling, and your custom build commands.
+          </p>
+          <div id="dockerfile-preview-content" style="background: var(--color-bg-secondary); border: 1px solid var(--color-border); border-radius: 6px; max-height: 500px; overflow-y: auto;">
+            <pre id="dockerfile-preview-text" style="margin: 0; padding: 16px; font-family: var(--font-mono); font-size: 13px; white-space: pre-wrap; word-break: break-word; color: var(--color-text); line-height: 1.5;"></pre>
+          </div>
+        </div>
+        <div class="modal-actions">
+          <button type="button" class="btn-secondary" id="dockerfile-preview-close-btn">Close</button>
+          <button type="button" class="btn-primary" id="dockerfile-copy-btn">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-right: 4px;">
+              <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
+              <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
+            </svg>
+            Copy to Clipboard
+          </button>
+        </div>
+      </div>
+    </div>
+    <!-- Base Image Build Confirmation Modal -->
+    <div id="base-image-build-modal" class="modal" hidden>
+      <div class="modal-overlay"></div>
+      <div class="modal-content modal-medium">
+        <div class="modal-header">
+          <h2>Build Base Image</h2>
+          <button type="button" class="modal-close" aria-label="Close">&times;</button>
+        </div>
+        <div class="modal-body">
+          <p class="text-muted">This will rebuild the foundational image that all environment images are based on. The build typically takes several minutes.</p>
+          <div class="checkbox-group" style="margin-top: 16px;">
+            <label class="checkbox-label">
+              <input type="checkbox" id="base-image-no-cache">
+              <span>Build without cache (--no-cache)</span>
+            </label>
+          </div>
+          <div id="base-image-build-status" style="margin-top: 16px;" hidden>
+            <div class="build-status-message"></div>
+          </div>
+          <!-- Build Output Section -->
+          <div id="base-image-build-output" style="margin-top: 16px; background: var(--color-bg-secondary); border: 1px solid var(--color-border); border-radius: 6px; max-height: 300px; overflow-y: auto;" hidden>
+            <pre style="margin: 0; padding: 12px; font-family: var(--font-mono); font-size: 11px; white-space: pre-wrap; word-break: break-all; color: var(--color-text);"></pre>
+          </div>
+          <!-- Build History Section -->
+          <div class="subsection" style="margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--color-border);">
+            <div class="subsection-header" style="margin-bottom: 12px;">
+              <h4 style="margin: 0;">Build History</h4>
+              <button type="button" class="btn-ghost btn-small" id="base-image-refresh-history-btn" title="Refresh history">
+                <span>🔄</span>
+              </button>
+            </div>
+            <div id="base-image-build-history" class="build-history-compact">
+              <p class="text-muted">Loading...</p>
+            </div>
+          </div>
+        </div>
+        <div class="modal-actions">
+          <button type="button" class="btn-secondary" id="base-image-build-cancel-btn">Cancel</button>
+          <button type="button" class="btn-primary" id="base-image-build-start-btn">
+            <span>Build</span>
+          </button>
+        </div>
+      </div>
+    </div>
+    <!-- New Environment Modal -->
+    <div id="new-env-modal" class="modal" hidden>
+      <div class="modal-overlay"></div>
+      <div class="modal-content modal-large" style="overflow: visible;">
+        <div class="modal-header">
+          <h2>Create New Environment</h2>
+          <button type="button" class="modal-close" aria-label="Close">&times;</button>
+        </div>
+        <div class="modal-body" style="overflow: visible;">
+          <div id="new-env-error" class="modal-error" hidden></div>
+          <div class="form-single-column">
+            <div class="form-row">
+              <label for="new-env-name">Environment Name <span class="required">*</span></label>
+              <input type="text" id="new-env-name" class="form-input" placeholder="e.g., my-project (lowercase letters, numbers, hyphens)" required>
+            </div>
+            <div class="form-row">
+              <label for="new-env-description">Description</label>
+              <input type="text" id="new-env-description" class="form-input">
+            </div>
+            <div class="form-row">
+              <label>Repository</label>
+              <div class="radio-group">
+                <label class="radio-label">
+                  <input type="radio" name="new-env-repo-mode" value="none" checked onchange="onNewEnvRepoModeChange(this)">
+                  <span>None</span>
+                </label>
+                <label class="radio-label">
+                  <input type="radio" name="new-env-repo-mode" value="manual" onchange="onNewEnvRepoModeChange(this)">
+                  <span>Enter URL manually</span>
+                </label>
+                <label class="radio-label">
+                  <input type="radio" name="new-env-repo-mode" value="provider" onchange="onNewEnvRepoModeChange(this)">
+                  <span>Select from provider</span>
+                </label>
+              </div>
+            </div>
+            <!-- Manual URL entry (shown when "Enter URL manually" selected) -->
+            <div id="new-env-repo-url-row" class="form-row" hidden>
+              <label for="new-env-repo-url">Repository URL</label>
+              <input type="text" id="new-env-repo-url" class="form-input code-font" placeholder="https://github.com/owner/repo.git">
+              <span class="form-hint">Will auto-configure Dockerfile, setup.sh, and agent instructions</span>
+            </div>
+            <!-- Provider selection (shown when "Select from provider" selected) -->
+            <div id="new-env-repo-provider-selection" hidden>
+              <div class="form-row">
+                <label for="new-env-repo-source-provider">Git Provider</label>
+                <select id="new-env-repo-source-provider" class="form-input" onchange="onNewEnvRepoProviderChange()">
+                  <option value="">-- Select a provider --</option>
+                </select>
+              </div>
+              <div class="form-row" style="margin-top: 16px;">
+                <label>Repository <span class="required">*</span></label>
+                <div id="new-env-repo-autocomplete-container"></div>
+              </div>
+            </div>
+            <div class="form-row">
+              <label for="new-env-image">Docker Image <span class="required">*</span></label>
+              <input type="text" id="new-env-image" class="form-input" required>
+            </div>
+            <div class="form-row">
+              <label for="new-env-agent">Default Agent <span class="required">*</span></label>
+              <div id="new-env-agent-wrapper"></div>
+            </div>
+          </div>
+        </div>
+        <div class="modal-actions">
+          <button type="button" class="btn-secondary" id="new-env-cancel-btn">Cancel</button>
+          <button type="button" class="btn-primary" id="new-env-create-btn">Create Environment</button>
+        </div>
+      </div>
+    </div>
+    <!-- Delete Environment Modal -->
+    <div id="delete-env-modal" class="modal" hidden>
+      <div class="modal-overlay"></div>
+      <div class="modal-content">
+        <div class="modal-header">
+          <h2>⚠️ Delete Environment</h2>
+          <button type="button" class="modal-close" aria-label="Close">&times;</button>
+        </div>
+        <div class="modal-body">
+          <div class="warning-message">
+            <p><strong>This will delete the entire environment directory.</strong></p>
+            <p>All configuration files and uncommitted changes will be removed.</p>
+          </div>
+          <p style="margin-top: 16px;">Environment to delete: <strong id="delete-env-name-display"></strong></p>
+        </div>
+        <div class="modal-actions">
+          <button type="button" class="btn-secondary" id="delete-env-cancel-btn">Cancel</button>
+          <button type="button" class="btn-danger" id="delete-env-confirm-btn">Delete Environment</button>
+        </div>
+      </div>
+    </div>
+    <div id="skills-modal" class="modal" hidden>
+      <div class="modal-overlay"></div>
+      <div class="modal-content modal-large">
+        <div class="modal-header">
+          <h2>Assign Skills</h2>
+          <button type="button" class="modal-close" aria-label="Close">&times;</button>
+        </div>
+        <div class="modal-body">
+          <p class="modal-description">Search and select skills to make them available to agents in this environment.</p>
+          <div id="skills-modal-error" class="modal-error" hidden></div>
+          <div class="skills-modal-layout">
+            <div class="skills-modal-panel">
+              <div class="skills-modal-search">
+                <label class="sr-only" for="skills-modal-search-input">Search skills</label>
+                <div class="skills-modal-search-input">
+                  <svg class="skills-modal-search-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                    <circle cx="11" cy="11" r="8"></circle>
+                    <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
+                  </svg>
+                  <input type="search" id="skills-modal-search-input" placeholder="Search skills..." class="form-input" autocomplete="off">
+                  <button class="skills-modal-search-clear" id="skills-modal-search-clear" type="button" aria-label="Clear search" hidden>&times;</button>
+                </div>
+                <div class="skills-modal-search-meta" id="skills-modal-search-meta" aria-live="polite"></div>
+              </div>
+              <div id="skills-modal-loading" class="skills-modal-loading" hidden>
+                <span class="loading-spinner"></span>
+                <span>Loading skills...</span>
+              </div>
+              <div id="skills-modal-list" class="skills-modal-list" role="listbox" aria-label="Available skills"></div>
+            </div>
+            <div class="skills-modal-panel skills-modal-selected">
+              <div class="skills-modal-selected-header">
+                <h4>Selected Skills</h4>
+                <span class="skills-modal-selected-count" id="skills-modal-selected-count">0</span>
+              </div>
+              <div id="skills-modal-selected-list" class="skills-modal-selected-list"></div>
+              <p id="skills-modal-selected-empty" class="text-muted" hidden>No skills selected yet.</p>
+            </div>
+          </div>
+        </div>
+        <div class="modal-actions">
+          <a href="skills.html" class="skills-modal-manage-link">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+              <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path>
+              <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path>
+            </svg>
+            Manage Skills
+          </a>
+          <button type="button" class="btn-secondary" id="skills-modal-cancel-btn">Cancel</button>
+          <button type="button" class="btn-primary" id="skills-modal-apply-btn">Apply Skills</button>
+        </div>
+      </div>
+    </div>
+    <!-- Rename Environment Modal -->
+    <div id="rename-env-modal" class="modal" hidden>
+      <div class="modal-overlay"></div>
+      <div class="modal-content">
+        <div class="modal-header">
+          <h2>Rename Environment</h2>
+          <button type="button" class="modal-close" aria-label="Close">&times;</button>
+        </div>
+        <div class="modal-body">
+          <div id="rename-env-error" class="modal-error" hidden></div>
+          <div class="form-single-column">
+            <div class="form-row">
+              <label for="rename-env-current">Current Name</label>
+              <input type="text" id="rename-env-current" class="form-input" disabled>
+            </div>
+            <div class="form-row">
+              <label for="rename-env-new">New Name <span class="required">*</span></label>
+              <input type="text" id="rename-env-new" class="form-input" placeholder="lowercase letters, numbers, hyphens" required>
+            </div>
+          </div>
+        </div>
+        <div class="modal-actions">
+          <button type="button" class="btn-secondary" id="rename-env-cancel-btn">Cancel</button>
+          <button type="button" class="btn-primary" id="rename-env-confirm-btn">Rename</button>
+        </div>
+      </div>
+    </div>
+    <!-- Add Repository Modal -->
+    <div id="add-repo-modal" class="modal" hidden>
+      <div class="modal-content modal-content-wide">
+        <div class="modal-header">
+          <h2 id="repo-modal-title">Add Repository</h2>
+          <button type="button" class="modal-close" aria-label="Close">&times;</button>
+        </div>
+        <div class="modal-body">
+          <div id="add-repo-error" class="modal-error" hidden></div>
+          <div class="form-single-column">
+            <!-- Entry Mode Selection -->
+            <div class="form-row">
+              <label>Repository</label>
+              <div class="radio-group">
+                <label class="radio-label">
+                  <input type="radio" name="repo-entry-mode" value="manual" checked>
+                  <span>Enter URL manually</span>
+                </label>
+                <label class="radio-label">
+                  <input type="radio" name="repo-entry-mode" value="provider">
+                  <span>Select from provider</span>
+                </label>
+              </div>
+            </div>
+            <!-- Provider Selection (shown when "Select from provider" is selected) -->
+            <div id="repo-provider-selection" hidden>
+              <div class="form-row">
+                <label for="new-repo-source-provider">Git Provider</label>
+                <select id="new-repo-source-provider" class="form-input">
+                  <option value="">-- Select a provider --</option>
+                </select>
+              </div>
+              <div class="form-row" style="margin-top: 16px;">
+                <label for="new-repo-from-provider">Repository</label>
+                <div id="repo-autocomplete-container"></div>
+              </div>
+            </div>
+            <!-- Repository URL (shown when "Enter URL manually" is selected) -->
+            <div id="repo-url-row" class="form-row">
+              <label for="new-repo-url">Repository URL</label>
+              <input type="text" id="new-repo-url" class="form-input code-font" placeholder="https://github.com/user/repo.git" required>
+            </div>
+            <div class="form-row">
+              <label for="new-repo-name">Name</label>
+              <input type="text" id="new-repo-name" class="form-input" placeholder="Auto-extracted from URL">
+            </div>
+            <div class="form-row">
+              <label for="new-repo-branch">Branch</label>
+              <input type="text" id="new-repo-branch" class="form-input" value="main" required>
+            </div>
+            <div class="form-row">
+              <label for="new-repo-allow-branch">Allow Branch Selection</label>
+              <label class="toggle-switch">
+                <input type="checkbox" id="new-repo-allow-branch">
+                <span class="toggle-slider"></span>
+              </label>
+            </div>
+            <div class="form-row">
+              <label for="new-repo-path">Path</label>
+              <input type="text" id="new-repo-path" class="form-input code-font" placeholder="Optional path in environment">
+            </div>
+            <div class="form-row">
+              <label for="new-repo-description">Description</label>
+              <input type="text" id="new-repo-description" class="form-input" placeholder="Optional description">
+            </div>
+          </div>
+        </div>
+        <div class="modal-actions">
+          <button type="button" class="btn-secondary" id="add-repo-cancel-btn">Cancel</button>
+          <button type="button" class="btn-primary" id="add-repo-confirm-btn">Add Repository</button>
+        </div>
+      </div>
+    </div>
+    <!-- Delete Repository Modal -->
+    <div id="delete-repo-modal" class="modal" hidden>
+      <div class="modal-content">
+        <div class="modal-header">
+          <h2>Delete Repository</h2>
+          <button type="button" class="modal-close" aria-label="Close">&times;</button>
+        </div>
+        <div class="modal-body">
+          <p>Are you sure you want to remove this repository from the environment?</p>
+          <p><strong id="delete-repo-name"></strong></p>
+          <p class="text-muted" style="margin-top: 16px;">This will only remove the repository configuration, not delete any files.</p>
+        </div>
+        <div class="modal-actions">
+          <button type="button" class="btn-secondary" id="delete-repo-cancel-btn">Cancel</button>
+          <button type="button" class="btn-danger" id="delete-repo-confirm-btn">Delete</button>
+        </div>
+      </div>
+    </div>
+    <!-- Add Test Modal -->
+    <div id="add-test-modal" class="modal" hidden>
+      <div class="modal-content">
+        <div class="modal-header">
+          <h2>Add Test Command</h2>
+          <button type="button" class="modal-close" aria-label="Close">&times;</button>
+        </div>
+        <div class="modal-body">
+          <div id="add-test-error" class="modal-error" hidden></div>
+          <div class="form-single-column">
+            <div class="form-row">
+              <label for="new-test-name">Test Name</label>
+              <input type="text" id="new-test-name" class="form-input" placeholder="e.g., unit-tests" required>
+            </div>
+            <div class="form-row">
+              <label for="new-test-description">Description</label>
+              <input type="text" id="new-test-description" class="form-input" placeholder="Test description">
+            </div>
+            <div class="form-row" style="align-items: start;">
+              <label for="new-test-command">Command(s)</label>
+              <textarea id="new-test-command" class="form-input code-font" rows="3" placeholder="One command per line" required></textarea>
+            </div>
+          </div>
+        </div>
+        <div class="modal-actions">
+          <button type="button" class="btn-secondary" id="add-test-cancel-btn">Cancel</button>
+          <button type="button" class="btn-primary" id="add-test-confirm-btn">Add Test</button>
+        </div>
+      </div>
+    </div>
+    <!-- Delete Test Modal -->
+    <div id="delete-test-modal" class="modal" hidden>
+      <div class="modal-content">
+        <div class="modal-header">
+          <h2>Delete Test Command</h2>
+          <button type="button" class="modal-close" aria-label="Close">&times;</button>
+        </div>
+        <div class="modal-body">
+          <p>Are you sure you want to remove this test command?</p>
+          <p><strong id="delete-test-name"></strong></p>
+        </div>
+        <div class="modal-actions">
+          <button type="button" class="btn-secondary" id="delete-test-cancel-btn">Cancel</button>
+          <button type="button" class="btn-danger" id="delete-test-confirm-btn">Delete</button>
+        </div>
+      </div>
+    </div>
+    <!-- Add Template Modal -->
+    <div id="add-template-modal" class="modal" hidden>
+      <div class="modal-content">
+        <div class="modal-header">
+          <h2>Add Task Template</h2>
+          <button type="button" class="modal-close" aria-label="Close">&times;</button>
+        </div>
+        <div class="modal-body">
+          <div id="add-template-error" class="modal-error" hidden></div>
+          <div class="form-single-column">
+            <div class="form-row">
+              <label for="new-template-title">Title</label>
+              <input type="text" id="new-template-title" class="form-input" placeholder="e.g., Bug Fix Template" required>
+            </div>
+            <div class="form-row">
+              <label for="new-template-description">Description</label>
+              <input type="text" id="new-template-description" class="form-input" placeholder="What is this template for?">
+            </div>
+            <div class="form-row">
+              <label for="new-template-filename">Filename</label>
+              <input type="text" id="new-template-filename" class="form-input code-font" placeholder="Auto-generated from title">
+            </div>
+          </div>
+        </div>
+        <div class="modal-actions">
+          <button type="button" class="btn-secondary" id="add-template-cancel-btn">Cancel</button>
+          <button type="button" class="btn-primary" id="add-template-confirm-btn">Add Template</button>
+        </div>
+      </div>
+    </div>
+    <!-- Delete Template Modal -->
+    <div id="delete-template-modal" class="modal" hidden>
+      <div class="modal-content">
+        <div class="modal-header">
+          <h2>Delete Template</h2>
+          <button type="button" class="modal-close" aria-label="Close">&times;</button>
+        </div>
+        <div class="modal-body">
+          <p>Are you sure you want to remove this template?</p>
+          <p><strong id="delete-template-name"></strong></p>
+        </div>
+        <div class="modal-actions">
+          <button type="button" class="btn-secondary" id="delete-template-cancel-btn">Cancel</button>
+          <button type="button" class="btn-danger" id="delete-template-confirm-btn">Delete</button>
+        </div>
+      </div>
+    </div>
+    <!-- Add Deploy Profile Modal -->
+    <div id="add-deploy-profile-modal" class="modal" hidden>
+      <div class="modal-content">
+        <div class="modal-header">
+          <h2>Add Deployment Profile</h2>
+          <button type="button" class="modal-close" aria-label="Close">&times;</button>
+        </div>
+        <div class="modal-body">
+          <div id="add-deploy-profile-error" class="modal-error" hidden></div>
+          <div class="form-single-column">
+            <div class="form-row">
+              <label for="new-deploy-profile-name">Profile Name</label>
+              <input type="text" id="new-deploy-profile-name" class="form-input code-font" placeholder="e.g., production, staging, qa" required>
+              <p class="text-muted" style="margin-top: 4px; font-size: 13px;">Alphanumeric, hyphens, and underscores only</p>
+            </div>
+            <div class="form-row">
+              <label for="new-deploy-profile-description">Description</label>
+              <input type="text" id="new-deploy-profile-description" class="form-input" placeholder="e.g., Deploy to production server" required>
+            </div>
+          </div>
+        </div>
+        <div class="modal-actions">
+          <button type="button" class="btn-secondary" id="add-deploy-profile-cancel-btn">Cancel</button>
+          <button type="button" class="btn-primary" id="add-deploy-profile-confirm-btn">Add Profile</button>
+        </div>
+      </div>
+    </div>
+    <!-- Run Deployment Modal -->
+    <div id="run-deployment-modal" class="modal" hidden>
+      <div class="modal-overlay"></div>
+      <div class="modal-content">
+        <div class="modal-header">
+          <h2>Run Deployment: <span id="run-deployment-profile-name"></span></h2>
+          <button type="button" class="modal-close">&times;</button>
+        </div>
+        <div class="modal-body">
+          <div id="run-deployment-error" class="modal-error" hidden></div>
+          <div id="run-deployment-parameters"></div>
+          <div class="form-row">
+            <label class="checkbox-label">
+              <input type="checkbox" id="run-deployment-dry-run">
+              <span>Dry run (validate only, don't execute)</span>
+            </label>
+          </div>
+        </div>
+        <div class="modal-actions">
+          <button class="btn-secondary" id="run-deployment-cancel-btn">Cancel</button>
+          <button class="btn-primary" id="run-deployment-start-btn">
+            <span>▶</span> Run Deployment
+          </button>
+        </div>
+      </div>
+    </div>
+    <!-- Delete Deploy Profile Modal -->
+    <div id="delete-deploy-profile-modal" class="modal" hidden>
+      <div class="modal-content">
+        <div class="modal-header">
+          <h2>Delete Deployment Profile</h2>
+          <button type="button" class="modal-close" aria-label="Close">&times;</button>
+        </div>
+        <div class="modal-body">
+          <p>Are you sure you want to delete this deployment profile?</p>
+          <p><strong id="delete-deploy-profile-name"></strong></p>
+          <p class="text-muted">This will delete both the profile configuration and its deployment script.</p>
+        </div>
+        <div class="modal-actions">
+          <button type="button" class="btn-secondary" id="delete-deploy-profile-cancel-btn">Cancel</button>
+          <button type="button" class="btn-danger" id="delete-deploy-profile-confirm-btn">Delete</button>
+        </div>
+      </div>
+    </div>
+    <!-- Add/Edit Secret Modal -->
+    <div id="secret-modal" class="modal" hidden>
+      <div class="modal-content">
+        <div class="modal-header">
+          <h2 id="secret-modal-title">Add Secret</h2>
+          <button type="button" class="modal-close" aria-label="Close">&times;</button>
+        </div>
+        <div class="modal-body">
+          <div id="secret-modal-error" class="modal-error" hidden></div>
+          <div class="form-single-column">
+            <div class="form-row">
+              <label for="secret-name">Secret Name <span class="required">*</span></label>
+              <input type="text" id="secret-name" class="form-input code-font" placeholder="e.g., prod_ssh_key" required>
+            </div>
+            <div class="form-row">
+              <label for="secret-description">Description</label>
+              <input type="text" id="secret-description" class="form-input" placeholder="e.g., Production SSH key">
+            </div>
+            <div class="form-row">
+              <label>Source Type <span class="required">*</span></label>
+              <div class="radio-group">
+                <label class="radio-label">
+                  <input type="radio" name="secret-type" value="file" id="secret-type-file">
+                  <span>File on host</span>
+                </label>
+                <label class="radio-label">
+                  <input type="radio" name="secret-type" value="value" id="secret-type-value" checked>
+                  <span>Direct value</span>
+                </label>
+              </div>
+            </div>
+            <div class="form-row">
+              <label>Available For <span class="required">*</span></label>
+              <div class="checkbox-group">
+                <label class="checkbox-label">
+                  <input type="checkbox" id="secret-available-build">
+                  <span>Build</span>
+                </label>
+                <label class="checkbox-label">
+                  <input type="checkbox" id="secret-available-tasks">
+                  <span>Tasks</span>
+                </label>
+                <label class="checkbox-label">
+                  <input type="checkbox" id="secret-available-deploy" checked>
+                  <span>Deploy</span>
+                </label>
+              </div>
+            </div>
+            <div class="form-row" id="secret-expose-as-row" hidden>
+              <label>Expose As <span class="required">*</span></label>
+              <div class="radio-group">
+                <label class="radio-label">
+                  <input type="radio" name="secret-expose-as" value="env_var" id="secret-expose-env" checked>
+                  <span>Environment Variable</span>
+                </label>
+                <label class="radio-label">
+                  <input type="radio" name="secret-expose-as" value="file" id="secret-expose-file">
+                  <span>File (bind mount)</span>
+                </label>
+              </div>
+            </div>
+            <div class="form-row" id="secret-target-row" hidden>
+              <label for="secret-target" id="secret-target-label">Variable Name <span class="required">*</span></label>
+              <input type="text" id="secret-target" class="form-input code-font" placeholder="e.g., SSH_PRIVATE_KEY">
+              <span class="form-hint" id="secret-target-hint">The environment variable name</span>
+            </div>
+            <div class="form-row" id="secret-source-row" hidden>
+              <label for="secret-source">Host File Path <span class="required">*</span></label>
+              <input type="text" id="secret-source" class="form-input code-font" placeholder="e.g., /home/coder/.ssh/id_ed25519_prod">
+              <span class="form-hint" id="secret-source-hint">Absolute path, or relative to the environment directory</span>
+              <div id="secret-source-validation" class="field-validation" hidden></div>
+            </div>
+            <div class="form-row" id="secret-value-row">
+              <label for="secret-value">Value <span class="required">*</span></label>
+              <div class="secret-value-group">
+                <textarea id="secret-value" class="form-input code-font" rows="6" placeholder="Enter secret value (e.g., SSH private key content)"></textarea>
+                <button type="button" class="btn-icon secret-toggle-visibility" title="Toggle visibility" hidden>
+                  <svg class="eye-open" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                    <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
+                    <circle cx="12" cy="12" r="3"></circle>
+                  </svg>
+                  <svg class="eye-closed" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display: none;">
+                    <path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"></path>
+                    <line x1="1" y1="1" x2="23" y2="23"></line>
+                  </svg>
+                </button>
+              </div>
+              <div class="form-row-actions" style="margin-top: 8px;">
+                <button type="button" class="btn-secondary btn-small" id="secret-import-file-btn">
+                  <span>📁</span> Import from file...
+                </button>
+                <input type="file" id="secret-file-input" hidden>
+              </div>
+            </div>
+            <div class="form-row" id="secret-git-pat-row" hidden>
+              <label class="checkbox-label">
+                <input type="checkbox" id="secret-git-pat-checkbox">
+                <span>Use as Git PAT (Personal Access Token)</span>
+              </label>
+              <span class="form-hint">Use this secret as a PAT for authenticating with a Git host</span>
+            </div>
+            <div class="form-row" id="secret-git-host-row" hidden>
+              <label for="secret-git-host">Git Host <span class="required">*</span></label>
+              <select id="secret-git-host" class="form-input">
+                <option value="">Select a Git host...</option>
+                <option value="github.com">GitHub (github.com)</option>
+                <option value="dev.azure.com">Azure DevOps (dev.azure.com)</option>
+                <option value="bitbucket.org">Bitbucket (bitbucket.org)</option>
+                <option value="gitlab.com">GitLab (gitlab.com)</option>
+                <option value="custom">Other (custom hostname)...</option>
+              </select>
+            </div>
+            <div class="form-row" id="secret-git-custom-host-row" hidden>
+              <label for="secret-git-custom-host">Custom Git Hostname <span class="required">*</span></label>
+              <input type="text" id="secret-git-custom-host" class="form-input code-font" placeholder="e.g., git.mycompany.com">
+              <span class="form-hint">The hostname of your Git server (without https://)</span>
+            </div>
+          </div>
+        </div>
+        <div class="modal-actions">
+          <button type="button" class="btn-secondary" id="secret-modal-cancel-btn">Cancel</button>
+          <button type="button" class="btn-primary" id="secret-modal-save-btn">Save Secret</button>
+        </div>
+      </div>
+    </div>
+    <!-- Delete Secret Modal -->
+    <div id="delete-secret-modal" class="modal" hidden>
+      <div class="modal-content">
+        <div class="modal-header">
+          <h2>Delete Secret</h2>
+          <button type="button" class="modal-close" aria-label="Close">&times;</button>
+        </div>
+        <div class="modal-body">
+          <p>Are you sure you want to delete this secret?</p>
+          <p><strong id="delete-secret-name"></strong></p>
+          <p class="text-muted">Deployment profiles referencing this secret will need to be updated.</p>
+        </div>
+        <div class="modal-actions">
+          <button type="button" class="btn-secondary" id="delete-secret-cancel-btn">Cancel</button>
+          <button type="button" class="btn-danger" id="delete-secret-confirm-btn">Delete</button>
+        </div>
+      </div>
+    </div>
+    <!-- Profile Secret Configuration Modal -->
+    <div id="profile-secret-modal" class="modal" hidden>
+      <div class="modal-overlay"></div>
+      <div class="modal-content modal-content-narrow">
+        <div class="modal-header">
+          <h2 id="profile-secret-modal-title">Add Secret to Profile</h2>
+          <button type="button" class="modal-close" aria-label="Close">&times;</button>
+        </div>
+        <div class="modal-body">
+          <div id="profile-secret-error" class="modal-error" hidden></div>
+          <div class="form-single-column">
+            <div class="form-row">
+              <label for="profile-secret-name">Secret <span class="required">*</span></label>
+              <select id="profile-secret-name" class="form-input">
+                <!-- Populated from environment secrets (filtered to deploy-available) -->
+              </select>
+              <span class="form-hint">Select a secret defined in the Secrets tab (only secrets available for Deploy are shown)</span>
+            </div>
+            <div id="profile-secret-info" class="secret-info-preview" hidden>
+              <!-- Shows expose_as and target from selected secret -->
+            </div>
+          </div>
+        </div>
+        <div class="modal-actions">
+          <button type="button" class="btn-secondary" id="profile-secret-cancel-btn">Cancel</button>
+          <button type="button" class="btn-primary" id="profile-secret-save-btn">Add</button>
+        </div>
+      </div>
+    </div>
+    <!-- Shared Parameter Configuration Modal (used by Deploy, Tests, Templates) -->
+    <div id="profile-parameter-modal" class="modal" hidden>
+      <div class="modal-overlay"></div>
+      <div class="modal-content modal-medium">
+        <div class="modal-header">
+          <h2 id="profile-parameter-modal-title">Configure Parameter</h2>
+          <button type="button" class="modal-close" aria-label="Close">&times;</button>
+        </div>
+        <div class="modal-body">
+          <div id="profile-parameter-error" class="modal-error" hidden></div>
+          <div class="form-single-column">
+            <div class="form-row">
+              <label for="profile-param-name">Parameter Name <span class="required">*</span></label>
+              <input type="text" id="profile-param-name" class="form-input code-font" placeholder="e.g., TARGET_LIBRARY">
+              <span class="form-hint">Will be available as environment variable when running</span>
+            </div>
+            <div class="form-row">
+              <label for="profile-param-label">Display Label</label>
+              <input type="text" id="profile-param-label" class="form-input" placeholder="e.g., Target Library">
+              <span class="form-hint">User-friendly label shown in the run dialog</span>
+            </div>
+            <div class="form-row">
+              <label for="profile-param-description">Description</label>
+              <input type="text" id="profile-param-description" class="form-input" placeholder="e.g., The library to deploy to">
+            </div>
+            <div class="form-row">
+              <label for="profile-param-type">Input Type <span class="required">*</span></label>
+              <select id="profile-param-type" class="form-input">
+                <option value="text">Text Input</option>
+                <option value="list">Select List (static options)</option>
+                <option value="boolean">Checkbox</option>
+                <option value="command">Dynamic (from command)</option>
+                <option value="files">File/Directory Browser</option>
+              </select>
+            </div>
+            <!-- List/Select Options (for type=list) -->
+            <div class="form-row" id="profile-param-options-row" hidden>
+              <label for="profile-param-options">Options <span class="required">*</span></label>
+              <div class="options-editor" id="profile-param-options-editor">
+                <div class="options-list" id="profile-param-options-list"></div>
+                <button type="button" class="btn-secondary btn-small" id="profile-param-add-option-btn">+ Add Option</button>
+              </div>
+              <span class="form-hint">Define the available choices. Use description for additional context.</span>
+            </div>
+            <!-- Command Options (for type=command) -->
+            <div id="profile-param-command-row" hidden>
+              <div class="form-row">
+                <label for="profile-param-command">Command <span class="required">*</span></label>
+                <input type="text" id="profile-param-command" class="form-input code-font" placeholder="e.g., git branch -r | grep origin/">
+                <span class="form-hint">Shell command to run in container to generate choices</span>
+              </div>
+              <div class="form-row">
+                <label for="profile-param-parser">Output Parser</label>
+                <select id="profile-param-parser" class="form-input">
+                  <option value="lines">Lines (one option per line)</option>
+                  <option value="json">JSON (array of {value, label, description})</option>
+                  <option value="git-branches">Git Branches</option>
+                  <option value="files">File Listing</option>
+                </select>
+              </div>
+              <div class="form-row">
+                <label for="profile-param-repos">Repositories</label>
+                <input type="text" id="profile-param-repos" class="form-input code-font" placeholder="e.g., converter, main-app (comma-separated)">
+                <span class="form-hint">Optional: specific repos to update before running command</span>
+              </div>
+            </div>
+            <!-- Files Options (for type=files) -->
+            <div id="profile-param-files-row" hidden>
+              <div class="form-row">
+                <label for="profile-param-path">Directory Path <span class="required">*</span></label>
+                <input type="text" id="profile-param-path" class="form-input code-font" placeholder="e.g., /workspace/src">
+                <span class="form-hint">Directory path relative to /workspace</span>
+              </div>
+              <div class="form-row">
+                <label for="profile-param-include">Include</label>
+                <select id="profile-param-include" class="form-input">
+                  <option value="files">Files only</option>
+                  <option value="directories">Directories only</option>
+                  <option value="both">Both files and directories</option>
+                </select>
+              </div>
+              <div class="form-row">
+                <label for="profile-param-pattern">Glob Pattern</label>
+                <input type="text" id="profile-param-pattern" class="form-input code-font" placeholder="e.g., *.{rpg,rpgle,sqlrpgle}">
+                <span class="form-hint">Optional file pattern filter</span>
+              </div>
+              <div class="form-row">
+                <label for="profile-param-files-repos">Repositories</label>
+                <input type="text" id="profile-param-files-repos" class="form-input code-font" placeholder="e.g., converter, main-app (comma-separated)">
+                <span class="form-hint">Optional: specific repos to update before listing</span>
+              </div>
+            </div>
+            <!-- Multi-select option (for list, command, files) -->
+            <div class="form-row" id="profile-param-multiselect-row" hidden>
+              <label class="checkbox-label">
+                <input type="checkbox" id="profile-param-multiselect">
+                <span>Allow multiple selections</span>
+              </label>
+            </div>
+            <div class="form-row">
+              <label for="profile-param-default">Default Value</label>
+              <input type="text" id="profile-param-default" class="form-input" placeholder="Optional default value">
+            </div>
+            <div class="form-row">
+              <label class="checkbox-label">
+                <input type="checkbox" id="profile-param-required">
+                <span>Required field</span>
+              </label>
+            </div>
+          </div>
+        </div>
+        <div class="modal-actions">
+          <button type="button" class="btn-secondary" id="profile-parameter-cancel-btn">Cancel</button>
+          <button type="button" class="btn-primary" id="profile-parameter-save-btn">Save</button>
+        </div>
+      </div>
+    </div>
+  </main>
+</body>
+</html>