Improve guide

GUIDE.md

@@ -9,18 +9,23 @@ This is a brief guide to how to use RepoQuest.
 3. Select a directory. RepoQuest will clone the quest repository as a subdirectory of your selected directory.
 4. Click "Create" and wait a few seconds.
 5. Open the "Quest directory" in your code editor.
-6. Click "File Issue" on the first stage.
-7. Click the "Issue" link and follow the directions.
+6. Follow the directions below to do the first chapter of the quest.
 
 ## Doing a Quest
 
-A quest is a series of programming challenges, or chapters. At each step, you will be given an issue describing the challenge and relevant background. You may also be given starter code that is part of the challenge.
+1. Click "File Issue" to start the chapter.
+2. Click the "Issue" link and read the issue.
+3. If the chapter has a "Starter PR", click that link. Read and merge the PR. **Make sure to pull the changes!**
+4. Follow the instructions in the issue to complete the chapter.
+5. Commit and push your local changes.
+6. Once you're done, close the issue.
+7. After a few seconds (or click "Refresh UI state"), then the next chapter should appear.
 
-To start a chapter, click the "File issue" button. If a starter PR is filed, then review it and merge it. Then read the filed issue to understand your task. Then try to complete the task. Once you think you're done, then close the issue to start the next chapter.
+## If You Get Stuck
 
-If you need help, you can review our reference solution for a given chapter. Click the "Help" button for a link. If you're still lost, you can replace your code with the reference solution by clicking "File reference solution" under "Help". This will create a solution PR that you can review and merge.
+If you need help, you can review our reference solution for a given chapter. Click the "Help" button next to the chapter title. If you're still lost, you can replace your code with the reference solution by clicking "File reference solution". This will create a solution PR that you can review and merge.
 
-### ⚠️ Pitfalls 🕳️
+## ⚠️ Pitfalls 🕳️
 
 RepoQuest has some sharp edges. Some are inherent to the quest concept, and some are just because RepoQuest is under development. Below are some pitfalls to know.
 
@@ -32,7 +37,4 @@ RepoQuest has some sharp edges. Some are inherent to the quest concept, and some
 
   The goal of RepoQuest is to avoid hard resets at all costs (except when you explicitly ask for the reference solution). If you encounter a hard reset, please let us know!
 
-* The RepoQuest UI infrequently polls Github for the state of your repo. If you perform an action within Github (lke merging a PR) and the UI doesn't seem to update, try clicking the "Refresh" button in the control panel.
-
-[Installation]: https://github.com/cognitive-engineering-lab/repo-quest?tab=readme-ov-file#installation
-[Setup]: https://github.com/cognitive-engineering-lab/repo-quest?tab=readme-ov-file#setup
+* The RepoQuest UI infrequently polls Github for the state of your repo. If you perform an action within Github (lke merging a PR) and the UI doesn't seem to update, try clicking the "Refresh" button in the control panel.

js/packages/repo-quest/src/index.tsx

@@ -2,7 +2,7 @@ import * as dialog from "@tauri-apps/plugin-dialog";
 import { type Quiz, QuizView } from "@wcrichto/quiz";
 import _ from "lodash";
 import { marked } from "marked";
-import { action, makeAutoObservable } from "mobx";
+import { makeAutoObservable, runInAction } from "mobx";
 import { observer } from "mobx-react";
 import React, { useContext, useEffect, useMemo, useRef, useState } from "react";
 import { createPortal } from "react-dom";
@@ -59,15 +59,19 @@ class Loader {
       : null
   );
 
-  loadAwait = action(async <T,>(promise: Promise<T>) => {
-    this.loading = true;
+  loadAwait = async <T,>(promise: Promise<T>) => {
+    runInAction(() => {
+      this.loading = true;
+    });
     try {
       let value = await promise;
       return value;
     } finally {
-      this.loading = false;
+      runInAction(() => {
+        this.loading = false;
+      });
     }
-  });
+  };
 }
 
 function Await<T>(props: AwaitProps<T>) {
@@ -333,7 +337,7 @@ let QuestView: React.FC<{
   quest: QuestConfig;
   initialState: StateDescriptor;
 }> = ({ quest, initialState }) => {
-  console.log(quest);
+  console.debug(quest);
 
   let loader = useContext(Loader.context)!;
   let [state, setState] = useState<StateDescriptor | undefined>(initialState);

js/packages/repo-quest/styles/index.css

@@ -184,9 +184,9 @@ button, input[type=submit] {
         border: 1px solid #ccc;
         font-size: 80%;
         width: 300px;
-        
+
         &:invalid {
-          box-shadow: 0 0 4px red;          
+          box-shadow: 0 0 4px red;
         }
       }
     }
@@ -230,6 +230,7 @@ dialog {
   z-index: 1000;
   max-width: 600px;
   box-shadow: 4px 4px 8px #aaa;
+  line-height: 1.3;
 
   form {
     margin-top: 1rem;
@@ -238,10 +239,14 @@ dialog {
   }
 
   .close-dialog {
-    position: absolute;    
+    position: absolute;
     top: 1rem;
     right: 1rem;
   }
+
+  ol li, ul li {
+    margin-bottom: 0.5rem;
+  }
 }
 
 .file-picker + code {

rs/crates/rq-core/src/git.rs

@@ -189,10 +189,12 @@ impl GitRepo {
     Ok((head, merge_type))
   }
 
-  pub fn checkout_main_and_pull(&self) -> Result<()> {
-    git!(self, "checkout main")?;
-    git!(self, "pull")?;
-    Ok(())
+  pub fn pull(&self) -> Result<()> {
+    git!(self, "pull")
+  }
+
+  pub fn checkout_main(&self) -> Result<()> {
+    git!(self, "checkout main")
   }
 
   pub fn head_commit(&self) -> Result<String> {

rs/crates/rq-core/src/quest.rs

@@ -360,8 +360,9 @@ impl Quest {
   async fn file_pr(&self, base_branch: &str, target_branch: &str) -> Result<PullRequest> {
     self
       .origin_git
-      .checkout_main_and_pull()
-      .context("Failed to checkout main and pull")?;
+      .checkout_main()
+      .context("Failed to checkout main")?;
+    self.origin_git.pull().context("Failed to pull")?;
 
     let (branch_head, merge_type) = self
       .origin_git