fix(ui): auto-switch branch when configured branch doesn't exist

When the branch list loads and the active branch (e.g. gh-pages)
doesn't exist in the repo, automatically fall back to gh-pages > main
> first available branch. This fixes the dropdown showing a mismatched
branch name. Also improved back button visibility with a bordered
style matching the branch selector.

https://claude.ai/code/session_01UMaCWiW4jwY8gRyvKveWcE

Author: claude

src/app/SiteView.tsx

@@ -89,6 +89,15 @@ export function SiteView({ config, token, userLogin, onLogout, onBack }: SiteVie
 
     fetchBranches(owner, repoName, token.accessToken).then((branchList) => {
       setBranches(branchList);
+      // If the configured branch doesn't exist, fall back to a valid one
+      if (branchList.length > 0 && !branchList.includes(matchedSite.branch)) {
+        const fallback = branchList.includes('gh-pages')
+          ? 'gh-pages'
+          : branchList.includes('main')
+            ? 'main'
+            : branchList[0]!;
+        setActiveBranch(fallback);
+      }
     }).catch(() => { /* dropdown won't populate */ });
   // eslint-disable-next-line react-hooks/exhaustive-deps -- only re-run when repo/branch changes
   }, [matchedSite?.repo, matchedSite?.branch, token.accessToken]);

src/app/styles.css

@@ -103,16 +103,18 @@ body {
 
 .pp-status-back {
   background: none;
-  border: none;
-  color: #959da5;
+  border: 1px solid #444d56;
+  border-radius: 3px;
+  color: #c9d1d9;
   cursor: pointer;
-  font-size: 0.85rem;
-  padding: 0 0.25rem;
+  font-size: 0.75rem;
+  padding: 0.1rem 0.4rem;
   line-height: 1;
 }
 
 .pp-status-back:hover {
-  color: #c9d1d9;
+  background: #444d56;
+  color: #fff;
 }
 
 .pp-status-branch {