Addressing feedback and issue with app not running in codespace

madebygps · madebygps · commit 487f9e9c8e66 · 2026-03-24T19:51:26.000Z
diff --git a/.github/prompts/setup.prompt.md b/.github/prompts/setup.prompt.md
@@ -10,7 +10,7 @@ Your goal is to successfully build and run the workspace as local development en
 - [ ] Required dependencies (Python 3.13+, uv) installed and verified
 - [ ] Dependencies synced (`uv sync`)
 - [ ] Tests passing (`uv run pytest`)
-- [ ] Dev server running (`uv run uvicorn app.main:app --reload --port 8000`)
+- [ ] Dev server running (`uv run uvicorn app.main:app --reload --host 0.0.0.0 --port 8000`)
 - [ ] Site opened in external browser (use `$BROWSER` or instruct the user to open http://localhost:8000)
 - [ ] Short engaging welcome tour for the workspace
 
diff --git a/.vscode/tasks.json b/.vscode/tasks.json
@@ -4,7 +4,7 @@
 		{
 			"label": "python: run",
 			"type": "shell",
-			"command": "uv run uvicorn app.main:app --reload --port 8000",
+			"command": "uv run uvicorn app.main:app --reload --host 0.0.0.0 --port 8000",
 			"isBackground": true,
 			"problemMatcher": {
 				"pattern": {
diff --git a/README.md b/README.md
@@ -20,43 +20,6 @@ Social Bingo game for in-person mixers. Find people who match the questions and
 
 ---
 
-## Prerequisites
+## 🚀 Getting Started
 
-- [Python 3.13](https://www.python.org/downloads/) or higher
-- [uv](https://docs.astral.sh/uv/) package manager
-
-## Setup
-
-```bash
-uv sync
-```
-
-### Devcontainer / Codespaces
-
-This repository includes a preconfigured devcontainer at `.devcontainer/devcontainer.json`.
-
-- **Local VS Code**: Reopen the repo in container when prompted
-- **GitHub Codespaces**: In your own repository created from this template, click **Code** → **Codespaces** → **Create codespace on main**
-
-## Run
-
-```bash
-uv run uvicorn app.main:app --reload
-```
-
-Then open http://localhost:8000 in your browser.
-
-## Test
-
-```bash
-uv run pytest
-```
-
-## Lint
-
-```bash
-uv run ruff check .
-uv run ruff format .
-```
-
-Deploys automatically to GitHub Pages on push to `main`.
+Head to **[Part 00: Overview](workshop/00-overview.md)** for prerequisites and setup instructions.
diff --git a/app/templates/base.html b/app/templates/base.html
@@ -6,9 +6,9 @@
     <meta name="theme-color" content="#2563eb">
     <meta name="description" content="Social Bingo - Find people who match the questions!">
     <title>Soc Ops - Social Bingo</title>
-    <link rel="stylesheet" href="{{ url_for('static', path='css/app.css') }}">
-    <link rel="icon" type="image/png" href="{{ url_for('static', path='favicon.png') }}">
-    <script src="{{ url_for('static', path='js/htmx.min.js') }}"></script>
+    <link rel="stylesheet" href="/static/css/app.css">
+    <link rel="icon" type="image/png" href="/static/favicon.png">
+    <script src="/static/js/htmx.min.js"></script>
 </head>
 <body>
     <div id="app">
diff --git a/workshop/00-overview.md b/workshop/00-overview.md
@@ -17,7 +17,9 @@ Welcome to Soc Ops — a hands-on workshop where you'll transform a simple Socia
 Before you begin, verify:
 
 - [ ] VS Code **v1.107+** (no pending updates)
-- [ ] Signed in with **GitHub Copilot** (Pro, Business, or Enterprise)
+- [ ] Signed in with **GitHub Copilot** (Free, Pro, Business, or Enterprise)
+
+> ⚠️ **Free-tier users:** Cloud Agents are not available on free-tier Copilot plans. The workshop provides alternative instructions wherever Cloud Agents are used.
 - [ ] Git installed
 - [ ] Python 3.13 & uv installed
 - [ ] Chat panel open and Agent ready
diff --git a/workshop/01-setup.md b/workshop/01-setup.md
@@ -51,6 +51,10 @@ The agent will:
 - Install any missing dependencies
 - Start the development server
 
+> ⚠️ **Codespace in the browser:** If you're running the app inside a GitHub Codespace via the browser (not VS Code Desktop), styles and interactions (e.g. the Start Game button) may not work correctly due to private port authentication. To fix this, either:
+> 1. In the **Ports** panel (bottom bar), right-click port `8000` → **Port Visibility** → **Public**
+> 2. Or open the Codespace in **VS Code Desktop** instead (click the hamburger menu `☰` → **Open in VS Code Desktop**)
+
 ✅ **Success:** App is running in your browser!
 
 ---
@@ -65,7 +69,7 @@ Instructions guide all agentic interactions, making them efficient and reliable.
 
 **Steps:**
 
-1. Run command: `Chat: Generate Workspace Instructions File`
+1. Open the Command Palette (`Ctrl+Shift+P` / `Cmd+Shift+P`) and run: `Chat: Generate Agent Instructions`
 2. Wait for the agent to analyze your codebase
 3. Review the generated instructions (probably too detailed!)
 4. Follow up with:
@@ -99,6 +103,8 @@ Copilot CLI sessions run in isolated git worktrees, which is perfect for tasks t
 
 **Start a Cloud Agent session:**
 
+> ⚠️ **Free-tier Copilot users:** Cloud Agents require a **Copilot Pro, Business, or Enterprise** subscription. If you're on the free tier you will see a 403 Forbidden error. **Alternative:** Open a second **Copilot CLI session** instead and give it the same prompt below.
+
 1. Click the **New Session dropdown** (`+`) and select **New Chat Session**
 2. In the **session type dropdown** at the bottom of the chat input (shows `Local`), select **Cloud**
 3. Enter:
diff --git a/workshop/02-design.md b/workshop/02-design.md
@@ -17,13 +17,14 @@ Use the **Plan agent** to start any bigger work item. Iterate on the plan (2+ ti
 ### Steps
 
 1. Click the **New Session dropdown** (`+`) and select **Plan**
-2. Enter your vision:
+2. Make sure the **session type dropdown** at the bottom of the chat input shows **Local** (if your previous session was Cloud, switch it back)
+3. Enter your vision:
    ```
    Let's do a full redesign. Make it [YOUR THEME]
    ```
-3. Review the generated plan
-4. Ask for adjustments until you're happy
-5. Click **Start Implementation** to execute
+4. Review the generated plan
+5. Ask for adjustments until you're happy
+6. Click **Start Implementation** to execute
 
 ### 🎭 Theme Ideas
 
@@ -61,6 +62,8 @@ When you make major architecture, design, or dependency changes, update your ins
 
 ## 🚀 Task 3: Scale Exploration with Cloud Agents
 
+> ⚠️ **Free-tier Copilot users:** Cloud Agents require a **Copilot Pro, Business, or Enterprise** subscription. If you're on the free tier you will see a 403 Forbidden error. **Alternative:** Use **Autopilot** mode or a local **Plan** session to explore one design variation at a time.
+
 Generate multiple design variations in parallel using cloud agents.
 
 ### Steps
diff --git a/workshop/03-quiz-master.md b/workshop/03-quiz-master.md
@@ -25,9 +25,10 @@ Custom agents are defined in `.github/agents/` and provide:
 
 ### Steps
 
-1. Start a **new Chat**
-2. Select **Quiz Master** as the custom agent (from the agent picker)
-3. Enter your theme:
+1. Start a **new Chat** (click the **New Session dropdown** `+` → **New Chat Session**)
+2. Make sure the **session type dropdown** at the bottom of the chat input shows **Local**
+3. Expand the **Copilot Modes dropdown** (top of the chat panel, next to the model picker) — you'll see a list of custom agents below the built-in modes (Ask, Agent, Plan). Select **Quiz Master**
+4. Enter your theme:
    ```
    Update questions to [YOUR THEME]
    ```
@@ -36,11 +37,12 @@ Custom agents are defined in `.github/agents/` and provide:
    Update quiz
    ```
 
-4. Review the generated questions
-5. Follow up for more creativity:
+5. Review the generated questions
+6. Follow up for more creativity:
    ```
    Make them more chaotic and unexpected!
    ```
+7. When you're happy with the result, **commit** the updated questions
 
 ### 🎭 Theme Ideas
 
@@ -67,6 +69,8 @@ Custom agents are defined in `.github/agents/` and provide:
 
 ## ☁️ Task: Cloud Quiz Generation
 
+> ⚠️ **Free-tier Copilot users:** Cloud Agents require a **Copilot Pro, Business, or Enterprise** subscription. If you're on the free tier, skip this task or use a **Local** session with the Quiz Master agent instead.
+
 Run the quiz master as a cloud agent for async generation.
 
 ### Steps
diff --git a/workshop/04-multi-agent.md b/workshop/04-multi-agent.md
@@ -37,30 +37,30 @@ A new **Scavenger Hunt** mode:
    - ✅ Creates a new component for the list view
    - ✅ Includes a progress indicator
    - ❌ Doesn't go overboard with features
+4. Once you're satisfied with the plan, click **Start Implementation** to execute it
 
 #### Phase 2: TDD Red (Write Failing Tests)
 
-1. Select **TDD Red** agent
-2. Click **Start**
-3. Watch as it writes tests for:
+1. In the same session, open the **Copilot Modes dropdown** (top of the chat panel) and select the **TDD Red** agent — this hands off the conversation context to the new agent
+2. The agent will begin writing failing tests. Watch as it writes tests for:
    - Component rendering
    - Checkbox interactions
    - Progress calculation
    - State management
 
-4. Check VS Code's **Test Explorer** to see the failing tests
+3. Check VS Code's **Test Explorer** to see the failing tests
 
 #### Phase 3: TDD Green (Make Tests Pass)
 
-1. When Red is done, select **TDD Green** agent
+1. When Red is done, switch to the **TDD Green** agent using the **Copilot Modes dropdown**
 2. Watch as it:
    - Implements the minimum code to pass tests
    - Runs tests after each change
    - Iterates until all tests pass
 
 #### Phase 4: Refactor (Clean Up)
 
-1. Select **TDD Refactor** agent
+1. Switch to the **TDD Refactor** agent using the **Copilot Modes dropdown**
 2. Let it clean up the code while keeping tests green
 
 ### Checkpoint Recovery

Original file line number	Diff line number	Diff line change
`@@ -4,7 +4,7 @@`
`4`	`4`	`{`
`5`	`5`	`"label": "python: run",`
`6`	`6`	`"type": "shell",`
`7`		`- "command": "uv run uvicorn app.main:app --reload --port 8000",`
	`7`	`+ "command": "uv run uvicorn app.main:app --reload --host 0.0.0.0 --port 8000",`
`8`	`8`	`"isBackground": true,`
`9`	`9`	`"problemMatcher": {`
`10`	`10`	`"pattern": {`