feat(tui): add file cycling in multi-file permission prompt (anomalyco#23262)

Author: Integralist

FORK.md

@@ -47,6 +47,7 @@ git push -u origin <your-custom-branch>
 
 ### 2026-07-17
 
+-**Ported PR #23262 (File Cycling in Permission Prompt):** Ported the file cycling feature from upstream PR #23262 to [packages/tui/src/routes/session/permission.tsx](file:///Users/mmcdonnell/code/opencode/packages/tui/src/routes/session/permission.tsx). This enables cycling through multiple files inside the TUI permission dialog using `[` and `]` keys.
 -**Added [FORK.md](file:///Users/mmcdonnell/code/opencode/FORK.md):** Outlines branching, syncing, and custom workspace strategy.
 -**Added [Makefile](file:///Users/mmcdonnell/code/opencode/Makefile):** Standard checkmake-compliant targets for building, cleaning, testing, and syncing with automatic Bun dependency management.
 -**Updated [Makefile](file:///Users/mmcdonnell/code/opencode/Makefile):** Added `push` target to automate pushing the active custom branch to your fork.

packages/tui/src/routes/session/permission.tsx

@@ -1,7 +1,7 @@
 import{createStore}from"solid-js/store"
 import{dirname}from"node:path"
 import{createMemo,For,Match,Show,Switch}from"solid-js"
-import{Portal,useRenderer,useTerminalDimensions,typeJSX}from"@opentui/solid"
+import{Portal,useRenderer,useTerminalDimensions,useKeyboard,typeJSX}from"@opentui/solid"
 importtype{TextareaRenderable}from"@opentui/core"
 import{useTheme,selectedForeground}from"../../context/theme"
 importtype{PermissionRequest}from"@opencode-ai/sdk/v2"
@@ -16,21 +16,51 @@ import { getScrollAcceleration } from "../../util/scroll"
 import{useTuiConfig}from"../../config"
 import{OPENCODE_BASE_MODE,useBindings,useCommandShortcut}from"../../keymap"
 import{usePathFormatter}from"../../context/path-format"
+import{useDialog}from"../../ui/dialog"
 
 typePermissionStage="permission"|"always"|"reject"
 
+interfaceFileEntry{
+relativePath: string
+patch: string
+filePath: string
+type: string
+additions: number
+deletions: number
+}
+
+functionfileTitle(file?: FileEntry){
+if(!file)return""
+if(file.type==="delete")return"Deleted "+file.relativePath
+if(file.type==="add")return"Created "+file.relativePath
+return"Patched "+file.relativePath
+}
+
 functionEditBody(props: {request: PermissionRequest}){
 constthemeState=useTheme()
 consttheme=themeState.theme
 constsyntax=themeState.syntax
 constconfig=useTuiConfig()
 constdimensions=useTerminalDimensions()
+constdialog=useDialog()
+
+constfiles=createMemo(()=>{
+constraw=props.request.metadata?.files
+returnArray.isArray(raw) ? (rawasFileEntry[]) : []
+})
+
+const[store,setStore]=createStore({fileIndex: 0})
+
+constisMultiFile=createMemo(()=>files().length>1)
+constcurrentFile=createMemo(()=>files()[store.fileIndex])
 
 constfilepath=createMemo(()=>{
+if(isMultiFile())returncurrentFile()?.filePath??""
 constvalue=props.request.metadata?.filepath
 returntypeofvalue==="string" ? value : ""
 })
 constdiff=createMemo(()=>{
+if(isMultiFile())returncurrentFile()?.patch??""
 constvalue=props.request.metadata?.diff
 returntypeofvalue==="string" ? value : ""
 })
@@ -44,8 +74,30 @@ function EditBody(props: { request: PermissionRequest }) {
 constft=createMemo(()=>filetype(filepath()))
 constscrollAcceleration=createMemo(()=>getScrollAcceleration(config))
 
+useKeyboard((evt)=>{
+if(dialog.stack.length>0)return
+if(!isMultiFile())return
+
+if(evt.name==="]"){
+evt.preventDefault()
+setStore("fileIndex",(i)=>(i+1)%files().length)
+}
+if(evt.name==="["){
+evt.preventDefault()
+setStore("fileIndex",(i)=>(i-1+files().length)%files().length)
+}
+})
+
 return(
 <boxflexDirection="column"gap={1}>
+<Showwhen={isMultiFile()}>
+<boxflexDirection="row"justifyContent="space-between"paddingLeft={1}paddingRight={1}>
+<textfg={theme.text}>{fileTitle(currentFile())}</text>
+<textfg={theme.textMuted}>
+{store.fileIndex+1}/{files().length}
+</text>
+</box>
+</Show>
 <Showwhen={diff()}>
 <scrollbox
 height="100%"
@@ -199,10 +251,17 @@ export function PermissionPrompt(props: { request: PermissionRequest; directory?
 if(permission==="edit"){
 constraw=props.request.metadata?.filepath
 constfilepath=typeofraw==="string" ? raw : ""
+constfilesArray=Array.isArray(props.request.metadata?.files) ? props.request.metadata.files : []
+consthasMultipleFiles=filesArray.length>1
 return{
 icon: "→",
 title: `Edit ${pathFormatter.format(filepath)}`,
 body: <EditBodyrequest={props.request}/>,
+hints: hasMultipleFiles ? (
+<textfg={theme.text}>
+{"[ ]"}<spanstyle={{fg: theme.textMuted}}>files</span>
+</text>
+) : undefined,
 }
 }
 
@@ -405,6 +464,7 @@ export function PermissionPrompt(props: { request: PermissionRequest; directory?
 options={{once: "Allow once",always: "Allow always",reject: "Reject"}}
 escapeKey="reject"
 fullscreen
+hints={current.hints}
 onSelect={(option)=>{
 if(option==="always"){
 setStore("stage","always")
@@ -528,6 +588,7 @@ function Prompt<const T extends Record<string, string>>(props: {
 options: T
 escapeKey?: keyofT
 fullscreen?: boolean
+hints?: JSX.Element
 onSelect: (option: keyofT)=>void
 }){
 const{ theme }=useTheme()
@@ -694,6 +755,7 @@ function Prompt<const T extends Record<string, string>>(props: {
 </For>
 </box>
 <boxflexDirection="row"gap={2}flexShrink={0}>
+<Showwhen={props.hints}>{props.hints}</Show>
 <Showwhen={props.fullscreen}>
 <textfg={theme.text}>
 {fullscreenHint()}<spanstyle={{fg: theme.textMuted}}>{hint()}</span>