thepopebot 1.2.76-beta.25 → 1.2.76-beta.27

package/api/index.js

@@ -116,8 +116,9 @@ async function handleGetAgentSecret(request) {
     return Response.json({ error: 'Forbidden' }, { status: 403 });
   }
 
-  const key = new URL(request.url).searchParams.get('key');
-  if (!key) return Response.json({ error: 'Missing key' }, { status: 400 });
+  const rawKey = new URL(request.url).searchParams.get('key');
+  if (!rawKey) return Response.json({ error: 'Missing key' }, { status: 400 });
+  const key = rawKey.toUpperCase();
 
   const { getAgentJobSecretRaw, setAgentJobSecret: saveSecret } = await import('../lib/db/config.js');
   const raw = getAgentJobSecretRaw(key);

package/bin/docker-build.js

@@ -1,19 +1,32 @@
 #!/usr/bin/env node
 
 /**
- * Build all Docker images locally (in parallel).
+ * Build all Docker images locally.
  *
  * Usage:
- *   npm run docker:build            # build all images in parallel
- *   npm run docker:build -- --image event-handler   # build one image
+ *   npm run docker:build            # build everything
+ *   npm run docker:build -- --image event-handler   # build one (deps built first)
  *
  * Reads the version from package.json and tags each image as:
  *   stephengpope/thepopebot:{image}-{version}
  *
- * The coding-agent images use a two-stage build: a shared base image
- * (Dockerfile) is built first, then each agent-specific Dockerfile
- * extends it. The base is tagged as coding-agent-base-{version} and
- * is NOT pushed — it's only used locally as a build dependency.
+ * Image hierarchy:
+ *
+ *   thepopebot-base                           ← Ubuntu + Node + locale + Chromium + playwright + user
+ *     ├── coding-agent-base                   ← + tmux, ttyd, scripts, entrypoint
+ *     │     ├── coding-agent-claude-code      ← + per-agent CLI
+ *     │     ├── coding-agent-pi-coding-agent
+ *     │     └── ... (one per agent)
+ *     └── event-handler                       ← + pm2, gosu, Next.js, server.js
+ *
+ * Build order:
+ *   1. thepopebot-base
+ *   2. coding-agent-base + event-handler in parallel
+ *   3. all coding-agent variants in parallel
+ *
+ * Base images are tagged both versioned and unversioned (no version) so child
+ * Dockerfiles can `FROM thepopebot-base` / `FROM coding-agent-base` without a
+ * build-arg for local development.
  */
 
 import { spawn } from 'child_process';
@@ -28,14 +41,21 @@ const pkg = JSON.parse(readFileSync(path.join(ROOT, 'package.json'), 'utf8'));
 const VERSION = pkg.version;
 const REPO = 'stephengpope/thepopebot';
 
-// Base image built first — all coding-agent images depend on it
-const BASE_IMAGE = {
+// Built first — everything depends on this.
+const THEPOPEBOT_BASE = {
+  name: 'thepopebot-base',
+  context: 'docker/base',
+  dockerfile: 'docker/base/Dockerfile',
+};
+
+// Built second — depends on thepopebot-base.
+const CODING_AGENT_BASE = {
   name: 'coding-agent-base',
   context: 'docker/coding-agent',
   dockerfile: 'docker/coding-agent/Dockerfile',
 };
 
-// Agent-specific images (extend the base)
+// Built third — depend on coding-agent-base.
 const CODING_AGENTS = [
   {
     name: 'coding-agent-claude-code',
@@ -69,16 +89,14 @@ const CODING_AGENTS = [
   },
 ];
 
-// Non-coding-agent images (independent, built in parallel)
-const OTHER_IMAGES = [
-  {
-    name: 'event-handler',
-    context: '.',
-    dockerfile: 'docker/event-handler/Dockerfile',
-  },
-];
+// Built second — depends on thepopebot-base. Built in parallel with coding-agent-base.
+const EVENT_HANDLER = {
+  name: 'event-handler',
+  context: '.',
+  dockerfile: 'docker/event-handler/Dockerfile',
+};
 
-const ALL_IMAGES = [BASE_IMAGE, ...CODING_AGENTS, ...OTHER_IMAGES];
+const ALL_IMAGES = [THEPOPEBOT_BASE, CODING_AGENT_BASE, ...CODING_AGENTS, EVENT_HANDLER];
 
 // Parse --image flag
 const filterArg = process.argv.find((_, i, a) => a[i - 1] === '--image');
@@ -101,11 +119,14 @@ function buildImage(img) {
   console.log(`  ${label}  building — ${tag}`);
 
   return new Promise((resolve, reject) => {
-    // Tag base image as both versioned and unversioned (agent Dockerfiles use FROM coding-agent-base)
     const args = ['build', '-t', tag, '-f', dockerfile];
-    if (img.name === 'coding-agent-base') {
-      args.push('-t', 'coding-agent-base');
+
+    // Base images get an unversioned tag too so child Dockerfiles can
+    // `FROM thepopebot-base` / `FROM coding-agent-base` without a build-arg.
+    if (img.name === 'thepopebot-base' || img.name === 'coding-agent-base') {
+      args.push('-t', img.name);
     }
+
     args.push(context);
 
     const proc = spawn(
@@ -172,50 +193,56 @@ function buildImage(img) {
   });
 }
 
-// Build logic: base first, then agents + others in parallel
 async function run() {
   if (filterArg) {
-    // Single image build
-    if (filterArg === BASE_IMAGE.name) {
+    // Single image build — build dependency chain too.
+    if (filterArg === THEPOPEBOT_BASE.name) {
       console.log(`Building 1 image — version ${VERSION}\n`);
-      await buildImage(BASE_IMAGE);
-    } else {
-      const isCodingAgent = CODING_AGENTS.some(img => img.name === filterArg);
-      if (isCodingAgent) {
-        // Need base first
-        console.log(`Building base + 1 agent image — version ${VERSION}\n`);
-        await buildImage(BASE_IMAGE);
-        const agent = CODING_AGENTS.find(img => img.name === filterArg);
-        await buildImage(agent);
-      } else {
-        console.log(`Building 1 image — version ${VERSION}\n`);
-        const img = OTHER_IMAGES.find(img => img.name === filterArg);
-        await buildImage(img);
-      }
+      await buildImage(THEPOPEBOT_BASE);
+    } else if (filterArg === CODING_AGENT_BASE.name) {
+      console.log(`Building 2 images — version ${VERSION}\n`);
+      await buildImage(THEPOPEBOT_BASE);
+      await buildImage(CODING_AGENT_BASE);
+    } else if (filterArg === EVENT_HANDLER.name) {
+      console.log(`Building 2 images — version ${VERSION}\n`);
+      await buildImage(THEPOPEBOT_BASE);
+      await buildImage(EVENT_HANDLER);
+    } else if (CODING_AGENTS.some(img => img.name === filterArg)) {
+      console.log(`Building 3 images — version ${VERSION}\n`);
+      await buildImage(THEPOPEBOT_BASE);
+      await buildImage(CODING_AGENT_BASE);
+      const agent = CODING_AGENTS.find(img => img.name === filterArg);
+      await buildImage(agent);
     }
-    console.log('\n1/1 images built successfully.');
+    console.log('\ndone.');
     return;
   }
 
-  // Full build: base first, then everything else in parallel
+  // Full build: thepopebot-base → (coding-agent-base + event-handler in parallel) → variants
   const totalCount = ALL_IMAGES.length;
-  console.log(`Building ${totalCount} images (base first, then parallel) — version ${VERSION}\n`);
+  console.log(`Building ${totalCount} images — version ${VERSION}\n`);
 
-  // Step 1: Build base
-  await buildImage(BASE_IMAGE);
+  // Step 1: thepopebot-base
+  await buildImage(THEPOPEBOT_BASE);
 
-  // Step 2: Build all agents + other images in parallel
-  const parallel = [...CODING_AGENTS, ...OTHER_IMAGES];
-  const results = await Promise.allSettled(parallel.map(buildImage));
+  // Step 2: coding-agent-base and event-handler in parallel (both extend thepopebot-base)
+  const tier2 = await Promise.allSettled([CODING_AGENT_BASE, EVENT_HANDLER].map(buildImage));
+  const tier2Failed = tier2.filter(r => r.status === 'rejected');
+  if (tier2Failed.length > 0) {
+    console.error(`Tier 2 failed: ${tier2Failed.map(r => r.reason.message).join(', ')}`);
+    process.exit(1);
+  }
 
-  const failed = results.filter((r) => r.status === 'rejected');
-  const succeeded = results.filter((r) => r.status === 'fulfilled');
+  // Step 3: all coding-agent variants in parallel
+  const tier3 = await Promise.allSettled(CODING_AGENTS.map(buildImage));
+  const tier3Failed = tier3.filter(r => r.status === 'rejected');
+  const tier3Succeeded = tier3.filter(r => r.status === 'fulfilled');
 
-  // +1 for the base image
-  console.log(`\n${succeeded.length + 1}/${totalCount} images built successfully.`);
+  const succeededCount = 1 + 2 + tier3Succeeded.length;
+  console.log(`\n${succeededCount}/${totalCount} images built successfully.`);
 
-  if (failed.length > 0) {
-    console.error(`${failed.length} failed: ${failed.map((r) => r.reason.message).join(', ')}`);
+  if (tier3Failed.length > 0) {
+    console.error(`${tier3Failed.length} failed: ${tier3Failed.map(r => r.reason.message).join(', ')}`);
     process.exit(1);
   }
 }

package/bin/sync.js

@@ -248,6 +248,19 @@ function mirrorTemplates(projectPath) {
   }
 }
 
+/**
+ * Build thepopebot-base locally so the event-handler Dockerfile's
+ * `FROM ${BASE_IMAGE}` (default: thepopebot-base) resolves. Cached layers
+ * make this near-instant when nothing in docker/base changed.
+ */
+function buildBaseImage() {
+  console.log('\n  Building thepopebot-base image...');
+  const baseContext = path.join(PACKAGE_DIR, 'docker', 'base');
+  execSync(`docker build -t thepopebot-base -f ${path.join(baseContext, 'Dockerfile')} ${baseContext}`, {
+    stdio: 'inherit',
+  });
+}
+
 function buildDockerImage(projectPath) {
   console.log('\n  Building Docker event handler image...');
 
@@ -431,7 +444,11 @@ export async function sync(projectPath) {
     console.log('\n  Installing package on host...');
     execSync(`npm install --no-save ${tarballDest}`, { stdio: 'inherit', cwd: projectPath });
 
-    // 5. Build Docker image with patched Dockerfile (includes Next.js build)
+    // 5. Build thepopebot-base (event-handler Dockerfile FROMs it).
+    //    Cached layers — fast unless docker/base/Dockerfile changed.
+    buildBaseImage();
+
+    // 6. Build event-handler image with patched Dockerfile (includes Next.js build)
     buildDockerImage(projectPath);
 
     // 6. Restart container with new image

package/lib/chat/components/chat-input.js

@@ -1,10 +1,12 @@
 "use client";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useRef, useEffect, useCallback, useState } from "react";
-import { SendIcon, StopIcon, PaperclipIcon, XIcon, FileTextIcon, MicIcon } from "./icons.js";
+import { SendIcon, StopIcon, PaperclipIcon, XIcon, FileTextIcon, MicIcon, KeyIcon } from "./icons.js";
 import { useVoiceInput } from "../../voice/use-voice-input.js";
 const getVoiceTokenFetch = () => fetch("/chat/voice-token").then((r) => r.json()).catch(() => ({ error: "Failed to get voice token" }));
 import { VoiceBars } from "./voice-bars.jsx";
+import { Dialog } from "./settings-shared.js";
+import { JobSecretsManager } from "./settings-jobs-page.js";
 import { cn } from "../utils.js";
 const ACCEPTED_TYPES = [
   "image/jpeg",
@@ -67,6 +69,7 @@ function ChatInput({ input, setInput, onSubmit, status, stop, files, setFiles, d
   const [modeDropdownOpen, setModeDropdownOpen] = useState(false);
   const [agentPickerOpen, setAgentPickerOpen] = useState(false);
   const [partialText, setPartialText] = useState("");
+  const [secretsOpen, setSecretsOpen] = useState(false);
   const dropdownRef = useRef(null);
   const agentPickerRef = useRef(null);
   const isStreaming = status === "streaming" || status === "submitted";
@@ -301,6 +304,18 @@ function ChatInput({ input, setInput, onSubmit, status, stop, files, setFiles, d
                 )
               ] })
             ] }),
+            !codeMode && /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => setSecretsOpen(true),
+                className: "inline-flex items-center justify-center rounded-lg p-2.5 text-muted-foreground hover:text-foreground",
+                "aria-label": "Manage agent job secrets",
+                title: "Manage agent job secrets",
+                disabled: isStreaming,
+                children: /* @__PURE__ */ jsx(KeyIcon, { size: 16 })
+              }
+            ),
             codeModeSettings && !codeModeSettings.isInteractiveActive && /* @__PURE__ */ jsxs("div", { className: "relative", ref: agentPickerRef, children: [
               agentPickerOpen && codeModeSettings.availableAgents?.length > 1 && /* @__PURE__ */ jsxs("div", { className: "absolute bottom-full left-0 mb-1.5 z-50 min-w-[140px] rounded-md border border-border bg-background shadow-md py-1 overflow-hidden", children: [
                 /* @__PURE__ */ jsx("p", { className: "px-3 pt-0.5 pb-1 text-[10px] font-medium text-muted-foreground uppercase tracking-wide", children: "Launch with" }),
@@ -417,8 +432,24 @@ function ChatInput({ input, setInput, onSubmit, status, stop, files, setFiles, d
       ]
     }
   ) });
-  if (bare) return formContent;
-  return /* @__PURE__ */ jsx("div", { className: "mx-auto w-full max-w-4xl px-1.5 pb-[max(1rem,var(--safe-area-bottom))] md:px-6", children: formContent });
+  const secretsDialog = !codeMode ? /* @__PURE__ */ jsx(
+    Dialog,
+    {
+      open: secretsOpen,
+      onClose: () => setSecretsOpen(false),
+      title: "Agent Job Secrets",
+      maxWidth: "max-w-2xl",
+      children: /* @__PURE__ */ jsx(JobSecretsManager, { showHeader: false })
+    }
+  ) : null;
+  if (bare) return /* @__PURE__ */ jsxs(Fragment, { children: [
+    formContent,
+    secretsDialog
+  ] });
+  return /* @__PURE__ */ jsxs("div", { className: "mx-auto w-full max-w-4xl px-1.5 pb-[max(1rem,var(--safe-area-bottom))] md:px-6", children: [
+    formContent,
+    secretsDialog
+  ] });
 }
 export {
   ChatInput

package/lib/chat/components/chat-input.jsx

@@ -1,11 +1,13 @@
 'use client';
 
 import { useRef, useEffect, useCallback, useState } from 'react';
-import { SendIcon, StopIcon, PaperclipIcon, XIcon, FileTextIcon, MicIcon } from './icons.js';
+import { SendIcon, StopIcon, PaperclipIcon, XIcon, FileTextIcon, MicIcon, KeyIcon } from './icons.js';
 import { useVoiceInput } from '../../voice/use-voice-input.js';
 const getVoiceTokenFetch = () =>
   fetch('/chat/voice-token').then(r => r.json()).catch(() => ({ error: 'Failed to get voice token' }));
 import { VoiceBars } from './voice-bars.jsx';
+import { Dialog } from './settings-shared.js';
+import { JobSecretsManager } from './settings-jobs-page.js';
 import { cn } from '../utils.js';
 
 const ACCEPTED_TYPES = [
@@ -48,6 +50,7 @@ export function ChatInput({ input, setInput, onSubmit, status, stop, files, setF
   const [modeDropdownOpen, setModeDropdownOpen] = useState(false);
   const [agentPickerOpen, setAgentPickerOpen] = useState(false);
   const [partialText, setPartialText] = useState('');
+  const [secretsOpen, setSecretsOpen] = useState(false);
   const dropdownRef = useRef(null);
   const agentPickerRef = useRef(null);
   const isStreaming = status === 'streaming' || status === 'submitted';
@@ -311,6 +314,19 @@ export function ChatInput({ input, setInput, onSubmit, status, stop, files, setF
                 </div>
               )}
 
+              {!codeMode && (
+                <button
+                  type="button"
+                  onClick={() => setSecretsOpen(true)}
+                  className="inline-flex items-center justify-center rounded-lg p-2.5 text-muted-foreground hover:text-foreground"
+                  aria-label="Manage agent job secrets"
+                  title="Manage agent job secrets"
+                  disabled={isStreaming}
+                >
+                  <KeyIcon size={16} />
+                </button>
+              )}
+
               {/* Interactive toggle — left-click to launch with default agent,
                   right-click to pick a specific agent (when multiple are available) */}
               {codeModeSettings && !codeModeSettings.isInteractiveActive && (
@@ -433,10 +449,22 @@ export function ChatInput({ input, setInput, onSubmit, status, stop, files, setF
     </form>
   );
 
-  if (bare) return formContent;
+  const secretsDialog = !codeMode ? (
+    <Dialog
+      open={secretsOpen}
+      onClose={() => setSecretsOpen(false)}
+      title="Agent Job Secrets"
+      maxWidth="max-w-2xl"
+    >
+      <JobSecretsManager showHeader={false} />
+    </Dialog>
+  ) : null;
+
+  if (bare) return <>{formContent}{secretsDialog}</>;
   return (
     <div className="mx-auto w-full max-w-4xl px-1.5 pb-[max(1rem,var(--safe-area-bottom))] md:px-6">
       {formContent}
+      {secretsDialog}
     </div>
   );
 }

package/lib/chat/components/chat.js

@@ -344,100 +344,61 @@ function Chat({ chatId, initialMessages = [], workspace = null, chatMode = null
           }
         ) })
       ] })
-    ] }) }) : /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col min-h-0 overflow-hidden relative", children: [
-      showDiff && workspaceState?.id && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 z-10 bg-black/50" }),
-      showDiff && workspaceState?.id ? /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx("div", { className: "flex-1 min-h-0 z-20 p-0 md:p-4 flex flex-col", children: /* @__PURE__ */ jsx(
-          DiffViewer,
+    ] }) }) : /* @__PURE__ */ jsx("div", { className: "flex flex-1 flex-col min-h-0 overflow-hidden", children: showDiff && workspaceState?.id ? /* @__PURE__ */ jsx(
+      DiffViewer,
+      {
+        workspaceId: workspaceState.id,
+        diffStats,
+        onClose: () => setShowDiff(false)
+      }
+    ) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Messages, { messages, status, onRetry: handleRetry, onEdit: handleEdit }),
+      error && /* @__PURE__ */ jsx("div", { className: "mx-auto w-full max-w-4xl px-2 md:px-4", children: /* @__PURE__ */ jsx("div", { className: "rounded-lg border border-destructive/50 bg-destructive/10 px-4 py-2 text-sm text-destructive", children: error.message || "Something went wrong. Please try again." }) }),
+      /* @__PURE__ */ jsxs("div", { className: "mx-auto w-full max-w-4xl px-4 pb-4 md:px-6", children: [
+        isInteractiveActive && /* @__PURE__ */ jsxs(
+          "a",
+          {
+            href: `/code/${workspaceState?.id}`,
+            className: "flex items-center justify-center gap-2 rounded-xl border border-primary/20 bg-primary/5 px-4 py-3 mb-2 text-sm font-medium text-primary hover:bg-primary/10 transition-colors",
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "h-2 w-2 rounded-full bg-green-500 animate-pulse" }),
+              "Click here to access Interactive Mode"
+            ]
+          }
+        ),
+        workspaceState && /* @__PURE__ */ jsx("div", { className: "rounded-t-xl border border-b-0 border-border px-3 py-2.5", children: /* @__PURE__ */ jsx(
+          WorkspaceBar,
           {
-            workspaceId: workspaceState.id,
+            repo,
+            branch,
+            onBranchChange: handleBranchChange,
+            getBranches: fetchBranches,
+            workspace: workspaceState,
             diffStats,
-            onClose: () => setShowDiff(false)
+            onDiffStatsRefresh: handleDiffStatsRefresh,
+            onShowDiff: () => setShowDiff(true)
           }
         ) }),
-        /* @__PURE__ */ jsx("div", { className: "z-20 px-4 pb-4", children: /* @__PURE__ */ jsxs("div", { className: "mx-auto w-full max-w-4xl", children: [
-          workspaceState && /* @__PURE__ */ jsx("div", { className: "rounded-t-xl border border-b-0 border-border px-3 py-2.5 bg-background", children: /* @__PURE__ */ jsx(
-            WorkspaceBar,
-            {
-              repo,
-              branch,
-              onBranchChange: handleBranchChange,
-              getBranches: fetchBranches,
-              workspace: workspaceState,
-              diffStats,
-              onDiffStatsRefresh: handleDiffStatsRefresh,
-              onShowDiff: () => setShowDiff(true),
-              chatMode: codeMode ? "code" : "agent"
-            }
-          ) }),
-          /* @__PURE__ */ jsx(
-            ChatInput,
-            {
-              bare: true,
-              input,
-              setInput,
-              onSubmit: handleSend,
-              status,
-              stop,
-              files,
-              setFiles,
-              disabled: isInteractiveActive,
-              placeholder: isInteractiveActive ? "Interactive mode is active." : defaultPlaceholder,
-              className: workspaceState ? "rounded-t-none" : void 0,
-              codeMode,
-              codeModeSettings
-            }
-          )
-        ] }) })
-      ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(Messages, { messages, status, onRetry: handleRetry, onEdit: handleEdit }),
-        error && /* @__PURE__ */ jsx("div", { className: "mx-auto w-full max-w-4xl px-2 md:px-4", children: /* @__PURE__ */ jsx("div", { className: "rounded-lg border border-destructive/50 bg-destructive/10 px-4 py-2 text-sm text-destructive", children: error.message || "Something went wrong. Please try again." }) }),
-        /* @__PURE__ */ jsxs("div", { className: "mx-auto w-full max-w-4xl px-4 pb-4 md:px-6", children: [
-          isInteractiveActive && /* @__PURE__ */ jsxs(
-            "a",
-            {
-              href: `/code/${workspaceState?.id}`,
-              className: "flex items-center justify-center gap-2 rounded-xl border border-primary/20 bg-primary/5 px-4 py-3 mb-2 text-sm font-medium text-primary hover:bg-primary/10 transition-colors",
-              children: [
-                /* @__PURE__ */ jsx("span", { className: "h-2 w-2 rounded-full bg-green-500 animate-pulse" }),
-                "Click here to access Interactive Mode"
-              ]
-            }
-          ),
-          workspaceState && /* @__PURE__ */ jsx("div", { className: "rounded-t-xl border border-b-0 border-border px-3 py-2.5", children: /* @__PURE__ */ jsx(
-            WorkspaceBar,
-            {
-              repo,
-              branch,
-              onBranchChange: handleBranchChange,
-              getBranches: fetchBranches,
-              workspace: workspaceState,
-              diffStats,
-              onDiffStatsRefresh: handleDiffStatsRefresh,
-              onShowDiff: () => setShowDiff(true)
-            }
-          ) }),
-          /* @__PURE__ */ jsx(
-            ChatInput,
-            {
-              bare: true,
-              input,
-              setInput,
-              onSubmit: handleSend,
-              status,
-              stop,
-              files,
-              setFiles,
-              disabled: isInteractiveActive,
-              placeholder: isInteractiveActive ? "Interactive mode is active." : defaultPlaceholder,
-              className: workspaceState ? "rounded-t-none" : void 0,
-              codeMode,
-              codeModeSettings
-            }
-          )
-        ] })
+        /* @__PURE__ */ jsx(
+          ChatInput,
+          {
+            bare: true,
+            input,
+            setInput,
+            onSubmit: handleSend,
+            status,
+            stop,
+            files,
+            setFiles,
+            disabled: isInteractiveActive,
+            placeholder: isInteractiveActive ? "Interactive mode is active." : defaultPlaceholder,
+            className: workspaceState ? "rounded-t-none" : void 0,
+            codeMode,
+            codeModeSettings
+          }
+        )
       ] })
-    ] })
+    ] }) })
   ] });
 }
 export {

package/lib/chat/components/chat.jsx

@@ -409,54 +409,13 @@ export function Chat({ chatId, initialMessages = [], workspace = null, chatMode
           </div>
         </div>
       ) : (
-        <div className="flex flex-1 flex-col min-h-0 overflow-hidden relative">
-          {showDiff && workspaceState?.id && (
-            <div className="absolute inset-0 z-10 bg-black/50" />
-          )}
+        <div className="flex flex-1 flex-col min-h-0 overflow-hidden">
           {showDiff && workspaceState?.id ? (
-            <>
-              <div className="flex-1 min-h-0 z-20 p-0 md:p-4 flex flex-col">
-                <DiffViewer
-                  workspaceId={workspaceState.id}
-                  diffStats={diffStats}
-                  onClose={() => setShowDiff(false)}
-                />
-              </div>
-              <div className="z-20 px-4 pb-4">
-                <div className="mx-auto w-full max-w-4xl">
-                  {workspaceState && (
-                    <div className="rounded-t-xl border border-b-0 border-border px-3 py-2.5 bg-background">
-                      <WorkspaceBar
-                        repo={repo}
-                        branch={branch}
-                        onBranchChange={handleBranchChange}
-                        getBranches={fetchBranches}
-                        workspace={workspaceState}
-                        diffStats={diffStats}
-                        onDiffStatsRefresh={handleDiffStatsRefresh}
-                        onShowDiff={() => setShowDiff(true)}
-                        chatMode={codeMode ? 'code' : 'agent'}
-                      />
-                    </div>
-                  )}
-                  <ChatInput
-                    bare
-                    input={input}
-                    setInput={setInput}
-                    onSubmit={handleSend}
-                    status={status}
-                    stop={stop}
-                    files={files}
-                    setFiles={setFiles}
-                    disabled={isInteractiveActive}
-                    placeholder={isInteractiveActive ? 'Interactive mode is active.' : defaultPlaceholder}
-                    className={workspaceState ? "rounded-t-none" : undefined}
-                    codeMode={codeMode}
-                    codeModeSettings={codeModeSettings}
-                  />
-                </div>
-              </div>
-            </>
+            <DiffViewer
+              workspaceId={workspaceState.id}
+              diffStats={diffStats}
+              onClose={() => setShowDiff(false)}
+            />
           ) : (
             <>
               <Messages messages={messages} status={status} onRetry={handleRetry} onEdit={handleEdit} />

package/lib/chat/components/index.js

@@ -13,7 +13,7 @@ export { SettingsUsersPage } from './settings-users-page.js';
 export { HelperLlmPage, ChatConfigPage, ChatProvidersPage, SettingsChatPage } from './settings-chat-page.js';
 export { ChatProvidersPage as LlmsPage } from './settings-chat-page.js';
 export { CodingAgentsPage } from './settings-coding-agents-page.js';
-export { JobsPage } from './settings-jobs-page.js';
+export { JobsPage, JobSecretsManager } from './settings-jobs-page.js';
 export { GitHubTokensPage, GitHubSecretsPage, GitHubVariablesPage, SettingsGitHubPage } from './settings-github-page.js';
 export { SettingsGeneralPage } from './settings-general-page.js';
 export { ProfileLayout, ProfileLoginPage, ProfileTelegramPage } from './profile-page.js';

package/lib/chat/components/settings-jobs-page.js

@@ -489,7 +489,7 @@ function OAuthSecretRow({ secret, onReauthorize, onDelete }) {
     ] })
   ] });
 }
-function JobsPage() {
+function JobSecretsManager({ showHeader = true }) {
   const [secrets, setSecrets] = useState([]);
   const [loading, setLoading] = useState(true);
   const [showAdd, setShowAdd] = useState(false);
@@ -526,7 +526,7 @@ function JobsPage() {
     return /* @__PURE__ */ jsx("div", { className: "h-48 animate-pulse rounded-md bg-border/50" });
   }
   return /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-3 mb-4", children: [
+    showHeader ? /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-3 mb-4", children: [
       /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
         /* @__PURE__ */ jsx("h2", { className: "text-base font-medium", children: "Job Secrets" }),
         /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Custom environment variables passed to agent job containers. These are merged with built-in auth credentials when launching jobs." })
@@ -542,7 +542,17 @@ function JobsPage() {
           ]
         }
       ) })
-    ] }),
+    ] }) : /* @__PURE__ */ jsx("div", { className: "flex items-center justify-end mb-4", children: /* @__PURE__ */ jsxs(
+      "button",
+      {
+        onClick: () => setShowAdd(true),
+        className: "inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-medium bg-foreground text-background hover:bg-foreground/90 shrink-0 transition-colors",
+        children: [
+          /* @__PURE__ */ jsx(PlusIcon, { size: 14 }),
+          "Add secret"
+        ]
+      }
+    ) }),
     /* @__PURE__ */ jsx(
       AddSecretDialog,
       {
@@ -591,6 +601,10 @@ function JobsPage() {
     )) }) })
   ] });
 }
+function JobsPage() {
+  return /* @__PURE__ */ jsx(JobSecretsManager, {});
+}
 export {
+  JobSecretsManager,
   JobsPage
 };

package/lib/chat/components/settings-jobs-page.jsx

@@ -590,7 +590,7 @@ function OAuthSecretRow({ secret, onReauthorize, onDelete }) {
 // Jobs page
 // ─────────────────────────────────────────────────────────────────────────────
 
-export function JobsPage() {
+export function JobSecretsManager({ showHeader = true }) {
   const [secrets, setSecrets] = useState([]);
   const [loading, setLoading] = useState(true);
   const [showAdd, setShowAdd] = useState(false);
@@ -635,12 +635,24 @@ export function JobsPage() {
 
   return (
     <div>
-      <div className="flex items-start justify-between gap-3 mb-4">
-        <div className="min-w-0">
-          <h2 className="text-base font-medium">Job Secrets</h2>
-          <p className="text-sm text-muted-foreground">Custom environment variables passed to agent job containers. These are merged with built-in auth credentials when launching jobs.</p>
+      {showHeader ? (
+        <div className="flex items-start justify-between gap-3 mb-4">
+          <div className="min-w-0">
+            <h2 className="text-base font-medium">Job Secrets</h2>
+            <p className="text-sm text-muted-foreground">Custom environment variables passed to agent job containers. These are merged with built-in auth credentials when launching jobs.</p>
+          </div>
+          <div className="flex items-center gap-2 shrink-0 pt-0.5">
+            <button
+              onClick={() => setShowAdd(true)}
+              className="inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-medium bg-foreground text-background hover:bg-foreground/90 shrink-0 transition-colors"
+            >
+              <PlusIcon size={14} />
+              Add secret
+            </button>
+          </div>
         </div>
-        <div className="flex items-center gap-2 shrink-0 pt-0.5">
+      ) : (
+        <div className="flex items-center justify-end mb-4">
           <button
             onClick={() => setShowAdd(true)}
             className="inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-medium bg-foreground text-background hover:bg-foreground/90 shrink-0 transition-colors"
@@ -649,7 +661,7 @@ export function JobsPage() {
             Add secret
           </button>
         </div>
-      </div>
+      )}
       <AddSecretDialog
         open={showAdd}
         onAdd={handleAdd}
@@ -696,3 +708,7 @@ export function JobsPage() {
     </div>
   );
 }
+
+export function JobsPage() {
+  return <JobSecretsManager />;
+}

package/lib/chat/components/settings-shared.js

@@ -271,7 +271,7 @@ function VariableRow({ name, isSet, currentValue, onUpdate, onDelete }) {
     ] })
   ] });
 }
-function Dialog({ open, onClose, title, children }) {
+function Dialog({ open, onClose, title, children, maxWidth = "max-w-md" }) {
   const ref = useRef(null);
   useEffect(() => {
     if (!open) return;
@@ -289,7 +289,7 @@ function Dialog({ open, onClose, title, children }) {
         "div",
         {
           ref,
-          className: "relative z-50 w-full max-w-md mx-4 rounded-lg border border-border bg-background p-6 shadow-lg",
+          className: `relative z-50 w-full ${maxWidth} mx-4 rounded-lg border border-border bg-background p-6 shadow-lg max-h-[90vh] overflow-y-auto`,
           onClick: (e) => e.stopPropagation(),
           children: [
             /* @__PURE__ */ jsx("h3", { className: "text-base font-semibold mb-4", children: title }),

package/lib/chat/components/settings-shared.jsx

@@ -289,7 +289,7 @@ export function VariableRow({ name, isSet, currentValue, onUpdate, onDelete }) {
 // Dialog — standardized modal
 // ─────────────────────────────────────────────────────────────────────────────
 
-export function Dialog({ open, onClose, title, children }) {
+export function Dialog({ open, onClose, title, children, maxWidth = 'max-w-md' }) {
   const ref = useRef(null);
 
   useEffect(() => {
@@ -306,7 +306,7 @@ export function Dialog({ open, onClose, title, children }) {
       <div className="fixed inset-0 bg-black/50" onClick={onClose} />
       <div
         ref={ref}
-        className="relative z-50 w-full max-w-md mx-4 rounded-lg border border-border bg-background p-6 shadow-lg"
+        className={`relative z-50 w-full ${maxWidth} mx-4 rounded-lg border border-border bg-background p-6 shadow-lg max-h-[90vh] overflow-y-auto`}
         onClick={(e) => e.stopPropagation()}
       >
         <h3 className="text-base font-semibold mb-4">{title}</h3>

package/lib/code/code-page.js

@@ -266,7 +266,7 @@ function CodePage({ session, codeWorkspaceId }) {
     /* @__PURE__ */ jsxs(SidebarInset, { children: [
       /* @__PURE__ */ jsxs("div", { className: "flex h-svh flex-col overflow-hidden", children: [
         /* @__PURE__ */ jsx(ChatHeader, { workspaceId: codeWorkspaceId }),
-        /* @__PURE__ */ jsxs("div", { className: "flex items-end gap-0 px-4 bg-muted/30 border-b border-border shrink-0 overflow-x-auto scrollbar-hide", children: [
+        !showDiff && /* @__PURE__ */ jsxs("div", { className: "flex items-end gap-0 px-4 bg-muted/30 border-b border-border shrink-0 overflow-x-auto scrollbar-hide", children: [
           /* @__PURE__ */ jsx(
             PinnedTab,
             {

package/lib/code/code-page.jsx

@@ -310,7 +310,8 @@ export default function CodePage({ session, codeWorkspaceId }) {
           <div className="flex h-svh flex-col overflow-hidden">
             <ChatHeader workspaceId={codeWorkspaceId} />
 
-            {/* Tab bar */}
+            {/* Tab bar — hidden while diff viewer is open so it fills the content area */}
+            {!showDiff && (
             <div className="flex items-end gap-0 px-4 bg-muted/30 border-b border-border shrink-0 overflow-x-auto scrollbar-hide">
               {/* Primary Code tab — pinned, not draggable */}
               <PinnedTab
@@ -429,6 +430,7 @@ export default function CodePage({ session, codeWorkspaceId }) {
                 + Port
               </button>
             </div>
+            )}
 
             {/* Tab content panels — all mounted, hidden via display */}
             <div style={{ position: 'relative', flex: 1, minHeight: 0, display: 'flex', flexDirection: 'column' }}>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "thepopebot",
-  "version": "1.2.76-beta.25",
+  "version": "1.2.76-beta.27",
   "type": "module",
   "description": "Create autonomous AI agents with a two-layer architecture: Next.js Event Handler + Docker Agent.",
   "bin": {

package/templates/skills/agent-job-tools/SKILL.md

@@ -1,6 +1,6 @@
 ---
 name: agent-job-tools
-description: Use when you need to access agent secrets, API keys, or create and manage background jobs. Supports listing keys and retrieving values, with OAuth credentials auto-refreshed. Also handles requests to "create a background job," "spawn a job," or "kick off an agent job."
+description: Use when you need to access agent secrets, API keys, or create and manage background jobs. Supports listing api keys, OAuth credentials (auto-refreshed). Also handles requests to "create a background job," "spawn a job," or "kick off an agent job."
 ---
 
 ## Usage