This is a submission for the GitHub Copilot Challenge : New Beginnings

What I Built

This project is for individuals wanting to be productive on new beginnings for personal growth. They must have a theme to pursue. It groups the tasks related to the theme into categories, and sequences those categories as an everyday agenda. As tasks get resolved, the user can continue with substitution by successive tasks. GitHub model LLMs may also help with identifying substitute tasks. The UI is of 2 web pages with link for navigating between themselves close to the bottom of the pages.

Demo

Repo

personal-growth-project
├── src
│   ├── common.js        # JavaScript for common agenda description data for both the pages
│   ├── home.html        # w3 web based home page document
│   ├── script.js        # JavaScript for home page features
│   ├── setup.html       # Setup w3 web page
│   ├── setup.js         # JavaScript for setup page
│   └── styles.css       # CSS for styling the application
├── test
│   ├── script.test.js   # Mocha test file for script.js
├── mocha.opts           # Mocha configuration

Copilot Experience

As the challenge has choice of prompts, I've chosen the first one: "New Beginnings". Planning is the initial step. By selectively looking up online keywords from the prompt I formed a rough idea of the functionality to implement. My user story is the most direct way forward to grasp the gist of the solution concept. Role playing as the user, one wants to make new beginning related with a theme, say para sailing. Or maybe something with more known outcomes like learning history. For making progress, some routine agenda has to be fixed once. The tool should keep track and enable updates to such agenda for the user. Whenever the user desires new beginning, making a folder for the theme and running the tool should be the simplest and most effective way for the user to proceed.
The main interaction with the app will be with a browser based web page showing the agenda. And then another for when any resolved agenda point leads the user to seek a successive agenda point. This can be cultivated into a browser extension, a web service, an offline (e.g. electron.js based) app, a single page app, a website. For users with GitHub AI model API keys the other page could enable the user to brainstorm with AI aid as well!
Ah, well first things first now. Let's give CoPilot the specifics to generate placeholder code for starting with the app.

And it has generated the workspace.

It's like a new recruit, from the little discussion it's drawn conclusions to be useful to me and mostly succeeded. I've done minor edit to the initial HTML and ReadMe, just to be precautious, that divulging from the core idea through the descriptive text could eventually lead to hallucinating. Speaking of staying on track, let me ask for setting up tests upfront, just in case. I make great stuff, so I am sure that will be of little use immediately. Nevertheless, it's a new beginning and we've got to start on the right foot.

Right foot? As you can see in the recording, I spoke with copilot. It generated the transcript, in place of the chat. But when one speaks it takes it as a command, there's no option to edit in transcript. And it figures out what was meant by itself. Even as it's misrecognition of mocha.js test library made me fumble, it figured out the right thing to do!
And now that I've erred by fumbling, just to make the score right, I've got to do something. I'm going to put it to test by pasting some code written in languages not at all related to our project. We have to play a little between serious work, otherwise how will I keep track of the work getting done, if not for the count of little bits of play?

I've got another code fragment to transform, and I don't want all this congesting my chat thread. I'll use Quick Chat now.

I'll remove my last chat request just for relief from all the translation right in front of me.

And now let's transform a ReBOL code fragment.

CoPilot is getting all the fun. I want some of the action as well. I know... I'll replace it's suggested categories with my own, that should make it more aligned with the perception of a theme from the earlier user story. Let me write a comment listing my pick of categories. And lo and behold. As I continue typing, based on my comment, it keeps showing me ghost text, relieving me from the burden of imagining tentative substitutes for actual usage scenarios, while I evaluate the progress being made. (For those who are new to code editing, ghost text is text that maybe inserted by either Tab key for entirety or Ctrl + Right Arrow key combination for individual word at a time.)

Now where was I? So much code gathered together from searching a whole lot of different things! It's best if we could collect some explanations now. I know what, the workspace extension (that we used for code generation by beginning with '@' character meant for extensions) from earlier has an explain (commands begin with a '/' character) command. One change I made at this time is to select the other LLM. The default one has been proposing coding solutions, so I just wanted to see how chatty the other one may get? My command was to explain how the javascript in the active editor worked? And it suggested code ranges to pick from below the search box in the title bar. Instead of making a choice, I selected all the code in the entire file. Ranges might be relevant for limited input of LLM prompts, but there's much more that can be added to this js file. I got a comprehensive reply, so much so that I've to move the chat temporarily to the editors section from the sidebar.

One more thing I've highlighted in the screenshot is that it is also concerned with something about the literally translated code, that I should also be concerned about. I find the console logs helpful for debugging, but why is the output intended for the web page being entirely given to the console? Also the explanation has code fragment fix for the same, follow by kwy summary of improvements and suggested next steps. Next steps have ideas that a generic app from task management category mostly has, but some of them are relevant for completing our desired functioning as well. Like using localstorage that we coild use when making the page for task replacement. See for yourself.

Since this is headed in a meaningful direction, I'd better export this for later reference.

After accepting the suggested change, I also previewed the tool's home page. As the export chat screenshot shows, the change blended right in, so for those who are inclined towards software development and are reasonably comfortable with vanilla web development, it's already as much as a usable template with JS array structure contrasting the markdown editing technique of some note taking apps. I made a .devdocs folder and named the file nextsteps. Since it's just another json file, let's peek inside.

Now continuing with our app, the agenda is abit full. Considering an individuals ongoing life, I should rationalize the number of category wise tasks and make such decisive alteration. From my own experience, I should be comfortable focusing for almost 25 minutes. I mean, being a human, glaring at a screen and such could be strenous. Assuming I still am thinking the same thing, I could do a set of focussing thrice before a proper switch to something else. There's already some order of the categories. One must want to know enough about things to take action regarding them. Then the routine stuff. Maybe after lunch one can find stuff happening in the wild regarding the theme. Then one might have something to offer, like for participating in marketplace and get compensated. Then log the day and review it. And finally while unwinding with friends and family, one may hit creativity and chance upon a novel idea. With so much on my mind, I've got to patch the code to reflect the purpose coherently.
After a short while, I've commented the description paragraph, the code to display the tasks for the category, replaced the tasks by description, and set title attribute for catgories to description as all the static matter was getting too distracting for me. Now when the page is opened, let's start with looking up localstorage mentioned in the next steps during the explanation. In the DOMContentLoaded event handler there's a call to the displayAgenda function. Seems like this is the entry point when the page is loaded successfully by the web browser. Let's open inline chat asking to check for the theme.

Adding some class to the body was not what I intended, but that should be an example saving considerable time of going through the documentation for grasping the storage functionality of Web APIs. I'll now get some coding done by combining the above techniques, so we can continue with modifications. I asked for another page to setup the theme and tasks. I'll skip the exact prompt for brevity considering the copilot response is mostly non-deterministic. One reason I've to mention this is for the generated code, it is citing similar code alongwith attempted license look up result.

As it has hallucinated that I want UI day/night theme rather than theme for the agenda for new beginning, so the citations are irrelevant, but I'll just trim and reshape the code for fitting our purpose. That's just what was done with the copy pasted PERL / ReBOL code fragments obtained from Bing searches CoPilot results from earlier.

On using the Edit with CoPilot the chat window switched to the other tab. This is different in that there's no extensions @ button for the reply box. And it's opened up all the files with diffs.

I've made modifications to the form specific to new beginnings and want setup.js to be updated accordingly. I'll attach the file using the paperclip button.

With few edits, I've got the setup page functioning.

For the markdown response from the Curl based API call, it suggested using showdown converter by itself.
Next let's seek code smells for refactoring. Here's how it replied to my prompt with workspace extension:

Collecting workspace information

1. **Hardcoded Agenda Points**:
   - **Description**: The code assumes each category has exactly three agenda points.
   - **Suggestion**: Dynamically handle the number of agenda points per category.

2. **DOM Manipulation Before DOMContentLoaded**:
   - **Description**: The code manipulates the DOM before ensuring it is fully loaded.
   - **Suggestion**: Ensure all DOM manipulations occur within the `DOMContentLoaded` event listener.

3. **Local Storage Parsing Without Error Handling**:
   - **Description**: The code parses JSON from local storage without handling potential errors.
   - **Suggestion**: Add try-catch blocks around JSON parsing to handle malformed data.

4. **Potential Null Reference**:
   - **Description**: The code assumes elements like 

document.body.firstElementChild.nextElementSibling

 always exist.
   - **Suggestion**: Add checks to ensure these elements exist before manipulating them.

5. **Inconsistent Element Insertion**:
   - **Description**: The code inserts new elements before 

document.body.lastElementChild.previousElementSibling

, which may not always be the intended location.
   - **Suggestion**: Use a more reliable method to determine where to insert new elements, such as a specific container element.

For the red squiggles, it also offers fixes. And similar fixes are available for the terminal too! So I considered serving the folder through localhost as one web browser confines local storage to an individual file rather than a folder. And made a typo while checking for Python!

Next, I requested for optimizations for everything from code maintainability to better usability. Amongst its suggestions was updating the form so all the points textboxes are now tidied up at least. It's human physiology to get strained by glaring at the screen even as all the work was handled by automation available by CoPilot's integration with VSCode. (Actually, I did fetch my GitHub PAT by myself so I was active too.) So now I just want to get commit message from CoPilot and then move onto making my submission. I removed the exported chat from .devdocs folders as it had all sorts of identifiers, and I want the posted repository to be okay safety wise.

GitHub Models

The Phi 4 model by Microsoft is newly launched at the time of this writing. TLDR: It is used to obtain agenda point suggestion by the setup web page.

Again, this has been shown by the demo at time 4:18

This is an offline first app as it demonstrates what's do-able in 24 hours instead of growing expertise over a longer span. So instead of intricate details of securing the persistence of GitHub PAT, a password input field is given for making use of one's own privacy practices to enable AI suggestions. The prompt is hard coded in the source code. The API call is based on translating the Curl command in the model description, as the js description was node dependent and I've assumed the end user is unlikely to be a development tooling consumer, and may mostly know about using web browsers at best. As the response is markdown formatted, so it's translated using showdown. Showdown was setup as instructed by GitHub CoPilot with very little manual intervention.

Conclusion

I believe analogous to formatted pasting options inside office apps, AI code transformation will be enabled by the CoPilot extension in an upcoming release. Also more LLMs, such as Mistral and Command R+ will be coming soon. I had a blast (Just read the above narrative)!

As I was able to prepare such a functional and ready to use within such a short time frame, it'll be gratifying to see forked variants popping up with scenario specific features, like server based solution for aggregating themes for users, backing up their agenda centrally, and such way more things than I might imagine. Having how to go about one's day to keep compounding on the progress being made should be the key to new beginnings. I do dog fooding on my own creations as well. So there might be other works growing on the same core idea.

Team: This is a solo submission. I, Vipul S. Chawathe (GitHub: CVipulS) did all the GitHub CoPilot required set up, screen recordings, screenshots, documentary work, and this post, including the cover image, entirely by myself.

Thank You for having me as a participant! :)