From f7426b402e603c67b83cd609266206f9f783d766 Mon Sep 17 00:00:00 2001
From: Carter <speers.carter@gmail.com>
Date: Mon, 20 Jul 2026 20:39:53 -0400
Subject: [PATCH 1/6] feat(app): implement objective summary step and fix
 combobox TS errors

Signed-off-by: Carter <speers.carter@gmail.com>
---
 AGENTS.md                                     | 257 ------------------
 .../contribute/ContributionFlow.tsx           |   7 +-
 .../contribute/StepperActionHeader.tsx        |  10 +-
 .../components/contribute/steps/Submit.tsx    | 158 ++++++++++-
 app/src/components/ui/combobox.tsx            |   6 +-
 5 files changed, 173 insertions(+), 265 deletions(-)
 delete mode 100644 AGENTS.md

diff --git a/AGENTS.md b/AGENTS.md
deleted file mode 100644
index 92afe890..00000000
--- a/AGENTS.md
+++ /dev/null
@@ -1,257 +0,0 @@
-# Agent Handbook – Bluelearn
-
-This document provides the essential context an agent needs to work effectively in the Bluelearn repository. It focuses on non‑obvious knowledge that saves time and avoids common pitfalls.
-
-## Project Overview
-
-Bluelearn is an open‑source, prerequisite‑graph education platform. It is a **pnpm workspace monorepo** containing:
-
-- **`app/`** – React 19 frontend with TanStack Start (SSR), TanStack Router, Tailwind CSS v4, and shadcn/ui components.
-- **`api/`** – Hono‑based API running on Cloudflare Workers, using Supabase for authentication and data.
-- **`supabase/`** – Local PostgreSQL database, migrations, and configuration (auth, storage, RLS).
-
-The stack is fully typed end‑to‑end: Hono exports `AppType` that the frontend can import for type‑safe API calls (not yet wired in the initial code).
-
-## Getting Started
-
-### Prerequisites
-- **Node.js ≥20** and **pnpm ≥10.33.1** (see `packageManager` in root `package.json`)
-- **Docker** (required for `supabase start`)
-- **Supabase CLI** (`npm install -g supabase`)
-
-### Setup
-1. Clone the repository and install dependencies:
-   ```bash
-   pnpm install
-   ```
-2. Start the Supabase local stack (this will spin up PostgreSQL, Auth, Storage, etc.):
-   ```bash
-   pnpm supabase:start
-   ```
-   Wait for it to be ready, then run `supabase status` to see the URLs and keys.
-3. Copy environment variables:
-   ```bash
-   cp app/.env.example app/.env
-   cp api/.dev.vars.example api/.dev.vars
-   ```
-   Fill in the values from `supabase status` (or `supabase status -o env`).
-4. Start the API in a separate terminal:
-   ```bash
-   pnpm dev:api
-   ```
-   This runs `wrangler dev` on `localhost:8787`.
-5. Start the frontend in another terminal:
-   ```bash
-   pnpm dev:app
-   ```
-   The app will be available at `http://localhost:3000`.
-
-## Essential Commands
-
-All commands are run from the **root** of the monorepo unless noted.
-
-| Command | Description |
-|---------|-------------|
-| `pnpm dev` | Start **both** app and API in parallel (aggregated output). |
-| `pnpm dev:app` | Start the frontend dev server (Vite, port 3000). |
-| `pnpm dev:api` | Start the API dev server (Wrangler, port 8787). |
-| `pnpm build` | Build all packages (`app/` and `api/`). |
-| `pnpm typecheck` | Run TypeScript type checking across the workspace. |
-| `pnpm lint` | Run ESLint on all packages. |
-| `pnpm format` | Format code with Prettier (includes Tailwind CSS plugin). |
-| `pnpm test` | Run Vitest tests (currently only `app/` has tests). |
-| `pnpm supabase:start` | Start the local Supabase stack (requires Docker). |
-| `pnpm supabase:stop` | Stop the Supabase stack. |
-| `pnpm supabase:reset` | Reset the database (applies migrations again). |
-| `pnpm api:deploy` | Deploy the API to Cloudflare Workers (uses `wrangler deploy`). |
-
-> **Note:** The root `package.json` uses `pnpm -r` (recursive) and `--filter` to target specific packages. Use `pnpm --filter app <script>` if you need to run a script only on the frontend.
-
-## Architecture
-
-```
-┌──────────────────────────────────────────────────────────────────────┐
-│                              browser                                │
-└───────────────────────────────┬──────────────────────────────────────┘
-                                │  HTTPS
-                                ▼
-┌──────────────────────────────────────────────────────────────────────┐
-│  app/   React 19 · TanStack Start · TanStack Router/Query           │
-│         shadcn/ui · Tailwind 4 · Vite                                │
-│                                                                      │
-│  Routes call the API via the Hono `hc<AppType>` client — fully       │
-│  type‑safe end‑to‑end from handler to component.                     │
-└───────────────────────────────┬──────────────────────────────────────┘
-                                │  fetch (typed via hc<AppType>)
-                                ▼
-┌──────────────────────────────────────────────────────────────────────┐
-│  api/   Hono on Cloudflare Workers                                   │
-│         Routes: /subjects · /walkthroughs · /guides                  │
-│         Middleware: cors, supabaseMiddleware (auth)                  │
-│         Validation: @hono/zod‑validator                              │
-└───────────────────────────────┬──────────────────────────────────────┘
-                                │  PostgREST / RPC
-                                ▼
-┌──────────────────────────────────────────────────────────────────────┐
-│  supabase/   Postgres · Auth · Storage                               │
-│              Migrations in supabase/migrations/                      │
-│              RLS policies enforce per‑user access                    │
-└──────────────────────────────────────────────────────────────────────┘
-```
-
-Key architectural decisions:
-
-- **Frontend never talks to Supabase directly.** All data and auth flows go through the API.
-- **API is stateless.** State lives in Postgres; cached state will later use Workers KV.
-- **Authentication:** Supabase issues JWTs, the frontend sends them in the `Authorization` header, `supabaseMiddleware` verifies the token and attaches a scoped client to the request context.
-- **Row‑Level Security (RLS)** does the heavy lifting; the API only proxies requests with the user‑scoped client.
-
-## Code Organization
-
-### `app/`
-- `src/routes/` – TanStack Router file‑based routes (each route is a `.tsx` file).
-- `src/components/` – React components; `ui/` contains shadcn/ui primitives.
-- `src/lib/` – Utility functions (e.g., `cn()` for Tailwind class merging).
-- `src/styles.css` – Global Tailwind CSS entry point.
-- `vite.config.ts` – Vite configuration with TanStack Start plugin, Tailwind, and path aliases.
-
-**Path alias:** `@/` → `src/` (configured in `tsconfig.json`).
-
-### `api/`
-- `src/index.ts` – Main Hono app with CORS, supabaseMiddleware, and route mounting.
-- `src/routes/` – Route handlers (`subjects.ts`, `walkthroughs.ts`, `guides.ts`).
-- `src/middleware/` – Authentication middleware (`auth.middleware.ts`).
-- `src/types.ts` – TypeScript bindings for Cloudflare Workers environment.
-- `src/database.types.ts` – **Stub** – regenerate with `supabase gen types`.
-- `wrangler.jsonc` – Cloudflare Workers configuration.
-
-### `supabase/`
-- `migrations/` – PostgreSQL migration files (only `profiles` table exists initially).
-- `config.toml` – Local Supabase configuration (ports, features, auth settings).
-- **Note:** The complete schema is described in `docs/database‑schema.md`. The actual database currently contains only the `profiles` table.
-
-### `docs/`
-- `architecture.md` – High‑level architecture diagram and rationale.
-- `database‑schema.md` – Detailed schema design (not yet implemented).
-- `overall‑system.md` – Product vision, terminology, and user flows.
-- `monorepo.md` – Why the monorepo exists and what it solves.
-
-## Development Patterns
-
-### Frontend
-- **Routing:** Use TanStack Router’s file‑based routing. Each route exports a `Route` component created with `createFileRoute`.
-- **Styling:** Use Tailwind CSS with `cn()` helper for conditional classes.
-- **Components:** Follow shadcn/ui patterns; add new components via `npx shadcn@latest add`.
-- **API calls:** Not yet implemented; the plan is to use Hono’s `hc<AppType>` client for type‑safe requests.
-- **SSR:** The app uses TanStack Start (built on Nitro) for server‑side rendering. The `vite.config.ts` includes the `tanstackStart()` plugin.
-
-### API
-- **Routes:** Each resource (e.g., `subjects`) is a separate Hono instance mounted on the main app.
-- **Middleware:** `supabaseMiddleware` attaches a Supabase client to `c.var.supabase`. Use `getAuthenticatedUser(c)` to retrieve the current user.
-- **Validation:** Use `@hono/zod‑validator` for request validation (not yet used in the initial routes).
-- **Environment variables:** Bindings are defined in `src/types.ts` and must match the keys in `.dev.vars` (local) and Cloudflare secrets (production).
-
-### Database
-- **Migrations:** Add new SQL files in `supabase/migrations/` with a timestamp prefix (e.g., `20260513193000_name.sql`). Apply with `supabase db reset` or `supabase db push`.
-- **Type generation:** After modifying the schema, run `supabase gen types typescript --local > api/src/database.types.ts` to update the TypeScript definitions.
-- **RLS:** Always enable RLS and write policies that reflect the desired access pattern. The API uses a per‑request Supabase client with the user’s JWT, so RLS works automatically.
-
-### Shared Types
-Currently there is no shared `packages/types` folder. The API’s `AppType` (exported from `api/src/index.ts`) is intended to be imported by the frontend for type‑safe API calls. This integration is not yet wired up.
-
-## Typical Feature Development
-
-When adding a new feature that touches the database, API, and frontend, follow this sequence to keep changes atomic and maintain type safety:
-
-1. **Database migration**
-   - Create a new SQL file in `supabase/migrations/` (timestamped).
-   - Apply locally: `pnpm supabase:reset` (or `supabase db push`).
-   - Regenerate TypeScript types: `supabase gen types typescript --local > api/src/database.types.ts`.
-
-2. **API route**
-   - Add a new file in `api/src/routes/` or extend an existing one.
-   - Use `@hono/zod‑validator` for request validation.
-   - Import `supabase` from `c.var` and query the new tables.
-   - Export the route and mount it in `api/src/index.ts`.
-
-3. **Frontend integration**
-   - Create or update a TanStack Router route in `app/src/routes/`.
-   - Add a React component that fetches data using the typed Hono client (once wired).
-   - Use shadcn/ui components for consistent UI.
-
-4. **Type checking and linting**
-   - Run `pnpm typecheck` and `pnpm lint` to catch any errors.
-   - Format with `pnpm format`.
-
-5. **Test**
-   - Add Vitest tests for the frontend component.
-   - (Future) Add unit tests for the API route.
-
-Keep the PR scope limited to one feature across the stack—the monorepo enables atomic changes.
-
-## Testing
-
-- **Frontend:** Uses Vitest and React Testing Library. Run with `pnpm test` in the `app/` directory.
-- **API:** No test suite is currently set up.
-- **End‑to‑end:** None yet.
-
-## Gotchas & Non‑Obvious Things
-
-1. **Supabase requires Docker.** You must have Docker running before `pnpm supabase:start`. If Docker is not installed, the command will fail silently.
-2. **Environment variables differ between app and API.** The frontend uses `VITE_`‑prefixed variables (exposed to the browser), while the API uses plain names (stored in Cloudflare secrets). Copy the example files and fill them with values from `supabase status`.
-3. **CORS is configured in the API middleware.** The API only allows requests from `APP_URL` (set in `.dev.vars`). If you change the frontend port, update `APP_URL` accordingly.
-4. **Database types are a stub.** The file `api/src/database.types.ts` currently contains empty interfaces. Regenerate it after any schema change.
-5. **The API runs on `localhost:8787` in dev**, not the default Cloudflare Workers port (8788). The frontend’s `VITE_API_BASE` points to `http://localhost:8787`.
-6. **The root `package.json` scripts use `pnpm -r` (recursive).** If you need to run a command only in one package, use `pnpm --filter <package> <script>`.
-7. **Prettier is configured with a Tailwind plugin.** It sorts classes automatically; don’t manually reorder them.
-8. **Only the `profiles` table exists.** The extensive schema described in `docs/database‑schema.md` is not yet implemented. Start by adding migrations for the missing tables when building new features.
-
-## Environment Variables
-
-### `app/.env`
-| Variable | Description | Example |
-|----------|-------------|---------|
-| `VITE_SUPABASE_URL` | Supabase project URL (local or remote) | `http://127.0.0.1:54321` |
-| `VITE_SUPABASE_PUBLISHABLE_KEY` | Supabase anon/public key | (from `supabase status`) |
-| `VITE_API_BASE` | Base URL of the API (Wrangler dev server) | `http://localhost:8787` |
-
-### `api/.dev.vars`
-| Variable | Description | Example |
-|----------|-------------|---------|
-| `SUPABASE_URL` | Supabase project URL | `http://127.0.0.1:54321` |
-| `SUPABASE_PUBLISHABLE_KEY` | Supabase anon/public key | (from `supabase status`) |
-| `SUPABASE_SECRET_KEY` | Supabase service‑role key (bypasses RLS) | (from `supabase status`) |
-| `APP_URL` | Frontend origin for CORS | `http://localhost:5173` |
-
-**Production:** These variables become Cloudflare Workers secrets (set via `wrangler secret`).
-
-## Adding a New Package
-
-If you need to create a shared package (e.g., `packages/types` for shared TypeScript interfaces):
-
-1. Create a new directory under `packages/` (the folder does not exist yet; create it).
-2. Add a `package.json` with `"name": "@bluelearn/types"`, `"type": "module"`, and `"exports"`.
-3. Update `pnpm‑workspace.yaml` to include the new package.
-4. Install dependencies with `pnpm install`.
-5. Import from other packages using the workspace protocol (`"@bluelearn/types": "workspace:*"`).
-
-## CI/CD
-
-The repository uses GitHub Actions defined in `.github/workflows/ci.yml`. Two jobs run in parallel:
-
-- **`app`** – Type checking, linting, testing, and building the frontend.
-- **`api`** – Type checking and a dry‑run deployment (`wrangler deploy --dry-run`).
-
-The workflow triggers on pushes to `main` and on pull requests.
-
-## Where to Look Next
-
-- **`docs/architecture.md`** for the high‑level architecture diagram and rationale.
-- **`docs/database‑schema.md`** for the complete, planned database schema (not yet implemented).
-- **`docs/overall‑system.md`** for product vision, terminology, and user flows.
-- **`docs/monorepo.md`** for why the repository is structured as a monorepo.
-- **`docs/open‑questions.md`** for unresolved design decisions.
-
----
-
-*This document was generated by analyzing the repository. Update it as the codebase evolves.*
\ No newline at end of file
diff --git a/app/src/components/contribute/ContributionFlow.tsx b/app/src/components/contribute/ContributionFlow.tsx
index 8fb32563..9dbb7372 100644
--- a/app/src/components/contribute/ContributionFlow.tsx
+++ b/app/src/components/contribute/ContributionFlow.tsx
@@ -180,7 +180,12 @@ function Inner({
           setObjectiveContData={setObjectiveContData}
         />
 
-        <Submit Stepper={Stepper} />
+        <Submit
+          Stepper={Stepper}
+          type={type}
+          guideContData={guideContData}
+          objectiveContData={objectiveContData}
+        />
       </div>
     </div>
   );
diff --git a/app/src/components/contribute/StepperActionHeader.tsx b/app/src/components/contribute/StepperActionHeader.tsx
index cc709481..27d97647 100644
--- a/app/src/components/contribute/StepperActionHeader.tsx
+++ b/app/src/components/contribute/StepperActionHeader.tsx
@@ -4,10 +4,12 @@ export const StepperActionHeader = ({
   title,
   Stepper,
   nextDisabled,
+  hideNext,
 }: {
   title: string;
   Stepper: any;
   nextDisabled?: boolean;
+  hideNext?: boolean;
 }) => {
   return (
     <>
@@ -19,9 +21,11 @@ export const StepperActionHeader = ({
         <div className="text-mono flex justify-between gap-4">
           <Stepper.Prev className="btn-sec">Back</Stepper.Prev>
 
-          <Stepper.Next className="btn-pri" disabled={nextDisabled}>
-            Next
-          </Stepper.Next>
+          {!hideNext && (
+            <Stepper.Next className="btn-pri" disabled={nextDisabled}>
+              Next
+            </Stepper.Next>
+          )}
         </div>
       </div>
 
diff --git a/app/src/components/contribute/steps/Submit.tsx b/app/src/components/contribute/steps/Submit.tsx
index 77d4618c..2205e30d 100644
--- a/app/src/components/contribute/steps/Submit.tsx
+++ b/app/src/components/contribute/steps/Submit.tsx
@@ -1,13 +1,167 @@
+import { useState } from "react";
+import { useNavigate } from "@tanstack/react-router";
+import { toast } from "sonner";
+import type {
+  ContributionType,
+  GuideContribution,
+  ObjectiveContribution,
+} from "@/types/contributions";
 import { StepperActionHeader } from "@/components/contribute/StepperActionHeader";
+import guidesData from "@/data/guides.json";
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
 
 type PropTypes = {
   Stepper: any;
+  type: ContributionType | null;
+  guideContData: GuideContribution;
+  objectiveContData: ObjectiveContribution;
 };
 
-export const Submit = ({ Stepper }: PropTypes) => {
+export const Submit = ({ Stepper, type, objectiveContData }: PropTypes) => {
+  const navigate = useNavigate();
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  // Helpers to resolve slugs
+  const getGuideTitle = (slug: string) => {
+    const guide = guidesData.find((g) => g.slug === slug);
+    return guide ? guide.title : slug;
+  };
+
+  const handleSubmit = async () => {
+    setIsSubmitting(true);
+
+    // Mock API call
+    await new Promise((resolve) => setTimeout(resolve, 1000));
+
+    setIsSubmitting(false);
+    toast.success("Contribution submitted for review");
+    navigate({ to: "/" });
+  };
+
   return (
     <Stepper.Content step="submit">
-      <StepperActionHeader title={"Submit"} Stepper={Stepper} />
+      <StepperActionHeader title={"Submit"} Stepper={Stepper} hideNext />
+
+      {type === "objective" && (
+        <div className="mx-auto mt-8 flex w-full max-w-3xl flex-col gap-6">
+          <Card className="border-border/50 bg-background/50 backdrop-blur-sm">
+            <CardHeader className="space-y-4">
+              <div className="flex items-start justify-between">
+                <div className="space-y-1.5">
+                  <CardTitle className="text-2xl font-bold tracking-tight">
+                    {objectiveContData.title || "Untitled Objective"}
+                  </CardTitle>
+                  <CardDescription className="text-base">
+                    {objectiveContData.summary || "No summary provided."}
+                  </CardDescription>
+                </div>
+              </div>
+
+              <div className="flex flex-wrap gap-2 pt-2">
+                <Badge
+                  variant="secondary"
+                  className="px-3 py-1 font-mono text-xs"
+                >
+                  {objectiveContData.targets.length} Targets
+                </Badge>
+                {objectiveContData.featured && (
+                  <Badge
+                    variant="outline"
+                    className="border-foreground/30 px-3 py-1"
+                  >
+                    Featured: {getGuideTitle(objectiveContData.featured)}
+                  </Badge>
+                )}
+              </div>
+            </CardHeader>
+          </Card>
+
+          <div className="space-y-6">
+            <h3 className="px-1 text-lg font-semibold tracking-tight">
+              Curriculum Paths
+            </h3>
+            {objectiveContData.targets.length === 0 ? (
+              <p className="px-1 text-sm text-muted-foreground">
+                No target sequences configured.
+              </p>
+            ) : (
+              objectiveContData.targets.map((targetSlug, idx) => {
+                const sub = objectiveContData.subObjectives.find(
+                  (s) => s.targetSlug === targetSlug
+                );
+
+                return (
+                  <Card key={idx} className="border-border/40 shadow-sm">
+                    <CardHeader className="border-b border-border/40 bg-muted/20 pb-3">
+                      <CardTitle className="flex items-center gap-2 text-base font-medium">
+                        <span className="font-mono text-xs font-normal text-muted-foreground">
+                          {idx + 1}. Target:
+                        </span>
+                        {getGuideTitle(targetSlug)}
+                      </CardTitle>
+                    </CardHeader>
+                    <CardContent className="pt-6">
+                      {sub?.curatedSequence &&
+                      sub.curatedSequence.length > 0 ? (
+                        <ol className="relative ml-3 space-y-6 border-l border-muted-foreground/20">
+                          {sub.curatedSequence.map((stepSlug, stepIdx) => (
+                            <li
+                              key={stepIdx}
+                              className="ml-6 flex flex-col gap-1"
+                            >
+                              <span className="absolute -left-3 flex h-6 w-6 items-center justify-center rounded-full border border-muted-foreground/30 bg-background font-mono text-xs text-muted-foreground ring-4 ring-background">
+                                {stepIdx + 1}
+                              </span>
+                              <span className="mt-1 text-sm leading-none font-medium">
+                                {getGuideTitle(stepSlug)}
+                              </span>
+                            </li>
+                          ))}
+                        </ol>
+                      ) : (
+                        <p className="text-sm text-muted-foreground">
+                          Default sequence will be used.
+                        </p>
+                      )}
+                    </CardContent>
+                  </Card>
+                );
+              })
+            )}
+          </div>
+        </div>
+      )}
+
+      {/* Placeholders for guide/variant types */}
+      {type === "guide" && (
+        <div className="mt-8 text-center text-muted-foreground">
+          Guide submission preview goes here.
+        </div>
+      )}
+      {type === "variant" && (
+        <div className="mt-8 text-center text-muted-foreground">
+          Variant submission preview goes here.
+        </div>
+      )}
+
+      <div className="mt-8">
+        <Button
+          className="h-12 w-full text-lg"
+          onClick={handleSubmit}
+          disabled={isSubmitting}
+        >
+          {isSubmitting ? "Submitting..." : "Submit Contribution"}
+        </Button>
+      </div>
     </Stepper.Content>
   );
 };
diff --git a/app/src/components/ui/combobox.tsx b/app/src/components/ui/combobox.tsx
index b84b48c2..ee50de4a 100644
--- a/app/src/components/ui/combobox.tsx
+++ b/app/src/components/ui/combobox.tsx
@@ -34,12 +34,14 @@ type SingleProps = ComboboxBaseProps & {
   multiple?: false;
   value: string;
   onValueChange: (value: string) => void;
+  disabled?: boolean;
 };
 
 type MultiProps = ComboboxBaseProps & {
   multiple: true;
   value: Array<string>;
   onValueChange: (value: Array<string>) => void;
+  disabled?: boolean;
 };
 
 type ComboboxProps = SingleProps | MultiProps;
@@ -78,7 +80,7 @@ export function Combobox({
       <PopoverTrigger asChild>
         <Button
           variant="outline"
-          className="w-[300px] justify-between"
+          className="w-75 justify-between"
           disabled={disabled}
         >
           <div className="flex flex-wrap gap-1">
@@ -104,7 +106,7 @@ export function Combobox({
         </Button>
       </PopoverTrigger>
 
-      <PopoverContent className="w-[500px] p-0">
+      <PopoverContent className="w-125 p-0">
         <Command>
           <CommandInput placeholder="Search..." />
           <CommandList>

From 4bed16a3eb1130d418280d014378255f98cbfa5a Mon Sep 17 00:00:00 2001
From: Carter <speers.carter@gmail.com>
Date: Mon, 20 Jul 2026 21:23:18 -0400
Subject: [PATCH 2/6] feat(app): add subjects to objective flow and enforce
 sequence validation

Signed-off-by: Carter <speers.carter@gmail.com>
---
 .../contribute/ContributionFlow.tsx           |  1 +
 .../contribute/steps/ObjectiveDetails.tsx     | 33 +++++++++++++++++++
 .../contribute/steps/OrderObjectiveGuides.tsx |  9 ++++-
 .../components/contribute/steps/Submit.tsx    | 15 +++++++++
 app/src/types/contributions.ts                |  1 +
 5 files changed, 58 insertions(+), 1 deletion(-)

diff --git a/app/src/components/contribute/ContributionFlow.tsx b/app/src/components/contribute/ContributionFlow.tsx
index 9dbb7372..35c0a2da 100644
--- a/app/src/components/contribute/ContributionFlow.tsx
+++ b/app/src/components/contribute/ContributionFlow.tsx
@@ -39,6 +39,7 @@ const createGuideContData = (): GuideContribution => ({
 const createObjectiveContData = (): ObjectiveContribution => ({
   title: "",
   summary: "",
+  subjects: [],
   targets: [
     "arithmetic-introduction",
     "algebra-how-to-express-equations",
diff --git a/app/src/components/contribute/steps/ObjectiveDetails.tsx b/app/src/components/contribute/steps/ObjectiveDetails.tsx
index 8988f7ad..47f4e944 100644
--- a/app/src/components/contribute/steps/ObjectiveDetails.tsx
+++ b/app/src/components/contribute/steps/ObjectiveDetails.tsx
@@ -14,6 +14,7 @@ import { Textarea } from "@/components/ui/textarea";
 import { Combobox } from "@/components/ui/combobox";
 
 import guidesData from "@/data/guides.json";
+import subjectsData from "@/data/subjects.json";
 
 type PropTypes = {
   Stepper: any;
@@ -44,12 +45,14 @@ export const ObjectiveDetails = ({
     return (
       objectiveContData.title.trim() === "" ||
       objectiveContData.summary.trim() === "" ||
+      objectiveContData.subjects.length === 0 ||
       objectiveContData.targets.length === 0 ||
       !objectiveContData.featured
     );
   }, [
     objectiveContData.title,
     objectiveContData.summary,
+    objectiveContData.subjects,
     objectiveContData.targets,
     objectiveContData.featured,
   ]);
@@ -124,6 +127,36 @@ export const ObjectiveDetails = ({
           />
         </Field>
 
+        <Field className="space-y-2">
+          <div className="space-y-1">
+            <FieldLabel
+              required
+              className="font-mono tracking-[0.08em] uppercase"
+            >
+              Subjects
+            </FieldLabel>
+            <FieldDescription className="text-xs">
+              Select one or more subjects this objective belongs to.
+            </FieldDescription>
+          </div>
+
+          <Combobox
+            multiple
+            items={subjectsData.map((s) => ({
+              value: s.slug,
+              label: s.name,
+              description: s.summary,
+            }))}
+            value={objectiveContData.subjects}
+            onValueChange={(subjects) =>
+              setObjectiveContData((prev) => ({
+                ...prev,
+                subjects,
+              }))
+            }
+          />
+        </Field>
+
         <Field className="space-y-2">
           <div className="space-y-1">
             <FieldLabel
diff --git a/app/src/components/contribute/steps/OrderObjectiveGuides.tsx b/app/src/components/contribute/steps/OrderObjectiveGuides.tsx
index 9e12c092..0a14f721 100644
--- a/app/src/components/contribute/steps/OrderObjectiveGuides.tsx
+++ b/app/src/components/contribute/steps/OrderObjectiveGuides.tsx
@@ -262,12 +262,19 @@ export const OrderObjectiveGuides = ({
     updateSubObjective(targetSlug, newSeq);
   };
 
+  const isNextDisabled =
+    objectiveContData.subObjectives.length < objectiveContData.targets.length;
+
   return (
     <Stepper.Content
       step="objective-ordering"
       className="flex min-h-0 w-full flex-1 flex-col"
     >
-      <StepperActionHeader title={"Order Guides"} Stepper={Stepper} />
+      <StepperActionHeader
+        title={"Order Guides"}
+        Stepper={Stepper}
+        nextDisabled={isNextDisabled}
+      />
 
       <FieldGroup className="mt-0 flex min-h-0 flex-1 flex-col">
         {/* Target Guide Sequence */}
diff --git a/app/src/components/contribute/steps/Submit.tsx b/app/src/components/contribute/steps/Submit.tsx
index 2205e30d..0278cef4 100644
--- a/app/src/components/contribute/steps/Submit.tsx
+++ b/app/src/components/contribute/steps/Submit.tsx
@@ -8,6 +8,7 @@ import type {
 } from "@/types/contributions";
 import { StepperActionHeader } from "@/components/contribute/StepperActionHeader";
 import guidesData from "@/data/guides.json";
+import subjectsData from "@/data/subjects.json";
 
 import {
   Card,
@@ -36,6 +37,11 @@ export const Submit = ({ Stepper, type, objectiveContData }: PropTypes) => {
     return guide ? guide.title : slug;
   };
 
+  const getSubjectName = (slug: string) => {
+    const subject = subjectsData.find((s) => s.slug === slug);
+    return subject ? subject.name : slug;
+  };
+
   const handleSubmit = async () => {
     setIsSubmitting(true);
 
@@ -73,6 +79,15 @@ export const Submit = ({ Stepper, type, objectiveContData }: PropTypes) => {
                 >
                   {objectiveContData.targets.length} Targets
                 </Badge>
+                {objectiveContData.subjects.map((slug) => (
+                  <Badge
+                    key={slug}
+                    variant="secondary"
+                    className="border border-muted-foreground/20 bg-muted/60 px-3 py-1 font-mono text-xs text-muted-foreground"
+                  >
+                    {getSubjectName(slug)}
+                  </Badge>
+                ))}
                 {objectiveContData.featured && (
                   <Badge
                     variant="outline"
diff --git a/app/src/types/contributions.ts b/app/src/types/contributions.ts
index 9498177a..4d21b04d 100644
--- a/app/src/types/contributions.ts
+++ b/app/src/types/contributions.ts
@@ -22,6 +22,7 @@ export type SubObjective = {
 export type ObjectiveContribution = {
   title: string;
   summary: string;
+  subjects: Array<string>;
   targets: Array<string>;
   featured: string;
   subObjectives: Array<SubObjective>;

From a955a0470e0950e613f1c86df19206ee55553fff Mon Sep 17 00:00:00 2001
From: Carter <speers.carter@gmail.com>
Date: Mon, 20 Jul 2026 21:35:04 -0400
Subject: [PATCH 3/6] feat(app): add validation toast and field highlighting to
 objective details

Signed-off-by: Carter <speers.carter@gmail.com>
---
 .../contribute/StepperActionHeader.tsx        |  8 +++-
 .../contribute/steps/ObjectiveDetails.tsx     | 41 +++++++++++++++++--
 app/src/components/ui/combobox.tsx            |  4 +-
 3 files changed, 47 insertions(+), 6 deletions(-)

diff --git a/app/src/components/contribute/StepperActionHeader.tsx b/app/src/components/contribute/StepperActionHeader.tsx
index 27d97647..8fe4458b 100644
--- a/app/src/components/contribute/StepperActionHeader.tsx
+++ b/app/src/components/contribute/StepperActionHeader.tsx
@@ -5,11 +5,13 @@ export const StepperActionHeader = ({
   Stepper,
   nextDisabled,
   hideNext,
+  onNextClick,
 }: {
   title: string;
   Stepper: any;
   nextDisabled?: boolean;
   hideNext?: boolean;
+  onNextClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
 }) => {
   return (
     <>
@@ -22,7 +24,11 @@ export const StepperActionHeader = ({
           <Stepper.Prev className="btn-sec">Back</Stepper.Prev>
 
           {!hideNext && (
-            <Stepper.Next className="btn-pri" disabled={nextDisabled}>
+            <Stepper.Next
+              className="btn-pri"
+              disabled={nextDisabled}
+              onClick={onNextClick}
+            >
               Next
             </Stepper.Next>
           )}
diff --git a/app/src/components/contribute/steps/ObjectiveDetails.tsx b/app/src/components/contribute/steps/ObjectiveDetails.tsx
index 47f4e944..de73c2cb 100644
--- a/app/src/components/contribute/steps/ObjectiveDetails.tsx
+++ b/app/src/components/contribute/steps/ObjectiveDetails.tsx
@@ -1,4 +1,5 @@
-import { useMemo } from "react";
+import { useMemo, useState } from "react";
+import { toast } from "sonner";
 import type { Dispatch, SetStateAction } from "react";
 import type { ObjectiveContribution } from "@/types/contributions";
 
@@ -27,6 +28,7 @@ export const ObjectiveDetails = ({
   objectiveContData,
   setObjectiveContData,
 }: PropTypes) => {
+  const [showErrors, setShowErrors] = useState(false);
   const guides = guidesData.map((g) => {
     return {
       value: g.slug,
@@ -57,12 +59,20 @@ export const ObjectiveDetails = ({
     objectiveContData.featured,
   ]);
 
+  const handleNextClick = (e: React.MouseEvent) => {
+    if (isNextDisabled) {
+      e.preventDefault();
+      setShowErrors(true);
+      toast.error("Please fill out all required fields.");
+    }
+  };
+
   return (
     <Stepper.Content step="objective-details">
       <StepperActionHeader
         title={"Objective Details"}
         Stepper={Stepper}
-        nextDisabled={isNextDisabled}
+        onNextClick={handleNextClick}
       />
 
       <FieldGroup>
@@ -85,7 +95,11 @@ export const ObjectiveDetails = ({
             autoComplete="Title"
             maxLength={50}
             placeholder="Choose a title. (Maximum 50 characters)."
-            className="h-10 rounded-md"
+            className={`h-10 rounded-md ${
+              showErrors && !objectiveContData.title.trim()
+                ? "border-destructive focus-visible:ring-destructive/20"
+                : ""
+            }`}
             required
             value={objectiveContData.title}
             onChange={(e) =>
@@ -112,7 +126,11 @@ export const ObjectiveDetails = ({
           </div>
 
           <Textarea
-            className="h-32 w-full min-w-0 resize-none"
+            className={`h-32 w-full min-w-0 resize-none ${
+              showErrors && !objectiveContData.summary.trim()
+                ? "border-destructive focus-visible:ring-destructive/20"
+                : ""
+            }`}
             rows={4}
             maxLength={250}
             placeholder="Write a summary for the objective."
@@ -142,6 +160,11 @@ export const ObjectiveDetails = ({
 
           <Combobox
             multiple
+            className={
+              showErrors && objectiveContData.subjects.length === 0
+                ? "border-destructive focus-visible:ring-destructive/20"
+                : ""
+            }
             items={subjectsData.map((s) => ({
               value: s.slug,
               label: s.name,
@@ -173,6 +196,11 @@ export const ObjectiveDetails = ({
 
           <Combobox
             multiple
+            className={
+              showErrors && objectiveContData.targets.length === 0
+                ? "border-destructive focus-visible:ring-destructive/20"
+                : ""
+            }
             items={guides}
             value={objectiveContData.targets}
             onValueChange={(targets) => {
@@ -211,6 +239,11 @@ export const ObjectiveDetails = ({
 
           <Combobox
             disabled={targs.length === 0}
+            className={
+              showErrors && !objectiveContData.featured
+                ? "border-destructive focus-visible:ring-destructive/20"
+                : ""
+            }
             items={targs}
             value={objectiveContData.featured}
             onValueChange={(featured) =>
diff --git a/app/src/components/ui/combobox.tsx b/app/src/components/ui/combobox.tsx
index ee50de4a..6f5e1163 100644
--- a/app/src/components/ui/combobox.tsx
+++ b/app/src/components/ui/combobox.tsx
@@ -27,6 +27,7 @@ export type ComboboxItem = {
 type ComboboxBaseProps = {
   items: Array<ComboboxItem>;
   placeholder?: string;
+  className?: string;
   disabled?: boolean;
 };
 
@@ -51,6 +52,7 @@ export function Combobox({
   items,
   value,
   onValueChange,
+  className,
   disabled,
 }: ComboboxProps) {
   const [open, setOpen] = React.useState(false);
@@ -80,7 +82,7 @@ export function Combobox({
       <PopoverTrigger asChild>
         <Button
           variant="outline"
-          className="w-75 justify-between"
+          className={cn("w-75 justify-between", className)}
           disabled={disabled}
         >
           <div className="flex flex-wrap gap-1">

From 9f4e67b771d5dfebb8e6f3bbe3c25695fb9246c3 Mon Sep 17 00:00:00 2001
From: Carter <speers.carter@gmail.com>
Date: Mon, 20 Jul 2026 21:50:06 -0400
Subject: [PATCH 4/6] feat(app): highlight unvisited targets in order guides
 step

Signed-off-by: Carter <speers.carter@gmail.com>
---
 .../contribute/steps/OrderObjectiveGuides.tsx | 25 ++++++++++++++++---
 1 file changed, 22 insertions(+), 3 deletions(-)

diff --git a/app/src/components/contribute/steps/OrderObjectiveGuides.tsx b/app/src/components/contribute/steps/OrderObjectiveGuides.tsx
index 0a14f721..dde2df61 100644
--- a/app/src/components/contribute/steps/OrderObjectiveGuides.tsx
+++ b/app/src/components/contribute/steps/OrderObjectiveGuides.tsx
@@ -10,6 +10,7 @@ import {
   User,
   Workflow,
 } from "lucide-react";
+import { toast } from "sonner";
 import { GuideGraph } from "../graph-view/GuideGraph";
 import type { Dispatch, SetStateAction } from "react";
 import type { ObjectiveContribution } from "@/types/contributions";
@@ -106,6 +107,7 @@ export const OrderObjectiveGuides = ({
   objectiveContData,
   setObjectiveContData,
 }: PropTypes) => {
+  const [showErrors, setShowErrors] = useState(false);
   const [targetSlug, setTargetSlug] = useState<string>(
     objectiveContData.targets[0] || ""
   );
@@ -265,6 +267,16 @@ export const OrderObjectiveGuides = ({
   const isNextDisabled =
     objectiveContData.subObjectives.length < objectiveContData.targets.length;
 
+  const handleNextClick = (e: React.MouseEvent) => {
+    if (isNextDisabled) {
+      e.preventDefault();
+      setShowErrors(true);
+      toast.error(
+        "Please visit and order every target guide before proceeding."
+      );
+    }
+  };
+
   return (
     <Stepper.Content
       step="objective-ordering"
@@ -273,7 +285,7 @@ export const OrderObjectiveGuides = ({
       <StepperActionHeader
         title={"Order Guides"}
         Stepper={Stepper}
-        nextDisabled={isNextDisabled}
+        onNextClick={handleNextClick}
       />
 
       <FieldGroup className="mt-0 flex min-h-0 flex-1 flex-col">
@@ -294,6 +306,9 @@ export const OrderObjectiveGuides = ({
               if (!guide) return null;
 
               const isActive = slug === targetSlug;
+              const hasVisited = objectiveContData.subObjectives.some(
+                (s) => s.targetSlug === slug
+              );
 
               return (
                 <div key={slug} className="flex shrink-0 items-center gap-2">
@@ -304,14 +319,18 @@ export const OrderObjectiveGuides = ({
                     className={`flex items-center gap-2 rounded-full border px-3 py-1.5 text-sm font-medium transition-colors ${
                       isActive
                         ? "border-primary bg-primary/10 text-primary ring-1 ring-primary/20"
-                        : "border-border bg-background text-muted-foreground hover:border-primary/50 hover:bg-muted"
+                        : showErrors && !hasVisited
+                          ? "border-destructive bg-destructive/5 text-destructive hover:bg-destructive/10"
+                          : "border-border bg-background text-muted-foreground hover:border-primary/50 hover:bg-muted"
                     }`}
                   >
                     <span
                       className={`flex h-5 w-5 items-center justify-center rounded-full text-xs ${
                         isActive
                           ? "bg-primary text-primary-foreground"
-                          : "bg-muted-foreground/20 text-muted-foreground"
+                          : showErrors && !hasVisited
+                            ? "bg-destructive/20 text-destructive"
+                            : "bg-muted-foreground/20 text-muted-foreground"
                       }`}
                     >
                       {index + 1}

From b08bd39e7214ae946baae1d9b898a2acc78ed567 Mon Sep 17 00:00:00 2001
From: Carter <speers.carter@gmail.com>
Date: Thu, 23 Jul 2026 02:32:55 -0400
Subject: [PATCH 5/6] style(app): polish objective preview UI

Signed-off-by: Carter <speers.carter@gmail.com>
---
 AGENTS.md                                     | 257 ++++++++++++++++++
 .../contribute/steps/PreviewObjective.tsx     | 178 ++++++++----
 2 files changed, 378 insertions(+), 57 deletions(-)
 create mode 100644 AGENTS.md

diff --git a/AGENTS.md b/AGENTS.md
new file mode 100644
index 00000000..92afe890
--- /dev/null
+++ b/AGENTS.md
@@ -0,0 +1,257 @@
+# Agent Handbook – Bluelearn
+
+This document provides the essential context an agent needs to work effectively in the Bluelearn repository. It focuses on non‑obvious knowledge that saves time and avoids common pitfalls.
+
+## Project Overview
+
+Bluelearn is an open‑source, prerequisite‑graph education platform. It is a **pnpm workspace monorepo** containing:
+
+- **`app/`** – React 19 frontend with TanStack Start (SSR), TanStack Router, Tailwind CSS v4, and shadcn/ui components.
+- **`api/`** – Hono‑based API running on Cloudflare Workers, using Supabase for authentication and data.
+- **`supabase/`** – Local PostgreSQL database, migrations, and configuration (auth, storage, RLS).
+
+The stack is fully typed end‑to‑end: Hono exports `AppType` that the frontend can import for type‑safe API calls (not yet wired in the initial code).
+
+## Getting Started
+
+### Prerequisites
+- **Node.js ≥20** and **pnpm ≥10.33.1** (see `packageManager` in root `package.json`)
+- **Docker** (required for `supabase start`)
+- **Supabase CLI** (`npm install -g supabase`)
+
+### Setup
+1. Clone the repository and install dependencies:
+   ```bash
+   pnpm install
+   ```
+2. Start the Supabase local stack (this will spin up PostgreSQL, Auth, Storage, etc.):
+   ```bash
+   pnpm supabase:start
+   ```
+   Wait for it to be ready, then run `supabase status` to see the URLs and keys.
+3. Copy environment variables:
+   ```bash
+   cp app/.env.example app/.env
+   cp api/.dev.vars.example api/.dev.vars
+   ```
+   Fill in the values from `supabase status` (or `supabase status -o env`).
+4. Start the API in a separate terminal:
+   ```bash
+   pnpm dev:api
+   ```
+   This runs `wrangler dev` on `localhost:8787`.
+5. Start the frontend in another terminal:
+   ```bash
+   pnpm dev:app
+   ```
+   The app will be available at `http://localhost:3000`.
+
+## Essential Commands
+
+All commands are run from the **root** of the monorepo unless noted.
+
+| Command | Description |
+|---------|-------------|
+| `pnpm dev` | Start **both** app and API in parallel (aggregated output). |
+| `pnpm dev:app` | Start the frontend dev server (Vite, port 3000). |
+| `pnpm dev:api` | Start the API dev server (Wrangler, port 8787). |
+| `pnpm build` | Build all packages (`app/` and `api/`). |
+| `pnpm typecheck` | Run TypeScript type checking across the workspace. |
+| `pnpm lint` | Run ESLint on all packages. |
+| `pnpm format` | Format code with Prettier (includes Tailwind CSS plugin). |
+| `pnpm test` | Run Vitest tests (currently only `app/` has tests). |
+| `pnpm supabase:start` | Start the local Supabase stack (requires Docker). |
+| `pnpm supabase:stop` | Stop the Supabase stack. |
+| `pnpm supabase:reset` | Reset the database (applies migrations again). |
+| `pnpm api:deploy` | Deploy the API to Cloudflare Workers (uses `wrangler deploy`). |
+
+> **Note:** The root `package.json` uses `pnpm -r` (recursive) and `--filter` to target specific packages. Use `pnpm --filter app <script>` if you need to run a script only on the frontend.
+
+## Architecture
+
+```
+┌──────────────────────────────────────────────────────────────────────┐
+│                              browser                                │
+└───────────────────────────────┬──────────────────────────────────────┘
+                                │  HTTPS
+                                ▼
+┌──────────────────────────────────────────────────────────────────────┐
+│  app/   React 19 · TanStack Start · TanStack Router/Query           │
+│         shadcn/ui · Tailwind 4 · Vite                                │
+│                                                                      │
+│  Routes call the API via the Hono `hc<AppType>` client — fully       │
+│  type‑safe end‑to‑end from handler to component.                     │
+└───────────────────────────────┬──────────────────────────────────────┘
+                                │  fetch (typed via hc<AppType>)
+                                ▼
+┌──────────────────────────────────────────────────────────────────────┐
+│  api/   Hono on Cloudflare Workers                                   │
+│         Routes: /subjects · /walkthroughs · /guides                  │
+│         Middleware: cors, supabaseMiddleware (auth)                  │
+│         Validation: @hono/zod‑validator                              │
+└───────────────────────────────┬──────────────────────────────────────┘
+                                │  PostgREST / RPC
+                                ▼
+┌──────────────────────────────────────────────────────────────────────┐
+│  supabase/   Postgres · Auth · Storage                               │
+│              Migrations in supabase/migrations/                      │
+│              RLS policies enforce per‑user access                    │
+└──────────────────────────────────────────────────────────────────────┘
+```
+
+Key architectural decisions:
+
+- **Frontend never talks to Supabase directly.** All data and auth flows go through the API.
+- **API is stateless.** State lives in Postgres; cached state will later use Workers KV.
+- **Authentication:** Supabase issues JWTs, the frontend sends them in the `Authorization` header, `supabaseMiddleware` verifies the token and attaches a scoped client to the request context.
+- **Row‑Level Security (RLS)** does the heavy lifting; the API only proxies requests with the user‑scoped client.
+
+## Code Organization
+
+### `app/`
+- `src/routes/` – TanStack Router file‑based routes (each route is a `.tsx` file).
+- `src/components/` – React components; `ui/` contains shadcn/ui primitives.
+- `src/lib/` – Utility functions (e.g., `cn()` for Tailwind class merging).
+- `src/styles.css` – Global Tailwind CSS entry point.
+- `vite.config.ts` – Vite configuration with TanStack Start plugin, Tailwind, and path aliases.
+
+**Path alias:** `@/` → `src/` (configured in `tsconfig.json`).
+
+### `api/`
+- `src/index.ts` – Main Hono app with CORS, supabaseMiddleware, and route mounting.
+- `src/routes/` – Route handlers (`subjects.ts`, `walkthroughs.ts`, `guides.ts`).
+- `src/middleware/` – Authentication middleware (`auth.middleware.ts`).
+- `src/types.ts` – TypeScript bindings for Cloudflare Workers environment.
+- `src/database.types.ts` – **Stub** – regenerate with `supabase gen types`.
+- `wrangler.jsonc` – Cloudflare Workers configuration.
+
+### `supabase/`
+- `migrations/` – PostgreSQL migration files (only `profiles` table exists initially).
+- `config.toml` – Local Supabase configuration (ports, features, auth settings).
+- **Note:** The complete schema is described in `docs/database‑schema.md`. The actual database currently contains only the `profiles` table.
+
+### `docs/`
+- `architecture.md` – High‑level architecture diagram and rationale.
+- `database‑schema.md` – Detailed schema design (not yet implemented).
+- `overall‑system.md` – Product vision, terminology, and user flows.
+- `monorepo.md` – Why the monorepo exists and what it solves.
+
+## Development Patterns
+
+### Frontend
+- **Routing:** Use TanStack Router’s file‑based routing. Each route exports a `Route` component created with `createFileRoute`.
+- **Styling:** Use Tailwind CSS with `cn()` helper for conditional classes.
+- **Components:** Follow shadcn/ui patterns; add new components via `npx shadcn@latest add`.
+- **API calls:** Not yet implemented; the plan is to use Hono’s `hc<AppType>` client for type‑safe requests.
+- **SSR:** The app uses TanStack Start (built on Nitro) for server‑side rendering. The `vite.config.ts` includes the `tanstackStart()` plugin.
+
+### API
+- **Routes:** Each resource (e.g., `subjects`) is a separate Hono instance mounted on the main app.
+- **Middleware:** `supabaseMiddleware` attaches a Supabase client to `c.var.supabase`. Use `getAuthenticatedUser(c)` to retrieve the current user.
+- **Validation:** Use `@hono/zod‑validator` for request validation (not yet used in the initial routes).
+- **Environment variables:** Bindings are defined in `src/types.ts` and must match the keys in `.dev.vars` (local) and Cloudflare secrets (production).
+
+### Database
+- **Migrations:** Add new SQL files in `supabase/migrations/` with a timestamp prefix (e.g., `20260513193000_name.sql`). Apply with `supabase db reset` or `supabase db push`.
+- **Type generation:** After modifying the schema, run `supabase gen types typescript --local > api/src/database.types.ts` to update the TypeScript definitions.
+- **RLS:** Always enable RLS and write policies that reflect the desired access pattern. The API uses a per‑request Supabase client with the user’s JWT, so RLS works automatically.
+
+### Shared Types
+Currently there is no shared `packages/types` folder. The API’s `AppType` (exported from `api/src/index.ts`) is intended to be imported by the frontend for type‑safe API calls. This integration is not yet wired up.
+
+## Typical Feature Development
+
+When adding a new feature that touches the database, API, and frontend, follow this sequence to keep changes atomic and maintain type safety:
+
+1. **Database migration**
+   - Create a new SQL file in `supabase/migrations/` (timestamped).
+   - Apply locally: `pnpm supabase:reset` (or `supabase db push`).
+   - Regenerate TypeScript types: `supabase gen types typescript --local > api/src/database.types.ts`.
+
+2. **API route**
+   - Add a new file in `api/src/routes/` or extend an existing one.
+   - Use `@hono/zod‑validator` for request validation.
+   - Import `supabase` from `c.var` and query the new tables.
+   - Export the route and mount it in `api/src/index.ts`.
+
+3. **Frontend integration**
+   - Create or update a TanStack Router route in `app/src/routes/`.
+   - Add a React component that fetches data using the typed Hono client (once wired).
+   - Use shadcn/ui components for consistent UI.
+
+4. **Type checking and linting**
+   - Run `pnpm typecheck` and `pnpm lint` to catch any errors.
+   - Format with `pnpm format`.
+
+5. **Test**
+   - Add Vitest tests for the frontend component.
+   - (Future) Add unit tests for the API route.
+
+Keep the PR scope limited to one feature across the stack—the monorepo enables atomic changes.
+
+## Testing
+
+- **Frontend:** Uses Vitest and React Testing Library. Run with `pnpm test` in the `app/` directory.
+- **API:** No test suite is currently set up.
+- **End‑to‑end:** None yet.
+
+## Gotchas & Non‑Obvious Things
+
+1. **Supabase requires Docker.** You must have Docker running before `pnpm supabase:start`. If Docker is not installed, the command will fail silently.
+2. **Environment variables differ between app and API.** The frontend uses `VITE_`‑prefixed variables (exposed to the browser), while the API uses plain names (stored in Cloudflare secrets). Copy the example files and fill them with values from `supabase status`.
+3. **CORS is configured in the API middleware.** The API only allows requests from `APP_URL` (set in `.dev.vars`). If you change the frontend port, update `APP_URL` accordingly.
+4. **Database types are a stub.** The file `api/src/database.types.ts` currently contains empty interfaces. Regenerate it after any schema change.
+5. **The API runs on `localhost:8787` in dev**, not the default Cloudflare Workers port (8788). The frontend’s `VITE_API_BASE` points to `http://localhost:8787`.
+6. **The root `package.json` scripts use `pnpm -r` (recursive).** If you need to run a command only in one package, use `pnpm --filter <package> <script>`.
+7. **Prettier is configured with a Tailwind plugin.** It sorts classes automatically; don’t manually reorder them.
+8. **Only the `profiles` table exists.** The extensive schema described in `docs/database‑schema.md` is not yet implemented. Start by adding migrations for the missing tables when building new features.
+
+## Environment Variables
+
+### `app/.env`
+| Variable | Description | Example |
+|----------|-------------|---------|
+| `VITE_SUPABASE_URL` | Supabase project URL (local or remote) | `http://127.0.0.1:54321` |
+| `VITE_SUPABASE_PUBLISHABLE_KEY` | Supabase anon/public key | (from `supabase status`) |
+| `VITE_API_BASE` | Base URL of the API (Wrangler dev server) | `http://localhost:8787` |
+
+### `api/.dev.vars`
+| Variable | Description | Example |
+|----------|-------------|---------|
+| `SUPABASE_URL` | Supabase project URL | `http://127.0.0.1:54321` |
+| `SUPABASE_PUBLISHABLE_KEY` | Supabase anon/public key | (from `supabase status`) |
+| `SUPABASE_SECRET_KEY` | Supabase service‑role key (bypasses RLS) | (from `supabase status`) |
+| `APP_URL` | Frontend origin for CORS | `http://localhost:5173` |
+
+**Production:** These variables become Cloudflare Workers secrets (set via `wrangler secret`).
+
+## Adding a New Package
+
+If you need to create a shared package (e.g., `packages/types` for shared TypeScript interfaces):
+
+1. Create a new directory under `packages/` (the folder does not exist yet; create it).
+2. Add a `package.json` with `"name": "@bluelearn/types"`, `"type": "module"`, and `"exports"`.
+3. Update `pnpm‑workspace.yaml` to include the new package.
+4. Install dependencies with `pnpm install`.
+5. Import from other packages using the workspace protocol (`"@bluelearn/types": "workspace:*"`).
+
+## CI/CD
+
+The repository uses GitHub Actions defined in `.github/workflows/ci.yml`. Two jobs run in parallel:
+
+- **`app`** – Type checking, linting, testing, and building the frontend.
+- **`api`** – Type checking and a dry‑run deployment (`wrangler deploy --dry-run`).
+
+The workflow triggers on pushes to `main` and on pull requests.
+
+## Where to Look Next
+
+- **`docs/architecture.md`** for the high‑level architecture diagram and rationale.
+- **`docs/database‑schema.md`** for the complete, planned database schema (not yet implemented).
+- **`docs/overall‑system.md`** for product vision, terminology, and user flows.
+- **`docs/monorepo.md`** for why the repository is structured as a monorepo.
+- **`docs/open‑questions.md`** for unresolved design decisions.
+
+---
+
+*This document was generated by analyzing the repository. Update it as the codebase evolves.*
\ No newline at end of file
diff --git a/app/src/components/contribute/steps/PreviewObjective.tsx b/app/src/components/contribute/steps/PreviewObjective.tsx
index 035bfb76..d5a56011 100644
--- a/app/src/components/contribute/steps/PreviewObjective.tsx
+++ b/app/src/components/contribute/steps/PreviewObjective.tsx
@@ -1,3 +1,4 @@
+import { Clock, GraduationCap } from "lucide-react";
 import type { ObjectiveContribution } from "@/types/contributions";
 import { Separator } from "@/components/ui/separator";
 import { StepperActionHeader } from "@/components/contribute/StepperActionHeader";
@@ -37,6 +38,29 @@ export const PreviewObjective = ({
     return subject ? subject.name : slug;
   };
 
+  const getGuideDuration = (slug: string) => {
+    const guide = guidesData.find((g) => g.slug === slug);
+    return guide?.duration || 0;
+  };
+
+  const getTargetDuration = (targetSlug: string) => {
+    const sub = objectiveContData.subObjectives.find(
+      (s) => s.targetSlug === targetSlug
+    );
+    if (sub?.curatedSequence && sub.curatedSequence.length > 0) {
+      return sub.curatedSequence.reduce(
+        (acc, slug) => acc + getGuideDuration(slug),
+        0
+      );
+    }
+    return getGuideDuration(targetSlug);
+  };
+
+  const totalDuration = objectiveContData.targets.reduce(
+    (acc, targetSlug) => acc + getTargetDuration(targetSlug),
+    0
+  );
+
   return (
     <Stepper.Content step="preview-objective">
       <StepperActionHeader
@@ -49,9 +73,9 @@ export const PreviewObjective = ({
 
       <Separator className="mb-8 bg-border" />
 
-      <div className="mx-auto mt-8 flex w-full max-w-3xl flex-col gap-6">
-        <Card className="border-border/50 bg-background/50 backdrop-blur-sm">
-          <CardHeader className="space-y-4">
+      <div className="mx-auto mt-8 flex w-full max-w-3xl flex-col gap-12">
+        <Card className="rounded-md bg-background shadow-none">
+          <CardHeader className="space-y-4 p-4">
             <div className="flex items-start justify-between">
               <div className="space-y-1.5">
                 <CardTitle className="text-2xl font-bold tracking-tight">
@@ -60,33 +84,50 @@ export const PreviewObjective = ({
                 <CardDescription className="text-base">
                   {objectiveContData.summary || "No summary provided."}
                 </CardDescription>
+                {objectiveContData.featured && (
+                  <p className="pt-1 text-sm text-muted-foreground">
+                    <span className="font-semibold">Featured Guide:</span>{" "}
+                    {getGuideTitle(objectiveContData.featured)}
+                  </p>
+                )}
               </div>
             </div>
 
-            <div className="flex flex-wrap gap-2 pt-2">
+            <div className="flex flex-wrap items-center gap-2 pt-2">
               <Badge
                 variant="secondary"
-                className="px-3 py-1 font-mono text-xs"
+                className="flex items-center gap-1.5 px-3 py-1 font-mono text-xs"
               >
-                {objectiveContData.targets.length} Targets
+                <GraduationCap className="h-7 w-7" />
+                {objectiveContData.targets.length == 1 ? (
+                  <span>1 Target Guide</span>
+                ) : (
+                  <span>{objectiveContData.targets.length} Target Guides</span>
+                )}
               </Badge>
-              {objectiveContData.subjects.map((slug) => (
+              {totalDuration > 0 && (
                 <Badge
-                  key={slug}
                   variant="secondary"
-                  className="border border-muted-foreground/20 bg-muted/60 px-3 py-1 font-mono text-xs text-muted-foreground"
+                  className="flex items-center gap-1.5 px-3 py-1 font-mono text-xs"
                 >
-                  {getSubjectName(slug)}
-                </Badge>
-              ))}
-              {objectiveContData.featured && (
-                <Badge
-                  variant="outline"
-                  className="border-foreground/30 px-3 py-1"
-                >
-                  Featured: {getGuideTitle(objectiveContData.featured)}
+                  <Clock className="h-7 w-7" />
+                  {totalDuration} mins
                 </Badge>
               )}
+              {objectiveContData.subjects.length > 0 && (
+                <>
+                  <span className="mx-1 h-1 w-1 rounded-full bg-muted-foreground/30" />
+                  {objectiveContData.subjects.map((slug) => (
+                    <Badge
+                      key={slug}
+                      variant="outline"
+                      className="mono-micro rounded-full border border-badge-border bg-badge tracking-[0.08em] text-badge-foreground"
+                    >
+                      {getSubjectName(slug)}
+                    </Badge>
+                  ))}
+                </>
+              )}
             </div>
           </CardHeader>
         </Card>
@@ -100,47 +141,70 @@ export const PreviewObjective = ({
               No target sequences configured.
             </p>
           ) : (
-            objectiveContData.targets.map((targetSlug, idx) => {
-              const sub = objectiveContData.subObjectives.find(
-                (s) => s.targetSlug === targetSlug
-              );
+            <ol className="m-0 flex w-full list-none flex-col gap-10 p-0">
+              {objectiveContData.targets.map((targetSlug, idx) => {
+                const sub = objectiveContData.subObjectives.find(
+                  (s) => s.targetSlug === targetSlug
+                );
 
-              return (
-                <Card key={idx} className="border-border/40 shadow-sm">
-                  <CardHeader className="border-b border-border/40 bg-muted/20 pb-3">
-                    <CardTitle className="flex items-center gap-2 text-base font-medium">
-                      <span className="font-mono text-xs font-normal text-muted-foreground">
-                        {idx + 1}. Target:
-                      </span>
-                      {getGuideTitle(targetSlug)}
-                    </CardTitle>
-                  </CardHeader>
-                  <CardContent className="pt-6">
-                    {sub?.curatedSequence && sub.curatedSequence.length > 0 ? (
-                      <ol className="relative ml-3 space-y-6 border-l border-muted-foreground/20">
-                        {sub.curatedSequence.map((stepSlug, stepIdx) => (
-                          <li
-                            key={stepIdx}
-                            className="ml-6 flex flex-col gap-1"
-                          >
-                            <span className="absolute -left-3 flex h-6 w-6 items-center justify-center rounded-full border border-muted-foreground/30 bg-background font-mono text-xs text-muted-foreground ring-4 ring-background">
-                              {stepIdx + 1}
-                            </span>
-                            <span className="mt-1 text-sm leading-none font-medium">
-                              {getGuideTitle(stepSlug)}
+                return (
+                  <li
+                    key={idx}
+                    className="flex flex-col gap-2 md:flex-row md:items-center md:gap-4"
+                  >
+                    <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full border border-badge-border bg-badge font-mono text-xs font-semibold text-badge-foreground">
+                      {idx + 1}
+                    </div>
+
+                    <Card className="flex-1 rounded-md bg-background shadow-none transition-colors hover:bg-muted">
+                      <CardHeader className="p-4">
+                        <div className="flex items-center justify-between gap-4">
+                          <CardTitle className="text-base font-medium">
+                            {getGuideTitle(targetSlug)}
+                          </CardTitle>
+                          {getTargetDuration(targetSlug) > 0 && (
+                            <span className="shrink-0 font-mono text-[10px] text-muted-foreground uppercase">
+                              {getTargetDuration(targetSlug)} mins
                             </span>
-                          </li>
-                        ))}
-                      </ol>
-                    ) : (
-                      <p className="text-sm text-muted-foreground">
-                        Default sequence will be used.
-                      </p>
-                    )}
-                  </CardContent>
-                </Card>
-              );
-            })
+                          )}
+                        </div>
+                      </CardHeader>
+                      <CardContent className="border-t p-4">
+                        {sub?.curatedSequence &&
+                        sub.curatedSequence.length > 0 ? (
+                          <ol className="relative ml-3 space-y-6 border-l border-muted-foreground/20">
+                            {sub.curatedSequence.map((stepSlug, stepIdx) => (
+                              <li
+                                key={stepIdx}
+                                className="ml-6 flex flex-col gap-1"
+                              >
+                                <span className="absolute -left-3 flex h-6 w-6 items-center justify-center rounded-full border border-muted-foreground/30 bg-background font-mono text-xs text-muted-foreground ring-4 ring-background">
+                                  {stepIdx + 1}
+                                </span>
+                                <div className="mt-1 flex items-center justify-between gap-4">
+                                  <span className="text-sm leading-none font-medium">
+                                    {getGuideTitle(stepSlug)}
+                                  </span>
+                                  {getGuideDuration(stepSlug) > 0 && (
+                                    <span className="shrink-0 font-mono text-[10px] text-muted-foreground uppercase">
+                                      {getGuideDuration(stepSlug)} mins
+                                    </span>
+                                  )}
+                                </div>
+                              </li>
+                            ))}
+                          </ol>
+                        ) : (
+                          <p className="text-sm text-muted-foreground">
+                            Default sequence will be used.
+                          </p>
+                        )}
+                      </CardContent>
+                    </Card>
+                  </li>
+                );
+              })}
+            </ol>
           )}
         </div>
       </div>

From 6011cdd08533a85e5647eb9e42cd0e413c5d2c3b Mon Sep 17 00:00:00 2001
From: Carter <speers.carter@gmail.com>
Date: Fri, 24 Jul 2026 04:25:45 -0400
Subject: [PATCH 6/6] feat(app): enhance objective preview card styling and
 form persistence

- Persist objective contribution form state in sessionStorage to survive page reloads.
- Decouple PreviewObjectiveCard from ObjectiveCard to safely refine preview styling.
- Center arrows and tighten featured guide graphs on wide screens.
- Append summaries and subject tags to subobjective target cards.
- Synchronize featured guide graph with user's explicitly selected featured guide.
- Format duration as 'min' instead of 'M'.

Signed-off-by: Carter <speers.carter@gmail.com>
---
 .../contribute/ContributionFlow.tsx           |  48 +++
 .../contribute/steps/PreviewObjective.tsx     | 276 +++++++++++++-----
 app/src/routes/contribute.tsx                 |  12 +-
 3 files changed, 263 insertions(+), 73 deletions(-)

diff --git a/app/src/components/contribute/ContributionFlow.tsx b/app/src/components/contribute/ContributionFlow.tsx
index 79f82838..6881211b 100644
--- a/app/src/components/contribute/ContributionFlow.tsx
+++ b/app/src/components/contribute/ContributionFlow.tsx
@@ -61,6 +61,32 @@ export default function ContributionFlow({ type, setType }: PropTypes) {
   const [objectiveContData, setObjectiveContData] =
     useState<ObjectiveContribution>(createObjectiveContData);
 
+  useEffect(() => {
+    const savedGuide = sessionStorage.getItem("guide_cont_data");
+    if (savedGuide) {
+      try {
+        setGuideContData(JSON.parse(savedGuide));
+      } catch (e) {}
+    }
+    const savedObj = sessionStorage.getItem("objective_cont_data");
+    if (savedObj) {
+      try {
+        setObjectiveContData(JSON.parse(savedObj));
+      } catch (e) {}
+    }
+  }, []);
+
+  useEffect(() => {
+    sessionStorage.setItem("guide_cont_data", JSON.stringify(guideContData));
+  }, [guideContData]);
+
+  useEffect(() => {
+    sessionStorage.setItem(
+      "objective_cont_data",
+      JSON.stringify(objectiveContData)
+    );
+  }, [objectiveContData]);
+
   const StepperInstance = useMemo(() => {
     if (!type) {
       return defineStepper(typeStep);
@@ -110,6 +136,28 @@ function Inner({
   objectiveContData: ObjectiveContribution;
   setObjectiveContData: Dispatch<SetStateAction<ObjectiveContribution>>;
 }) {
+  const hasHydratedStep = useRef(false);
+
+  useEffect(() => {
+    if (stepper.current?.id) {
+      sessionStorage.setItem("cont_step", stepper.current.id);
+    }
+  }, [stepper.current?.id]);
+
+  useEffect(() => {
+    if (hasHydratedStep.current) return;
+    if (type !== null) {
+      const savedStep = sessionStorage.getItem("cont_step");
+      if (savedStep) {
+        requestAnimationFrame(() => {
+          try {
+            stepper.goTo(savedStep);
+          } catch (e) {}
+        });
+      }
+      hasHydratedStep.current = true;
+    }
+  }, [type, stepper]);
   const pickType = (value: ContributionType) => {
     if (type !== value) {
       setGuideContData(createGuideContData());
diff --git a/app/src/components/contribute/steps/PreviewObjective.tsx b/app/src/components/contribute/steps/PreviewObjective.tsx
index d5a56011..43499641 100644
--- a/app/src/components/contribute/steps/PreviewObjective.tsx
+++ b/app/src/components/contribute/steps/PreviewObjective.tsx
@@ -1,18 +1,14 @@
-import { Clock, GraduationCap } from "lucide-react";
+import React from "react";
+import { ArrowRight } from "lucide-react";
 import type { ObjectiveContribution } from "@/types/contributions";
 import { Separator } from "@/components/ui/separator";
 import { StepperActionHeader } from "@/components/contribute/StepperActionHeader";
 import guidesData from "@/data/guides.json";
 import subjectsData from "@/data/subjects.json";
 
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
+import { Footer } from "@/components/cards/Footer";
 
 type PropTypes = {
   Stepper: any;
@@ -21,6 +17,113 @@ type PropTypes = {
   submitting: boolean;
 };
 
+type FeaturedNode = {
+  position: number;
+  slug: string | null;
+  title: string | null;
+};
+
+function FeaturedSubObjective({ nodes }: { nodes: Array<FeaturedNode> }) {
+  const shown = nodes.slice(-3);
+  const hidden = nodes.length - shown.length;
+
+  return (
+    <CardContent className="border-t p-4">
+      <div className="flex items-center justify-center gap-4 sm:gap-8 md:gap-12">
+        {hidden > 0 && (
+          <React.Fragment>
+            <div className="flex w-full flex-col items-center justify-center text-center sm:w-18 md:w-22">
+              <span className="flex h-8 shrink-0 items-center justify-center text-sm font-medium">
+                {hidden}
+              </span>
+              <span className="line-clamp-3 text-sm leading-snug text-muted-foreground">
+                guides
+              </span>
+            </div>
+            <div className="flex items-center justify-center">
+              <ArrowRight className="mt-1.5 h-4 w-4 shrink-0 rotate-90 text-muted-foreground sm:rotate-0" />
+            </div>
+          </React.Fragment>
+        )}
+        {shown.map((step, index) => (
+          <React.Fragment key={step.position}>
+            <div className="flex w-full flex-col items-center justify-center text-center sm:w-24 md:w-28">
+              <span className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-badge text-sm font-medium">
+                {step.position}
+              </span>
+              <span className="line-clamp-3 text-sm leading-snug text-muted-foreground">
+                {step.title}
+              </span>
+            </div>
+            {index < shown.length - 1 && (
+              <div className="flex items-center justify-center">
+                <ArrowRight className="h-5 w-5 shrink-0 rotate-90 text-muted-foreground sm:rotate-0" />
+              </div>
+            )}
+          </React.Fragment>
+        ))}
+      </div>
+    </CardContent>
+  );
+}
+
+function PreviewObjectiveCard({ objective }: { objective: any }) {
+  return (
+    <Card className="group flex flex-col justify-between rounded-md bg-background shadow-none transition-colors hover:bg-muted">
+      <CardHeader className="relative p-4">
+        <div className="flex items-center justify-between">
+          <p className="font-mono text-xs tracking-wide text-muted-foreground uppercase">
+            Objective
+          </p>
+        </div>
+
+        <h3 className="line-clamp-2 text-xl font-semibold tracking-tight">
+          {objective.title}
+        </h3>
+
+        <p className="max-w-2xl text-sm text-muted-foreground">
+          {objective.summary}
+        </p>
+
+        <div className="flex items-center justify-between">
+          <p className="mono-micro text-muted-foreground">
+            @{objective.curator} | {objective.created_at}
+          </p>
+        </div>
+
+        {objective.tags && objective.tags.length > 0 && (
+          <div className="flex flex-wrap gap-2 pt-4">
+            {objective.tags.map((tag: any) => {
+              const slug = typeof tag === "string" ? tag : tag.slug;
+              const name = typeof tag === "string" ? tag : tag.name;
+              return (
+                <Badge
+                  key={slug}
+                  variant="outline"
+                  className="mono-micro rounded-full border border-badge-border bg-badge tracking-[0.08em] text-badge-foreground"
+                >
+                  {name}
+                </Badge>
+              );
+            })}
+          </div>
+        )}
+      </CardHeader>
+
+      {objective.featuredSubObjective &&
+        objective.featuredSubObjective.length > 0 && (
+          <FeaturedSubObjective nodes={objective.featuredSubObjective} />
+        )}
+
+      {(objective.stats || objective.actionBtns) && (
+        <Footer
+          data={{ stats: objective.stats, actionBtns: objective.actionBtns }}
+        />
+      )}
+    </Card>
+  );
+}
+
 export const PreviewObjective = ({
   Stepper,
   objectiveContData,
@@ -43,6 +146,16 @@ export const PreviewObjective = ({
     return guide?.duration || 0;
   };
 
+  const getGuideSummary = (slug: string) => {
+    const guide = guidesData.find((g) => g.slug === slug);
+    return guide?.summary || null;
+  };
+
+  const getGuideTags = (slug: string) => {
+    const guide = guidesData.find((g) => g.slug === slug);
+    return guide?.tags || [];
+  };
+
   const getTargetDuration = (targetSlug: string) => {
     const sub = objectiveContData.subObjectives.find(
       (s) => s.targetSlug === targetSlug
@@ -61,6 +174,64 @@ export const PreviewObjective = ({
     0
   );
 
+  const totalGuides = objectiveContData.targets.reduce((acc, targetSlug) => {
+    const sub = objectiveContData.subObjectives.find(
+      (s) => s.targetSlug === targetSlug
+    );
+    if (sub?.curatedSequence && sub.curatedSequence.length > 0) {
+      return acc + sub.curatedSequence.length;
+    }
+    return acc + 1;
+  }, 0);
+
+  const featuredTargetSlug =
+    objectiveContData.featured || objectiveContData.targets[0];
+  const featuredSub = featuredTargetSlug
+    ? objectiveContData.subObjectives.find(
+        (s) => s.targetSlug === featuredTargetSlug
+      )
+    : null;
+
+  let featuredSubObjectiveNodes = undefined;
+  if (featuredTargetSlug) {
+    const sequence =
+      featuredSub?.curatedSequence && featuredSub.curatedSequence.length > 0
+        ? featuredSub.curatedSequence
+        : [featuredTargetSlug];
+    featuredSubObjectiveNodes = sequence.map((slug, idx) => ({
+      position: idx + 1,
+      slug,
+      title: getGuideTitle(slug),
+    }));
+  }
+
+  const previewData = {
+    slug: "",
+    title: objectiveContData.title || "Untitled Objective",
+    summary: objectiveContData.summary || "No summary provided.",
+    curator: "preview",
+    created_at: "Today",
+    featuredSubObjective: featuredSubObjectiveNodes,
+    stats: [
+      {
+        label: "Duration",
+        data: `${totalDuration} min`,
+      },
+      {
+        label: "Sub-objectives",
+        data: objectiveContData.targets.length,
+      },
+      {
+        label: "Guides",
+        data: totalGuides,
+      },
+    ],
+    tags: objectiveContData.subjects.map((slug) => ({
+      slug,
+      name: getSubjectName(slug),
+    })),
+  };
+
   return (
     <Stepper.Content step="preview-objective">
       <StepperActionHeader
@@ -68,77 +239,20 @@ export const PreviewObjective = ({
         Stepper={Stepper}
         onPublish={onPublish}
         submitting={submitting}
-        publishText="Submit"
       />
 
       <Separator className="mb-8 bg-border" />
 
-      <div className="mx-auto mt-8 flex w-full max-w-3xl flex-col gap-12">
-        <Card className="rounded-md bg-background shadow-none">
-          <CardHeader className="space-y-4 p-4">
-            <div className="flex items-start justify-between">
-              <div className="space-y-1.5">
-                <CardTitle className="text-2xl font-bold tracking-tight">
-                  {objectiveContData.title || "Untitled Objective"}
-                </CardTitle>
-                <CardDescription className="text-base">
-                  {objectiveContData.summary || "No summary provided."}
-                </CardDescription>
-                {objectiveContData.featured && (
-                  <p className="pt-1 text-sm text-muted-foreground">
-                    <span className="font-semibold">Featured Guide:</span>{" "}
-                    {getGuideTitle(objectiveContData.featured)}
-                  </p>
-                )}
-              </div>
-            </div>
-
-            <div className="flex flex-wrap items-center gap-2 pt-2">
-              <Badge
-                variant="secondary"
-                className="flex items-center gap-1.5 px-3 py-1 font-mono text-xs"
-              >
-                <GraduationCap className="h-7 w-7" />
-                {objectiveContData.targets.length == 1 ? (
-                  <span>1 Target Guide</span>
-                ) : (
-                  <span>{objectiveContData.targets.length} Target Guides</span>
-                )}
-              </Badge>
-              {totalDuration > 0 && (
-                <Badge
-                  variant="secondary"
-                  className="flex items-center gap-1.5 px-3 py-1 font-mono text-xs"
-                >
-                  <Clock className="h-7 w-7" />
-                  {totalDuration} mins
-                </Badge>
-              )}
-              {objectiveContData.subjects.length > 0 && (
-                <>
-                  <span className="mx-1 h-1 w-1 rounded-full bg-muted-foreground/30" />
-                  {objectiveContData.subjects.map((slug) => (
-                    <Badge
-                      key={slug}
-                      variant="outline"
-                      className="mono-micro rounded-full border border-badge-border bg-badge tracking-[0.08em] text-badge-foreground"
-                    >
-                      {getSubjectName(slug)}
-                    </Badge>
-                  ))}
-                </>
-              )}
-            </div>
-          </CardHeader>
-        </Card>
+      <div className="mt-8 flex w-full flex-col gap-12">
+        <PreviewObjectiveCard objective={previewData} />
 
         <div className="space-y-6">
           <h3 className="px-1 text-lg font-semibold tracking-tight">
-            Curriculum Paths
+            Sub-Objectives
           </h3>
           {objectiveContData.targets.length === 0 ? (
             <p className="px-1 text-sm text-muted-foreground">
-              No target sequences configured.
+              No subobjectives configured.
             </p>
           ) : (
             <ol className="m-0 flex w-full list-none flex-col gap-10 p-0">
@@ -152,7 +266,7 @@ export const PreviewObjective = ({
                     key={idx}
                     className="flex flex-col gap-2 md:flex-row md:items-center md:gap-4"
                   >
-                    <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full border border-badge-border bg-badge font-mono text-xs font-semibold text-badge-foreground">
+                    <div className="flex h-12 w-12 shrink-0 items-center justify-center rounded-full border border-badge-border bg-badge font-mono text-base font-semibold text-badge-foreground sm:m-8 md:m-16 lg:m-28">
                       {idx + 1}
                     </div>
 
@@ -164,10 +278,28 @@ export const PreviewObjective = ({
                           </CardTitle>
                           {getTargetDuration(targetSlug) > 0 && (
                             <span className="shrink-0 font-mono text-[10px] text-muted-foreground uppercase">
-                              {getTargetDuration(targetSlug)} mins
+                              {getTargetDuration(targetSlug)} min
                             </span>
                           )}
                         </div>
+                        {getGuideSummary(targetSlug) && (
+                          <p className="mt-2 text-sm text-muted-foreground">
+                            {getGuideSummary(targetSlug)}
+                          </p>
+                        )}
+                        {getGuideTags(targetSlug).length > 0 && (
+                          <div className="mt-3 flex flex-wrap gap-2">
+                            {getGuideTags(targetSlug).map((tagSlug) => (
+                              <Badge
+                                key={tagSlug}
+                                variant="outline"
+                                className="mono-micro rounded-full border border-badge-border bg-badge tracking-[0.08em] text-badge-foreground"
+                              >
+                                {getSubjectName(tagSlug)}
+                              </Badge>
+                            ))}
+                          </div>
+                        )}
                       </CardHeader>
                       <CardContent className="border-t p-4">
                         {sub?.curatedSequence &&
@@ -187,7 +319,7 @@ export const PreviewObjective = ({
                                   </span>
                                   {getGuideDuration(stepSlug) > 0 && (
                                     <span className="shrink-0 font-mono text-[10px] text-muted-foreground uppercase">
-                                      {getGuideDuration(stepSlug)} mins
+                                      {getGuideDuration(stepSlug)} min
                                     </span>
                                   )}
                                 </div>
diff --git a/app/src/routes/contribute.tsx b/app/src/routes/contribute.tsx
index 8d869441..dae48e1b 100644
--- a/app/src/routes/contribute.tsx
+++ b/app/src/routes/contribute.tsx
@@ -1,6 +1,6 @@
 import { createFileRoute } from "@tanstack/react-router";
 
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import type { ContributionType } from "@/types/contributions";
 import ContributionFlow from "@/components/contribute/ContributionFlow";
 
@@ -11,6 +11,16 @@ export const Route = createFileRoute("/contribute")({
 function RouteComponent() {
   const [type, setType] = useState<ContributionType | null>(null);
 
+  useEffect(() => {
+    const savedType = sessionStorage.getItem("cont_type");
+    if (savedType) setType(savedType as ContributionType);
+  }, []);
+
+  useEffect(() => {
+    if (type) sessionStorage.setItem("cont_type", type);
+    else sessionStorage.removeItem("cont_type");
+  }, [type]);
+
   return (
     <div className="mx-auto flex min-h-[max(calc(100vh-65px),750px)] w-full max-w-[1280px] flex-col border-x bg-background">
       <section className="flex min-h-0 flex-1 flex-col border-b px-8 py-8 lg:px-16">