thepopebot 1.2.76-beta.26 → 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/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.26",
+  "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": {