Merge branch 'worktree-fix-permission-request-ui' into dev

src/renderer/components/team/ToolApprovalSheet.tsx

@@ -7,7 +7,10 @@ import { shortenDisplayPath } from '@renderer/utils/pathDisplay';
 import { highlightLines } from '@renderer/utils/syntaxHighlighter';
 import { AlertTriangle, FileText, Search, Terminal } from 'lucide-react';
 
-import { ToolApprovalSettingsPanel } from './dialogs/ToolApprovalSettingsPanel';
+import {
+  ToolApprovalSettingsContent,
+  ToolApprovalSettingsToggle,
+} from './dialogs/ToolApprovalSettingsPanel';
 import { FileIcon } from './editor/FileIcon';
 import { ToolApprovalDiffPreview } from './ToolApprovalDiffPreview';
 
@@ -124,6 +127,7 @@ export const ToolApprovalSheet: React.FC = () => {
   const [disabled, setDisabled] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [diffExpanded, setDiffExpanded] = useState(false);
+  const [settingsExpanded, setSettingsExpanded] = useState(false);
 
   // Clear error when current approval changes
   useEffect(() => {
@@ -333,10 +337,16 @@ export const ToolApprovalSheet: React.FC = () => {
                 {pendingApprovals.length - 1} pending
               </span>
             )}
-            <ToolApprovalSettingsPanel />
+            <ToolApprovalSettingsToggle
+              expanded={settingsExpanded}
+              onToggle={() => setSettingsExpanded((v) => !v)}
+            />
           </div>
         </div>
 
+        {/* Settings expanded content — below actions row */}
+        <ToolApprovalSettingsContent expanded={settingsExpanded} />
+
         {/* Timeout progress bar */}
         <TimeoutProgress receivedAt={current.receivedAt} />
       </div>

src/renderer/components/team/dialogs/ToolApprovalSettingsPanel.tsx

@@ -13,18 +13,13 @@ import { ChevronDown, ChevronRight, Settings } from 'lucide-react';
 
 import type { ToolApprovalTimeoutAction } from '@shared/types';
 
-export const ToolApprovalSettingsPanel: React.FC = () => {
+export const ToolApprovalSettingsToggle: React.FC<{ expanded: boolean; onToggle: () => void }> = ({
-  const [expanded, setExpanded] = useState(false);
+  expanded,
-  const [localSeconds, setLocalSeconds] = useState<string>('');
+  onToggle,
-  const settings = useStore((s) => s.toolApprovalSettings);
+}) => (
-  const updateSettings = useStore((s) => s.updateToolApprovalSettings);
-
-  return (
-    <>
-      {/* Toggle button — rendered inline in parent layout */}
   <button
     type="button"
-        onClick={() => setExpanded(!expanded)}
+    onClick={onToggle}
     className="flex items-center gap-1.5 rounded px-2 py-1 text-[11px] transition-colors"
     style={{ color: 'var(--color-text-muted)' }}
     onMouseEnter={(e) => {
@@ -40,11 +35,18 @@ export const ToolApprovalSettingsPanel: React.FC = () => {
     <span>Settings</span>
     {expanded ? <ChevronDown className="size-3" /> : <ChevronRight className="size-3" />}
   </button>
+);
 
-      {/* Collapsible panel — full-width, below toggle */}
+export const ToolApprovalSettingsContent: React.FC<{ expanded: boolean }> = ({ expanded }) => {
-      {expanded && (
+  const [localSeconds, setLocalSeconds] = useState<string>('');
+  const settings = useStore((s) => s.toolApprovalSettings);
+  const updateSettings = useStore((s) => s.updateToolApprovalSettings);
+
+  if (!expanded) return null;
+
+  return (
     <div
-          className="mx-4 mb-2 mt-1 space-y-3 rounded-md border p-3"
+      className="mx-4 mb-2 space-y-3 rounded-md border p-3"
       style={{
         backgroundColor: 'var(--color-surface)',
         borderColor: 'var(--color-border)',
@@ -159,7 +161,5 @@ export const ToolApprovalSettingsPanel: React.FC = () => {
         )}
       </div>
     </div>
-      )}
-    </>
   );
 };