Transcription
In the GPT chat, there is such an interesting feature for programming, Codex. And I am trying it. Trying this tool. I specifically did not launch it, to try it fresh and record. At the beginning, it suggests connecting to your GitHub and says that there are such points here. In parallel, it creates drafts for pull requests. Get early access to every bug fix, documentation update. And so on. It navigates your codebase, finds errors, checks code, and suggests improvements. This is either for everything that is on GitHub, or simply within a separate project, which is also very good, because the weakness of neural networks so far is that, well, it captures a small context. And here it will familiarize itself with the entire codebase, yes, I think so, with the entire file structure. It runs lint tests, well, like for code quality. Based on the new code writing model, it is perfectly tuned for working in large codebases. Intriguing. Let's try. So, connecting to GitHub. Authorize Connect. So, Firefox says it blocked a pop-up window. Settings allow for ChatGPT. Opchik. Connector. Install authorize all repositories. Aha, yes. For all repositories. How good it is that I unblocked it, otherwise it would have been bad and wouldn't have worked. So, pay attention to this moment, because I am giving access to all my repositories to ChatGPT. Create, it says, your starting environment. Select a repository to set up the basics. Hmm, a specific GitHub repository. Agent's access to the internet is off. On. Let the agent have internet access. Hmm, domain whitelist, common dependencies. Nothing, without restrictions. I don't want any restrictions. So, I allow all methods. So, enabling internet access exposes your environment to security threats. These include rapid code or secret exfiltration, inclusion. There's nothing like that there, I have no secrets. So, and the repository. Well, I won't click here, otherwise I'll choose some repository, and I'm setting up the environment. So, this list includes only repositories that you have on GitHub. Ah, well, these are mine. Well, okay, normal. I won't choose anything here. And still, something needs to be chosen, for example, about me. Then I can create. Aha, I have to click on what I want to create. Well, probably many such environments can be created, or changed, edited. Hmm, Abstract API. So, Abstract API, of course. And this can no longer be clicked. And only one is selected. But this is an interesting project. Abstract API is the development of such a universal API base. This can be interesting for everyone, for many. I also wanted to get involved, of course, not in this matter. I was set up to tinker with React Next, but Abstract API is also, of course, interesting. I haven't touched it for a long time. But this is for later, for dessert, I'll take this gallery. Or the gallery gallery gallery or whatever it's called. A showcase, like a display. I have pressing issues there. This is on Next. How to better organize the code, because there is an interesting technological stack. Environment successfully created. Ready. When are you ready? I'm ready when you are. We have selected several tasks to start with. Ask for code. Ask. Ask. Explain the codebase to a beginner, what is the overall structure, what is important to know, and what hints should be studied further. The checkbox is checked. Choose an important part of the codebase. Find and fix an error. Checkbox is also checked. It will do these two tasks immediately, it will explain my code. That's good. And search for some bugs. And ask: "Look at the codebase, find problems, suggest one task for fixing a typo, one task for fixing an error, one." Okay, that's fine. I'll write what I want myself, if there's no checkbox here, because there is one here and okay. Assign tasks, right? Start tasks. Now the movement will begin. So, what should we code next? Oh, they're coming. Wow, he's an agent. That's awesome. So, he probably does it himself. And then we make a pull request. This is very interesting. So, best of N. Create several solutions to choose the best approach for version 1x. Here are some versions of solutions, perhaps. And here he is search, thinking, downloading, in short, working. And here is the project itself, Showcase. Pupapuparupupu. Where are you? Where? Here it is. Showcase. Now I'll launch it, I'll show it. This is like an art gallery. This is an art gallery. I made it about a year ago. Here is Redux, React, server-side rendering, all that stuff. So, in case there's anything new, check. Nothing new here. No. Then open in VS Code and run. So, it works. That's good. It works there. It works, it works. Cool. In the meantime, I'll work. Some updates. And, so, I need to run. Ah, node_modules are there. Everything is installed here. And then run. Where is package.json? Package, package, package.json, dependencies, script, start. So, start. NPM start. NPM. Start, we're launching. The heat is on. Hmm, incorrect. Dev, need npm run dev. Now the heat is on. Localhost 3000. So, follow link. Well, let's launch with control. Here it launched. Uh-huh. This is an art gallery on Next, on React server-side. These are my mom's paintings. Here are the paintings. I made a dark background. Here is some blur to cut, to wash out the photos, so as not to cut out each painting. And there is a provision for login. I have one error here. And there is an error somewhere. Maybe ChatGPT will find it. What bothers me here. What bothers me is how the pages are implemented. How many pages are there here? About. Here is the work with this plus-minus with the storage and home, about, and home at least there are these pages. They are represented by modules. Here, in the new, in the Next way. Here [music] about and what? And somewhere is the main page. Somewhere it exists. There is no router here, but automatically, apparently. So, content page and page. This intermediary bothers me. We are making such an intermediary. It already displays the client page. This resolves the issues related to Redux. This is the work with the store, with the storage. Ah, where is it? Use dispatch [music] red value, this is such a use selector. In short, there is its own little mess here. And how to resolve server-side and frontend and Redux, and so that everything is clear there. That's what I'll be asking ChatGPT about later, through Codex, to resolve. And now let's see what it has, like, worked on these three tasks, which were done, done, done 5 minutes, 4 minutes, 3 minutes ago. Hmm. And it did something. It did something. And maybe it even committed it, or how does all this happen? Branch main. Write the task. Or did I get some pull request? If it committed, then it will appear here. No, it didn't commit. Maybe I'll go to GitHub and check. So, I'm on GitHub. Something is flashing at me here. No, this is just express. I'm following express. Inbox, incoming. Some new thing, but I'll browse my repositories. I'll see if anything has been added here. Well, nothing has come to the front. Hmm, 15 commits, this is all mine. Let's look at pull requests. Nothing. Aha. So, it worked somehow. But I need to understand what and how. But so as not to click on something wrong, I'll ask ChatGPT. So, ChatGPT, look, I launched, tried this feature for the first time, it's called Codex. Everything, connected, configured. Three tasks were immediately loaded into my repository. They worked. And what's next? Where are the changes? What to do next? Orient me. ChatGPT. I used your feature for the first time. It's called Codex. Oh, you damn. Ah, so now. So, look, in your interface, there is such a thing. Codex. Do you mean that in my interface there is a section called Codex? It's not a separate tool, but a set of rules and principles by which I work. How to answer, how to behave in conversation, what to consider. Essentially, it's my built-in legal framework that defines style, limitations, and permissible actions. Would you like me to explain in more detail what exactly is embedded in this Codex? For example, communication rules, content restrictions, or internal logic of operation? Not at all. It's a special feature for working with code. It connects to GitHub repositories. Tasks are entered. Understood. You mean Codex as a tool related to GitHub repositories, tasks, and automation, not just rules of conduct. Yes, this is exactly OpenAI Codex. And this is a cloud agent built into ChatGPT. You connect a GitHub repository, formulate a task through the interface, code for actions, ask for questions, and it works autonomously, runs code, tests, makes commits. Upon completion, it suggests a PR or directly applies changes to me, showing terminal logs and test results. That's how it usually works. Would you like me to explain in a more structured way the connection of GitHub repositories, task architecture, or what limitations and capabilities Codex has? Ah, look, I have three tasks completed. First, locate issue in the codebase. Second, explain codebase structure to beginners. And third, locate and fix critical code error. And there are p9. There are really changes here, but I don't see where to go, where to see all this. Aha, understood. You're talking about those very tasks that are launched in Codex and actually make changes to the repository. Here's the thing: the result of these tasks is not stored within the Codex interface, but goes directly to the GitHub repository to which you connected it. That is, the changes are reflected as regular commits. You can go to your GitHub, open the Commits tab or Pull Requests and see those 7-9. It's the diff. How many lines were added, deleted. Within ChatGPT, you usually only see the execution log. Success, success. What steps were taken? And to see the code itself, you need to go to GitHub. Would you like me to explain step-by-step where exactly on GitHub to look? Commits, Branches, or do you already have access to the repo and just need the entry point? Well, this is my repository. There are no commits yet, no pull requests. Perhaps they happen when I confirm it or something? Yes, that's right, you've got it. In Codex, tasks are executed in an isolated environment. It can analyze code, collect diffs, these plus-sevens, and prepare changes, but they don't automatically go into the repository until you accept them. Usually, it looks like a suggestion to create a pull request or commit changes. If you don't confirm, then it stays only in the Codex interface, and GitHub is empty. Therefore, what you see as changes is a report of task completion. But the final push to your repository must be explicitly initiated. Would you like me to suggest where exactly in the interface this confirmation should appear to bring it to reality? You know, in this list of tasks, I clicked on one and went into the code where I can see it. Why didn't you tell me? My mistake. You should have told me right away that you can drill down into the code and diff within a task. Briefly, where to look and how to bring the changes to the repo? And where to see the results? Open Codex, Tasks tab, click on the desired task. There you usually find File Changes diff, viewing modified files and lines. Here are logs, step-by-step logs of what the agent was doing. Artifacts, generated report files, if any. If the task was explain codebase, look for report notes within the task card. And if it was Locate and Fix, in Changes diff you will find the specific patch and a link to the prepared PR branch, if you allowed it to be created. How to turn this into actual PR commits? Within the task card, look for a button like "Create Pull Request," "Apply Changes," "Push Changes." If you don't have permissions or haven't confirmed, the PR won't be created and GitHub will be empty. Ah, check that the GitHub connector is connected and that this repository has read permissions, GPT settings, Connectors, GitHub, selected repositories. OpenAI Help Center. In some configurations for organizations, there is onboarding, steps in Codex, connect to GitHub. Select installation, grant permission. Without this, the PR will not appear. OpenAI Help Center 3, where will it appear on GitHub? After confirmation, it will appear as a commit in a separate branch. Look at Pull Requests or Branches in your. If the mode is set to only prepare the diff without auto-push, in Codex, look for the corresponding publish button. Cheat, if the "Create PR" button is not there, it means the task was executed in a sandbox and only provided a local diff. Then download it. So, well, in general, this button has been found. Here, top right, create pull request. Good. We figured it out. Well, let's go browse all the tasks. Then the first, or the second, explain codebase structure, which explains, in principle, the structure of this codebase. So, what does it say about this project of ours, which is here? Here on the main page, the paintings are organized. Below is information about the paintings, and there is an about page. So, what did it look at, this code of ours, how will it guide us? Well, let's get into context, immerse ourselves, load this context into ourselves. It says project overview repository. Typical Next.js project version 15, React 19. Redux Toolkit is used. Tailwind CSS is used as the main dependencies. The main layout is AppLayout.tsx. This is the main layout. Wow, there are even such callouts here. Here are the dependencies. Hmm, Global CSS. So, AppLayout.tsx. Let's look. App layout TSX. Here is Navigation, this is the top bar, and providers. Ah, and children are inserted here. Such a wrapper, providers. Hmm. And then the page, right? Here's the page. Here is information about all the paintings. And here is client page initial state. Information is passed there. Initial state in client page. Here is this client page, where is this client page? Here is client page, and somewhere here. Here it is. So, this is a wrapper. This is the page itself. We put the information there. Here's how it works. Client page and page, there is layout, providers. Pages are inserted here. So, essentially, this page, page, page, page appears here immediately. And if we switch, then this is page. Okay. So, in layout TSX, we can orient ourselves. The page appears there in the context of the layout. So, the main layout connects global styles. Global styles are connected in the layout. Where? Ah, here, here are the global styles. Where could it be better to put them, at the top? It's like that. Okay, I don't want to change it, so as not to mix up pull requests, commits, people, and icons. The navigation header and wrapping the entire application in a Redux provider. Here is the navigation header. Here it is. And everything in Redux. Here are the providers. Lib providers. Uh-huh. Lib providers. There are all providers, including Redux. Here in these providers, there is one, but you can add more. Here it oriented itself and oriented me, so that I remember, because I already forgot how I did all this. No, I can orient myself, but this is faster. Providers component. Makes the Redux store accessible to client components. Here. Well, essentially, this is the implementation of this storage. The state is stored in the store, where slices are combined. Well, a classic thing for Redux. The interface for painting data is defined in interfaces/painting.ts. Yes, the painting data is described in the interface. There are interfaces defined. Everything is done here in a fancy, top-class, correct way. Title, image, description. All this, when we click on each painting, the data structure is moved there. Slice painting. Slice manages the list and the selected item. Painting slice. There is a slice in the store. Store, painting slice. And what do we have here? List, selected painting. Yes. Selected painting. When we click here, we select a painting, and it is displayed through the storage. And F12, is there Redux or not? Redux is in another browser. Okay. So, the main page forms an array of paintings on the server and passes it to the client component. Here. So, what happens in this wrapper, this page, this entire array of paintings. And then it's passed here. This is already the client part of the page. Here. And here we will ask how normal this is. [music] I'll tell him like this, as he himself said. The main page forms an array on the server. Passes it to the client component. Look, buddy, are you recording me? No. Something is wrong with him. Back, forward. Oops, one more time. Or do I need to hold it, maybe? I'm holding it. No. Done. Well, something like it's not working. I'll write to him manually. Here's what I'm telling him. I say: "Attention to the implementation of pages." Pages consist of a page, which is a wrapper, and a component, the client part of the page. This is how the storage integration is resolved. How normal is this? And maybe there are better practices? I haven't finished reading this yet. I'll be reading this now. Aha. This is to ask, and this is a longer ask. Let's go. So, he's working on my task, thinking about something, right? Uh, starting container. Hmm, okay. And in the meantime, we'll look further. So. Client Page synchronizes the server list with Redux, allowing you to select a painting and display its details. Navigation is present. Navigation.tsx uses a custom nav link and client-side active link for highlighting the current route. API Hello.ts. An example API handler returning a JSON response is present. The path @ is configured in the config and points to the project root. In doc source, there is a link to Tailwind UI, the source of visual solutions and ideas for components. What to study next? Next.js documentation recommends studying it. Sections on Router ApproS will help you understand how the server and client parts of the application are structured. Redux Toolkit, create slice, configure store, this is like a wind pattern, atoms, molecules, organisms, folder structure, components help to reuse UI blocks, but here I probably use all this, atoms, molecules, or like components, molecule, organism, yes, this is present because it is used here, and TypeScript pslpates. So, this is his answer. Hmm, I said: "Pay attention to the implementation of pages." Pages consist of a page. I say, like, can you organize it in some better way, like look at the log. And he gave me code. Probably, is this the implementation? How can this be implemented? painting preview painting initial state effect use state export default client page this is the client part and what so this is already there m it turned out unclear, like giving a task is one thing. And here, it turns out he took client page, that is, essentially this thing, and did something here. What could he have cleaned it up or something? This is some kind of No, he didn't clean it up. Like something better. He didn't understand. Ah, well, I'll elaborate a bit, I'll tell him. I went up, and here is running and code, like it's still working? Ah, here he is like, sharing. No, he's still thinking, probably. Here he has, like, what, ah, this is his thought process on my question. He says: "I will check the code to understand page approach, like the page wrapper approach, like the wrapper of the page, where it is." Access my improvements. As access and assess, what does that word mean? Hmm, summarize, right? Aha, explained, summarized. improvements. So, he's still thinking, "I will explore the repository to analyze where the page and client component implementation is." "I will run ls to view the files in the current repository." He's doing this command in the terminal. So, he's like, sharing like this, with the help of commands, well, like he's in the terminal, essentially. Well, like that. So, he's in the terminal, sharing through the terminal. And he looked at the file structure. The shell might not be interactive. Pam-param-param. So, he's looking at something. PWD Workspace root Workspace, he entered. He's looking at the file structure. I will check AppLayout.tsx, he's looking at this page, entry related component, like I will look at this page and related components. To assess the structure, to assess this structure. I will run ls app again output to check something else. He's looking. Uh-huh. Uh-huh. I look like. So, he looked at this, then like this, page, right? Or yes, this is page. He first looked at the wrapper, familiarized himself, then with this, which is inserted inside, looked, familiarized himself. Client page. Client page. Like, I will open client page and make sure to display line numbers. He also decided to look there, and he's like, still thinking. Yes. Yes. Here, it seems like he's still thinking. Well, let him ponder this question of mine. Hmm. So. Locate and fix critical code error. So, like, find, like, locate and fix a critical error in the code. This is probably this error that is flashing here. Ah, hydration, like, problems with hydration. And hydration is probably the difference between what's on the backend and what's on the frontend. Something related to style modes, like window, these kinds of messes, which are essentially not errors, but in a very strict approach, errors. This is probably what he fixed. And what did he do? Added a link. So, he added this link, removed the span, added the link. Where is this? In molecule/active-link. Uh-huh. These are some links that we click on. Maybe the links are here or here. And he did it a little differently, removed the span. Did it through a link. So, removed this, did it like this. Hmm, this href-ref. I struggled with this, and I did it like this, because I had to. And he did it in a new, correct way. I knew it, but something wasn't working out. Well, let's see, maybe it will work out, why not. So, meaning he fixed something there for a better implementation. Good, let's try, let's see. I'll apply it. So. And here, look at the codebase, find problems, and suggest one task. There's a lot of work here, I think. Only this can already be made into a pull request and see what happens. There's like link new approach, like a new approach with links, essentially. So, look at the pull request. Uh-huh. Here. Spirit Urban Showcase. Who is making this pull? Some check have component yet. No merge. So. So, this is Vercel, this thing, and this is me. So, this pull request was made by Vercel itself at the start. And this one was made by Codium. This request was shoved here by me. Ah, maybe I can not accept them, write commits, send them back, and he will think again. Well, I don't know. Hmm. Wow. Something changed right here. Maybe GitHub is checking something or or what? Or something with Vercel here. And did it work? Well, I don't know what worked here. No conflicts with the base branch. Hmm, meaning all checks have passed. Create merge commit rebase. So, if I click here, it just collapses, expands. Hmm, pull requests. So, interestingly, will this cat see the requests or not? Like, well, no, because it's not in the branch. Branches. Oh, this is it, yes, a branch was created there. And he made this branch, links, span link, yes, yes, yes. He created another branch for me and worked in that branch. Commit checks is cod commit fix apply. So, he named the commit fix like this. Apply active styles to navigation links. Here's the check. And here from, this is the branch and main. And if I go to main, I just want to click on branches. So, this is the branch, this is the branch. He created this branch. So, look at the pull request. Here's one pending. Good. So, meaning I can pull this branch. here to my computer. Or did I already pull it? Yes, I pulled it, and I switched to this branch. If I switched to this branch, then these changes should be on my computer now. And in the link, he simplified this. Molecule navlink. Simplified here. And if I return to the main branch, click? I'm on the branch. And it's already like, ping-ping or what? Ping. No. Or is this not the navlink? Organism navlink. Here again. Ah, it changes, right? Here return and active link. So, it changes. So, some things, stuff right here. Vercel's checks. Oh my god, they've complicated things. Ah, so I'm in this branch, and pull. If I switch to the main branch. Oh my god. So, branches main. Will there be a request here? Here. Ah, well, there are just requests. Here it is. I selected pull request. And what? Choose branch and to merge into main. Aha. So, from here I can merge. So, well, from here I understand. that I can merge from here. I go here, I click merge, and it merges. Or I click here in the cat, and it merges. I don't know, it will be clearer for everyone this way, that here it's like this, click, classic. So, like, one, it's called like this. And I confirm. That's it, I confirmed it. And it merged into my branch. It's bad that there aren't nice ones here. This will disappear. Now I'll refresh or refresh here. Branch, like, it doesn't update. So, is this already merged? Oops. Branch merge request. It still thinks there's this request. Or is it not here anymore, like. And I should switch to main. So. BR, like, main. That's it, it's no longer a branch. It's nothing anymore, it's clean. Ah, so it's a bit like that, yes, confusing, but with a little practice, this system becomes clearer in the mind. So, pull requests. That's it, I merged. There's a one flashing here, but it hasn't updated. If I do this, click, that's it, nothing. Everything is clean, I merged. And what's here? View PR. It's still thinking. Go up. So, explain. So, this is already merged. Link. Pull. It's bad that there isn't this beautiful graphical representation like branches. They branch off, merge. Uh, I think this can be attached somewhere, and there are various solutions, but I still don't see it anywhere on GitHub. Or maybe it's hidden somewhere? Pull request, code, commits, branches, branches, merge all branches, maybe here visually, no visual representation like how they branch off, split, merge. Well, here we have an answer. So, he thought, I asked, he says: "Structure view, server pages form data, pass it to the client component, which is, in principle, cool. I hardcoded this data, but it can pull from the database." And gives this data to the page. And client page is included in Redux. Redux is included in client page, which, after mounting, dispatches the received data to the store. This is activated on the frontend and maintains it in local state. Quite typical for Next.js. This says that this structure is normal, typical for Next.js. The server component is responsible for data preparation. Ah, yes, it can pull from the database or some APIs. And the client component for interactivity. Here. Well, this is like the first request, everything happened, and then it's processed on the frontend. Hmm, however, the current implementation contains several points that can be simplified or made more robust. Oops. Oops. It suggests improvements, right, state duplication. Client Page holds copies of the list and selected paintings in local state, although this data is also in Redux. This complicates the logic and creates a risk of desynchronization. Proposed task: remove duplication of local state in Client Page. Aha. What else does it suggest? Like, this means it identified that there is state duplication. I need to figure it out better now. Initialization of the store through reloaded state. Currently, data from the server goes into Redux through useEffect and dispatch. This causes an extra render and complicates server rendering. It is proposed to hydrate the Redux Store with initial state without useEffect. Aha. So, somehow we assemble it into the correct structure immediately. Okay. Further. Isolation of the store per request. Exporting a single store, store, can lead to data leakage between requests during server-side rendering. Exporting a single store. Proposed task: create a new Redux store for each request. And exporting a single store and creating a new Redux store for each request. This is, damn it, interesting. Something like that. So, such adjustments will preserve the advantages of separating server and client components, but will reduce duplication and increase predictability. So, it's better to start with state duplication. It says Client Page holds copies of the list and selected paintings in local state. Although this is also in Redux. Maybe it means that some local ones are used here, although it doesn't seem so. What is local? Like, refs are not used here. Or effects, useEffect. Ah, it's used, I thought so. client list initial, like through it. Well, yes, but I thought maybe it had to be done that way, but it says it can be simplified. And simplification is always good, so let's simplify. Simplify it. I'm all for it. Well, it happened that I also used it, and it flew in from outside, and somehow it went into the store, and into use state, yes, redundant. I really felt that, well, there wasn't that purity, that something was wrong. View task. Here it is working. One in AppClient.tsx, remove use state for client and client selected painting. So, okay, let's check if everything is working correctly now. Everything, it has replayed with the links there. The error is already a different one. Uh-huh. Well, okay. Does everything work? This works. And this works. So, it seems like it didn't break anything. Control Tilde. Well, just in case, I'll recompile. Not start, but still relevant. Merge pull requests main. Yes, everything is clean. New data, and it seems nothing broke. And I like this tool. Normal, good, sensible. Yes, this is better than throwing it into the context through regular ChatGPT, rambling, giving code snippets, elaborating it into context. This is good. And it's even better than these built-in things. This is more powerful, built-in. This link copilot. It still has context, it needs to be fed a couple of files. It keeps them in context. This is good for its tasks, and this is good for its own. So, you can groom, groom, groom the project. Tink-tink-tink-tink. Well, this needs to be resolved later, to comb out these red blocks. So, but otherwise, it's going well. So, it's thinking about simplification. use only use selector [music] red list selected pending, so purely through Redux and throw it out. Here it throws out the state. It throws out initial paintings. Initial initial paintings. Initial state initial state paintings. Yes, this flew in here. Into this intermediary it flew. We put view state into it, and then what? And there are these two set client, working with Redux. So, it means we threw out the state and consequently two effects that pass data into Redux, apparently. So, they synchronized this local, so to speak, variable with the storage. This was redundant. Here, it redid everything. Beautiful, well done. It did this in the root page. Do I have such a mess in the secondary pages? Unlikely in about. Although there is state here. client value. Aha. Well, I'll tell him to look in the about module as well. So, client page. So, look further on this issue in the module page. About, similarly, ask for code. Let's get the code here. I gave him the task. He should do the same thing. And not only in the root page, but also in about. Contact is just a placeholder. And this contact might not even exist, to see. This is a secondary thing, or is it somewhere below, above? No, it's like that. Hmm, so it's thinking, thinking. Tink up. What is it thinking? This is the fourth branch, apparently, it branched off from here, right? Started the task. Hmm. And here is the work. And how much time has passed? An hour has passed. An hour has passed. Aha, cool. Well, okay, I'll stop here, and the second part will follow. So, here I elaborated on this part, and in principle, I have already made changes. And I made a pull request, and it works. This is already a success. Well, the continuation follows.