From a85d93bfa82a01179754c611d671a0d916806dd6 Mon Sep 17 00:00:00 2001
From: Marco de Jongh <mdejongh@atlassian.com>
Date: Sat, 24 Jan 2026 10:02:47 +1100
Subject: [PATCH 01/21] feat: Enable Moonboard climb saving to PostgreSQL
 database

- Add frames encoding utility (`encodeMoonBoardHoldsToFrames`) to convert
  holds to the `p{holdId}r{roleCode}` format used by the database
- Update saveClimb API to accept Moonboard requests with holds format
  and convert to frames before saving
- Update MoonBoardCreateClimbForm to require authentication and save
  climbs via the API instead of IndexedDB
- Update MoonBoardBulkImport similarly for batch saves
- Add direct database query for Moonboard climbs in list page since
  GraphQL backend doesn't support Moonboard yet
- Skip GraphQL search and playlist operations for Moonboard to prevent
  errors
- Add getMoonBoardDetails helper throughout codebase to handle Moonboard
  board details separately from Aurora boards
- Enable MOONBOARD_ENABLED feature flag by default
- Remove IndexedDB saving functions (no longer needed)
- Restructure create form UI with header containing save button

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .../[set_ids]/[angle]/create/page.tsx         |   2 +-
 .../[set_ids]/[angle]/import/page.tsx         |   1 +
 .../[set_ids]/[angle]/list/layout.tsx         |  18 +-
 .../[size_id]/[set_ids]/[angle]/list/page.tsx | 118 +++++++-
 .../v1/[board_name]/proxy/saveClimb/route.ts  |  52 +++-
 .../create-climb/create-climb-form.module.css |  52 +++-
 .../moonboard-create-climb-form.tsx           | 256 +++++++++---------
 .../components/graphql-queue/QueueContext.tsx |   6 +-
 .../moonboard-bulk-import.tsx                 |  97 +++++--
 .../hooks/use-queue-data-fetching.tsx         |   7 +
 .../consolidated-board-config.tsx             |  25 +-
 packages/web/app/lib/moonboard-climbs-db.ts   | 108 --------
 packages/web/app/lib/moonboard-config.ts      |  41 ++-
 13 files changed, 481 insertions(+), 302 deletions(-)

diff --git a/packages/web/app/[board_name]/[layout_id]/[size_id]/[set_ids]/[angle]/create/page.tsx b/packages/web/app/[board_name]/[layout_id]/[size_id]/[set_ids]/[angle]/create/page.tsx
index 2e93c057..a282fc77 100644
--- a/packages/web/app/[board_name]/[layout_id]/[size_id]/[set_ids]/[angle]/create/page.tsx
+++ b/packages/web/app/[board_name]/[layout_id]/[size_id]/[set_ids]/[angle]/create/page.tsx
@@ -64,7 +64,7 @@ export default async function CreateClimbPage(props: CreateClimbPageProps) {
     return (
       <MoonBoardCreateClimbForm
         layoutFolder={layoutInfo.folder}
-        layoutName={layoutInfo.name}
+        layoutId={parsedParams.layout_id}
         holdSetImages={holdSetImages}
         angle={parsedParams.angle}
       />
diff --git a/packages/web/app/[board_name]/[layout_id]/[size_id]/[set_ids]/[angle]/import/page.tsx b/packages/web/app/[board_name]/[layout_id]/[size_id]/[set_ids]/[angle]/import/page.tsx
index ce909b71..1adb1e6e 100644
--- a/packages/web/app/[board_name]/[layout_id]/[size_id]/[set_ids]/[angle]/import/page.tsx
+++ b/packages/web/app/[board_name]/[layout_id]/[size_id]/[set_ids]/[angle]/import/page.tsx
@@ -67,6 +67,7 @@ export default async function ImportPage(props: ImportPageProps) {
     <MoonBoardBulkImport
       layoutFolder={layoutInfo.folder}
       layoutName={layoutInfo.name}
+      layoutId={parsedParams.layout_id}
       holdSetImages={holdSetImages}
       angle={parsedParams.angle}
     />
diff --git a/packages/web/app/[board_name]/[layout_id]/[size_id]/[set_ids]/[angle]/list/layout.tsx b/packages/web/app/[board_name]/[layout_id]/[size_id]/[set_ids]/[angle]/list/layout.tsx
index 1a9ed9f4..5fb572fa 100644
--- a/packages/web/app/[board_name]/[layout_id]/[size_id]/[set_ids]/[angle]/list/layout.tsx
+++ b/packages/web/app/[board_name]/[layout_id]/[size_id]/[set_ids]/[angle]/list/layout.tsx
@@ -2,13 +2,25 @@ import React from 'react';
 
 import { PropsWithChildren } from 'react';
 
-import { BoardRouteParameters, ParsedBoardRouteParameters } from '@/app/lib/types';
+import { BoardRouteParameters, ParsedBoardRouteParameters, BoardDetails } from '@/app/lib/types';
 import { parseBoardRouteParams, constructClimbListWithSlugs } from '@/app/lib/url-utils';
 import { parseBoardRouteParamsWithSlugs } from '@/app/lib/url-utils.server';
 import { getBoardDetails } from '@/app/lib/__generated__/product-sizes-data';
+import { getMoonBoardDetails } from '@/app/lib/moonboard-config';
 import { permanentRedirect } from 'next/navigation';
 import ListLayoutClient from './layout-client';
 
+// Helper to get board details for any board type
+function getBoardDetailsForBoard(params: ParsedBoardRouteParameters): BoardDetails {
+  if (params.board_name === 'moonboard') {
+    return getMoonBoardDetails({
+      layout_id: params.layout_id,
+      set_ids: params.set_ids,
+    });
+  }
+  return getBoardDetails(params);
+}
+
 interface LayoutProps {
   params: Promise<BoardRouteParameters>;
 }
@@ -30,7 +42,7 @@ export default async function ListLayout(props: PropsWithChildren<LayoutProps>)
     parsedParams = parseBoardRouteParams(params);
 
     // Redirect old URLs to new slug format
-    const boardDetails = await getBoardDetails(parsedParams);
+    const boardDetails = getBoardDetailsForBoard(parsedParams);
 
     if (boardDetails.layout_name && boardDetails.size_name && boardDetails.set_names) {
       const newUrl = constructClimbListWithSlugs(
@@ -50,7 +62,7 @@ export default async function ListLayout(props: PropsWithChildren<LayoutProps>)
   }
 
   // Fetch the climbs and board details server-side
-  const boardDetails = await getBoardDetails(parsedParams);
+  const boardDetails = getBoardDetailsForBoard(parsedParams);
 
   return <ListLayoutClient boardDetails={boardDetails}>{children}</ListLayoutClient>;
 }
diff --git a/packages/web/app/[board_name]/[layout_id]/[size_id]/[set_ids]/[angle]/list/page.tsx b/packages/web/app/[board_name]/[layout_id]/[size_id]/[set_ids]/[angle]/list/page.tsx
index ace45492..4bbd1821 100644
--- a/packages/web/app/[board_name]/[layout_id]/[size_id]/[set_ids]/[angle]/list/page.tsx
+++ b/packages/web/app/[board_name]/[layout_id]/[size_id]/[set_ids]/[angle]/list/page.tsx
@@ -1,7 +1,8 @@
 import React from 'react';
 
 import { notFound, permanentRedirect } from 'next/navigation';
-import { BoardRouteParametersWithUuid, SearchRequestPagination, BoardDetails } from '@/app/lib/types';
+import { BoardRouteParametersWithUuid, SearchRequestPagination, BoardDetails, BoardName, Climb } from '@/app/lib/types';
+import { SetIdList } from '@/app/lib/board-data';
 import {
   parseBoardRouteParams,
   parsedRouteSearchParamsToSearchParams,
@@ -12,7 +13,93 @@ import ClimbsList from '@/app/components/board-page/climbs-list';
 import { cachedSearchClimbs } from '@/app/lib/graphql/server-cached-client';
 import { SEARCH_CLIMBS, type ClimbSearchResponse } from '@/app/lib/graphql/operations/climb-search';
 import { getBoardDetails } from '@/app/lib/__generated__/product-sizes-data';
+import { getMoonBoardDetails, MOONBOARD_HOLD_STATE_CODES } from '@/app/lib/moonboard-config';
 import { MAX_PAGE_SIZE } from '@/app/components/board-page/constants';
+import { dbz } from '@/app/lib/db/db';
+import { UNIFIED_TABLES } from '@/app/lib/db/queries/util/table-select';
+import { eq, and, desc } from 'drizzle-orm';
+import type { LitUpHoldsMap, HoldState } from '@/app/components/board-renderer/types';
+
+// Helper to get board details for any board type
+function getBoardDetailsForBoard(params: { board_name: BoardName; layout_id: number; size_id: number; set_ids: SetIdList }): BoardDetails {
+  if (params.board_name === 'moonboard') {
+    return getMoonBoardDetails({
+      layout_id: params.layout_id,
+      set_ids: params.set_ids,
+    });
+  }
+  return getBoardDetails(params);
+}
+
+// Parse Moonboard frames string to lit up holds map
+function parseMoonboardFrames(frames: string): LitUpHoldsMap {
+  const map: LitUpHoldsMap = {};
+  // Format: p{holdId}r{roleCode} e.g., "p1r42p45r43p198r44"
+  const regex = /p(\d+)r(\d+)/g;
+  let match;
+  while ((match = regex.exec(frames)) !== null) {
+    const holdId = parseInt(match[1], 10);
+    const roleCode = parseInt(match[2], 10);
+    let state: HoldState = 'HAND';
+    let color = '#0000FF';
+    let displayColor = '#4444FF';
+
+    if (roleCode === MOONBOARD_HOLD_STATE_CODES.start) {
+      state = 'STARTING';
+      color = '#FF0000';
+      displayColor = '#FF3333';
+    } else if (roleCode === MOONBOARD_HOLD_STATE_CODES.finish) {
+      state = 'FINISH';
+      color = '#00FF00';
+      displayColor = '#44FF44';
+    }
+
+    map[holdId] = { state, color, displayColor };
+  }
+  return map;
+}
+
+// Query Moonboard climbs directly from the database
+async function getMoonboardClimbs(layoutId: number, angle: number, limit: number): Promise<Climb[]> {
+  const { climbs } = UNIFIED_TABLES;
+
+  const results = await dbz
+    .select({
+      uuid: climbs.uuid,
+      name: climbs.name,
+      description: climbs.description,
+      frames: climbs.frames,
+      angle: climbs.angle,
+      setterUsername: climbs.setterUsername,
+      createdAt: climbs.createdAt,
+    })
+    .from(climbs)
+    .where(
+      and(
+        eq(climbs.boardType, 'moonboard'),
+        eq(climbs.layoutId, layoutId),
+        eq(climbs.angle, angle)
+      )
+    )
+    .orderBy(desc(climbs.createdAt))
+    .limit(limit);
+
+  return results.map((row) => ({
+    uuid: row.uuid,
+    setter_username: row.setterUsername || 'Unknown',
+    name: row.name || 'Unnamed Climb',
+    description: row.description || '',
+    frames: row.frames || '',
+    angle: row.angle || angle,
+    ascensionist_count: 0,
+    difficulty: 'V?',
+    quality_average: '0',
+    stars: 0,
+    difficulty_error: '0',
+    litUpHoldsMap: parseMoonboardFrames(row.frames || ''),
+    benchmark_difficulty: null,
+  }));
+}
 
 export default async function DynamicResultsPage(props: {
   params: Promise<BoardRouteParametersWithUuid>;
@@ -32,7 +119,7 @@ export default async function DynamicResultsPage(props: {
     parsedParams = parseBoardRouteParams(params);
 
     // Redirect old URLs to new slug format
-    const boardDetails = await getBoardDetails(parsedParams);
+    const boardDetails = getBoardDetailsForBoard(parsedParams);
 
     if (boardDetails.layout_name && boardDetails.size_name && boardDetails.set_names) {
       const newUrl = constructClimbListWithSlugs(
@@ -113,10 +200,29 @@ export default async function DynamicResultsPage(props: {
   let boardDetails: BoardDetails;
 
   try {
-    [searchResponse, boardDetails] = await Promise.all([
-      cachedSearchClimbs<ClimbSearchResponse>(SEARCH_CLIMBS, { input: searchInput }, isDefaultSearch),
-      getBoardDetails(parsedParams),
-    ]);
+    boardDetails = getBoardDetailsForBoard(parsedParams);
+
+    // Moonboard queries the database directly (no GraphQL support yet)
+    if (parsedParams.board_name === 'moonboard') {
+      const moonboardClimbs = await getMoonboardClimbs(
+        parsedParams.layout_id,
+        parsedParams.angle,
+        searchParamsObject.pageSize || 50
+      );
+      searchResponse = {
+        searchClimbs: {
+          climbs: moonboardClimbs,
+          totalCount: moonboardClimbs.length,
+          hasMore: false,
+        },
+      };
+    } else {
+      searchResponse = await cachedSearchClimbs<ClimbSearchResponse>(
+        SEARCH_CLIMBS,
+        { input: searchInput },
+        isDefaultSearch,
+      );
+    }
   } catch (error) {
     console.error('Error fetching results or climb:', error);
     notFound();
diff --git a/packages/web/app/api/v1/[board_name]/proxy/saveClimb/route.ts b/packages/web/app/api/v1/[board_name]/proxy/saveClimb/route.ts
index 896616f7..034ec83a 100644
--- a/packages/web/app/api/v1/[board_name]/proxy/saveClimb/route.ts
+++ b/packages/web/app/api/v1/[board_name]/proxy/saveClimb/route.ts
@@ -1,6 +1,8 @@
 // app/api/v1/[board_name]/proxy/saveClimb/route.ts
 import { saveClimb } from '@/app/lib/api-wrappers/aurora/saveClimb';
 import { AuroraBoardName } from '@/app/lib/api-wrappers/aurora/types';
+import { BoardName } from '@/app/lib/types';
+import { encodeMoonBoardHoldsToFrames } from '@/app/lib/moonboard-config';
 import { NextResponse } from 'next/server';
 import { z } from 'zod';
 
@@ -20,22 +22,56 @@ const saveClimbSchema = z.object({
     .strict(),
 });
 
+// Moonboard-specific schema (uses holds instead of frames)
+const saveMoonBoardClimbSchema = z.object({
+  options: z
+    .object({
+      layout_id: z.number(),
+      user_id: z.string().min(1), // NextAuth user ID (UUID)
+      name: z.string().min(1),
+      description: z.string(),
+      holds: z.object({
+        start: z.array(z.string()),
+        hand: z.array(z.string()),
+        finish: z.array(z.string()),
+      }),
+      angle: z.number(),
+    })
+    .strict(),
+});
+
 export async function POST(request: Request, props: { params: Promise<{ board_name: string }> }) {
   const params = await props.params;
-
-  // MoonBoard doesn't use Aurora APIs
-  if (params.board_name === 'moonboard') {
-    return NextResponse.json({ error: 'MoonBoard does not support this endpoint' }, { status: 400 });
-  }
-
-  const board_name = params.board_name as AuroraBoardName;
+  const board_name = params.board_name as BoardName;
 
   try {
     const body = await request.json();
+
+    // Handle Moonboard separately (uses holds instead of frames)
+    if (board_name === 'moonboard') {
+      const validatedData = saveMoonBoardClimbSchema.parse(body);
+      const frames = encodeMoonBoardHoldsToFrames(validatedData.options.holds);
+
+      const response = await saveClimb('moonboard', {
+        layout_id: validatedData.options.layout_id,
+        user_id: validatedData.options.user_id,
+        name: validatedData.options.name,
+        description: validatedData.options.description,
+        angle: validatedData.options.angle,
+        frames,
+        is_draft: false,
+        frames_count: 1,
+        frames_pace: 0,
+      });
+      return NextResponse.json(response);
+    }
+
+    // Aurora boards (kilter, tension)
     const validatedData = saveClimbSchema.parse(body);
+    const aurora_board_name = board_name as AuroraBoardName;
 
     // saveClimb saves to local database only (no Aurora sync)
-    const response = await saveClimb(board_name, validatedData.options);
+    const response = await saveClimb(aurora_board_name, validatedData.options);
     return NextResponse.json(response);
   } catch (error) {
     console.error('SaveClimb error details:', {
diff --git a/packages/web/app/components/create-climb/create-climb-form.module.css b/packages/web/app/components/create-climb/create-climb-form.module.css
index 2a52b0a8..2ab6440f 100644
--- a/packages/web/app/components/create-climb/create-climb-form.module.css
+++ b/packages/web/app/components/create-climb/create-climb-form.module.css
@@ -10,20 +10,60 @@
   background-color: var(--semantic-background, #F9FAFB);
 }
 
+/* Header for create page with back and save buttons */
+.createHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 8px 12px;
+  background-color: var(--semantic-surface, #FFFFFF);
+  border-bottom: 1px solid var(--border-subtle, #E5E7EB);
+  flex-shrink: 0;
+}
+
+.headerNameInput {
+  flex: 1;
+  font-size: 16px;
+  font-weight: 500;
+  text-align: center;
+  min-width: 0;
+}
+
+.headerNameInput input {
+  text-align: center;
+}
+
+/* Alert banner styling */
+.alertBanner {
+  margin: 8px 12px;
+  flex-shrink: 0;
+}
+
+/* Validation bar at bottom */
+.validationBar {
+  padding: 8px 12px;
+  text-align: center;
+  background-color: var(--semantic-surface, #FFFFFF);
+  border-top: 1px solid var(--border-subtle, #E5E7EB);
+  flex-shrink: 0;
+}
+
 /* Auth alert styling */
 .authAlert {
   margin: 8px 12px;
   flex-shrink: 0;
 }
 
-/* Content wrapper - matches play view */
+/* Content wrapper - scrollable for mobile */
 .contentWrapper {
   flex: 1;
   display: flex;
   flex-direction: column;
-  overflow: hidden;
+  overflow: auto;
   position: relative;
   min-height: 0;
+  -webkit-overflow-scrolling: touch;
 }
 
 /* Title container - same position as play view */
@@ -115,13 +155,11 @@
 .boardContainer {
   flex: 1;
   display: flex;
-  align-items: flex-start;
+  align-items: center;
   justify-content: center;
-  padding: 0;
-  min-height: 0;
-  max-height: 100%;
+  padding: 12px;
+  min-height: 300px;
   width: 100%;
-  overflow: hidden;
   position: relative;
 }
 
diff --git a/packages/web/app/components/create-climb/moonboard-create-climb-form.tsx b/packages/web/app/components/create-climb/moonboard-create-climb-form.tsx
index 347c5490..67629003 100644
--- a/packages/web/app/components/create-climb/moonboard-create-climb-form.tsx
+++ b/packages/web/app/components/create-climb/moonboard-create-climb-form.tsx
@@ -1,15 +1,16 @@
 'use client';
 
 import React, { useState } from 'react';
-import { Form, Input, Button, Typography, Tag, Alert, Upload, message } from 'antd';
-import { ExperimentOutlined, UploadOutlined, LoadingOutlined, ImportOutlined } from '@ant-design/icons';
+import { Form, Input, Button, Typography, Tag, Alert, Upload, message, Space } from 'antd';
+import { UploadOutlined, LoadingOutlined, ImportOutlined, LoginOutlined, ArrowLeftOutlined, SaveOutlined } from '@ant-design/icons';
 import { useRouter, usePathname } from 'next/navigation';
 import Link from 'next/link';
+import { useSession } from 'next-auth/react';
 import MoonBoardRenderer from '../moonboard-renderer/moonboard-renderer';
 import { useMoonBoardCreateClimb } from './use-moonboard-create-climb';
 import { holdIdToCoordinate } from '@/app/lib/moonboard-config';
 import { parseScreenshot } from '@boardsesh/moonboard-ocr/browser';
-import { saveMoonBoardClimb, convertOcrHoldsToMap } from '@/app/lib/moonboard-climbs-db';
+import { convertOcrHoldsToMap } from '@/app/lib/moonboard-climbs-db';
 import styles from './create-climb-form.module.css';
 
 const { TextArea } = Input;
@@ -22,19 +23,20 @@ interface MoonBoardCreateClimbFormValues {
 
 interface MoonBoardCreateClimbFormProps {
   layoutFolder: string;
-  layoutName: string;
+  layoutId: number;
   holdSetImages: string[];
   angle: number;
 }
 
 export default function MoonBoardCreateClimbForm({
   layoutFolder,
-  layoutName,
+  layoutId,
   holdSetImages,
   angle,
 }: MoonBoardCreateClimbFormProps) {
   const router = useRouter();
   const pathname = usePathname();
+  const { data: session } = useSession();
 
   // Construct the bulk import URL (replace /create with /import)
   const bulkImportUrl = pathname.replace(/\/create$/, '/import');
@@ -53,7 +55,6 @@ export default function MoonBoardCreateClimbForm({
 
   const [form] = Form.useForm<MoonBoardCreateClimbFormValues>();
   const [isSaving, setIsSaving] = useState(false);
-  const [saveSuccess, setSaveSuccess] = useState(false);
 
   // OCR import state
   const [isOcrProcessing, setIsOcrProcessing] = useState(false);
@@ -110,6 +111,11 @@ export default function MoonBoardCreateClimbForm({
       return;
     }
 
+    if (!session?.user?.id) {
+      message.error('Please log in to save climbs');
+      return;
+    }
+
     setIsSaving(true);
 
     try {
@@ -126,31 +132,34 @@ export default function MoonBoardCreateClimbForm({
           .map(([id]) => holdIdToCoordinate(Number(id))),
       };
 
-      const climbData = {
-        name: values.name,
-        description: values.description || '',
-        holds,
-        angle,
-        layoutFolder,
-        createdAt: new Date().toISOString(),
-      };
-
-      await saveMoonBoardClimb(climbData);
+      const response = await fetch('/api/v1/moonboard/proxy/saveClimb', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          options: {
+            layout_id: layoutId,
+            user_id: session.user.id,
+            name: values.name,
+            description: values.description || '',
+            holds,
+            angle,
+          },
+        }),
+      });
 
-      message.success('Climb saved successfully!');
-      setSaveSuccess(true);
+      if (!response.ok) {
+        const errorData = await response.json().catch(() => ({}));
+        throw new Error(errorData.error || 'Failed to save climb');
+      }
 
-      // Reset the form and holds
-      form.resetFields();
-      resetHolds();
+      message.success('Climb saved to database!');
 
-      // Show success briefly then allow another climb to be created
-      setTimeout(() => {
-        setSaveSuccess(false);
-      }, 3000);
+      // Navigate back to the list
+      const listUrl = pathname.replace(/\/create$/, '/list');
+      router.push(listUrl);
     } catch (error) {
       console.error('Failed to save climb:', error);
-      message.error('Failed to save climb. Please try again.');
+      message.error(error instanceof Error ? error.message : 'Failed to save climb. Please try again.');
     } finally {
       setIsSaving(false);
     }
@@ -162,144 +171,131 @@ export default function MoonBoardCreateClimbForm({
 
   return (
     <div className={styles.pageContainer}>
-      <Alert
-        title={`MoonBoard Beta - ${layoutName} @ ${angle}°`}
-        description="MoonBoard support is in beta. Climbs are saved locally for now. Database sync coming soon!"
-        type="info"
-        showIcon
-        icon={<ExperimentOutlined />}
-        className={styles.betaBanner}
-        banner
-      />
-
-      {saveSuccess && (
-        <Alert
-          title="Climb saved successfully!"
-          description="Your climb has been saved locally. You can create another climb."
-          type="success"
-          showIcon
-          closable
-          className={styles.betaBanner}
-        />
-      )}
+      {/* Header with Back and Save buttons */}
+      <div className={styles.createHeader}>
+        <Button icon={<ArrowLeftOutlined />} onClick={handleCancel}>
+          Back
+        </Button>
+        <Form form={form} component={false}>
+          <Form.Item name="name" noStyle>
+            <Input
+              placeholder="Climb name"
+              maxLength={100}
+              className={styles.headerNameInput}
+              variant="borderless"
+            />
+          </Form.Item>
+        </Form>
+        {!session?.user ? (
+          <Link href="/api/auth/signin">
+            <Button type="primary" icon={<LoginOutlined />}>
+              Log in to Save
+            </Button>
+          </Link>
+        ) : (
+          <Button
+            type="primary"
+            icon={<SaveOutlined />}
+            loading={isSaving}
+            disabled={!isValid || isSaving}
+            onClick={() => form.submit()}
+          >
+            {isSaving ? 'Saving...' : 'Save'}
+          </Button>
+        )}
+      </div>
 
       {ocrError && (
         <Alert
-          title="Import Failed"
+          message="Import Failed"
           description={ocrError}
           type="error"
           showIcon
           closable
           onClose={() => setOcrError(null)}
-          className={styles.betaBanner}
+          className={styles.alertBanner}
         />
       )}
 
       {ocrWarnings.length > 0 && (
         <Alert
-          title="Import Warnings"
+          message="Import Warnings"
           description={ocrWarnings.map((w, i) => <div key={i}>{w}</div>)}
           type="warning"
           showIcon
           closable
           onClose={() => setOcrWarnings([])}
-          className={styles.betaBanner}
+          className={styles.alertBanner}
         />
       )}
 
       <div className={styles.contentWrapper}>
         {/* Board Section */}
-        <div className={styles.boardSection}>
+        <div className={styles.boardContainer}>
           <MoonBoardRenderer
             layoutFolder={layoutFolder}
             holdSetImages={holdSetImages}
             litUpHoldsMap={litUpHoldsMap}
             onHoldClick={handleHoldClick}
           />
-
-          {/* Import from Screenshot */}
-          <div className={styles.holdCounts}>
-            <Upload
-              accept="image/png,image/jpeg,image/webp"
-              showUploadList={false}
-              beforeUpload={(file) => {
-                handleOcrImport(file);
-                return false; // Prevent default upload behavior
-              }}
-              disabled={isOcrProcessing}
-            >
-              <Button icon={isOcrProcessing ? <LoadingOutlined /> : <UploadOutlined />} disabled={isOcrProcessing}>
-                {isOcrProcessing ? 'Processing...' : 'Import Screenshot'}
-              </Button>
-            </Upload>
-            <Link href={bulkImportUrl}>
-              <Button icon={<ImportOutlined />}>Bulk Import</Button>
-            </Link>
-          </div>
-
-          {/* Hold counts */}
-          <div className={styles.holdCounts}>
-            <Tag color={startingCount > 0 ? 'red' : 'default'}>Start: {startingCount}/2</Tag>
-            <Tag color={handCount > 0 ? 'blue' : 'default'}>Hand: {handCount}</Tag>
-            <Tag color={finishCount > 0 ? 'green' : 'default'}>Finish: {finishCount}/2</Tag>
-            <Tag color={totalHolds > 0 ? 'purple' : 'default'}>Total: {totalHolds}</Tag>
-            {totalHolds > 0 && (
-              <Button size="small" onClick={resetHolds}>
-                Clear All
-              </Button>
-            )}
-          </div>
-
-          {!isValid && totalHolds > 0 && (
-            <Text type="secondary" className={styles.validationHint}>
-              A valid climb needs at least 1 start hold and 1 finish hold
-            </Text>
-          )}
         </div>
+      </div>
 
-        {/* Form Section */}
-        <div className={styles.formSection}>
-          <Form
-            form={form}
-            layout="vertical"
-            onFinish={handleSubmit}
-            initialValues={{
-              name: '',
-              description: '',
+      {/* Bottom bar with hold counts and actions */}
+      <div className={styles.holdCountsBar}>
+        <Space wrap size="small">
+          <Tag color={startingCount > 0 ? 'red' : 'default'}>Start: {startingCount}/2</Tag>
+          <Tag color={handCount > 0 ? 'blue' : 'default'}>Hand: {handCount}</Tag>
+          <Tag color={finishCount > 0 ? 'green' : 'default'}>Finish: {finishCount}/2</Tag>
+          <Tag color={totalHolds > 0 ? 'purple' : 'default'}>Total: {totalHolds}</Tag>
+        </Space>
+        <Space wrap size="small">
+          {totalHolds > 0 && (
+            <Button size="small" onClick={resetHolds}>
+              Clear
+            </Button>
+          )}
+          <Upload
+            accept="image/png,image/jpeg,image/webp"
+            showUploadList={false}
+            beforeUpload={(file) => {
+              handleOcrImport(file);
+              return false;
             }}
-            className={styles.formContent}
+            disabled={isOcrProcessing}
           >
-            <Form.Item
-              name="name"
-              label="Climb Name"
-              rules={[{ required: true, message: 'Please enter a name for your climb' }]}
-            >
-              <Input placeholder="Enter climb name" maxLength={100} />
-            </Form.Item>
-
-            <Form.Item name="description" label="Description">
-              <TextArea placeholder="Optional description or beta" rows={3} maxLength={500} />
-            </Form.Item>
-
-            <div className={styles.buttonGroup}>
-              <Button
-                type="primary"
-                htmlType="submit"
-                loading={isSaving}
-                disabled={!isValid || isSaving}
-                block
-                size="large"
-              >
-                {isSaving ? 'Saving...' : 'Save Climb (Local)'}
-              </Button>
-
-              <Button block size="large" onClick={handleCancel} disabled={isSaving}>
-                Back
-              </Button>
-            </div>
-          </Form>
-        </div>
+            <Button size="small" icon={isOcrProcessing ? <LoadingOutlined /> : <UploadOutlined />} disabled={isOcrProcessing}>
+              {isOcrProcessing ? 'Processing...' : 'Import'}
+            </Button>
+          </Upload>
+          <Link href={bulkImportUrl}>
+            <Button size="small" icon={<ImportOutlined />}>Bulk</Button>
+          </Link>
+        </Space>
       </div>
+
+      {!isValid && totalHolds > 0 && (
+        <div className={styles.validationBar}>
+          <Text type="secondary">
+            A valid climb needs at least 1 start hold and 1 finish hold
+          </Text>
+        </div>
+      )}
+
+      {/* Hidden form for submission */}
+      <Form
+        form={form}
+        onFinish={handleSubmit}
+        initialValues={{ name: '', description: '' }}
+        style={{ display: 'none' }}
+      >
+        <Form.Item name="name" rules={[{ required: true }]}>
+          <Input />
+        </Form.Item>
+        <Form.Item name="description">
+          <TextArea />
+        </Form.Item>
+      </Form>
     </div>
   );
 }
diff --git a/packages/web/app/components/graphql-queue/QueueContext.tsx b/packages/web/app/components/graphql-queue/QueueContext.tsx
index eb803fab..ab676985 100644
--- a/packages/web/app/components/graphql-queue/QueueContext.tsx
+++ b/packages/web/app/components/graphql-queue/QueueContext.tsx
@@ -507,7 +507,8 @@ export const GraphQLQueueProvider = ({ parsedParams, boardDetails, children }: G
 
   // Fetch user's playlists when authenticated and board details change
   useEffect(() => {
-    if (!wsAuthToken || !boardDetails) return;
+    // Skip playlist fetch for Moonboard (GraphQL backend doesn't support it yet)
+    if (!wsAuthToken || !boardDetails || boardDetails.board_name === 'moonboard') return;
 
     const fetchPlaylists = async () => {
       try {
@@ -538,7 +539,8 @@ export const GraphQLQueueProvider = ({ parsedParams, boardDetails, children }: G
 
   // Fetch playlist memberships for climbs in queue
   useEffect(() => {
-    if (!wsAuthToken || !boardDetails || state.queue.length === 0) return;
+    // Skip for Moonboard (GraphQL backend doesn't support it yet)
+    if (!wsAuthToken || !boardDetails || boardDetails.board_name === 'moonboard' || state.queue.length === 0) return;
 
     const fetchPlaylistMemberships = async () => {
       try {
diff --git a/packages/web/app/components/moonboard-import/moonboard-bulk-import.tsx b/packages/web/app/components/moonboard-import/moonboard-bulk-import.tsx
index 71bc77d0..04877dd1 100644
--- a/packages/web/app/components/moonboard-import/moonboard-bulk-import.tsx
+++ b/packages/web/app/components/moonboard-import/moonboard-bulk-import.tsx
@@ -2,14 +2,16 @@
 
 import React, { useReducer, useCallback, useState } from 'react';
 import { Upload, Button, Alert, Progress, Typography, Row, Col, Space, Result, message } from 'antd';
-import { InboxOutlined, SaveOutlined, ClearOutlined, ArrowLeftOutlined } from '@ant-design/icons';
+import { InboxOutlined, SaveOutlined, ClearOutlined, ArrowLeftOutlined, LoginOutlined } from '@ant-design/icons';
 import { useRouter } from 'next/navigation';
+import Link from 'next/link';
+import { useSession } from 'next-auth/react';
 import { parseMultipleScreenshots, deduplicateClimbs } from '@boardsesh/moonboard-ocr/browser';
 import type { MoonBoardClimb } from '@boardsesh/moonboard-ocr/browser';
 import type { RcFile } from 'antd/es/upload/interface';
 import MoonBoardImportCard from './moonboard-import-card';
 import MoonBoardEditModal from './moonboard-edit-modal';
-import { saveMoonBoardClimbs, convertOcrHoldsToMap } from '@/app/lib/moonboard-climbs-db';
+import { convertOcrHoldsToMap } from '@/app/lib/moonboard-climbs-db';
 import styles from './moonboard-bulk-import.module.css';
 
 const { Dragger } = Upload;
@@ -18,6 +20,7 @@ const { Title, Text } = Typography;
 interface MoonBoardBulkImportProps {
   layoutFolder: string;
   layoutName: string;
+  layoutId: number;
   holdSetImages: string[];
   angle: number;
 }
@@ -102,10 +105,12 @@ function importReducer(state: ImportState, action: ImportAction): ImportState {
 export default function MoonBoardBulkImport({
   layoutFolder,
   layoutName,
+  layoutId,
   holdSetImages,
   angle,
 }: MoonBoardBulkImportProps) {
   const router = useRouter();
+  const { data: session } = useSession();
   const [state, dispatch] = useReducer(importReducer, initialState);
   const [isSaving, setIsSaving] = useState(false);
 
@@ -145,30 +150,64 @@ export default function MoonBoardBulkImport({
   const handleSaveAll = useCallback(async () => {
     if (state.climbs.length === 0) return;
 
+    if (!session?.user?.id) {
+      message.error('Please log in to save climbs');
+      return;
+    }
+
     setIsSaving(true);
     try {
-      const newClimbs = state.climbs.map((climb) => ({
-        name: climb.name,
-        description: `Setter: ${climb.setter}\nGrade: ${climb.userGrade}${climb.isBenchmark ? '\n(Benchmark)' : ''}`,
-        holds: climb.holds,
-        angle: climb.angle,
-        layoutFolder,
-        createdAt: new Date().toISOString(),
-        importedFrom: climb.sourceFile,
-      }));
-
-      await saveMoonBoardClimbs(newClimbs);
-
-      message.success(`Successfully saved ${newClimbs.length} climb(s)`);
-      dispatch({ type: 'RESET' });
-      router.back();
+      let savedCount = 0;
+      const errors: string[] = [];
+
+      // Save each climb individually to the database
+      for (const climb of state.climbs) {
+        try {
+          const response = await fetch('/api/v1/moonboard/proxy/saveClimb', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({
+              options: {
+                layout_id: layoutId,
+                user_id: session.user.id,
+                name: climb.name,
+                description: `Setter: ${climb.setter}\nGrade: ${climb.userGrade}${climb.isBenchmark ? '\n(Benchmark)' : ''}`,
+                holds: climb.holds,
+                angle: climb.angle,
+              },
+            }),
+          });
+
+          if (!response.ok) {
+            const errorData = await response.json().catch(() => ({}));
+            errors.push(`${climb.name}: ${errorData.error || 'Failed to save'}`);
+          } else {
+            savedCount++;
+          }
+        } catch {
+          errors.push(`${climb.name}: Network error`);
+        }
+      }
+
+      if (savedCount > 0) {
+        message.success(`Successfully saved ${savedCount} climb(s) to database`);
+      }
+      if (errors.length > 0) {
+        message.warning(`Failed to save ${errors.length} climb(s)`);
+        console.error('Save errors:', errors);
+      }
+
+      if (savedCount > 0) {
+        dispatch({ type: 'RESET' });
+        router.back();
+      }
     } catch (error) {
       console.error('Failed to save climbs:', error);
       message.error('Failed to save climbs. Please try again.');
     } finally {
       setIsSaving(false);
     }
-  }, [state.climbs, layoutFolder, router]);
+  }, [state.climbs, layoutId, session, router]);
 
   const handleRemoveClimb = useCallback((sourceFile: string) => {
     dispatch({ type: 'REMOVE_CLIMB', sourceFile });
@@ -205,6 +244,26 @@ export default function MoonBoardBulkImport({
         </Title>
       </div>
 
+      {!session?.user && (
+        <Alert
+          title="Login Required"
+          description={
+            <>
+              Please log in to save climbs to the database.{' '}
+              <Link href="/api/auth/signin">
+                <Button type="link" icon={<LoginOutlined />} style={{ padding: 0 }}>
+                  Log in
+                </Button>
+              </Link>
+            </>
+          }
+          type="warning"
+          showIcon
+          className={styles.warningAlert}
+          banner
+        />
+      )}
+
       {/* Upload Section */}
       {state.status === 'idle' && (
         <div className={styles.uploadSection}>
@@ -289,7 +348,7 @@ export default function MoonBoardBulkImport({
                   onClick={handleSaveAll}
                   size="large"
                   loading={isSaving}
-                  disabled={isSaving}
+                  disabled={isSaving || !session?.user}
                 >
                   Save All ({state.climbs.length})
                 </Button>
diff --git a/packages/web/app/components/queue-control/hooks/use-queue-data-fetching.tsx b/packages/web/app/components/queue-control/hooks/use-queue-data-fetching.tsx
index 44271ddd..bb7c9fd8 100644
--- a/packages/web/app/components/queue-control/hooks/use-queue-data-fetching.tsx
+++ b/packages/web/app/components/queue-control/hooks/use-queue-data-fetching.tsx
@@ -54,6 +54,9 @@ export const useQueueDataFetching = ({
     ] as const;
   }, [searchParams, parsedParams]);
 
+  // Moonboard doesn't support GraphQL search yet
+  const isMoonboard = parsedParams.board_name === 'moonboard';
+
   const {
     data,
     fetchNextPage,
@@ -64,6 +67,10 @@ export const useQueueDataFetching = ({
   } = useInfiniteQuery({
     queryKey,
     queryFn: async ({ pageParam }): Promise<SearchClimbsResult> => {
+      // Return empty results for Moonboard (GraphQL doesn't support it yet)
+      if (isMoonboard) {
+        return { climbs: [], totalCount: 0, hasMore: false };
+      }
       // Build GraphQL input from search params
       const input = {
         boardName: parsedParams.board_name,
diff --git a/packages/web/app/components/setup-wizard/consolidated-board-config.tsx b/packages/web/app/components/setup-wizard/consolidated-board-config.tsx
index a4f893d7..fa74c344 100644
--- a/packages/web/app/components/setup-wizard/consolidated-board-config.tsx
+++ b/packages/web/app/components/setup-wizard/consolidated-board-config.tsx
@@ -11,9 +11,10 @@ import { useSession } from 'next-auth/react';
 import { SUPPORTED_BOARDS, ANGLES } from '@/app/lib/board-data';
 import { BoardName, BoardDetails } from '@/app/lib/types';
 import { getDefaultSizeForLayout, getBoardDetails } from '@/app/lib/__generated__/product-sizes-data';
+import { getMoonBoardDetails } from '@/app/lib/moonboard-config';
 import BoardConfigPreview from './board-config-preview';
 import BoardRenderer from '../board-renderer/board-renderer';
-import { constructClimbListWithSlugs, constructCreateClimbWithSlugs } from '@/app/lib/url-utils';
+import { constructClimbListWithSlugs } from '@/app/lib/url-utils';
 import { BoardConfigData } from '@/app/lib/server-board-configs';
 import Logo from '../brand/logo';
 import { themeTokens } from '@/app/theme/theme-config';
@@ -97,6 +98,13 @@ const ConsolidatedBoardConfig = ({ boardConfigs }: ConsolidatedBoardConfigProps)
 
       if (cachedDetails) {
         setPreviewBoardDetails(cachedDetails);
+      } else if (selectedBoard === 'moonboard') {
+        // Moonboard uses its own details function
+        const details = getMoonBoardDetails({
+          layout_id: selectedLayout,
+          set_ids: selectedSets,
+        });
+        setPreviewBoardDetails(details);
       } else {
         const details = getBoardDetails({
           board_name: selectedBoard,
@@ -306,20 +314,7 @@ const ConsolidatedBoardConfig = ({ boardConfigs }: ConsolidatedBoardConfigProps)
       .map((s) => s.name);
 
     if (layout && size && selectedSetNames.length > 0) {
-      // For MoonBoard, go to create climb page instead of list
-      // (database/list view not implemented yet)
-      if (selectedBoard === 'moonboard') {
-        return constructCreateClimbWithSlugs(
-          selectedBoard,
-          layout.name,
-          size.name,
-          size.description,
-          selectedSetNames,
-          selectedAngle,
-        );
-      }
-
-      // For Aurora boards (kilter, tension), go to list view
+      // Go to list view for all boards
       return constructClimbListWithSlugs(
         selectedBoard,
         layout.name,
diff --git a/packages/web/app/lib/moonboard-climbs-db.ts b/packages/web/app/lib/moonboard-climbs-db.ts
index c6b0eb44..28a22aab 100644
--- a/packages/web/app/lib/moonboard-climbs-db.ts
+++ b/packages/web/app/lib/moonboard-climbs-db.ts
@@ -1,114 +1,6 @@
-import { openDB, IDBPDatabase } from 'idb';
 import { coordinateToHoldId, MOONBOARD_HOLD_STATES, type MoonBoardCoordinate } from './moonboard-config';
 import type { MoonBoardLitUpHoldsMap } from '../components/moonboard-renderer/types';
 
-const DB_NAME = 'boardsesh-moonboard';
-const DB_VERSION = 1;
-const STORE_NAME = 'climbs';
-
-export interface MoonBoardStoredClimb {
-  id: string;
-  name: string;
-  description: string;
-  holds: {
-    start: string[];
-    hand: string[];
-    finish: string[];
-  };
-  angle: number;
-  layoutFolder: string;
-  createdAt: string;
-  importedFrom?: string;
-}
-
-let dbPromise: Promise<IDBPDatabase> | null = null;
-
-const initDB = async (): Promise<IDBPDatabase> => {
-  if (!dbPromise) {
-    dbPromise = openDB(DB_NAME, DB_VERSION, {
-      upgrade(db) {
-        if (!db.objectStoreNames.contains(STORE_NAME)) {
-          const store = db.createObjectStore(STORE_NAME, { keyPath: 'id' });
-          store.createIndex('layoutFolder', 'layoutFolder', { unique: false });
-          store.createIndex('createdAt', 'createdAt', { unique: false });
-        }
-      },
-    });
-  }
-  return dbPromise;
-};
-
-/**
- * Get all moonboard climbs from IndexedDB
- */
-export const getMoonBoardClimbs = async (): Promise<MoonBoardStoredClimb[]> => {
-  try {
-    const db = await initDB();
-    return await db.getAll(STORE_NAME);
-  } catch (error) {
-    console.error('Failed to get moonboard climbs:', error);
-    return [];
-  }
-};
-
-/**
- * Get moonboard climbs by layout folder
- */
-export const getMoonBoardClimbsByLayout = async (layoutFolder: string): Promise<MoonBoardStoredClimb[]> => {
-  try {
-    const db = await initDB();
-    return await db.getAllFromIndex(STORE_NAME, 'layoutFolder', layoutFolder);
-  } catch (error) {
-    console.error('Failed to get moonboard climbs by layout:', error);
-    return [];
-  }
-};
-
-/**
- * Save a moonboard climb to IndexedDB
- */
-export const saveMoonBoardClimb = async (climb: Omit<MoonBoardStoredClimb, 'id'>): Promise<MoonBoardStoredClimb> => {
-  const db = await initDB();
-  const climbWithId: MoonBoardStoredClimb = {
-    ...climb,
-    id: crypto.randomUUID(),
-  };
-  await db.put(STORE_NAME, climbWithId);
-  return climbWithId;
-};
-
-/**
- * Save multiple moonboard climbs to IndexedDB
- */
-export const saveMoonBoardClimbs = async (
-  climbs: Array<Omit<MoonBoardStoredClimb, 'id'>>,
-): Promise<MoonBoardStoredClimb[]> => {
-  const db = await initDB();
-  const tx = db.transaction(STORE_NAME, 'readwrite');
-
-  const savedClimbs: MoonBoardStoredClimb[] = climbs.map((climb) => ({
-    ...climb,
-    id: crypto.randomUUID(),
-  }));
-
-  await Promise.all([...savedClimbs.map((climb) => tx.store.put(climb)), tx.done]);
-
-  return savedClimbs;
-};
-
-/**
- * Delete a moonboard climb from IndexedDB
- */
-export const deleteMoonBoardClimb = async (id: string): Promise<void> => {
-  try {
-    const db = await initDB();
-    await db.delete(STORE_NAME, id);
-  } catch (error) {
-    console.error('Failed to delete moonboard climb:', error);
-    throw error;
-  }
-};
-
 /**
  * Convert OCR hold coordinates to the lit up holds map format for the renderer
  * This is a shared utility used by both the create form and bulk import
diff --git a/packages/web/app/lib/moonboard-config.ts b/packages/web/app/lib/moonboard-config.ts
index 6ec62673..d13a006a 100644
--- a/packages/web/app/lib/moonboard-config.ts
+++ b/packages/web/app/lib/moonboard-config.ts
@@ -1,9 +1,8 @@
 // MoonBoard Configuration
 // This file contains all MoonBoard-specific configuration that differs from Aurora boards
 
-// Feature flag - auto-enabled in development, or via MOONBOARD_ENABLED env var
-export const MOONBOARD_ENABLED =
-  process.env.NODE_ENV === 'development' || process.env.MOONBOARD_ENABLED === 'true';
+// Feature flag - enabled by default
+export const MOONBOARD_ENABLED = true;
 
 // MoonBoard layout types (equivalent to Aurora "layouts")
 export const MOONBOARD_LAYOUTS = {
@@ -82,6 +81,13 @@ export const MOONBOARD_HOLD_STATES = {
   finish: { name: 'FINISH' as const, color: '#00FF00', displayColor: '#44FF44' }, // Green
 } as const;
 
+// Hold state codes for frames encoding (compatible with Aurora format)
+export const MOONBOARD_HOLD_STATE_CODES = {
+  start: 42, // Using 42 for STARTING (matches Kilter pattern)
+  hand: 43, // Using 43 for HAND
+  finish: 44, // Using 44 for FINISH
+} as const;
+
 // Grid coordinate types
 export type MoonBoardColumn = (typeof MOONBOARD_GRID.columns)[number];
 export type MoonBoardRow = (typeof MOONBOARD_GRID.rows)[number];
@@ -213,3 +219,32 @@ export function getMoonBoardDetails({
     holdsData: [],
   };
 }
+
+/**
+ * Encode MoonBoard holds to frames format for database storage.
+ * Format: p{holdId}r{roleCode} (e.g., "p1r42p45r43p198r44")
+ */
+export function encodeMoonBoardHoldsToFrames(holds: {
+  start: string[];
+  hand: string[];
+  finish: string[];
+}): string {
+  const parts: string[] = [];
+
+  holds.start.forEach((coord) => {
+    const holdId = coordinateToHoldId(coord as MoonBoardCoordinate);
+    parts.push(`p${holdId}r${MOONBOARD_HOLD_STATE_CODES.start}`);
+  });
+
+  holds.hand.forEach((coord) => {
+    const holdId = coordinateToHoldId(coord as MoonBoardCoordinate);
+    parts.push(`p${holdId}r${MOONBOARD_HOLD_STATE_CODES.hand}`);
+  });
+
+  holds.finish.forEach((coord) => {
+    const holdId = coordinateToHoldId(coord as MoonBoardCoordinate);
+    parts.push(`p${holdId}r${MOONBOARD_HOLD_STATE_CODES.finish}`);
+  });
+
+  return parts.join('');
+}

From e2a9cbfacb91f598be425adacfd98a652f0608d0 Mon Sep 17 00:00:00 2001
From: Marco de Jongh <mdejongh@atlassian.com>
Date: Sat, 24 Jan 2026 10:28:35 +1100
Subject: [PATCH 02/21] fix: Enable Moonboard climb preview rendering in list
 view

Integrate MoonBoardRenderer into BoardRenderer to fix Moonboard climb
previews. BoardRenderer now delegates to MoonBoardRenderer when
board_name is 'moonboard', using the new layoutFolder and holdSetImages
fields in BoardDetails.

Standardize on LitUpHoldsMap type across all Moonboard components,
replacing the separate MoonBoardLitUpHoldsMap type. This ensures
consistent hold state representation using 'STARTING', 'HAND', 'FINISH'
instead of 'start', 'hand', 'finish'.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .../board-renderer/board-renderer.tsx         | 15 +++++
 .../moonboard-create-climb-form.tsx           |  6 +-
 .../use-moonboard-create-climb.ts             | 55 +++++++++++--------
 .../moonboard-import/moonboard-edit-modal.tsx | 38 ++++++++++---
 .../moonboard-import-card.tsx                 |  4 +-
 .../moonboard-renderer/moonboard-renderer.tsx | 11 ++--
 .../components/moonboard-renderer/types.ts    | 14 +----
 packages/web/app/lib/moonboard-climbs-db.ts   | 24 ++++++--
 packages/web/app/lib/moonboard-config.ts      |  3 +
 packages/web/app/lib/types.ts                 |  3 +
 10 files changed, 115 insertions(+), 58 deletions(-)

diff --git a/packages/web/app/components/board-renderer/board-renderer.tsx b/packages/web/app/components/board-renderer/board-renderer.tsx
index 1386cbb4..b0159b1f 100644
--- a/packages/web/app/components/board-renderer/board-renderer.tsx
+++ b/packages/web/app/components/board-renderer/board-renderer.tsx
@@ -4,6 +4,7 @@ import { BoardDetails } from '@/app/lib/types';
 import BoardLitupHolds from './board-litup-holds';
 import { LitUpHoldsMap } from './types';
 import styles from './board-renderer.module.css';
+import MoonBoardRenderer from '../moonboard-renderer/moonboard-renderer';
 
 export type BoardProps = {
   boardDetails: BoardDetails;
@@ -19,6 +20,20 @@ export type BoardProps = {
 
 const BoardRenderer = React.memo(
   ({ boardDetails, thumbnail, maxHeight, fillHeight, litUpHoldsMap, mirrored, onHoldClick }: BoardProps) => {
+    // Delegate to MoonBoardRenderer for Moonboard (uses grid-based rendering)
+    if (boardDetails.board_name === 'moonboard' && boardDetails.layoutFolder) {
+      return (
+        <MoonBoardRenderer
+          layoutFolder={boardDetails.layoutFolder}
+          holdSetImages={boardDetails.holdSetImages || []}
+          litUpHoldsMap={litUpHoldsMap}
+          mirrored={mirrored}
+          thumbnail={thumbnail}
+          onHoldClick={onHoldClick}
+        />
+      );
+    }
+
     const { boardWidth, boardHeight, holdsData } = boardDetails;
 
     // When fillHeight is true, SVG fills container and uses preserveAspectRatio to fit
diff --git a/packages/web/app/components/create-climb/moonboard-create-climb-form.tsx b/packages/web/app/components/create-climb/moonboard-create-climb-form.tsx
index 67629003..815fde5c 100644
--- a/packages/web/app/components/create-climb/moonboard-create-climb-form.tsx
+++ b/packages/web/app/components/create-climb/moonboard-create-climb-form.tsx
@@ -122,13 +122,13 @@ export default function MoonBoardCreateClimbForm({
       // Convert holds to coordinate format for storage
       const holds = {
         start: Object.entries(litUpHoldsMap)
-          .filter(([, hold]) => hold.type === 'start')
+          .filter(([, hold]) => hold.state === 'STARTING')
           .map(([id]) => holdIdToCoordinate(Number(id))),
         hand: Object.entries(litUpHoldsMap)
-          .filter(([, hold]) => hold.type === 'hand')
+          .filter(([, hold]) => hold.state === 'HAND')
           .map(([id]) => holdIdToCoordinate(Number(id))),
         finish: Object.entries(litUpHoldsMap)
-          .filter(([, hold]) => hold.type === 'finish')
+          .filter(([, hold]) => hold.state === 'FINISH')
           .map(([id]) => holdIdToCoordinate(Number(id))),
       };
 
diff --git a/packages/web/app/components/create-climb/use-moonboard-create-climb.ts b/packages/web/app/components/create-climb/use-moonboard-create-climb.ts
index 2feaf946..b277fc32 100644
--- a/packages/web/app/components/create-climb/use-moonboard-create-climb.ts
+++ b/packages/web/app/components/create-climb/use-moonboard-create-climb.ts
@@ -1,34 +1,34 @@
 'use client';
 
 import { useState, useCallback, useMemo } from 'react';
-import { MoonBoardLitUpHoldsMap, MoonBoardHoldType } from '../moonboard-renderer/types';
+import { LitUpHoldsMap, HoldState } from '../board-renderer/types';
 import { MOONBOARD_HOLD_STATES } from '@/app/lib/moonboard-config';
 
-// MoonBoard hold state cycle: start -> hand -> finish -> OFF
-const STATE_CYCLE: (MoonBoardHoldType | 'off')[] = ['start', 'hand', 'finish', 'off'];
+// MoonBoard hold state cycle: STARTING -> HAND -> FINISH -> OFF
+const STATE_CYCLE: (HoldState | 'OFF')[] = ['STARTING', 'HAND', 'FINISH', 'OFF'];
 
 interface UseMoonBoardCreateClimbOptions {
-  initialHoldsMap?: MoonBoardLitUpHoldsMap;
+  initialHoldsMap?: LitUpHoldsMap;
 }
 
 export function useMoonBoardCreateClimb(options?: UseMoonBoardCreateClimbOptions) {
-  const [litUpHoldsMap, setLitUpHoldsMap] = useState<MoonBoardLitUpHoldsMap>(
+  const [litUpHoldsMap, setLitUpHoldsMap] = useState<LitUpHoldsMap>(
     options?.initialHoldsMap ?? {},
   );
 
-  // Derived state: count holds by type
+  // Derived state: count holds by state
   const startingCount = useMemo(
-    () => Object.values(litUpHoldsMap).filter((h) => h.type === 'start').length,
+    () => Object.values(litUpHoldsMap).filter((h) => h.state === 'STARTING').length,
     [litUpHoldsMap],
   );
 
   const finishCount = useMemo(
-    () => Object.values(litUpHoldsMap).filter((h) => h.type === 'finish').length,
+    () => Object.values(litUpHoldsMap).filter((h) => h.state === 'FINISH').length,
     [litUpHoldsMap],
   );
 
   const handCount = useMemo(
-    () => Object.values(litUpHoldsMap).filter((h) => h.type === 'hand').length,
+    () => Object.values(litUpHoldsMap).filter((h) => h.state === 'HAND').length,
     [litUpHoldsMap],
   );
 
@@ -40,53 +40,60 @@ export function useMoonBoardCreateClimb(options?: UseMoonBoardCreateClimbOptions
   const handleHoldClick = useCallback((holdId: number) => {
     setLitUpHoldsMap((prev) => {
       const currentHold = prev[holdId];
-      const currentType: MoonBoardHoldType | 'off' = currentHold?.type || 'off';
+      const currentState: HoldState | 'OFF' = currentHold?.state || 'OFF';
 
       // Find current position in cycle
-      const currentIndex = STATE_CYCLE.indexOf(currentType);
+      const currentIndex = STATE_CYCLE.indexOf(currentState);
 
       // Count current states (excluding this hold if it has that state)
       const currentStartCount = Object.entries(prev).filter(
-        ([id, h]) => h.type === 'start' && Number(id) !== holdId,
+        ([id, h]) => h.state === 'STARTING' && Number(id) !== holdId,
       ).length;
       const currentFinishCount = Object.entries(prev).filter(
-        ([id, h]) => h.type === 'finish' && Number(id) !== holdId,
+        ([id, h]) => h.state === 'FINISH' && Number(id) !== holdId,
       ).length;
 
       // Find next valid state in cycle
-      let nextType: MoonBoardHoldType | 'off' = 'off';
+      let nextState: HoldState | 'OFF' = 'OFF';
       for (let i = 1; i <= STATE_CYCLE.length; i++) {
         const candidateIndex = (currentIndex + i) % STATE_CYCLE.length;
-        const candidateType = STATE_CYCLE[candidateIndex];
+        const candidateState = STATE_CYCLE[candidateIndex];
 
-        // Skip start if already at max (2)
-        if (candidateType === 'start' && currentStartCount >= 2) {
+        // Skip STARTING if already at max (2)
+        if (candidateState === 'STARTING' && currentStartCount >= 2) {
           continue;
         }
-        // Skip finish if already at max (2)
-        if (candidateType === 'finish' && currentFinishCount >= 2) {
+        // Skip FINISH if already at max (2)
+        if (candidateState === 'FINISH' && currentFinishCount >= 2) {
           continue;
         }
 
-        nextType = candidateType;
+        nextState = candidateState;
         break;
       }
 
       // If next state is OFF, remove the hold from the map
-      if (nextType === 'off') {
+      if (nextState === 'OFF') {
         const { [holdId]: _removed, ...rest } = prev;
         void _removed; // Explicitly mark as intentionally unused
         return rest;
       }
 
-      // Get the color info for this state
-      const stateInfo = MOONBOARD_HOLD_STATES[nextType];
+      // Map state to Moonboard hold states for colors
+      const stateToMoonboard = {
+        STARTING: MOONBOARD_HOLD_STATES.start,
+        HAND: MOONBOARD_HOLD_STATES.hand,
+        FINISH: MOONBOARD_HOLD_STATES.finish,
+      } as const;
+
+      const stateInfo = stateToMoonboard[nextState as keyof typeof stateToMoonboard];
 
       return {
         ...prev,
         [holdId]: {
-          type: nextType,
+          state: nextState,
           color: stateInfo.color,
+          displayColor: stateInfo.displayColor,
         },
       };
     });
diff --git a/packages/web/app/components/moonboard-import/moonboard-edit-modal.tsx b/packages/web/app/components/moonboard-import/moonboard-edit-modal.tsx
index 1267845f..6ced7408 100644
--- a/packages/web/app/components/moonboard-import/moonboard-edit-modal.tsx
+++ b/packages/web/app/components/moonboard-import/moonboard-edit-modal.tsx
@@ -6,7 +6,7 @@ import MoonBoardRenderer from '../moonboard-renderer/moonboard-renderer';
 import { useMoonBoardCreateClimb } from '../create-climb/use-moonboard-create-climb';
 import { coordinateToHoldId, holdIdToCoordinate, MOONBOARD_HOLD_STATES } from '@/app/lib/moonboard-config';
 import type { MoonBoardClimb, GridCoordinate } from '@boardsesh/moonboard-ocr/browser';
-import type { MoonBoardLitUpHoldsMap } from '../moonboard-renderer/types';
+import type { LitUpHoldsMap } from '../board-renderer/types';
 import styles from './moonboard-edit-modal.module.css';
 
 const { Text } = Typography;
@@ -23,22 +23,34 @@ interface MoonBoardEditModalProps {
 /**
  * Convert OCR climb holds to the lit up holds map format
  */
-function convertClimbToHoldsMap(climb: MoonBoardClimb): MoonBoardLitUpHoldsMap {
-  const map: MoonBoardLitUpHoldsMap = {};
+function convertClimbToHoldsMap(climb: MoonBoardClimb): LitUpHoldsMap {
+  const map: LitUpHoldsMap = {};
 
   climb.holds.start.forEach((coord) => {
     const holdId = coordinateToHoldId(coord);
-    map[holdId] = { type: 'start', color: MOONBOARD_HOLD_STATES.start.color };
+    map[holdId] = {
+      state: 'STARTING',
+      color: MOONBOARD_HOLD_STATES.start.color,
+      displayColor: MOONBOARD_HOLD_STATES.start.displayColor,
+    };
   });
 
   climb.holds.hand.forEach((coord) => {
     const holdId = coordinateToHoldId(coord);
-    map[holdId] = { type: 'hand', color: MOONBOARD_HOLD_STATES.hand.color };
+    map[holdId] = {
+      state: 'HAND',
+      color: MOONBOARD_HOLD_STATES.hand.color,
+      displayColor: MOONBOARD_HOLD_STATES.hand.displayColor,
+    };
   });
 
   climb.holds.finish.forEach((coord) => {
     const holdId = coordinateToHoldId(coord);
-    map[holdId] = { type: 'finish', color: MOONBOARD_HOLD_STATES.finish.color };
+    map[holdId] = {
+      state: 'FINISH',
+      color: MOONBOARD_HOLD_STATES.finish.color,
+      displayColor: MOONBOARD_HOLD_STATES.finish.displayColor,
+    };
   });
 
   return map;
@@ -47,16 +59,26 @@ function convertClimbToHoldsMap(climb: MoonBoardClimb): MoonBoardLitUpHoldsMap {
 /**
  * Convert lit up holds map back to OCR hold format
  */
-function convertHoldsMapToOcrFormat(holdsMap: MoonBoardLitUpHoldsMap): MoonBoardClimb['holds'] {
+function convertHoldsMapToOcrFormat(holdsMap: LitUpHoldsMap): MoonBoardClimb['holds'] {
   const holds: MoonBoardClimb['holds'] = {
     start: [],
     hand: [],
     finish: [],
   };
 
+  // Map standard HoldState to OCR format keys
+  const stateToKey = {
+    STARTING: 'start',
+    HAND: 'hand',
+    FINISH: 'finish',
+  } as const;
+
   Object.entries(holdsMap).forEach(([id, hold]) => {
     const coord = holdIdToCoordinate(Number(id)) as GridCoordinate;
-    holds[hold.type].push(coord);
+    const key = stateToKey[hold.state as keyof typeof stateToKey];
+    if (key) {
+      holds[key].push(coord);
+    }
   });
 
   return holds;
diff --git a/packages/web/app/components/moonboard-import/moonboard-import-card.tsx b/packages/web/app/components/moonboard-import/moonboard-import-card.tsx
index f59ad165..72ae3d7b 100644
--- a/packages/web/app/components/moonboard-import/moonboard-import-card.tsx
+++ b/packages/web/app/components/moonboard-import/moonboard-import-card.tsx
@@ -5,7 +5,7 @@ import { Card, Button, Tag, Space, Popconfirm, Typography } from 'antd';
 import { EditOutlined, DeleteOutlined } from '@ant-design/icons';
 import MoonBoardRenderer from '../moonboard-renderer/moonboard-renderer';
 import type { MoonBoardClimb } from '@boardsesh/moonboard-ocr/browser';
-import type { MoonBoardLitUpHoldsMap } from '../moonboard-renderer/types';
+import type { LitUpHoldsMap } from '../board-renderer/types';
 import styles from './moonboard-import-card.module.css';
 
 const { Text, Paragraph } = Typography;
@@ -14,7 +14,7 @@ interface MoonBoardImportCardProps {
   climb: MoonBoardClimb;
   layoutFolder: string;
   holdSetImages: string[];
-  litUpHoldsMap: MoonBoardLitUpHoldsMap;
+  litUpHoldsMap: LitUpHoldsMap;
   onEdit: () => void;
   onRemove: () => void;
 }
diff --git a/packages/web/app/components/moonboard-renderer/moonboard-renderer.tsx b/packages/web/app/components/moonboard-renderer/moonboard-renderer.tsx
index 8d9e5a76..d01b3e57 100644
--- a/packages/web/app/components/moonboard-renderer/moonboard-renderer.tsx
+++ b/packages/web/app/components/moonboard-renderer/moonboard-renderer.tsx
@@ -46,12 +46,15 @@ const MoonBoardRenderer: React.FC<MoonBoardRendererProps> = ({
     const hold = litUpHoldsMap[holdId];
     if (!hold) return 'transparent';
 
-    switch (hold.type) {
-      case 'start':
+    // Use displayColor from the hold if available, otherwise map state to Moonboard colors
+    if (hold.displayColor) return hold.displayColor;
+
+    switch (hold.state) {
+      case 'STARTING':
         return MOONBOARD_HOLD_STATES.start.displayColor;
-      case 'hand':
+      case 'HAND':
         return MOONBOARD_HOLD_STATES.hand.displayColor;
-      case 'finish':
+      case 'FINISH':
         return MOONBOARD_HOLD_STATES.finish.displayColor;
       default:
         return 'transparent';
diff --git a/packages/web/app/components/moonboard-renderer/types.ts b/packages/web/app/components/moonboard-renderer/types.ts
index 05072d01..7240d60b 100644
--- a/packages/web/app/components/moonboard-renderer/types.ts
+++ b/packages/web/app/components/moonboard-renderer/types.ts
@@ -1,6 +1,7 @@
 import { MoonBoardCoordinate } from '@/app/lib/moonboard-config';
+import { LitUpHoldsMap } from '../board-renderer/types';
 
-// MoonBoard hold types (simpler than Aurora)
+// MoonBoard hold types (simpler than Aurora) - used for internal conversions
 export type MoonBoardHoldType = 'start' | 'hand' | 'finish';
 
 // A hold on the MoonBoard
@@ -10,15 +11,6 @@ export interface MoonBoardHold {
   holdId: number; // Computed from coordinate (1-198)
 }
 
-// Lit up hold information for rendering
-export interface MoonBoardLitUpHold {
-  type: MoonBoardHoldType;
-  color: string;
-}
-
-// Map of hold IDs to their lit up state
-export type MoonBoardLitUpHoldsMap = Record<number, MoonBoardLitUpHold>;
-
 // MoonBoard climb data structure
 export interface MoonBoardClimb {
   name: string;
@@ -34,7 +26,7 @@ export interface MoonBoardClimb {
 export interface MoonBoardRendererProps {
   layoutFolder: string; // e.g., 'moonboard2024'
   holdSetImages: string[]; // e.g., ['holdsetd.png', 'holdsete.png']
-  litUpHoldsMap?: MoonBoardLitUpHoldsMap;
+  litUpHoldsMap?: LitUpHoldsMap;
   mirrored?: boolean;
   thumbnail?: boolean;
   onHoldClick?: (holdId: number) => void;
diff --git a/packages/web/app/lib/moonboard-climbs-db.ts b/packages/web/app/lib/moonboard-climbs-db.ts
index 28a22aab..b96be5ea 100644
--- a/packages/web/app/lib/moonboard-climbs-db.ts
+++ b/packages/web/app/lib/moonboard-climbs-db.ts
@@ -1,5 +1,5 @@
 import { coordinateToHoldId, MOONBOARD_HOLD_STATES, type MoonBoardCoordinate } from './moonboard-config';
-import type { MoonBoardLitUpHoldsMap } from '../components/moonboard-renderer/types';
+import type { LitUpHoldsMap } from '../components/board-renderer/types';
 
 /**
  * Convert OCR hold coordinates to the lit up holds map format for the renderer
@@ -9,22 +9,34 @@ export function convertOcrHoldsToMap(holds: {
   start: string[];
   hand: string[];
   finish: string[];
-}): MoonBoardLitUpHoldsMap {
-  const map: MoonBoardLitUpHoldsMap = {};
+}): LitUpHoldsMap {
+  const map: LitUpHoldsMap = {};
 
   holds.start.forEach((coord) => {
     const holdId = coordinateToHoldId(coord as MoonBoardCoordinate);
-    map[holdId] = { type: 'start', color: MOONBOARD_HOLD_STATES.start.color };
+    map[holdId] = {
+      state: 'STARTING',
+      color: MOONBOARD_HOLD_STATES.start.color,
+      displayColor: MOONBOARD_HOLD_STATES.start.displayColor,
+    };
   });
 
   holds.hand.forEach((coord) => {
     const holdId = coordinateToHoldId(coord as MoonBoardCoordinate);
-    map[holdId] = { type: 'hand', color: MOONBOARD_HOLD_STATES.hand.color };
+    map[holdId] = {
+      state: 'HAND',
+      color: MOONBOARD_HOLD_STATES.hand.color,
+      displayColor: MOONBOARD_HOLD_STATES.hand.displayColor,
+    };
   });
 
   holds.finish.forEach((coord) => {
     const holdId = coordinateToHoldId(coord as MoonBoardCoordinate);
-    map[holdId] = { type: 'finish', color: MOONBOARD_HOLD_STATES.finish.color };
+    map[holdId] = {
+      state: 'FINISH',
+      color: MOONBOARD_HOLD_STATES.finish.color,
+      displayColor: MOONBOARD_HOLD_STATES.finish.displayColor,
+    };
   });
 
   return map;
diff --git a/packages/web/app/lib/moonboard-config.ts b/packages/web/app/lib/moonboard-config.ts
index d13a006a..938a17ae 100644
--- a/packages/web/app/lib/moonboard-config.ts
+++ b/packages/web/app/lib/moonboard-config.ts
@@ -217,6 +217,9 @@ export function getMoonBoardDetails({
     // Empty - MoonBoard uses its own renderer
     images_to_holds: {},
     holdsData: [],
+    // Moonboard-specific fields for grid-based rendering
+    layoutFolder: layoutData.folder,
+    holdSetImages: selectedSets.map((s) => s.imageFile),
   };
 }
 
diff --git a/packages/web/app/lib/types.ts b/packages/web/app/lib/types.ts
index e7f1cf06..b85a0cad 100644
--- a/packages/web/app/lib/types.ts
+++ b/packages/web/app/lib/types.ts
@@ -222,6 +222,9 @@ export type BoardDetails = {
   size_name?: string;
   size_description?: string;
   set_names?: string[];
+  // Moonboard-specific fields for grid-based rendering
+  layoutFolder?: string; // e.g., 'moonboard2024'
+  holdSetImages?: string[]; // e.g., ['holdsetd.png', 'holdsete.png']
 };
 
 export type BoardRouteParameters = {

From 6f218bed6d1c5866220e07af73eeaab7a2f5d35d Mon Sep 17 00:00:00 2001
From: Marco de Jongh <mdejongh@atlassian.com>
Date: Sat, 24 Jan 2026 10:46:53 +1100
Subject: [PATCH 03/21] fix: Add missing board_type filters to backend unified
 table queries

All unified tables (board_climbs, board_climb_stats, board_difficulty_grades)
require board_type filtering since they store data for all board types.

Changes:
- create-climb-filters.ts: Add board_type to baseConditions and climbStats join
- search-climbs.ts: Add board_type to difficultyGrades join, remove unused imports
- get-climb.ts: Add board_type to climbs, climbStats, and difficultyGrades queries
- playlists/queries.ts: Add board_type to all unified table joins
- ticks/queries.ts: Fix TypeScript errors for nullable boolean fields

This fixes climb searches returning incorrect or missing difficulty grades.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .../src/db/queries/climbs/create-climb-filters.ts     |  2 ++
 packages/backend/src/db/queries/climbs/get-climb.ts   | 10 +++++++---
 .../backend/src/db/queries/climbs/search-climbs.ts    | 10 ++++++----
 .../src/graphql/resolvers/playlists/queries.ts        | 11 +++++++++--
 .../backend/src/graphql/resolvers/ticks/queries.ts    |  8 ++++----
 5 files changed, 28 insertions(+), 13 deletions(-)

diff --git a/packages/backend/src/db/queries/climbs/create-climb-filters.ts b/packages/backend/src/db/queries/climbs/create-climb-filters.ts
index 141613c6..efd890c0 100644
--- a/packages/backend/src/db/queries/climbs/create-climb-filters.ts
+++ b/packages/backend/src/db/queries/climbs/create-climb-filters.ts
@@ -62,6 +62,7 @@ export const createClimbFilters = (
 
   // Base conditions for filtering climbs that don't reference the product sizes table
   const baseConditions: SQL[] = [
+    eq(tables.climbs.boardType, params.board_name),
     eq(tables.climbs.layoutId, params.layout_id),
     eq(tables.climbs.isListed, true),
     eq(tables.climbs.isDraft, false),
@@ -244,6 +245,7 @@ export const createClimbFilters = (
     // For use in the subquery with left join
     getClimbStatsJoinConditions: () => [
       eq(tables.climbStats.climbUuid, tables.climbs.uuid),
+      eq(tables.climbStats.boardType, params.board_name),
       eq(tables.climbStats.angle, params.angle),
     ],
 
diff --git a/packages/backend/src/db/queries/climbs/get-climb.ts b/packages/backend/src/db/queries/climbs/get-climb.ts
index e6b5972e..7a5b666a 100644
--- a/packages/backend/src/db/queries/climbs/get-climb.ts
+++ b/packages/backend/src/db/queries/climbs/get-climb.ts
@@ -104,14 +104,18 @@ export const getClimbByUuid = async (params: GetClimbParams): Promise<Climb | nu
       .from(tables.climbs)
       .leftJoin(
         tables.climbStats,
-        sql`${tables.climbStats.climbUuid} = ${tables.climbs.uuid} AND ${tables.climbStats.angle} = ${params.angle}`
+        sql`${tables.climbStats.climbUuid} = ${tables.climbs.uuid}
+        AND ${tables.climbStats.boardType} = ${params.board_name}
+        AND ${tables.climbStats.angle} = ${params.angle}`
       )
       .leftJoin(
         tables.difficultyGrades,
-        sql`${tables.difficultyGrades.difficulty} = ROUND(${tables.climbStats.displayDifficulty}::numeric)`
+        sql`${tables.difficultyGrades.difficulty} = ROUND(${tables.climbStats.displayDifficulty}::numeric)
+        AND ${tables.difficultyGrades.boardType} = ${params.board_name}`
       )
       .where(
-        sql`${tables.climbs.layoutId} = ${params.layout_id}
+        sql`${tables.climbs.boardType} = ${params.board_name}
+        AND ${tables.climbs.layoutId} = ${params.layout_id}
         AND ${tables.climbs.uuid} = ${params.climb_uuid}
         AND ${tables.climbs.framesCount} = 1`
       )
diff --git a/packages/backend/src/db/queries/climbs/search-climbs.ts b/packages/backend/src/db/queries/climbs/search-climbs.ts
index 5aa77cc6..a5d67cbc 100644
--- a/packages/backend/src/db/queries/climbs/search-climbs.ts
+++ b/packages/backend/src/db/queries/climbs/search-climbs.ts
@@ -1,4 +1,4 @@
-import { eq, desc, sql, and, getTableName } from 'drizzle-orm';
+import { eq, desc, sql, and } from 'drizzle-orm';
 import { db } from '../../client';
 import { getBoardTables, type BoardName } from '../util/table-select';
 import { createClimbFilters, type ClimbSearchParams, type ParsedBoardRouteParameters } from './create-climb-filters';
@@ -92,7 +92,6 @@ export const searchClimbs = async (
   const filters = createClimbFilters(tables, params, searchParams, sizeEdges, userId);
 
   // Define sort columns with explicit SQL expressions where needed
-  const climbStatsTable = getTableName(boardClimbStats);
   const allowedSortColumns: Record<string, ReturnType<typeof sql>> = {
     ascents: sql`${tables.climbStats.ascensionistCount}`,
     difficulty: sql`ROUND(${tables.climbStats.displayDifficulty}::numeric, 0)`,
@@ -101,7 +100,7 @@ export const searchClimbs = async (
     // Popular: sum of ascents across ALL angles for this climb (using unified table)
     popular: sql`(
       SELECT COALESCE(SUM(cs.ascensionist_count), 0)
-      FROM ${sql.identifier(climbStatsTable)} cs
+      FROM ${boardClimbStats} cs
       WHERE cs.board_type = ${params.board_name} AND cs.climb_uuid = ${tables.climbs.uuid}
     )`,
   };
@@ -148,7 +147,10 @@ export const searchClimbs = async (
       .leftJoin(tables.climbStats, and(...filters.getClimbStatsJoinConditions()))
       .leftJoin(
         tables.difficultyGrades,
-        eq(tables.difficultyGrades.difficulty, sql`ROUND(${tables.climbStats.displayDifficulty}::numeric)`),
+        and(
+          eq(tables.difficultyGrades.difficulty, sql`ROUND(${tables.climbStats.displayDifficulty}::numeric)`),
+          eq(tables.difficultyGrades.boardType, params.board_name),
+        ),
       )
       .where(and(...whereConditions))
       .orderBy(
diff --git a/packages/backend/src/graphql/resolvers/playlists/queries.ts b/packages/backend/src/graphql/resolvers/playlists/queries.ts
index 4848858b..b776a8de 100644
--- a/packages/backend/src/graphql/resolvers/playlists/queries.ts
+++ b/packages/backend/src/graphql/resolvers/playlists/queries.ts
@@ -361,19 +361,26 @@ export const playlistQueries = {
       .from(dbSchema.playlistClimbs)
       .innerJoin(
         tables.climbs,
-        eq(tables.climbs.uuid, dbSchema.playlistClimbs.climbUuid)
+        and(
+          eq(tables.climbs.uuid, dbSchema.playlistClimbs.climbUuid),
+          eq(tables.climbs.boardType, boardName)
+        )
       )
       .leftJoin(
         tables.climbStats,
         and(
           eq(tables.climbStats.climbUuid, dbSchema.playlistClimbs.climbUuid),
+          eq(tables.climbStats.boardType, boardName),
           // Use the route angle (from input) to fetch stats for the current board angle
           eq(tables.climbStats.angle, input.angle)
         )
       )
       .leftJoin(
         tables.difficultyGrades,
-        eq(tables.difficultyGrades.difficulty, sql`ROUND(${tables.climbStats.displayDifficulty}::numeric)`)
+        and(
+          eq(tables.difficultyGrades.difficulty, sql`ROUND(${tables.climbStats.displayDifficulty}::numeric)`),
+          eq(tables.difficultyGrades.boardType, boardName)
+        )
       )
       .where(eq(dbSchema.playlistClimbs.playlistId, playlistId))
       .orderBy(asc(dbSchema.playlistClimbs.position), asc(dbSchema.playlistClimbs.addedAt))
diff --git a/packages/backend/src/graphql/resolvers/ticks/queries.ts b/packages/backend/src/graphql/resolvers/ticks/queries.ts
index f8a3f753..d6935c78 100644
--- a/packages/backend/src/graphql/resolvers/ticks/queries.ts
+++ b/packages/backend/src/graphql/resolvers/ticks/queries.ts
@@ -315,13 +315,13 @@ export const tickQueries = {
         boardType: tick.boardType,
         layoutId,
         angle: tick.angle,
-        isMirror: tick.isMirror,
+        isMirror: tick.isMirror ?? false,
         status: tick.status,
         attemptCount: tick.attemptCount,
         quality: tick.quality,
         difficulty: tick.difficulty,
         difficultyName,
-        isBenchmark: tick.isBenchmark,
+        isBenchmark: tick.isBenchmark ?? false,
         comment: tick.comment || '',
         climbedAt: tick.climbedAt,
         frames,
@@ -336,10 +336,10 @@ export const tickQueries = {
           boardType: tick.boardType,
           layoutId,
           angle: tick.angle,
-          isMirror: tick.isMirror,
+          isMirror: tick.isMirror ?? false,
           frames,
           difficultyName,
-          isBenchmark: tick.isBenchmark,
+          isBenchmark: tick.isBenchmark ?? false,
           date,
           items: [],
           flashCount: 0,

From fff93db64fcc3ea1d2b6d1b783022a518049bec2 Mon Sep 17 00:00:00 2001
From: Marco de Jongh <mdejongh@atlassian.com>
Date: Sat, 24 Jan 2026 11:22:29 +1100
Subject: [PATCH 04/21] feat: Consolidate climb creation pages with grade/angle
 support
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Unified Aurora and MoonBoard create climb forms into single component
- Added unified header with back button, title input, settings, and save
- Added grade selector for MoonBoard with proper difficulty IDs
- Added angle selector for MoonBoard (25° and 40° only)
- Added climb stats creation for MoonBoard climbs with grades
- Consolidated BOULDER_GRADES constant for all boards
- Added draft toggle support for MoonBoard
- Auth alert now shows for both board types

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .../[set_ids]/[angle]/create/page.tsx         |   9 +-
 .../v1/[board_name]/proxy/saveClimb/route.ts  |  22 +-
 .../use-board-bluetooth.ts                    |   9 +-
 .../create-climb/create-climb-form.module.css |   5 +
 .../create-climb/create-climb-form.tsx        | 689 ++++++++++++------
 .../moonboard-create-climb-form.tsx           | 301 --------
 .../app/lib/api-wrappers/aurora/saveClimb.ts  |  40 +
 packages/web/app/lib/board-data.ts            |  86 ++-
 packages/web/app/lib/moonboard-config.ts      |  22 +
 9 files changed, 643 insertions(+), 540 deletions(-)
 delete mode 100644 packages/web/app/components/create-climb/moonboard-create-climb-form.tsx

diff --git a/packages/web/app/[board_name]/[layout_id]/[size_id]/[set_ids]/[angle]/create/page.tsx b/packages/web/app/[board_name]/[layout_id]/[size_id]/[set_ids]/[angle]/create/page.tsx
index a282fc77..a4f5b98e 100644
--- a/packages/web/app/[board_name]/[layout_id]/[size_id]/[set_ids]/[angle]/create/page.tsx
+++ b/packages/web/app/[board_name]/[layout_id]/[size_id]/[set_ids]/[angle]/create/page.tsx
@@ -4,7 +4,6 @@ import { getBoardDetails } from '@/app/lib/__generated__/product-sizes-data';
 import { parseBoardRouteParams } from '@/app/lib/url-utils';
 import { parseBoardRouteParamsWithSlugs } from '@/app/lib/url-utils.server';
 import CreateClimbForm from '@/app/components/create-climb/create-climb-form';
-import MoonBoardCreateClimbForm from '@/app/components/create-climb/moonboard-create-climb-form';
 import {
   MOONBOARD_LAYOUTS,
   MOONBOARD_SETS,
@@ -62,11 +61,12 @@ export default async function CreateClimbPage(props: CreateClimbPageProps) {
     const holdSetImages = getMoonBoardHoldSetImages(layoutInfo.layoutKey, parsedParams.set_ids);
 
     return (
-      <MoonBoardCreateClimbForm
+      <CreateClimbForm
+        boardType="moonboard"
+        angle={parsedParams.angle}
         layoutFolder={layoutInfo.folder}
         layoutId={parsedParams.layout_id}
         holdSetImages={holdSetImages}
-        angle={parsedParams.angle}
       />
     );
   }
@@ -76,8 +76,9 @@ export default async function CreateClimbPage(props: CreateClimbPageProps) {
 
   return (
     <CreateClimbForm
-      boardDetails={boardDetails}
+      boardType="aurora"
       angle={parsedParams.angle}
+      boardDetails={boardDetails}
       forkFrames={searchParams.forkFrames}
       forkName={searchParams.forkName}
     />
diff --git a/packages/web/app/api/v1/[board_name]/proxy/saveClimb/route.ts b/packages/web/app/api/v1/[board_name]/proxy/saveClimb/route.ts
index 034ec83a..772626a6 100644
--- a/packages/web/app/api/v1/[board_name]/proxy/saveClimb/route.ts
+++ b/packages/web/app/api/v1/[board_name]/proxy/saveClimb/route.ts
@@ -1,8 +1,9 @@
 // app/api/v1/[board_name]/proxy/saveClimb/route.ts
-import { saveClimb } from '@/app/lib/api-wrappers/aurora/saveClimb';
+import { saveClimb, saveClimbStats } from '@/app/lib/api-wrappers/aurora/saveClimb';
 import { AuroraBoardName } from '@/app/lib/api-wrappers/aurora/types';
 import { BoardName } from '@/app/lib/types';
 import { encodeMoonBoardHoldsToFrames } from '@/app/lib/moonboard-config';
+import { fontGradeToDifficultyId } from '@/app/lib/board-data';
 import { NextResponse } from 'next/server';
 import { z } from 'zod';
 
@@ -36,6 +37,9 @@ const saveMoonBoardClimbSchema = z.object({
         finish: z.array(z.string()),
       }),
       angle: z.number(),
+      is_draft: z.boolean().optional().default(false),
+      user_grade: z.string().optional(), // Font grade like "6A", "7B+"
+      is_benchmark: z.boolean().optional().default(false),
     })
     .strict(),
 });
@@ -59,10 +63,24 @@ export async function POST(request: Request, props: { params: Promise<{ board_na
         description: validatedData.options.description,
         angle: validatedData.options.angle,
         frames,
-        is_draft: false,
+        is_draft: validatedData.options.is_draft ?? false,
         frames_count: 1,
         frames_pace: 0,
       });
+
+      // If a grade was provided, create climb stats
+      if (validatedData.options.user_grade) {
+        const difficultyId = fontGradeToDifficultyId(validatedData.options.user_grade);
+        if (difficultyId) {
+          await saveClimbStats('moonboard', {
+            climbUuid: response.uuid,
+            angle: validatedData.options.angle,
+            displayDifficulty: difficultyId,
+            benchmarkDifficulty: validatedData.options.is_benchmark ? difficultyId : null,
+          });
+        }
+      }
+
       return NextResponse.json(response);
     }
 
diff --git a/packages/web/app/components/board-bluetooth-control/use-board-bluetooth.ts b/packages/web/app/components/board-bluetooth-control/use-board-bluetooth.ts
index d72d832d..bc93c88f 100644
--- a/packages/web/app/components/board-bluetooth-control/use-board-bluetooth.ts
+++ b/packages/web/app/components/board-bluetooth-control/use-board-bluetooth.ts
@@ -42,7 +42,7 @@ export const convertToMirroredFramesString = (frames: string, holdsData: HoldRen
 };
 
 interface UseBoardBluetoothOptions {
-  boardDetails: BoardDetails;
+  boardDetails?: BoardDetails;
   onConnectionChange?: (connected: boolean) => void;
 }
 
@@ -77,7 +77,7 @@ export function useBoardBluetooth({ boardDetails, onConnectionChange }: UseBoard
   // Function to send frames string to the board
   const sendFramesToBoard = useCallback(
     async (frames: string, mirrored: boolean = false) => {
-      if (!characteristicRef.current || !frames) return;
+      if (!characteristicRef.current || !frames || !boardDetails) return;
 
       let framesToSend = frames;
       const placementPositions = getLedPlacements(boardDetails.board_name, boardDetails.layout_id, boardDetails.size_id);
@@ -107,6 +107,11 @@ export function useBoardBluetooth({ boardDetails, onConnectionChange }: UseBoard
         return false;
       }
 
+      if (!boardDetails) {
+        console.error('Cannot connect to Bluetooth without board details');
+        return false;
+      }
+
       setLoading(true);
 
       try {
diff --git a/packages/web/app/components/create-climb/create-climb-form.module.css b/packages/web/app/components/create-climb/create-climb-form.module.css
index 2ab6440f..fa2d0b86 100644
--- a/packages/web/app/components/create-climb/create-climb-form.module.css
+++ b/packages/web/app/components/create-climb/create-climb-form.module.css
@@ -205,6 +205,11 @@
   font-size: 12px;
 }
 
+/* MoonBoard-specific grade field */
+.settingsGradeField {
+  width: 100%;
+}
+
 /* Hold counts bar at bottom */
 .holdCountsBar {
   display: flex;
diff --git a/packages/web/app/components/create-climb/create-climb-form.tsx b/packages/web/app/components/create-climb/create-climb-form.tsx
index 9e3c362c..eea9692a 100644
--- a/packages/web/app/components/create-climb/create-climb-form.tsx
+++ b/packages/web/app/components/create-climb/create-climb-form.tsx
@@ -1,18 +1,26 @@
 'use client';
 
-import React, { useState, useEffect, useCallback, useMemo, useRef } from 'react';
-import { Input, Switch, Button, Typography, Tag, Alert, Flex, Slider, Tooltip } from 'antd';
-import type { InputRef } from 'antd';
-import { SettingOutlined, EditOutlined, CheckOutlined, CloseOutlined, FireOutlined } from '@ant-design/icons';
-import { useRouter } from 'next/navigation';
+import React, { useState, useEffect, useCallback, useMemo } from 'react';
+import { Input, Switch, Button, Typography, Tag, Alert, Flex, Slider, Tooltip, Space, Upload, message, Select } from 'antd';
+import { SettingOutlined, CloseOutlined, FireOutlined, ArrowLeftOutlined, SaveOutlined, LoginOutlined, UploadOutlined, LoadingOutlined, ImportOutlined } from '@ant-design/icons';
+import { useRouter, usePathname } from 'next/navigation';
+import Link from 'next/link';
 import { track } from '@vercel/analytics';
+import { useSession } from 'next-auth/react';
 import BoardRenderer from '../board-renderer/board-renderer';
+import MoonBoardRenderer from '../moonboard-renderer/moonboard-renderer';
 import { useBoardProvider } from '../board-provider/board-provider-context';
 import { useCreateClimb } from './use-create-climb';
+import { useMoonBoardCreateClimb } from './use-moonboard-create-climb';
 import { useBoardBluetooth } from '../board-bluetooth-control/use-board-bluetooth';
 import { BoardDetails } from '@/app/lib/types';
 import { constructClimbListWithSlugs } from '@/app/lib/url-utils';
 import { convertLitUpHoldsStringToMap } from '../board-renderer/util';
+import { holdIdToCoordinate, MOONBOARD_GRADES, MOONBOARD_ANGLES } from '@/app/lib/moonboard-config';
+import { getFontGradeColor } from '@/app/lib/grade-colors';
+import { themeTokens } from '@/app/theme/theme-config';
+import { parseScreenshot } from '@boardsesh/moonboard-ocr/browser';
+import { convertOcrHoldsToMap } from '@/app/lib/moonboard-climbs-db';
 import AuthModal from '../auth/auth-modal';
 import { useCreateClimbContext } from './create-climb-context';
 import CreateClimbHeatmapOverlay from './create-climb-heatmap-overlay';
@@ -27,116 +35,172 @@ interface CreateClimbFormValues {
   isDraft: boolean;
 }
 
+type BoardType = 'aurora' | 'moonboard';
+
 interface CreateClimbFormProps {
-  boardDetails: BoardDetails;
+  boardType: BoardType;
   angle: number;
+  // Aurora-specific
+  boardDetails?: BoardDetails;
   forkFrames?: string;
   forkName?: string;
+  // MoonBoard-specific
+  layoutFolder?: string;
+  layoutId?: number;
+  holdSetImages?: string[];
 }
 
-export default function CreateClimbForm({ boardDetails, angle, forkFrames, forkName }: CreateClimbFormProps) {
+export default function CreateClimbForm({
+  boardType,
+  angle,
+  boardDetails,
+  forkFrames,
+  forkName,
+  layoutFolder,
+  layoutId,
+  holdSetImages,
+}: CreateClimbFormProps) {
   const router = useRouter();
+  const pathname = usePathname();
+  const { data: session } = useSession();
+
+  // Aurora-specific hooks
   const { isAuthenticated, saveClimb } = useBoardProvider();
 
-  // Convert fork frames to initial holds map if provided
+  // Determine which auth check to use based on board type
+  const isLoggedIn = boardType === 'aurora' ? isAuthenticated : !!session?.user?.id;
+
+  // Convert fork frames to initial holds map if provided (Aurora only)
   const initialHoldsMap = useMemo(() => {
-    if (!forkFrames) return undefined;
+    if (boardType !== 'aurora' || !forkFrames || !boardDetails) return undefined;
     const framesMap = convertLitUpHoldsStringToMap(forkFrames, boardDetails.board_name);
-    // Get the first frame (frame 0) - most climbs have a single frame
     return framesMap[0] ?? undefined;
-  }, [forkFrames, boardDetails.board_name]);
+  }, [boardType, forkFrames, boardDetails]);
+
+  // Aurora hold management
+  const auroraClimb = useCreateClimb(boardDetails?.board_name || 'kilter', { initialHoldsMap });
 
+  // MoonBoard hold management
+  const moonboardClimb = useMoonBoardCreateClimb();
+
+  // Use the appropriate hook values based on board type
   const {
     litUpHoldsMap,
-    handleHoldClick: originalHandleHoldClick,
-    generateFramesString,
+    handleHoldClick: baseHandleHoldClick,
     startingCount,
     finishCount,
     totalHolds,
     isValid,
-    resetHolds: originalResetHolds,
-  } = useCreateClimb(boardDetails.board_name, { initialHoldsMap });
+    resetHolds: baseResetHolds,
+  } = boardType === 'aurora' ? auroraClimb : moonboardClimb;
+
+  const handCount = boardType === 'moonboard' ? moonboardClimb.handCount : 0;
+  const generateFramesString = boardType === 'aurora' ? auroraClimb.generateFramesString : undefined;
+  const setLitUpHoldsMap = boardType === 'moonboard' ? moonboardClimb.setLitUpHoldsMap : undefined;
+
+  // Bluetooth for Aurora boards
+  const { isConnected, sendFramesToBoard } = useBoardBluetooth({
+    boardDetails: boardType === 'aurora' ? boardDetails : undefined
+  });
 
-  const { isConnected, sendFramesToBoard } = useBoardBluetooth({ boardDetails });
   const createClimbContext = useCreateClimbContext();
 
+  // Form state
   const [isSaving, setIsSaving] = useState(false);
   const [showAuthModal, setShowAuthModal] = useState(false);
   const [pendingFormValues, setPendingFormValues] = useState<CreateClimbFormValues | null>(null);
+
+  // Aurora-specific state
   const [showHeatmap, setShowHeatmap] = useState(false);
   const [heatmapOpacity, setHeatmapOpacity] = useState(0.7);
+  const [isDraft, setIsDraft] = useState(false);
 
-  // Editable title state
+  // MoonBoard-specific state
+  const [isOcrProcessing, setIsOcrProcessing] = useState(false);
+  const [ocrError, setOcrError] = useState<string | null>(null);
+  const [ocrWarnings, setOcrWarnings] = useState<string[]>([]);
+  const [userGrade, setUserGrade] = useState<string | undefined>(undefined);
+  const [isBenchmark, setIsBenchmark] = useState(false);
+  const [selectedAngle, setSelectedAngle] = useState<number>(angle);
+
+  // Common state
   const [climbName, setClimbName] = useState(forkName ? `${forkName} fork` : '');
   const [description, setDescription] = useState('');
-  const [isDraft, setIsDraft] = useState(false);
-  const [isEditingTitle, setIsEditingTitle] = useState(false);
-  const [editingName, setEditingName] = useState('');
   const [showSettingsPanel, setShowSettingsPanel] = useState(false);
-  const titleInputRef = useRef<InputRef>(null);
 
-  // Send frames to board whenever litUpHoldsMap changes and we're connected
+  // Construct the bulk import URL (MoonBoard only)
+  const bulkImportUrl = pathname.replace(/\/create$/, '/import');
+
+  // Send frames to board whenever litUpHoldsMap changes (Aurora only)
   useEffect(() => {
-    if (isConnected) {
+    if (boardType === 'aurora' && isConnected && generateFramesString) {
       const frames = generateFramesString();
       sendFramesToBoard(frames);
     }
-  }, [litUpHoldsMap, isConnected, generateFramesString, sendFramesToBoard]);
+  }, [boardType, litUpHoldsMap, isConnected, generateFramesString, sendFramesToBoard]);
 
-  // Wrap handleHoldClick to also send to board after state updates
+  // Wrap handleHoldClick
   const handleHoldClick = useCallback(
     (holdId: number) => {
-      originalHandleHoldClick(holdId);
-      // The useEffect above will handle sending to board after state updates
+      baseHandleHoldClick(holdId);
     },
-    [originalHandleHoldClick],
+    [baseHandleHoldClick],
   );
 
   // Wrap resetHolds to also clear the board
   const resetHolds = useCallback(() => {
-    originalResetHolds();
-    // Send empty frames to clear the board
-    if (isConnected) {
+    baseResetHolds();
+    if (boardType === 'aurora' && isConnected) {
       sendFramesToBoard('');
     }
-  }, [originalResetHolds, isConnected, sendFramesToBoard]);
-
-  // Title editing handlers
-  const handleStartEditTitle = useCallback(() => {
-    setEditingName(climbName);
-    setIsEditingTitle(true);
-    // Focus the input after it renders
-    setTimeout(() => titleInputRef.current?.focus(), 0);
-  }, [climbName]);
-
-  const handleSaveTitle = useCallback(() => {
-    const trimmedName = editingName.trim();
-    // Only update if we have a valid name, otherwise keep the original
-    if (trimmedName) {
-      setClimbName(trimmedName);
-    }
-    // Always exit edit mode and clear the editing state
-    setIsEditingTitle(false);
-    setEditingName('');
-  }, [editingName]);
-
-  const handleCancelEditTitle = useCallback(() => {
-    setIsEditingTitle(false);
-    setEditingName('');
-  }, []);
+  }, [boardType, baseResetHolds, isConnected, sendFramesToBoard]);
 
-  const handleTitleKeyDown = useCallback(
-    (e: React.KeyboardEvent) => {
-      if (e.key === 'Enter') {
-        handleSaveTitle();
-      } else if (e.key === 'Escape') {
-        handleCancelEditTitle();
+  // MoonBoard OCR import
+  const handleOcrImport = useCallback(async (file: File) => {
+    if (boardType !== 'moonboard' || !setLitUpHoldsMap) return;
+
+    setIsOcrProcessing(true);
+    setOcrError(null);
+    setOcrWarnings([]);
+
+    try {
+      const result = await parseScreenshot(file);
+
+      if (!result.success || !result.climb) {
+        setOcrError(result.error || 'Failed to parse screenshot');
+        return;
       }
-    },
-    [handleSaveTitle, handleCancelEditTitle],
-  );
 
-  const doSaveClimb = useCallback(async () => {
+      const climb = result.climb;
+      const warnings = [...result.warnings];
+
+      // Check angle mismatch
+      if (climb.angle !== angle) {
+        warnings.push(`Screenshot is for ${climb.angle}° but current page is ${angle}°. Holds imported anyway.`);
+      }
+
+      setOcrWarnings(warnings);
+
+      // Convert OCR holds to form state
+      const newHoldsMap = convertOcrHoldsToMap(climb.holds);
+      setLitUpHoldsMap(newHoldsMap);
+
+      // Populate fields from OCR
+      if (climb.name) setClimbName(climb.name);
+      if (climb.userGrade) setUserGrade(climb.userGrade);
+      if (climb.isBenchmark) setIsBenchmark(true);
+      if (climb.setter) setDescription(`Setter: ${climb.setter}`);
+    } catch (error) {
+      setOcrError(error instanceof Error ? error.message : 'Unknown error during OCR');
+    } finally {
+      setIsOcrProcessing(false);
+    }
+  }, [boardType, angle, setLitUpHoldsMap]);
+
+  // Save climb - Aurora
+  const doSaveAuroraClimb = useCallback(async () => {
+    if (!boardDetails || !generateFramesString) return;
+
     setIsSaving(true);
 
     try {
@@ -159,7 +223,6 @@ export default function CreateClimbForm({ boardDetails, angle, forkFrames, forkN
         holdCount: totalHolds,
       });
 
-      // Navigate back to the climb list
       const listUrl = constructClimbListWithSlugs(
         boardDetails.board_name,
         boardDetails.layout_name || '',
@@ -177,63 +240,122 @@ export default function CreateClimbForm({ boardDetails, angle, forkFrames, forkN
     } finally {
       setIsSaving(false);
     }
-  }, [generateFramesString, saveClimb, boardDetails, climbName, description, isDraft, angle, totalHolds, router]);
+  }, [boardDetails, generateFramesString, saveClimb, climbName, description, isDraft, angle, totalHolds, router]);
+
+  // Save climb - MoonBoard
+  const doSaveMoonBoardClimb = useCallback(async () => {
+    if (!layoutId || !session?.user?.id) return;
+
+    setIsSaving(true);
+
+    try {
+      // Convert holds to coordinate format for storage
+      const holds = {
+        start: Object.entries(litUpHoldsMap)
+          .filter(([, hold]) => hold.state === 'STARTING')
+          .map(([id]) => holdIdToCoordinate(Number(id))),
+        hand: Object.entries(litUpHoldsMap)
+          .filter(([, hold]) => hold.state === 'HAND')
+          .map(([id]) => holdIdToCoordinate(Number(id))),
+        finish: Object.entries(litUpHoldsMap)
+          .filter(([, hold]) => hold.state === 'FINISH')
+          .map(([id]) => holdIdToCoordinate(Number(id))),
+      };
+
+      const response = await fetch('/api/v1/moonboard/proxy/saveClimb', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          options: {
+            layout_id: layoutId,
+            user_id: session.user.id,
+            name: climbName,
+            description: description || '',
+            holds,
+            angle: selectedAngle,
+            is_draft: isDraft,
+            user_grade: userGrade,
+            is_benchmark: isBenchmark,
+          },
+        }),
+      });
+
+      if (!response.ok) {
+        const errorData = await response.json().catch(() => ({}));
+        throw new Error(errorData.error || 'Failed to save climb');
+      }
+
+      message.success('Climb saved to database!');
+
+      const listUrl = pathname.replace(/\/create$/, '/list');
+      router.push(listUrl);
+    } catch (error) {
+      console.error('Failed to save climb:', error);
+      message.error(error instanceof Error ? error.message : 'Failed to save climb. Please try again.');
+    } finally {
+      setIsSaving(false);
+    }
+  }, [layoutId, session?.user?.id, litUpHoldsMap, climbName, description, userGrade, isBenchmark, isDraft, selectedAngle, pathname, router]);
 
   const handlePublish = useCallback(async () => {
     if (!isValid || !climbName.trim()) {
       return;
     }
 
-    if (!isAuthenticated) {
-      // Store the form values and show auth modal
-      setPendingFormValues({ name: climbName, description, isDraft });
-      setShowAuthModal(true);
+    if (!isLoggedIn) {
+      if (boardType === 'aurora') {
+        setPendingFormValues({ name: climbName, description, isDraft });
+        setShowAuthModal(true);
+      }
       return;
     }
 
-    await doSaveClimb();
-  }, [isValid, climbName, isAuthenticated, description, isDraft, doSaveClimb]);
+    if (boardType === 'aurora') {
+      await doSaveAuroraClimb();
+    } else {
+      await doSaveMoonBoardClimb();
+    }
+  }, [boardType, isValid, climbName, isLoggedIn, description, isDraft, doSaveAuroraClimb, doSaveMoonBoardClimb]);
 
   const handleAuthSuccess = async () => {
-    // After successful auth, check if they have Aurora credentials linked
-    // If not, they'll see the message in the form
-    // If yes and we have pending form values, we need to wait for the credentials to load
     if (pendingFormValues) {
-      // Give time for the board provider to refresh credentials
       setTimeout(async () => {
-        // The component will re-render with new auth state
-        // User needs to click save again after linking their account
         setPendingFormValues(null);
       }, 1000);
     }
   };
 
   const handleCancel = useCallback(() => {
-    const listUrl = constructClimbListWithSlugs(
-      boardDetails.board_name,
-      boardDetails.layout_name || '',
-      boardDetails.size_name || '',
-      boardDetails.size_description,
-      boardDetails.set_names || [],
-      angle,
-    );
-    router.push(listUrl);
-  }, [boardDetails, angle, router]);
+    if (boardType === 'aurora' && boardDetails) {
+      const listUrl = constructClimbListWithSlugs(
+        boardDetails.board_name,
+        boardDetails.layout_name || '',
+        boardDetails.size_name || '',
+        boardDetails.size_description,
+        boardDetails.set_names || [],
+        angle,
+      );
+      router.push(listUrl);
+    } else {
+      router.back();
+    }
+  }, [boardType, boardDetails, angle, router]);
 
-  const canSave = isAuthenticated && isValid && climbName.trim().length > 0;
+  const canSave = isLoggedIn && isValid && climbName.trim().length > 0;
 
   const handleToggleSettings = useCallback(() => {
     setShowSettingsPanel((prev) => !prev);
   }, []);
 
   const handleToggleHeatmap = useCallback(() => {
+    if (boardType !== 'aurora' || !boardDetails) return;
     setShowHeatmap((prev) => {
       track(`Create Climb Heatmap ${!prev ? 'Shown' : 'Hidden'}`, {
         boardLayout: boardDetails.layout_name || '',
       });
       return !prev;
     });
-  }, [boardDetails.layout_name]);
+  }, [boardType, boardDetails]);
 
   // Register actions with context for header to use
   useEffect(() => {
@@ -258,10 +380,91 @@ export default function CreateClimbForm({ boardDetails, angle, forkFrames, forkN
     }
   }, [createClimbContext, isSaving]);
 
+  // Render save/login button
+  const renderSaveButton = () => {
+    if (boardType === 'aurora') {
+      if (!isAuthenticated) {
+        return (
+          <Button type="primary" icon={<LoginOutlined />} onClick={() => setShowAuthModal(true)}>
+            Sign In
+          </Button>
+        );
+      }
+      return (
+        <Button
+          type="primary"
+          icon={<SaveOutlined />}
+          loading={isSaving}
+          disabled={!canSave}
+          onClick={handlePublish}
+        >
+          {isSaving ? 'Saving...' : 'Save'}
+        </Button>
+      );
+    }
+
+    // MoonBoard
+    if (!session?.user) {
+      return (
+        <Link href="/api/auth/signin">
+          <Button type="primary" icon={<LoginOutlined />}>
+            Log in to Save
+          </Button>
+        </Link>
+      );
+    }
+    return (
+      <Button
+        type="primary"
+        icon={<SaveOutlined />}
+        loading={isSaving}
+        disabled={!canSave}
+        onClick={handlePublish}
+      >
+        {isSaving ? 'Saving...' : 'Save'}
+      </Button>
+    );
+  };
+
   return (
     <div className={styles.pageContainer}>
-      {/* Auth alerts */}
-      {!isAuthenticated && (
+      {/* Unified Header */}
+      <div className={styles.createHeader}>
+        <Button icon={<ArrowLeftOutlined />} onClick={handleCancel}>
+          Back
+        </Button>
+        <Input
+          placeholder="Climb name"
+          maxLength={100}
+          className={styles.headerNameInput}
+          variant="borderless"
+          value={climbName}
+          onChange={(e) => setClimbName(e.target.value)}
+        />
+        {/* MoonBoard: Show grade in header like climb card */}
+        {boardType === 'moonboard' && userGrade && (
+          <Text
+            style={{
+              fontSize: 28,
+              fontWeight: themeTokens.typography.fontWeight.bold,
+              lineHeight: 1,
+              color: getFontGradeColor(userGrade) ?? 'var(--ant-color-text-secondary)',
+              flexShrink: 0,
+            }}
+          >
+            {userGrade}
+          </Text>
+        )}
+        <Button
+          type="text"
+          icon={showSettingsPanel ? <CloseOutlined /> : <SettingOutlined />}
+          onClick={handleToggleSettings}
+        />
+        {renderSaveButton()}
+      </div>
+
+      {/* Auth alert for both board types */}
+      {!isLoggedIn && (
         <Alert
           title="Sign in required"
           description="Sign in to your Boardsesh account to save your climb."
@@ -269,96 +472,71 @@ export default function CreateClimbForm({ boardDetails, angle, forkFrames, forkN
           showIcon
           className={styles.authAlert}
           action={
-            <Button size="small" type="primary" onClick={() => setShowAuthModal(true)}>
-              Sign In
-            </Button>
+            boardType === 'aurora' ? (
+              <Button size="small" type="primary" onClick={() => setShowAuthModal(true)}>
+                Sign In
+              </Button>
+            ) : (
+              <Link href="/api/auth/signin">
+                <Button size="small" type="primary">
+                  Sign In
+                </Button>
+              </Link>
+            )
           }
         />
       )}
 
-      {/* Main Content - matches play view layout */}
+      {/* MoonBoard OCR errors */}
+      {boardType === 'moonboard' && ocrError && (
+        <Alert
+          message="Import Failed"
+          description={ocrError}
+          type="error"
+          showIcon
+          closable
+          onClose={() => setOcrError(null)}
+          className={styles.alertBanner}
+        />
+      )}
+
+      {boardType === 'moonboard' && ocrWarnings.length > 0 && (
+        <Alert
+          message="Import Warnings"
+          description={ocrWarnings.map((w, i) => <div key={i}>{w}</div>)}
+          type="warning"
+          showIcon
+          closable
+          onClose={() => setOcrWarnings([])}
+          className={styles.alertBanner}
+        />
+      )}
+
       <div className={styles.contentWrapper}>
-        {/* Title section - same position as play view */}
+        {/* Controls bar with draft toggle (all boards) and heatmap (Aurora only) */}
         <div className={styles.climbTitleContainer}>
-          <Flex gap={12} align="center">
-            {/* Left side: Editable Name and draft toggle stacked */}
-            <Flex vertical gap={0} className={styles.titleWrapper}>
-              {/* Row 1: Editable Title */}
-              {isEditingTitle ? (
-                <Flex gap={4} align="center">
-                  <Input
-                    ref={titleInputRef}
-                    value={editingName}
-                    onChange={(e) => setEditingName(e.target.value)}
-                    onKeyDown={handleTitleKeyDown}
-                    onBlur={handleSaveTitle}
-                    maxLength={100}
-                    placeholder="Enter climb name"
-                    size="small"
-                    className={styles.titleInput}
-                  />
-                  <Button
-                    type="text"
-                    icon={<CheckOutlined />}
-                    size="small"
-                    onMouseDown={(e) => {
-                      e.preventDefault();
-                      handleSaveTitle();
-                    }}
-                  />
-                  <Button
-                    type="text"
-                    icon={<CloseOutlined />}
-                    size="small"
-                    onMouseDown={(e) => {
-                      e.preventDefault();
-                      handleCancelEditTitle();
-                    }}
-                  />
-                </Flex>
-              ) : (
-                <Flex gap={4} align="center">
-                  <div
-                    className={styles.editableTitle}
-                    onClick={handleStartEditTitle}
-                    role="button"
-                    tabIndex={0}
-                    onKeyDown={(e) => e.key === 'Enter' && handleStartEditTitle()}
-                  >
-                    <Text className={styles.titleText}>
-                      {climbName || 'Tap to name your climb'}
-                    </Text>
-                    <EditOutlined className={styles.editIcon} />
-                  </div>
-                  <Tooltip title={showHeatmap ? 'Hide heatmap' : 'Show hold popularity heatmap'}>
-                    <Button
-                      type={showHeatmap ? 'primary' : 'text'}
-                      icon={<FireOutlined />}
-                      size="small"
-                      onClick={handleToggleHeatmap}
-                      danger={showHeatmap}
-                      className={styles.heatmapButton}
-                    />
-                  </Tooltip>
+          <Flex gap={8} align="center">
+            <Text type="secondary" className={styles.draftLabel}>
+              Draft
+            </Text>
+            <Switch
+              size="small"
+              checked={isDraft}
+              onChange={setIsDraft}
+            />
+            {/* Aurora-only: Heatmap toggle */}
+            {boardType === 'aurora' && (
+              <>
+                <Tooltip title={showHeatmap ? 'Hide heatmap' : 'Show hold popularity heatmap'}>
                   <Button
-                    type="text"
-                    icon={showSettingsPanel ? <CloseOutlined /> : <SettingOutlined />}
+                    type={showHeatmap ? 'primary' : 'text'}
+                    icon={<FireOutlined />}
                     size="small"
-                    onClick={handleToggleSettings}
-                    className={styles.settingsButton}
+                    onClick={handleToggleHeatmap}
+                    danger={showHeatmap}
+                    className={styles.heatmapButton}
                   />
-                </Flex>
-              )}
-              {/* Row 2: Draft toggle and heatmap opacity */}
-              <Flex gap={8} align="center">
-                <Text type="secondary" className={styles.draftLabel}>
-                  Draft
-                </Text>
-                <Switch
-                  size="small"
-                  checked={isDraft}
-                  onChange={setIsDraft}
-                />
+                </Tooltip>
                 {showHeatmap && (
                   <>
                     <Text type="secondary" className={styles.draftLabel}>
@@ -374,28 +552,39 @@ export default function CreateClimbForm({ boardDetails, angle, forkFrames, forkN
                     />
                   </>
                 )}
-              </Flex>
-            </Flex>
+              </>
+            )}
           </Flex>
         </div>
 
-        {/* Board section - fills remaining space like play view */}
+        {/* Board Section */}
         <div className={styles.boardContainer}>
           <div className={styles.boardWrapper}>
-            <BoardRenderer
-              boardDetails={boardDetails}
-              litUpHoldsMap={litUpHoldsMap}
-              mirrored={false}
-              onHoldClick={handleHoldClick}
-              fillHeight
-            />
-            <CreateClimbHeatmapOverlay
-              boardDetails={boardDetails}
-              angle={angle}
-              litUpHoldsMap={litUpHoldsMap}
-              opacity={heatmapOpacity}
-              enabled={showHeatmap}
-            />
+            {boardType === 'aurora' && boardDetails ? (
+              <>
+                <BoardRenderer
+                  boardDetails={boardDetails}
+                  litUpHoldsMap={litUpHoldsMap}
+                  mirrored={false}
+                  onHoldClick={handleHoldClick}
+                  fillHeight
+                />
+                <CreateClimbHeatmapOverlay
+                  boardDetails={boardDetails}
+                  angle={angle}
+                  litUpHoldsMap={litUpHoldsMap}
+                  opacity={heatmapOpacity}
+                  enabled={showHeatmap}
+                />
+              </>
+            ) : boardType === 'moonboard' && layoutFolder && holdSetImages ? (
+              <MoonBoardRenderer
+                layoutFolder={layoutFolder}
+                holdSetImages={holdSetImages}
+                litUpHoldsMap={litUpHoldsMap}
+                onHoldClick={handleHoldClick}
+              />
+            ) : null}
           </div>
 
           {/* Settings overlay panel */}
@@ -408,6 +597,46 @@ export default function CreateClimbForm({ boardDetails, angle, forkFrames, forkN
                 <Text strong>Climb Settings</Text>
               </div>
               <div className={styles.settingsPanelContent}>
+                {/* MoonBoard-specific: Angle, Grade and Benchmark */}
+                {boardType === 'moonboard' && (
+                  <>
+                    <div className={styles.settingsField}>
+                      <Text type="secondary" className={styles.settingsLabel}>
+                        Angle
+                      </Text>
+                      <Select
+                        value={selectedAngle}
+                        onChange={setSelectedAngle}
+                        options={MOONBOARD_ANGLES.map(a => ({ value: a, label: `${a}°` }))}
+                        className={styles.settingsGradeField}
+                      />
+                    </div>
+                    <div className={styles.settingsField}>
+                      <Text type="secondary" className={styles.settingsLabel}>
+                        Grade
+                      </Text>
+                      <Select
+                        placeholder="Select grade"
+                        value={userGrade}
+                        onChange={setUserGrade}
+                        options={MOONBOARD_GRADES.map(g => ({ value: g.value, label: g.label }))}
+                        className={styles.settingsGradeField}
+                        allowClear
+                      />
+                    </div>
+                    <div className={styles.settingsField}>
+                      <Flex gap={8} align="center">
+                        <Switch
+                          size="small"
+                          checked={isBenchmark}
+                          onChange={setIsBenchmark}
+                        />
+                        <Text>Benchmark</Text>
+                      </Flex>
+                    </div>
+                  </>
+                )}
+                {/* Common: Description */}
                 <div className={styles.settingsField}>
                   <Text type="secondary" className={styles.settingsLabel}>
                     Description (optional)
@@ -428,22 +657,72 @@ export default function CreateClimbForm({ boardDetails, angle, forkFrames, forkN
 
         {/* Hold counts bar at bottom */}
         <div className={styles.holdCountsBar}>
-          <Tag color={startingCount > 0 ? 'green' : 'default'}>Starting: {startingCount}/2</Tag>
-          <Tag color={finishCount > 0 ? 'magenta' : 'default'}>Finish: {finishCount}/2</Tag>
-          <Tag color={totalHolds > 0 ? 'blue' : 'default'}>Total: {totalHolds}</Tag>
-          <Button size="small" onClick={resetHolds} disabled={totalHolds === 0}>
-            Clear All
-          </Button>
+          <Space wrap size="small">
+            {boardType === 'aurora' ? (
+              <>
+                <Tag color={startingCount > 0 ? 'green' : 'default'}>Starting: {startingCount}/2</Tag>
+                <Tag color={finishCount > 0 ? 'magenta' : 'default'}>Finish: {finishCount}/2</Tag>
+                <Tag color={totalHolds > 0 ? 'blue' : 'default'}>Total: {totalHolds}</Tag>
+              </>
+            ) : (
+              <>
+                <Tag color={startingCount > 0 ? 'red' : 'default'}>Start: {startingCount}/2</Tag>
+                <Tag color={handCount > 0 ? 'blue' : 'default'}>Hand: {handCount}</Tag>
+                <Tag color={finishCount > 0 ? 'green' : 'default'}>Finish: {finishCount}/2</Tag>
+                <Tag color={totalHolds > 0 ? 'purple' : 'default'}>Total: {totalHolds}</Tag>
+              </>
+            )}
+          </Space>
+          <Space wrap size="small">
+            {totalHolds > 0 && (
+              <Button size="small" onClick={resetHolds}>
+                Clear
+              </Button>
+            )}
+            {/* MoonBoard-only: Import buttons */}
+            {boardType === 'moonboard' && (
+              <>
+                <Upload
+                  accept="image/png,image/jpeg,image/webp"
+                  showUploadList={false}
+                  beforeUpload={(file) => {
+                    handleOcrImport(file);
+                    return false;
+                  }}
+                  disabled={isOcrProcessing}
+                >
+                  <Button size="small" icon={isOcrProcessing ? <LoadingOutlined /> : <UploadOutlined />} disabled={isOcrProcessing}>
+                    {isOcrProcessing ? 'Processing...' : 'Import'}
+                  </Button>
+                </Upload>
+                <Link href={bulkImportUrl}>
+                  <Button size="small" icon={<ImportOutlined />}>Bulk</Button>
+                </Link>
+              </>
+            )}
+          </Space>
         </div>
       </div>
 
-      <AuthModal
-        open={showAuthModal}
-        onClose={() => setShowAuthModal(false)}
-        onSuccess={handleAuthSuccess}
-        title="Sign in to save your climb"
-        description="Create an account or sign in to save your climb to the board."
-      />
+      {/* MoonBoard validation hint */}
+      {boardType === 'moonboard' && !isValid && totalHolds > 0 && (
+        <div className={styles.validationBar}>
+          <Text type="secondary">
+            A valid climb needs at least 1 start hold and 1 finish hold
+          </Text>
+        </div>
+      )}
+
+      {/* Auth modal (Aurora only) */}
+      {boardType === 'aurora' && (
+        <AuthModal
+          open={showAuthModal}
+          onClose={() => setShowAuthModal(false)}
+          onSuccess={handleAuthSuccess}
+          title="Sign in to save your climb"
+          description="Create an account or sign in to save your climb to the board."
+        />
+      )}
     </div>
   );
 }
diff --git a/packages/web/app/components/create-climb/moonboard-create-climb-form.tsx b/packages/web/app/components/create-climb/moonboard-create-climb-form.tsx
deleted file mode 100644
index 815fde5c..00000000
--- a/packages/web/app/components/create-climb/moonboard-create-climb-form.tsx
+++ /dev/null
@@ -1,301 +0,0 @@
-'use client';
-
-import React, { useState } from 'react';
-import { Form, Input, Button, Typography, Tag, Alert, Upload, message, Space } from 'antd';
-import { UploadOutlined, LoadingOutlined, ImportOutlined, LoginOutlined, ArrowLeftOutlined, SaveOutlined } from '@ant-design/icons';
-import { useRouter, usePathname } from 'next/navigation';
-import Link from 'next/link';
-import { useSession } from 'next-auth/react';
-import MoonBoardRenderer from '../moonboard-renderer/moonboard-renderer';
-import { useMoonBoardCreateClimb } from './use-moonboard-create-climb';
-import { holdIdToCoordinate } from '@/app/lib/moonboard-config';
-import { parseScreenshot } from '@boardsesh/moonboard-ocr/browser';
-import { convertOcrHoldsToMap } from '@/app/lib/moonboard-climbs-db';
-import styles from './create-climb-form.module.css';
-
-const { TextArea } = Input;
-const { Text } = Typography;
-
-interface MoonBoardCreateClimbFormValues {
-  name: string;
-  description: string;
-}
-
-interface MoonBoardCreateClimbFormProps {
-  layoutFolder: string;
-  layoutId: number;
-  holdSetImages: string[];
-  angle: number;
-}
-
-export default function MoonBoardCreateClimbForm({
-  layoutFolder,
-  layoutId,
-  holdSetImages,
-  angle,
-}: MoonBoardCreateClimbFormProps) {
-  const router = useRouter();
-  const pathname = usePathname();
-  const { data: session } = useSession();
-
-  // Construct the bulk import URL (replace /create with /import)
-  const bulkImportUrl = pathname.replace(/\/create$/, '/import');
-
-  const {
-    litUpHoldsMap,
-    setLitUpHoldsMap,
-    handleHoldClick,
-    startingCount,
-    finishCount,
-    handCount,
-    totalHolds,
-    isValid,
-    resetHolds,
-  } = useMoonBoardCreateClimb();
-
-  const [form] = Form.useForm<MoonBoardCreateClimbFormValues>();
-  const [isSaving, setIsSaving] = useState(false);
-
-  // OCR import state
-  const [isOcrProcessing, setIsOcrProcessing] = useState(false);
-  const [ocrError, setOcrError] = useState<string | null>(null);
-  const [ocrWarnings, setOcrWarnings] = useState<string[]>([]);
-
-  const handleOcrImport = async (file: File) => {
-    setIsOcrProcessing(true);
-    setOcrError(null);
-    setOcrWarnings([]);
-
-    try {
-      const result = await parseScreenshot(file);
-
-      if (!result.success || !result.climb) {
-        setOcrError(result.error || 'Failed to parse screenshot');
-        return;
-      }
-
-      const climb = result.climb;
-      const warnings = [...result.warnings];
-
-      // Check angle mismatch
-      if (climb.angle !== angle) {
-        warnings.push(`Screenshot is for ${climb.angle}° but current page is ${angle}°. Holds imported anyway.`);
-      }
-
-      setOcrWarnings(warnings);
-
-      // Convert OCR holds to form state
-      const newHoldsMap = convertOcrHoldsToMap(climb.holds);
-      setLitUpHoldsMap(newHoldsMap);
-
-      // Build description with setter info
-      const descriptionParts: string[] = [];
-      if (climb.setter) descriptionParts.push(`Setter: ${climb.setter}`);
-      if (climb.userGrade) descriptionParts.push(`Grade: ${climb.userGrade}`);
-      if (climb.isBenchmark) descriptionParts.push('(Benchmark)');
-
-      // Populate form fields
-      form.setFieldsValue({
-        name: climb.name || '',
-        description: descriptionParts.join('\n'),
-      });
-    } catch (error) {
-      setOcrError(error instanceof Error ? error.message : 'Unknown error during OCR');
-    } finally {
-      setIsOcrProcessing(false);
-    }
-  };
-
-  const handleSubmit = async (values: MoonBoardCreateClimbFormValues) => {
-    if (!isValid) {
-      return;
-    }
-
-    if (!session?.user?.id) {
-      message.error('Please log in to save climbs');
-      return;
-    }
-
-    setIsSaving(true);
-
-    try {
-      // Convert holds to coordinate format for storage
-      const holds = {
-        start: Object.entries(litUpHoldsMap)
-          .filter(([, hold]) => hold.state === 'STARTING')
-          .map(([id]) => holdIdToCoordinate(Number(id))),
-        hand: Object.entries(litUpHoldsMap)
-          .filter(([, hold]) => hold.state === 'HAND')
-          .map(([id]) => holdIdToCoordinate(Number(id))),
-        finish: Object.entries(litUpHoldsMap)
-          .filter(([, hold]) => hold.state === 'FINISH')
-          .map(([id]) => holdIdToCoordinate(Number(id))),
-      };
-
-      const response = await fetch('/api/v1/moonboard/proxy/saveClimb', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({
-          options: {
-            layout_id: layoutId,
-            user_id: session.user.id,
-            name: values.name,
-            description: values.description || '',
-            holds,
-            angle,
-          },
-        }),
-      });
-
-      if (!response.ok) {
-        const errorData = await response.json().catch(() => ({}));
-        throw new Error(errorData.error || 'Failed to save climb');
-      }
-
-      message.success('Climb saved to database!');
-
-      // Navigate back to the list
-      const listUrl = pathname.replace(/\/create$/, '/list');
-      router.push(listUrl);
-    } catch (error) {
-      console.error('Failed to save climb:', error);
-      message.error(error instanceof Error ? error.message : 'Failed to save climb. Please try again.');
-    } finally {
-      setIsSaving(false);
-    }
-  };
-
-  const handleCancel = () => {
-    router.back();
-  };
-
-  return (
-    <div className={styles.pageContainer}>
-      {/* Header with Back and Save buttons */}
-      <div className={styles.createHeader}>
-        <Button icon={<ArrowLeftOutlined />} onClick={handleCancel}>
-          Back
-        </Button>
-        <Form form={form} component={false}>
-          <Form.Item name="name" noStyle>
-            <Input
-              placeholder="Climb name"
-              maxLength={100}
-              className={styles.headerNameInput}
-              variant="borderless"
-            />
-          </Form.Item>
-        </Form>
-        {!session?.user ? (
-          <Link href="/api/auth/signin">
-            <Button type="primary" icon={<LoginOutlined />}>
-              Log in to Save
-            </Button>
-          </Link>
-        ) : (
-          <Button
-            type="primary"
-            icon={<SaveOutlined />}
-            loading={isSaving}
-            disabled={!isValid || isSaving}
-            onClick={() => form.submit()}
-          >
-            {isSaving ? 'Saving...' : 'Save'}
-          </Button>
-        )}
-      </div>
-
-      {ocrError && (
-        <Alert
-          message="Import Failed"
-          description={ocrError}
-          type="error"
-          showIcon
-          closable
-          onClose={() => setOcrError(null)}
-          className={styles.alertBanner}
-        />
-      )}
-
-      {ocrWarnings.length > 0 && (
-        <Alert
-          message="Import Warnings"
-          description={ocrWarnings.map((w, i) => <div key={i}>{w}</div>)}
-          type="warning"
-          showIcon
-          closable
-          onClose={() => setOcrWarnings([])}
-          className={styles.alertBanner}
-        />
-      )}
-
-      <div className={styles.contentWrapper}>
-        {/* Board Section */}
-        <div className={styles.boardContainer}>
-          <MoonBoardRenderer
-            layoutFolder={layoutFolder}
-            holdSetImages={holdSetImages}
-            litUpHoldsMap={litUpHoldsMap}
-            onHoldClick={handleHoldClick}
-          />
-        </div>
-      </div>
-
-      {/* Bottom bar with hold counts and actions */}
-      <div className={styles.holdCountsBar}>
-        <Space wrap size="small">
-          <Tag color={startingCount > 0 ? 'red' : 'default'}>Start: {startingCount}/2</Tag>
-          <Tag color={handCount > 0 ? 'blue' : 'default'}>Hand: {handCount}</Tag>
-          <Tag color={finishCount > 0 ? 'green' : 'default'}>Finish: {finishCount}/2</Tag>
-          <Tag color={totalHolds > 0 ? 'purple' : 'default'}>Total: {totalHolds}</Tag>
-        </Space>
-        <Space wrap size="small">
-          {totalHolds > 0 && (
-            <Button size="small" onClick={resetHolds}>
-              Clear
-            </Button>
-          )}
-          <Upload
-            accept="image/png,image/jpeg,image/webp"
-            showUploadList={false}
-            beforeUpload={(file) => {
-              handleOcrImport(file);
-              return false;
-            }}
-            disabled={isOcrProcessing}
-          >
-            <Button size="small" icon={isOcrProcessing ? <LoadingOutlined /> : <UploadOutlined />} disabled={isOcrProcessing}>
-              {isOcrProcessing ? 'Processing...' : 'Import'}
-            </Button>
-          </Upload>
-          <Link href={bulkImportUrl}>
-            <Button size="small" icon={<ImportOutlined />}>Bulk</Button>
-          </Link>
-        </Space>
-      </div>
-
-      {!isValid && totalHolds > 0 && (
-        <div className={styles.validationBar}>
-          <Text type="secondary">
-            A valid climb needs at least 1 start hold and 1 finish hold
-          </Text>
-        </div>
-      )}
-
-      {/* Hidden form for submission */}
-      <Form
-        form={form}
-        onFinish={handleSubmit}
-        initialValues={{ name: '', description: '' }}
-        style={{ display: 'none' }}
-      >
-        <Form.Item name="name" rules={[{ required: true }]}>
-          <Input />
-        </Form.Item>
-        <Form.Item name="description">
-          <TextArea />
-        </Form.Item>
-      </Form>
-    </div>
-  );
-}
diff --git a/packages/web/app/lib/api-wrappers/aurora/saveClimb.ts b/packages/web/app/lib/api-wrappers/aurora/saveClimb.ts
index 72ec867c..2a8b243e 100644
--- a/packages/web/app/lib/api-wrappers/aurora/saveClimb.ts
+++ b/packages/web/app/lib/api-wrappers/aurora/saveClimb.ts
@@ -3,6 +3,7 @@ import { SaveClimbOptions } from './types';
 import { generateUuid } from './util';
 import { dbz } from '@/app/lib/db/db';
 import { UNIFIED_TABLES } from '@/app/lib/db/queries/util/table-select';
+import { boardClimbStats } from '@boardsesh/db/schema';
 import dayjs from 'dayjs';
 
 /**
@@ -69,3 +70,42 @@ export async function saveClimb(
     synced: false,
   };
 }
+
+/**
+ * Saves climb stats to the local database.
+ * Used for storing grade/difficulty information for locally created climbs.
+ */
+export interface SaveClimbStatsOptions {
+  climbUuid: string;
+  angle: number;
+  displayDifficulty: number;
+  benchmarkDifficulty?: number | null;
+}
+
+export async function saveClimbStats(
+  board: BoardName,
+  options: SaveClimbStatsOptions
+): Promise<void> {
+  await dbz
+    .insert(boardClimbStats)
+    .values({
+      boardType: board,
+      climbUuid: options.climbUuid,
+      angle: options.angle,
+      displayDifficulty: options.displayDifficulty,
+      benchmarkDifficulty: options.benchmarkDifficulty ?? null,
+      ascensionistCount: 0,
+      difficultyAverage: options.displayDifficulty,
+      qualityAverage: null,
+      faUsername: null,
+      faAt: null,
+    })
+    .onConflictDoUpdate({
+      target: [boardClimbStats.boardType, boardClimbStats.climbUuid, boardClimbStats.angle],
+      set: {
+        displayDifficulty: options.displayDifficulty,
+        benchmarkDifficulty: options.benchmarkDifficulty ?? null,
+        difficultyAverage: options.displayDifficulty,
+      },
+    });
+}
diff --git a/packages/web/app/lib/board-data.ts b/packages/web/app/lib/board-data.ts
index c37bfb01..9c3e41f1 100644
--- a/packages/web/app/lib/board-data.ts
+++ b/packages/web/app/lib/board-data.ts
@@ -125,29 +125,63 @@ export const ANGLES: Record<BoardName, Angle[]> = {
   moonboard: [...MOONBOARD_ANGLES],
 };
 
-export const TENSION_KILTER_GRADES = [
-  { difficulty_id: 10, difficulty_name: '4a/V0' },
-  { difficulty_id: 11, difficulty_name: '4b/V0' },
-  { difficulty_id: 12, difficulty_name: '4c/V0' },
-  { difficulty_id: 13, difficulty_name: '5a/V1' },
-  { difficulty_id: 14, difficulty_name: '5b/V1' },
-  { difficulty_id: 15, difficulty_name: '5c/V2' },
-  { difficulty_id: 16, difficulty_name: '6a/V3' },
-  { difficulty_id: 17, difficulty_name: '6a+/V3' },
-  { difficulty_id: 18, difficulty_name: '6b/V4' },
-  { difficulty_id: 19, difficulty_name: '6b+/V4' },
-  { difficulty_id: 20, difficulty_name: '6c/V5' },
-  { difficulty_id: 21, difficulty_name: '6c+/V5' },
-  { difficulty_id: 22, difficulty_name: '7a/V6' },
-  { difficulty_id: 23, difficulty_name: '7a+/V7' },
-  { difficulty_id: 24, difficulty_name: '7b/V8' },
-  { difficulty_id: 25, difficulty_name: '7b+/V8' },
-  { difficulty_id: 26, difficulty_name: '7c/V9' },
-  { difficulty_id: 27, difficulty_name: '7c+/V10' },
-  { difficulty_id: 28, difficulty_name: '8a/V11' },
-  { difficulty_id: 29, difficulty_name: '8a+/V12' },
-  { difficulty_id: 30, difficulty_name: '8b/V13' },
-  { difficulty_id: 31, difficulty_name: '8b+/V14' },
-  { difficulty_id: 32, difficulty_name: '8c/V15' },
-  { difficulty_id: 33, difficulty_name: '8c+/V16' },
-];
+// Unified grade system used by all boards
+// difficulty_id matches board_difficulty_grades table
+// font_grade is the Font/Fontainebleau grade (used for MoonBoard display)
+// difficulty_name includes both Font and V-grade (used for Aurora display)
+export const BOULDER_GRADES = [
+  { difficulty_id: 10, font_grade: '4a', v_grade: 'V0', difficulty_name: '4a/V0' },
+  { difficulty_id: 11, font_grade: '4b', v_grade: 'V0', difficulty_name: '4b/V0' },
+  { difficulty_id: 12, font_grade: '4c', v_grade: 'V0', difficulty_name: '4c/V0' },
+  { difficulty_id: 13, font_grade: '5a', v_grade: 'V1', difficulty_name: '5a/V1' },
+  { difficulty_id: 14, font_grade: '5b', v_grade: 'V1', difficulty_name: '5b/V1' },
+  { difficulty_id: 15, font_grade: '5c', v_grade: 'V2', difficulty_name: '5c/V2' },
+  { difficulty_id: 16, font_grade: '6a', v_grade: 'V3', difficulty_name: '6a/V3' },
+  { difficulty_id: 17, font_grade: '6a+', v_grade: 'V3', difficulty_name: '6a+/V3' },
+  { difficulty_id: 18, font_grade: '6b', v_grade: 'V4', difficulty_name: '6b/V4' },
+  { difficulty_id: 19, font_grade: '6b+', v_grade: 'V4', difficulty_name: '6b+/V4' },
+  { difficulty_id: 20, font_grade: '6c', v_grade: 'V5', difficulty_name: '6c/V5' },
+  { difficulty_id: 21, font_grade: '6c+', v_grade: 'V5', difficulty_name: '6c+/V5' },
+  { difficulty_id: 22, font_grade: '7a', v_grade: 'V6', difficulty_name: '7a/V6' },
+  { difficulty_id: 23, font_grade: '7a+', v_grade: 'V7', difficulty_name: '7a+/V7' },
+  { difficulty_id: 24, font_grade: '7b', v_grade: 'V8', difficulty_name: '7b/V8' },
+  { difficulty_id: 25, font_grade: '7b+', v_grade: 'V8', difficulty_name: '7b+/V8' },
+  { difficulty_id: 26, font_grade: '7c', v_grade: 'V9', difficulty_name: '7c/V9' },
+  { difficulty_id: 27, font_grade: '7c+', v_grade: 'V10', difficulty_name: '7c+/V10' },
+  { difficulty_id: 28, font_grade: '8a', v_grade: 'V11', difficulty_name: '8a/V11' },
+  { difficulty_id: 29, font_grade: '8a+', v_grade: 'V12', difficulty_name: '8a+/V12' },
+  { difficulty_id: 30, font_grade: '8b', v_grade: 'V13', difficulty_name: '8b/V13' },
+  { difficulty_id: 31, font_grade: '8b+', v_grade: 'V14', difficulty_name: '8b+/V14' },
+  { difficulty_id: 32, font_grade: '8c', v_grade: 'V15', difficulty_name: '8c/V15' },
+  { difficulty_id: 33, font_grade: '8c+', v_grade: 'V16', difficulty_name: '8c+/V16' },
+] as const;
+
+export type BoulderGrade = typeof BOULDER_GRADES[number];
+
+// Alias for backwards compatibility
+export const TENSION_KILTER_GRADES = BOULDER_GRADES;
+
+// MoonBoard only supports grades V3+ (6A and above)
+// Uses Font grade notation (uppercase) for display
+export const MOONBOARD_MIN_DIFFICULTY_ID = 16; // 6a/V3
+
+// Helper to get grades for a specific board
+export function getGradesForBoard(boardName: BoardName) {
+  if (boardName === 'moonboard') {
+    return BOULDER_GRADES.filter(g => g.difficulty_id >= MOONBOARD_MIN_DIFFICULTY_ID);
+  }
+  return BOULDER_GRADES;
+}
+
+// Helper to convert Font grade string to difficulty ID
+export function fontGradeToDifficultyId(fontGrade: string): number | null {
+  // Normalize to lowercase for comparison
+  const normalized = fontGrade.toLowerCase();
+  const grade = BOULDER_GRADES.find(g => g.font_grade === normalized);
+  return grade?.difficulty_id ?? null;
+}
+
+// Helper to get grade info by difficulty ID
+export function getGradeByDifficultyId(difficultyId: number): BoulderGrade | undefined {
+  return BOULDER_GRADES.find(g => g.difficulty_id === difficultyId);
+}
diff --git a/packages/web/app/lib/moonboard-config.ts b/packages/web/app/lib/moonboard-config.ts
index 938a17ae..250f9643 100644
--- a/packages/web/app/lib/moonboard-config.ts
+++ b/packages/web/app/lib/moonboard-config.ts
@@ -4,6 +4,28 @@
 // Feature flag - enabled by default
 export const MOONBOARD_ENABLED = true;
 
+// MoonBoard grades - uses uppercase Font notation for display
+// These grades match the board_difficulty_grades table and BOULDER_GRADES in board-data.ts
+// MoonBoard only supports V3+ (starting from 6a)
+export const MOONBOARD_GRADES = [
+  { value: '6A', label: '6A (V3)', difficultyId: 16 },
+  { value: '6A+', label: '6A+ (V3)', difficultyId: 17 },
+  { value: '6B', label: '6B (V4)', difficultyId: 18 },
+  { value: '6B+', label: '6B+ (V4)', difficultyId: 19 },
+  { value: '6C', label: '6C (V5)', difficultyId: 20 },
+  { value: '6C+', label: '6C+ (V5)', difficultyId: 21 },
+  { value: '7A', label: '7A (V6)', difficultyId: 22 },
+  { value: '7A+', label: '7A+ (V7)', difficultyId: 23 },
+  { value: '7B', label: '7B (V8)', difficultyId: 24 },
+  { value: '7B+', label: '7B+ (V8)', difficultyId: 25 },
+  { value: '7C', label: '7C (V9)', difficultyId: 26 },
+  { value: '7C+', label: '7C+ (V10)', difficultyId: 27 },
+  { value: '8A', label: '8A (V11)', difficultyId: 28 },
+  { value: '8A+', label: '8A+ (V12)', difficultyId: 29 },
+  { value: '8B', label: '8B (V13)', difficultyId: 30 },
+  { value: '8B+', label: '8B+ (V14)', difficultyId: 31 },
+] as const;
+
 // MoonBoard layout types (equivalent to Aurora "layouts")
 export const MOONBOARD_LAYOUTS = {
   'moonboard-2010': { id: 1, name: 'MoonBoard 2010', folder: 'moonboard2010' },

From 47b5a6fda906784ab370f15c593371b4806dc6eb Mon Sep 17 00:00:00 2001
From: Marco de Jongh <mdejongh@atlassian.com>
Date: Sat, 24 Jan 2026 11:25:23 +1100
Subject: [PATCH 05/21] fix: Fetch grade data from climb_stats for MoonBoard
 list view

Join with boardClimbStats and boardDifficultyGrades tables to show
the actual grade for MoonBoard climbs in the list view instead of
displaying 'V?' for all climbs.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .../[size_id]/[set_ids]/[angle]/list/page.tsx | 32 ++++++++++++++++---
 1 file changed, 28 insertions(+), 4 deletions(-)

diff --git a/packages/web/app/[board_name]/[layout_id]/[size_id]/[set_ids]/[angle]/list/page.tsx b/packages/web/app/[board_name]/[layout_id]/[size_id]/[set_ids]/[angle]/list/page.tsx
index 4bbd1821..9ddec83d 100644
--- a/packages/web/app/[board_name]/[layout_id]/[size_id]/[set_ids]/[angle]/list/page.tsx
+++ b/packages/web/app/[board_name]/[layout_id]/[size_id]/[set_ids]/[angle]/list/page.tsx
@@ -17,6 +17,7 @@ import { getMoonBoardDetails, MOONBOARD_HOLD_STATE_CODES } from '@/app/lib/moonb
 import { MAX_PAGE_SIZE } from '@/app/components/board-page/constants';
 import { dbz } from '@/app/lib/db/db';
 import { UNIFIED_TABLES } from '@/app/lib/db/queries/util/table-select';
+import { boardClimbStats, boardDifficultyGrades } from '@boardsesh/db/schema';
 import { eq, and, desc } from 'drizzle-orm';
 import type { LitUpHoldsMap, HoldState } from '@/app/components/board-renderer/types';
 
@@ -72,8 +73,30 @@ async function getMoonboardClimbs(layoutId: number, angle: number, limit: number
       angle: climbs.angle,
       setterUsername: climbs.setterUsername,
       createdAt: climbs.createdAt,
+      // Join with climb stats for grade info
+      displayDifficulty: boardClimbStats.displayDifficulty,
+      benchmarkDifficulty: boardClimbStats.benchmarkDifficulty,
+      qualityAverage: boardClimbStats.qualityAverage,
+      ascensionistCount: boardClimbStats.ascensionistCount,
+      // Join with difficulty grades for grade name
+      difficultyName: boardDifficultyGrades.boulderName,
     })
     .from(climbs)
+    .leftJoin(
+      boardClimbStats,
+      and(
+        eq(boardClimbStats.boardType, 'moonboard'),
+        eq(boardClimbStats.climbUuid, climbs.uuid),
+        eq(boardClimbStats.angle, angle)
+      )
+    )
+    .leftJoin(
+      boardDifficultyGrades,
+      and(
+        eq(boardDifficultyGrades.boardType, 'moonboard'),
+        eq(boardDifficultyGrades.difficulty, boardClimbStats.displayDifficulty)
+      )
+    )
     .where(
       and(
         eq(climbs.boardType, 'moonboard'),
@@ -91,13 +114,14 @@ async function getMoonboardClimbs(layoutId: number, angle: number, limit: number
     description: row.description || '',
     frames: row.frames || '',
     angle: row.angle || angle,
-    ascensionist_count: 0,
-    difficulty: 'V?',
-    quality_average: '0',
+    ascensionist_count: row.ascensionistCount || 0,
+    // Format difficulty as "6A" style if we have a grade name, otherwise show as project
+    difficulty: row.difficultyName ? `${row.difficultyName.toUpperCase()}` : '',
+    quality_average: row.qualityAverage ? String(row.qualityAverage) : '0',
     stars: 0,
     difficulty_error: '0',
     litUpHoldsMap: parseMoonboardFrames(row.frames || ''),
-    benchmark_difficulty: null,
+    benchmark_difficulty: row.benchmarkDifficulty ? String(row.benchmarkDifficulty) : null,
   }));
 }
 

From 67e7469fa9f5b904bb48b392235440f39f00a7f6 Mon Sep 17 00:00:00 2001
From: Marco de Jongh <mdejongh@atlassian.com>
Date: Sat, 24 Jan 2026 11:28:32 +1100
Subject: [PATCH 06/21] fix: Format MoonBoard grades correctly for ClimbTitle
 display

- Use getGradeByDifficultyId to get full grade info with V-grade
- Format difficulty as "6a/V3" style so ClimbTitle can extract V-grade
- Set quality_average to "3" when grade exists (required by hasGrade check)
- Removed redundant join with boardDifficultyGrades table

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .../[size_id]/[set_ids]/[angle]/list/page.tsx | 51 +++++++++----------
 1 file changed, 25 insertions(+), 26 deletions(-)

diff --git a/packages/web/app/[board_name]/[layout_id]/[size_id]/[set_ids]/[angle]/list/page.tsx b/packages/web/app/[board_name]/[layout_id]/[size_id]/[set_ids]/[angle]/list/page.tsx
index 9ddec83d..3002954e 100644
--- a/packages/web/app/[board_name]/[layout_id]/[size_id]/[set_ids]/[angle]/list/page.tsx
+++ b/packages/web/app/[board_name]/[layout_id]/[size_id]/[set_ids]/[angle]/list/page.tsx
@@ -17,8 +17,9 @@ import { getMoonBoardDetails, MOONBOARD_HOLD_STATE_CODES } from '@/app/lib/moonb
 import { MAX_PAGE_SIZE } from '@/app/components/board-page/constants';
 import { dbz } from '@/app/lib/db/db';
 import { UNIFIED_TABLES } from '@/app/lib/db/queries/util/table-select';
-import { boardClimbStats, boardDifficultyGrades } from '@boardsesh/db/schema';
+import { boardClimbStats } from '@boardsesh/db/schema';
 import { eq, and, desc } from 'drizzle-orm';
+import { getGradeByDifficultyId } from '@/app/lib/board-data';
 import type { LitUpHoldsMap, HoldState } from '@/app/components/board-renderer/types';
 
 // Helper to get board details for any board type
@@ -78,8 +79,6 @@ async function getMoonboardClimbs(layoutId: number, angle: number, limit: number
       benchmarkDifficulty: boardClimbStats.benchmarkDifficulty,
       qualityAverage: boardClimbStats.qualityAverage,
       ascensionistCount: boardClimbStats.ascensionistCount,
-      // Join with difficulty grades for grade name
-      difficultyName: boardDifficultyGrades.boulderName,
     })
     .from(climbs)
     .leftJoin(
@@ -90,13 +89,6 @@ async function getMoonboardClimbs(layoutId: number, angle: number, limit: number
         eq(boardClimbStats.angle, angle)
       )
     )
-    .leftJoin(
-      boardDifficultyGrades,
-      and(
-        eq(boardDifficultyGrades.boardType, 'moonboard'),
-        eq(boardDifficultyGrades.difficulty, boardClimbStats.displayDifficulty)
-      )
-    )
     .where(
       and(
         eq(climbs.boardType, 'moonboard'),
@@ -107,22 +99,29 @@ async function getMoonboardClimbs(layoutId: number, angle: number, limit: number
     .orderBy(desc(climbs.createdAt))
     .limit(limit);
 
-  return results.map((row) => ({
-    uuid: row.uuid,
-    setter_username: row.setterUsername || 'Unknown',
-    name: row.name || 'Unnamed Climb',
-    description: row.description || '',
-    frames: row.frames || '',
-    angle: row.angle || angle,
-    ascensionist_count: row.ascensionistCount || 0,
-    // Format difficulty as "6A" style if we have a grade name, otherwise show as project
-    difficulty: row.difficultyName ? `${row.difficultyName.toUpperCase()}` : '',
-    quality_average: row.qualityAverage ? String(row.qualityAverage) : '0',
-    stars: 0,
-    difficulty_error: '0',
-    litUpHoldsMap: parseMoonboardFrames(row.frames || ''),
-    benchmark_difficulty: row.benchmarkDifficulty ? String(row.benchmarkDifficulty) : null,
-  }));
+  return results.map((row) => {
+    // Look up grade info from the shared BOULDER_GRADES constant
+    const gradeInfo = row.displayDifficulty ? getGradeByDifficultyId(row.displayDifficulty) : undefined;
+
+    return {
+      uuid: row.uuid,
+      setter_username: row.setterUsername || 'Unknown',
+      name: row.name || 'Unnamed Climb',
+      description: row.description || '',
+      frames: row.frames || '',
+      angle: row.angle || angle,
+      ascensionist_count: row.ascensionistCount || 0,
+      // Format difficulty as "6a/V3" style for ClimbTitle to extract V-grade
+      difficulty: gradeInfo ? gradeInfo.difficulty_name : '',
+      // Set quality_average to "3" when we have a grade so ClimbTitle shows it
+      // (hasGrade check requires quality_average && quality_average !== '0')
+      quality_average: gradeInfo ? (row.qualityAverage ? String(row.qualityAverage) : '3') : '0',
+      stars: 0,
+      difficulty_error: '0',
+      litUpHoldsMap: parseMoonboardFrames(row.frames || ''),
+      benchmark_difficulty: row.benchmarkDifficulty ? String(row.benchmarkDifficulty) : null,
+    };
+  });
 }
 
 export default async function DynamicResultsPage(props: {

From 318c7873c37df23b9c4625fe71552c28126f3992 Mon Sep 17 00:00:00 2001
From: Marco de Jongh <mdejongh@atlassian.com>
Date: Sat, 24 Jan 2026 11:31:23 +1100
Subject: [PATCH 07/21] fix: Round difficultyId when looking up grade (handle
 doublePrecision)

The displayDifficulty column is stored as doublePrecision in the database
which may return values like 16.0 instead of 16. Round to nearest integer
for the lookup.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 packages/web/app/lib/board-data.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/web/app/lib/board-data.ts b/packages/web/app/lib/board-data.ts
index 9c3e41f1..636f5ed2 100644
--- a/packages/web/app/lib/board-data.ts
+++ b/packages/web/app/lib/board-data.ts
@@ -182,6 +182,8 @@ export function fontGradeToDifficultyId(fontGrade: string): number | null {
 }
 
 // Helper to get grade info by difficulty ID
+// Note: difficultyId may come from database as a float (doublePrecision), so we round it
 export function getGradeByDifficultyId(difficultyId: number): BoulderGrade | undefined {
-  return BOULDER_GRADES.find(g => g.difficulty_id === difficultyId);
+  const roundedId = Math.round(difficultyId);
+  return BOULDER_GRADES.find(g => g.difficulty_id === roundedId);
 }

From 2311e23ad356abbb09d27326854e41075910cb8c Mon Sep 17 00:00:00 2001
From: Marco de Jongh <mdejongh@atlassian.com>
Date: Sat, 24 Jan 2026 11:34:04 +1100
Subject: [PATCH 08/21] debug: Add logging for MoonBoard grade save and list

Temporary logging to debug why grades aren't showing in list view:
- Log user_grade and difficultyId in save API
- Log saveClimbStats call
- Log displayDifficulty and gradeInfo in list query

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .../[layout_id]/[size_id]/[set_ids]/[angle]/list/page.tsx      | 3 +++
 packages/web/app/api/v1/[board_name]/proxy/saveClimb/route.ts  | 2 ++
 packages/web/app/lib/api-wrappers/aurora/saveClimb.ts          | 2 ++
 3 files changed, 7 insertions(+)

diff --git a/packages/web/app/[board_name]/[layout_id]/[size_id]/[set_ids]/[angle]/list/page.tsx b/packages/web/app/[board_name]/[layout_id]/[size_id]/[set_ids]/[angle]/list/page.tsx
index 3002954e..3c24c764 100644
--- a/packages/web/app/[board_name]/[layout_id]/[size_id]/[set_ids]/[angle]/list/page.tsx
+++ b/packages/web/app/[board_name]/[layout_id]/[size_id]/[set_ids]/[angle]/list/page.tsx
@@ -103,6 +103,9 @@ async function getMoonboardClimbs(layoutId: number, angle: number, limit: number
     // Look up grade info from the shared BOULDER_GRADES constant
     const gradeInfo = row.displayDifficulty ? getGradeByDifficultyId(row.displayDifficulty) : undefined;
 
+    // Debug logging
+    console.log('[MoonBoard List] Climb:', row.name, 'displayDifficulty:', row.displayDifficulty, 'gradeInfo:', gradeInfo);
+
     return {
       uuid: row.uuid,
       setter_username: row.setterUsername || 'Unknown',
diff --git a/packages/web/app/api/v1/[board_name]/proxy/saveClimb/route.ts b/packages/web/app/api/v1/[board_name]/proxy/saveClimb/route.ts
index 772626a6..84e60623 100644
--- a/packages/web/app/api/v1/[board_name]/proxy/saveClimb/route.ts
+++ b/packages/web/app/api/v1/[board_name]/proxy/saveClimb/route.ts
@@ -69,8 +69,10 @@ export async function POST(request: Request, props: { params: Promise<{ board_na
       });
 
       // If a grade was provided, create climb stats
+      console.log('[saveClimb API] user_grade:', validatedData.options.user_grade);
       if (validatedData.options.user_grade) {
         const difficultyId = fontGradeToDifficultyId(validatedData.options.user_grade);
+        console.log('[saveClimb API] difficultyId:', difficultyId);
         if (difficultyId) {
           await saveClimbStats('moonboard', {
             climbUuid: response.uuid,
diff --git a/packages/web/app/lib/api-wrappers/aurora/saveClimb.ts b/packages/web/app/lib/api-wrappers/aurora/saveClimb.ts
index 2a8b243e..6c394bd5 100644
--- a/packages/web/app/lib/api-wrappers/aurora/saveClimb.ts
+++ b/packages/web/app/lib/api-wrappers/aurora/saveClimb.ts
@@ -86,6 +86,8 @@ export async function saveClimbStats(
   board: BoardName,
   options: SaveClimbStatsOptions
 ): Promise<void> {
+  console.log('[saveClimbStats] Saving stats:', { board, ...options });
+
   await dbz
     .insert(boardClimbStats)
     .values({

From 4229cf58cde72a738a6d62c0e332f01c6d75fd48 Mon Sep 17 00:00:00 2001
From: Marco de Jongh <mdejongh@atlassian.com>
Date: Sat, 24 Jan 2026 11:37:25 +1100
Subject: [PATCH 09/21] chore: Remove debug logging for MoonBoard grade
 save/list

Grade saving and display is now working correctly.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .../[layout_id]/[size_id]/[set_ids]/[angle]/list/page.tsx      | 3 ---
 packages/web/app/api/v1/[board_name]/proxy/saveClimb/route.ts  | 2 --
 packages/web/app/lib/api-wrappers/aurora/saveClimb.ts          | 2 --
 3 files changed, 7 deletions(-)

diff --git a/packages/web/app/[board_name]/[layout_id]/[size_id]/[set_ids]/[angle]/list/page.tsx b/packages/web/app/[board_name]/[layout_id]/[size_id]/[set_ids]/[angle]/list/page.tsx
index 3c24c764..3002954e 100644
--- a/packages/web/app/[board_name]/[layout_id]/[size_id]/[set_ids]/[angle]/list/page.tsx
+++ b/packages/web/app/[board_name]/[layout_id]/[size_id]/[set_ids]/[angle]/list/page.tsx
@@ -103,9 +103,6 @@ async function getMoonboardClimbs(layoutId: number, angle: number, limit: number
     // Look up grade info from the shared BOULDER_GRADES constant
     const gradeInfo = row.displayDifficulty ? getGradeByDifficultyId(row.displayDifficulty) : undefined;
 
-    // Debug logging
-    console.log('[MoonBoard List] Climb:', row.name, 'displayDifficulty:', row.displayDifficulty, 'gradeInfo:', gradeInfo);
-
     return {
       uuid: row.uuid,
       setter_username: row.setterUsername || 'Unknown',
diff --git a/packages/web/app/api/v1/[board_name]/proxy/saveClimb/route.ts b/packages/web/app/api/v1/[board_name]/proxy/saveClimb/route.ts
index 84e60623..772626a6 100644
--- a/packages/web/app/api/v1/[board_name]/proxy/saveClimb/route.ts
+++ b/packages/web/app/api/v1/[board_name]/proxy/saveClimb/route.ts
@@ -69,10 +69,8 @@ export async function POST(request: Request, props: { params: Promise<{ board_na
       });
 
       // If a grade was provided, create climb stats
-      console.log('[saveClimb API] user_grade:', validatedData.options.user_grade);
       if (validatedData.options.user_grade) {
         const difficultyId = fontGradeToDifficultyId(validatedData.options.user_grade);
-        console.log('[saveClimb API] difficultyId:', difficultyId);
         if (difficultyId) {
           await saveClimbStats('moonboard', {
             climbUuid: response.uuid,
diff --git a/packages/web/app/lib/api-wrappers/aurora/saveClimb.ts b/packages/web/app/lib/api-wrappers/aurora/saveClimb.ts
index 6c394bd5..2a8b243e 100644
--- a/packages/web/app/lib/api-wrappers/aurora/saveClimb.ts
+++ b/packages/web/app/lib/api-wrappers/aurora/saveClimb.ts
@@ -86,8 +86,6 @@ export async function saveClimbStats(
   board: BoardName,
   options: SaveClimbStatsOptions
 ): Promise<void> {
-  console.log('[saveClimbStats] Saving stats:', { board, ...options });
-
   await dbz
     .insert(boardClimbStats)
     .values({

From e6dfe100ab0646dc633dcd9a7f137650bad6a32b Mon Sep 17 00:00:00 2001
From: Marco de Jongh <mdejongh@atlassian.com>
Date: Sat, 24 Jan 2026 11:57:27 +1100
Subject: [PATCH 10/21] fix: Save setter name and grade from MoonBoard bulk
 import

- Add setter_username field to SaveClimbOptions interface
- Update API schema to accept setter field from client
- Save setterUsername to database in saveClimb function
- Send setter, user_grade, and is_benchmark from bulk import client
- Fix fontGradeToDifficultyId to handle OCR grade formats like "6A/V3"

The OCR returns grades in combined format (e.g., "7B+/V8") which wasn't
being parsed correctly. Now extracts just the Font grade portion before
looking up the difficulty ID.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .../web/app/api/v1/[board_name]/proxy/saveClimb/route.ts  | 2 ++
 .../components/moonboard-import/moonboard-bulk-import.tsx | 3 +++
 packages/web/app/lib/api-wrappers/aurora/saveClimb.ts     | 2 ++
 packages/web/app/lib/api-wrappers/aurora/types.ts         | 1 +
 packages/web/app/lib/board-data.ts                        | 8 +++++++-
 5 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/packages/web/app/api/v1/[board_name]/proxy/saveClimb/route.ts b/packages/web/app/api/v1/[board_name]/proxy/saveClimb/route.ts
index 772626a6..bd402928 100644
--- a/packages/web/app/api/v1/[board_name]/proxy/saveClimb/route.ts
+++ b/packages/web/app/api/v1/[board_name]/proxy/saveClimb/route.ts
@@ -40,6 +40,7 @@ const saveMoonBoardClimbSchema = z.object({
       is_draft: z.boolean().optional().default(false),
       user_grade: z.string().optional(), // Font grade like "6A", "7B+"
       is_benchmark: z.boolean().optional().default(false),
+      setter: z.string().optional(), // Setter username from OCR
     })
     .strict(),
 });
@@ -66,6 +67,7 @@ export async function POST(request: Request, props: { params: Promise<{ board_na
         is_draft: validatedData.options.is_draft ?? false,
         frames_count: 1,
         frames_pace: 0,
+        setter_username: validatedData.options.setter,
       });
 
       // If a grade was provided, create climb stats
diff --git a/packages/web/app/components/moonboard-import/moonboard-bulk-import.tsx b/packages/web/app/components/moonboard-import/moonboard-bulk-import.tsx
index 04877dd1..c5479316 100644
--- a/packages/web/app/components/moonboard-import/moonboard-bulk-import.tsx
+++ b/packages/web/app/components/moonboard-import/moonboard-bulk-import.tsx
@@ -174,6 +174,9 @@ export default function MoonBoardBulkImport({
                 description: `Setter: ${climb.setter}\nGrade: ${climb.userGrade}${climb.isBenchmark ? '\n(Benchmark)' : ''}`,
                 holds: climb.holds,
                 angle: climb.angle,
+                setter: climb.setter,
+                user_grade: climb.userGrade,
+                is_benchmark: climb.isBenchmark,
               },
             }),
           });
diff --git a/packages/web/app/lib/api-wrappers/aurora/saveClimb.ts b/packages/web/app/lib/api-wrappers/aurora/saveClimb.ts
index 2a8b243e..903b37a2 100644
--- a/packages/web/app/lib/api-wrappers/aurora/saveClimb.ts
+++ b/packages/web/app/lib/api-wrappers/aurora/saveClimb.ts
@@ -34,6 +34,7 @@ export async function saveClimb(
       layoutId: options.layout_id,
       userId: options.user_id, // NextAuth user ID
       setterId: null, // No Aurora user ID
+      setterUsername: options.setter_username || null,
       name: options.name,
       description: options.description || '',
       angle: options.angle,
@@ -52,6 +53,7 @@ export async function saveClimb(
         layoutId: options.layout_id,
         userId: options.user_id,
         setterId: null,
+        setterUsername: options.setter_username || null,
         name: options.name,
         description: options.description || '',
         angle: options.angle,
diff --git a/packages/web/app/lib/api-wrappers/aurora/types.ts b/packages/web/app/lib/api-wrappers/aurora/types.ts
index fc3edbd1..1e4c012a 100644
--- a/packages/web/app/lib/api-wrappers/aurora/types.ts
+++ b/packages/web/app/lib/api-wrappers/aurora/types.ts
@@ -108,6 +108,7 @@ export interface SaveClimbOptions {
   frames_count?: number;
   frames_pace?: number;
   angle: number;
+  setter_username?: string;
 }
 export const HOST_BASES: Record<AuroraBoardName, string> = {
   // aurora: 'auroraboardapp',
diff --git a/packages/web/app/lib/board-data.ts b/packages/web/app/lib/board-data.ts
index 636f5ed2..c9039c98 100644
--- a/packages/web/app/lib/board-data.ts
+++ b/packages/web/app/lib/board-data.ts
@@ -174,9 +174,15 @@ export function getGradesForBoard(boardName: BoardName) {
 }
 
 // Helper to convert Font grade string to difficulty ID
+// Handles various formats from OCR:
+// - "6a", "7b+" (lowercase Font grade)
+// - "6A", "7B+" (uppercase Font grade)
+// - "6A/V3", "7B+/V8" (combined Font + V-grade from MoonBoard OCR)
 export function fontGradeToDifficultyId(fontGrade: string): number | null {
+  // Extract just the Font grade portion if combined with V-grade (e.g., "6A/V3" -> "6A")
+  const fontPart = fontGrade.split('/')[0].trim();
   // Normalize to lowercase for comparison
-  const normalized = fontGrade.toLowerCase();
+  const normalized = fontPart.toLowerCase();
   const grade = BOULDER_GRADES.find(g => g.font_grade === normalized);
   return grade?.difficulty_id ?? null;
 }

From c3cfbe873d17558e30485dd281b512dd73df07ab Mon Sep 17 00:00:00 2001
From: Marco de Jongh <mdejongh@atlassian.com>
Date: Sat, 24 Jan 2026 12:11:06 +1100
Subject: [PATCH 11/21] feat: Upload MoonBoard OCR images to S3 for test data

Add ability to upload OCR screenshots and parsed results to S3 for
improving the OCR library. Includes:

- Backend handler at /api/ocr-test-data for multipart upload
- Frontend service for fire-and-forget uploads
- Opt-in checkbox in bulk import UI (default enabled)
- S3 storage in moonboard-ocr-test-data/{timestamp}-{uuid}/

Upload is fire-and-forget - errors don't affect main save flow.
When S3 is not configured, upload is silently skipped.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .../backend/src/handlers/ocr-test-data.ts     | 219 ++++++++++++++++++
 packages/backend/src/server.ts                |   8 +
 .../moonboard-bulk-import.tsx                 |  72 ++++--
 packages/web/app/lib/moonboard-ocr-upload.ts  |  89 +++++++
 4 files changed, 371 insertions(+), 17 deletions(-)
 create mode 100644 packages/backend/src/handlers/ocr-test-data.ts
 create mode 100644 packages/web/app/lib/moonboard-ocr-upload.ts

diff --git a/packages/backend/src/handlers/ocr-test-data.ts b/packages/backend/src/handlers/ocr-test-data.ts
new file mode 100644
index 00000000..6b444ab0
--- /dev/null
+++ b/packages/backend/src/handlers/ocr-test-data.ts
@@ -0,0 +1,219 @@
+import type { IncomingMessage, ServerResponse } from 'http';
+import Busboy from 'busboy';
+import { v4 as uuidv4 } from 'uuid';
+import { applyCorsHeaders } from './cors';
+import { validateNextAuthToken } from '../middleware/auth';
+import { isS3Configured, uploadToS3 } from '../storage/s3';
+
+// OCR test data upload configuration
+const MAX_FILE_SIZE = 10 * 1024 * 1024; // 10MB
+const ALLOWED_MIME_TYPES = ['image/jpeg', 'image/png', 'image/webp'];
+const MIME_TO_EXT: Record<string, string> = {
+  'image/jpeg': 'jpg',
+  'image/png': 'png',
+  'image/webp': 'webp',
+};
+
+/**
+ * Extract auth token from Authorization header
+ */
+function extractAuthTokenFromHeader(req: IncomingMessage): string | null {
+  const authHeader = req.headers.authorization;
+  if (!authHeader) return null;
+
+  const match = authHeader.match(/^Bearer\s+(.+)$/i);
+  return match ? match[1] : null;
+}
+
+/**
+ * Generate a unique folder name for OCR test data
+ * Format: {ISO-timestamp}-{uuid}
+ */
+function generateFolderName(): string {
+  const timestamp = new Date().toISOString().replace(/[:.]/g, '-');
+  const uuid = uuidv4();
+  return `${timestamp}-${uuid}`;
+}
+
+/**
+ * OCR test data upload handler
+ * POST /api/ocr-test-data
+ *
+ * Expects multipart form data with:
+ * - image: the screenshot file
+ * - metadata: JSON string with OCR results and metadata
+ *
+ * Requires authentication via Authorization header (Bearer token).
+ * Any logged-in user can contribute test data.
+ *
+ * This is a fire-and-forget upload - errors are logged but don't fail the request.
+ */
+export async function handleOcrTestDataUpload(req: IncomingMessage, res: ServerResponse): Promise<void> {
+  if (!applyCorsHeaders(req, res)) return;
+
+  // Check if S3 is configured - if not, skip silently
+  if (!isS3Configured()) {
+    console.log('[OCR Test Data] S3 not configured, skipping upload');
+    res.writeHead(200, { 'Content-Type': 'application/json' });
+    res.end(JSON.stringify({ success: true, skipped: true, reason: 'S3 not configured' }));
+    return;
+  }
+
+  // Validate authentication
+  const token = extractAuthTokenFromHeader(req);
+  if (!token) {
+    res.writeHead(401, { 'Content-Type': 'application/json' });
+    res.end(JSON.stringify({ error: 'Authentication required' }));
+    return;
+  }
+
+  const authResult = await validateNextAuthToken(token);
+  if (!authResult) {
+    res.writeHead(401, { 'Content-Type': 'application/json' });
+    res.end(JSON.stringify({ error: 'Invalid or expired token' }));
+    return;
+  }
+
+  return new Promise<void>((resolve) => {
+    let busboy: ReturnType<typeof Busboy>;
+
+    try {
+      busboy = Busboy({
+        headers: req.headers as { 'content-type': string },
+        limits: { fileSize: MAX_FILE_SIZE, files: 1 },
+      });
+    } catch (err) {
+      res.writeHead(400, { 'Content-Type': 'application/json' });
+      res.end(JSON.stringify({ error: 'Invalid request format' }));
+      resolve();
+      return;
+    }
+
+    let metadataJson: string | undefined;
+    let fileBuffer: Buffer | undefined;
+    let mimeType: string | undefined;
+    let originalFilename: string | undefined;
+    let fileTruncated = false;
+    let invalidMimeType = false;
+
+    busboy.on('field', (name: string, value: string) => {
+      if (name === 'metadata') metadataJson = value;
+    });
+
+    busboy.on('file', (name: string, stream: NodeJS.ReadableStream, info: { filename: string; mimeType: string }) => {
+      if (name !== 'image') {
+        stream.resume();
+        return;
+      }
+
+      mimeType = info.mimeType;
+      originalFilename = info.filename;
+
+      if (!ALLOWED_MIME_TYPES.includes(mimeType)) {
+        invalidMimeType = true;
+        stream.resume();
+        return;
+      }
+
+      const chunks: Buffer[] = [];
+      stream.on('data', (chunk: Buffer) => chunks.push(chunk));
+      stream.on('end', () => {
+        fileBuffer = Buffer.concat(chunks);
+      });
+      stream.on('limit', () => {
+        fileTruncated = true;
+      });
+    });
+
+    busboy.on('finish', async () => {
+      // Validate file size
+      if (fileTruncated) {
+        res.writeHead(400, { 'Content-Type': 'application/json' });
+        res.end(JSON.stringify({ error: 'File size must be less than 10MB' }));
+        resolve();
+        return;
+      }
+
+      // Validate MIME type
+      if (invalidMimeType) {
+        res.writeHead(400, { 'Content-Type': 'application/json' });
+        res.end(JSON.stringify({ error: 'Only JPG, PNG, and WebP images are allowed' }));
+        resolve();
+        return;
+      }
+
+      // Validate file was uploaded
+      if (!fileBuffer || !mimeType) {
+        res.writeHead(400, { 'Content-Type': 'application/json' });
+        res.end(JSON.stringify({ error: 'No image file uploaded' }));
+        resolve();
+        return;
+      }
+
+      // Validate metadata was provided
+      if (!metadataJson) {
+        res.writeHead(400, { 'Content-Type': 'application/json' });
+        res.end(JSON.stringify({ error: 'Metadata is required' }));
+        resolve();
+        return;
+      }
+
+      // Parse metadata
+      let metadata: unknown;
+      try {
+        metadata = JSON.parse(metadataJson);
+      } catch {
+        res.writeHead(400, { 'Content-Type': 'application/json' });
+        res.end(JSON.stringify({ error: 'Invalid metadata JSON' }));
+        resolve();
+        return;
+      }
+
+      // Generate unique folder name
+      const folderName = generateFolderName();
+      const ext = MIME_TO_EXT[mimeType] || 'png';
+
+      try {
+        // Upload image to S3
+        const imageKey = `moonboard-ocr-test-data/${folderName}/image.${ext}`;
+        await uploadToS3(fileBuffer, imageKey, mimeType);
+
+        // Prepare and upload metadata JSON
+        const fullMetadata = {
+          version: 1,
+          uploadedAt: new Date().toISOString(),
+          ...(metadata as object),
+          imageMetadata: {
+            originalFilename: originalFilename || 'unknown',
+            mimeType,
+            fileSize: fileBuffer.length,
+          },
+        };
+
+        const metadataBuffer = Buffer.from(JSON.stringify(fullMetadata, null, 2), 'utf-8');
+        const metadataKey = `moonboard-ocr-test-data/${folderName}/parsed-result.json`;
+        await uploadToS3(metadataBuffer, metadataKey, 'application/json');
+
+        console.log(`[OCR Test Data] Uploaded test data to ${folderName}`);
+
+        res.writeHead(200, { 'Content-Type': 'application/json' });
+        res.end(JSON.stringify({ success: true, folder: folderName }));
+      } catch (uploadErr) {
+        // Log error but return success to not affect main flow
+        console.error('[OCR Test Data] Failed to upload:', uploadErr);
+        res.writeHead(200, { 'Content-Type': 'application/json' });
+        res.end(JSON.stringify({ success: true, skipped: true, reason: 'Upload failed' }));
+      }
+      resolve();
+    });
+
+    busboy.on('error', (err: Error) => {
+      console.error('[OCR Test Data] Busboy error:', err);
+      res.writeHead(400, { 'Content-Type': 'application/json' });
+      res.end(JSON.stringify({ error: err.message }));
+      resolve();
+    });
+
+    req.pipe(busboy);
+  });
+}
diff --git a/packages/backend/src/server.ts b/packages/backend/src/server.ts
index 55c25073..8d29878e 100644
--- a/packages/backend/src/server.ts
+++ b/packages/backend/src/server.ts
@@ -9,6 +9,7 @@ import { handleSessionJoin } from './handlers/join';
 import { handleAvatarUpload } from './handlers/avatars';
 import { handleStaticAvatar } from './handlers/static';
 import { handleSyncCron } from './handlers/sync';
+import { handleOcrTestDataUpload } from './handlers/ocr-test-data';
 import { createYogaInstance } from './graphql/yoga';
 import { setupWebSocketServer } from './websocket/setup';
 
@@ -68,6 +69,12 @@ export async function startServer(): Promise<{ wss: WebSocketServer; httpServer:
         return;
       }
 
+      // OCR test data upload endpoint (handle OPTIONS for CORS preflight)
+      if (pathname === '/api/ocr-test-data' && (req.method === 'POST' || req.method === 'OPTIONS')) {
+        await handleOcrTestDataUpload(req, res);
+        return;
+      }
+
       // Static avatar files
       if (pathname.startsWith('/static/avatars/')) {
         const fileName = pathname.slice('/static/avatars/'.length);
@@ -125,6 +132,7 @@ export async function startServer(): Promise<{ wss: WebSocketServer; httpServer:
     console.log(`  Join session: http://0.0.0.0:${PORT}/join/:sessionId`);
     console.log(`  Avatar upload: http://0.0.0.0:${PORT}/api/avatars`);
     console.log(`  Avatar files: http://0.0.0.0:${PORT}/static/avatars/`);
+    console.log(`  OCR test data: http://0.0.0.0:${PORT}/api/ocr-test-data`);
     console.log(`  Sync cron: http://0.0.0.0:${PORT}/sync-cron`);
   });
 
diff --git a/packages/web/app/components/moonboard-import/moonboard-bulk-import.tsx b/packages/web/app/components/moonboard-import/moonboard-bulk-import.tsx
index c5479316..9c1ab7a6 100644
--- a/packages/web/app/components/moonboard-import/moonboard-bulk-import.tsx
+++ b/packages/web/app/components/moonboard-import/moonboard-bulk-import.tsx
@@ -1,7 +1,7 @@
 'use client';
 
-import React, { useReducer, useCallback, useState } from 'react';
-import { Upload, Button, Alert, Progress, Typography, Row, Col, Space, Result, message } from 'antd';
+import React, { useReducer, useCallback, useState, useRef } from 'react';
+import { Upload, Button, Alert, Progress, Typography, Row, Col, Space, Result, message, Checkbox } from 'antd';
 import { InboxOutlined, SaveOutlined, ClearOutlined, ArrowLeftOutlined, LoginOutlined } from '@ant-design/icons';
 import { useRouter } from 'next/navigation';
 import Link from 'next/link';
@@ -12,6 +12,9 @@ import type { RcFile } from 'antd/es/upload/interface';
 import MoonBoardImportCard from './moonboard-import-card';
 import MoonBoardEditModal from './moonboard-edit-modal';
 import { convertOcrHoldsToMap } from '@/app/lib/moonboard-climbs-db';
+import { useBackendUrl } from '@/app/components/connection-manager/connection-settings-context';
+import { useWsAuthToken } from '@/app/hooks/use-ws-auth-token';
+import { uploadOcrTestDataBatch } from '@/app/lib/moonboard-ocr-upload';
 import styles from './moonboard-bulk-import.module.css';
 
 const { Dragger } = Upload;
@@ -113,11 +116,25 @@ export default function MoonBoardBulkImport({
   const { data: session } = useSession();
   const [state, dispatch] = useReducer(importReducer, initialState);
   const [isSaving, setIsSaving] = useState(false);
+  const [contributeImages, setContributeImages] = useState(true);
+
+  // Store original files for OCR test data upload
+  const filesMapRef = useRef<Map<string, File>>(new Map());
+
+  // Backend URL and auth token for OCR upload
+  const { backendUrl } = useBackendUrl();
+  const { token: authToken } = useWsAuthToken();
 
   const handleFilesUpload = useCallback(
     async (fileList: RcFile[]) => {
       if (fileList.length === 0) return;
 
+      // Store files for potential OCR test data upload
+      filesMapRef.current = new Map();
+      for (const file of fileList) {
+        filesMapRef.current.set(file.name, file);
+      }
+
       dispatch({ type: 'START_PROCESSING', total: fileList.length });
 
       const result = await parseMultipleScreenshots(fileList, (current, total, name) => {
@@ -159,6 +176,7 @@ export default function MoonBoardBulkImport({
     try {
       let savedCount = 0;
       const errors: string[] = [];
+      const savedClimbs: MoonBoardClimb[] = [];
 
       // Save each climb individually to the database
       for (const climb of state.climbs) {
@@ -186,6 +204,7 @@ export default function MoonBoardBulkImport({
             errors.push(`${climb.name}: ${errorData.error || 'Failed to save'}`);
           } else {
             savedCount++;
+            savedClimbs.push(climb);
           }
         } catch {
           errors.push(`${climb.name}: Network error`);
@@ -194,6 +213,16 @@ export default function MoonBoardBulkImport({
 
       if (savedCount > 0) {
         message.success(`Successfully saved ${savedCount} climb(s) to database`);
+
+        // Fire-and-forget: upload OCR test data if opted in
+        if (contributeImages && backendUrl && authToken && savedClimbs.length > 0) {
+          // Don't await - fire and forget
+          uploadOcrTestDataBatch(backendUrl, filesMapRef.current, savedClimbs, layoutId, angle, authToken).catch(
+            (err) => {
+              console.warn('[OCR Upload] Background upload failed:', err);
+            },
+          );
+        }
       }
       if (errors.length > 0) {
         message.warning(`Failed to save ${errors.length} climb(s)`);
@@ -202,6 +231,7 @@ export default function MoonBoardBulkImport({
 
       if (savedCount > 0) {
         dispatch({ type: 'RESET' });
+        filesMapRef.current = new Map();
         router.back();
       }
     } catch (error) {
@@ -210,7 +240,7 @@ export default function MoonBoardBulkImport({
     } finally {
       setIsSaving(false);
     }
-  }, [state.climbs, layoutId, session, router]);
+  }, [state.climbs, layoutId, session, router, contributeImages, backendUrl, authToken, angle]);
 
   const handleRemoveClimb = useCallback((sourceFile: string) => {
     dispatch({ type: 'REMOVE_CLIMB', sourceFile });
@@ -230,6 +260,7 @@ export default function MoonBoardBulkImport({
 
   const handleReset = useCallback(() => {
     dispatch({ type: 'RESET' });
+    filesMapRef.current = new Map();
   }, []);
 
   const handleBack = useCallback(() => {
@@ -344,20 +375,27 @@ export default function MoonBoardBulkImport({
           {/* Action Buttons */}
           {state.climbs.length > 0 && (
             <div className={styles.actions}>
-              <Space>
-                <Button
-                  type="primary"
-                  icon={<SaveOutlined />}
-                  onClick={handleSaveAll}
-                  size="large"
-                  loading={isSaving}
-                  disabled={isSaving || !session?.user}
-                >
-                  Save All ({state.climbs.length})
-                </Button>
-                <Button icon={<ClearOutlined />} onClick={handleReset}>
-                  Clear & Start Over
-                </Button>
+              <Space direction="vertical" size="middle">
+                <Space>
+                  <Button
+                    type="primary"
+                    icon={<SaveOutlined />}
+                    onClick={handleSaveAll}
+                    size="large"
+                    loading={isSaving}
+                    disabled={isSaving || !session?.user}
+                  >
+                    Save All ({state.climbs.length})
+                  </Button>
+                  <Button icon={<ClearOutlined />} onClick={handleReset}>
+                    Clear & Start Over
+                  </Button>
+                </Space>
+                {backendUrl && (
+                  <Checkbox checked={contributeImages} onChange={(e) => setContributeImages(e.target.checked)}>
+                    Contribute images to improve OCR accuracy
+                  </Checkbox>
+                )}
               </Space>
             </div>
           )}
diff --git a/packages/web/app/lib/moonboard-ocr-upload.ts b/packages/web/app/lib/moonboard-ocr-upload.ts
new file mode 100644
index 00000000..09e2af5d
--- /dev/null
+++ b/packages/web/app/lib/moonboard-ocr-upload.ts
@@ -0,0 +1,89 @@
+import type { MoonBoardClimb } from '@boardsesh/moonboard-ocr/browser';
+
+/**
+ * Upload OCR test data to S3 for training/testing purposes
+ *
+ * This is a fire-and-forget upload - errors are logged but don't affect the caller.
+ *
+ * @param backendUrl - The backend server URL (from NEXT_PUBLIC_WS_URL)
+ * @param image - The original screenshot file
+ * @param parsedResult - The OCR result for this image
+ * @param layoutId - The MoonBoard layout ID
+ * @param angle - The wall angle
+ * @param authToken - The user's auth token for authentication
+ */
+export async function uploadOcrTestData(
+  backendUrl: string,
+  image: File,
+  parsedResult: MoonBoardClimb,
+  layoutId: number,
+  angle: number,
+  authToken: string,
+): Promise<void> {
+  try {
+    const formData = new FormData();
+
+    // Add the image file
+    formData.append('image', image);
+
+    // Add metadata as JSON
+    const metadata = {
+      layoutId,
+      angle,
+      climb: parsedResult,
+    };
+    formData.append('metadata', JSON.stringify(metadata));
+
+    const response = await fetch(`${backendUrl}/api/ocr-test-data`, {
+      method: 'POST',
+      headers: {
+        Authorization: `Bearer ${authToken}`,
+      },
+      body: formData,
+    });
+
+    if (!response.ok) {
+      const errorData = await response.json().catch(() => ({}));
+      console.warn('[OCR Upload] Upload failed:', errorData.error || response.statusText);
+      return;
+    }
+
+    const result = await response.json();
+    if (result.skipped) {
+      console.log('[OCR Upload] Upload skipped:', result.reason);
+    } else {
+      console.log('[OCR Upload] Successfully uploaded test data');
+    }
+  } catch (error) {
+    // Fire-and-forget: log but don't throw
+    console.warn('[OCR Upload] Failed to upload test data:', error);
+  }
+}
+
+/**
+ * Upload multiple OCR test data files
+ *
+ * @param backendUrl - The backend server URL
+ * @param files - Map of source filename to File object
+ * @param climbs - Array of parsed climbs
+ * @param layoutId - The MoonBoard layout ID
+ * @param angle - The wall angle
+ * @param authToken - The user's auth token
+ */
+export async function uploadOcrTestDataBatch(
+  backendUrl: string,
+  files: Map<string, File>,
+  climbs: MoonBoardClimb[],
+  layoutId: number,
+  angle: number,
+  authToken: string,
+): Promise<void> {
+  // Upload each climb's corresponding file
+  // Do these sequentially to avoid overwhelming the server
+  for (const climb of climbs) {
+    const file = files.get(climb.sourceFile);
+    if (file) {
+      await uploadOcrTestData(backendUrl, file, climb, layoutId, angle, authToken);
+    }
+  }
+}

From a22f6026454351ac1b52af0182b0fdece26af401 Mon Sep 17 00:00:00 2001
From: Marco de Jongh <mdejongh@atlassian.com>
Date: Sat, 24 Jan 2026 12:16:11 +1100
Subject: [PATCH 12/21] feat: Add MoonBoard support to board validation and
 profile stats

- Add moonboard to BoardNameSchema validation in backend
- Create SUPPORTED_BOARDS constant in shared-schema as single source of truth
- Update backend resolvers to use SUPPORTED_BOARDS (ticks, climbs, playlists)
- Update isValidBoardName to include moonboard
- Add moonboard to HOLD_STATE_MAP in playlists resolver
- Update web validation to use centralized SUPPORTED_BOARDS
- Update profile page to show moonboard ascents
- Hide unsupported features (playlists, classify holds, fork) for moonboard
- Update tests to expect moonboard as valid board type

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .../src/__tests__/graphql-resolvers.test.ts       |  4 ++--
 .../backend/src/db/queries/util/table-select.ts   | 12 ++++++++----
 .../src/graphql/resolvers/climbs/queries.ts       | 11 ++++++-----
 .../src/graphql/resolvers/playlists/queries.ts    | 13 ++++++++++---
 .../src/graphql/resolvers/ticks/queries.ts        |  7 ++++---
 packages/backend/src/validation/schemas.ts        |  6 +++---
 packages/shared-schema/src/types.ts               |  5 ++++-
 packages/web/app/api/internal/favorites/route.ts  |  4 ++--
 .../__tests__/validation.test.ts                  |  5 +++--
 .../internal/hold-classifications/validation.ts   | 11 +++++++----
 packages/web/app/components/board-page/header.tsx | 15 +++++++++------
 .../climb-actions/actions/fork-action.tsx         |  4 +++-
 .../climb-actions/actions/playlist-action.tsx     |  5 ++++-
 .../persistent-session-context.tsx                |  5 +++--
 .../crusher/[user_id]/profile-page-content.tsx    |  5 +++--
 15 files changed, 71 insertions(+), 41 deletions(-)

diff --git a/packages/backend/src/__tests__/graphql-resolvers.test.ts b/packages/backend/src/__tests__/graphql-resolvers.test.ts
index 8607d6b6..56debabc 100644
--- a/packages/backend/src/__tests__/graphql-resolvers.test.ts
+++ b/packages/backend/src/__tests__/graphql-resolvers.test.ts
@@ -233,7 +233,7 @@ describe('GraphQL Resolver Input Validation', () => {
             climbUuid: 'test-uuid',
           },
         },
-        'Board name must be kilter or tension',
+        'Board name must be kilter, tension, or moonboard',
       );
     });
   });
@@ -330,7 +330,7 @@ describe('GraphQL Resolver Input Validation', () => {
             },
           },
         },
-        'Board name must be kilter, tension',
+        'Board name must be kilter, tension, or moonboard',
       );
     });
   });
diff --git a/packages/backend/src/db/queries/util/table-select.ts b/packages/backend/src/db/queries/util/table-select.ts
index 5686f37a..ac7707e2 100644
--- a/packages/backend/src/db/queries/util/table-select.ts
+++ b/packages/backend/src/db/queries/util/table-select.ts
@@ -16,8 +16,10 @@ import {
   boardWalls,
   boardTags,
 } from '@boardsesh/db';
+import type { BoardName } from '@boardsesh/shared-schema';
+import { SUPPORTED_BOARDS } from '@boardsesh/shared-schema';
 
-export type BoardName = 'kilter' | 'tension';
+export type { BoardName };
 
 // Unified tables - all queries should filter by board_type
 export const UNIFIED_TABLES = {
@@ -58,21 +60,23 @@ export function getUnifiedTable<K extends keyof UnifiedTableSet>(
  * @returns True if the board name is valid
  */
 export function isValidBoardName(boardName: string): boardName is BoardName {
-  return boardName === 'kilter' || boardName === 'tension';
+  return SUPPORTED_BOARDS.includes(boardName as BoardName);
 }
 
 /**
  * Extended board name type that includes moonboard for unified tables
+ * @deprecated BoardName now includes moonboard, use BoardName instead
  */
-export type UnifiedBoardName = BoardName | 'moonboard';
+export type UnifiedBoardName = BoardName;
 
 /**
  * Check if a board name is valid for unified tables (includes moonboard)
  * @param boardName The name to check
  * @returns True if the board name is valid for unified tables
+ * @deprecated Use isValidBoardName instead - it now includes moonboard
  */
 export function isValidUnifiedBoardName(boardName: string): boardName is UnifiedBoardName {
-  return boardName === 'kilter' || boardName === 'tension' || boardName === 'moonboard';
+  return isValidBoardName(boardName);
 }
 
 // =============================================================================
diff --git a/packages/backend/src/graphql/resolvers/climbs/queries.ts b/packages/backend/src/graphql/resolvers/climbs/queries.ts
index 211acbd4..0d5dff5b 100644
--- a/packages/backend/src/graphql/resolvers/climbs/queries.ts
+++ b/packages/backend/src/graphql/resolvers/climbs/queries.ts
@@ -1,4 +1,5 @@
-import type { ClimbSearchInput, ConnectionContext } from '@boardsesh/shared-schema';
+import type { ClimbSearchInput, ConnectionContext, BoardName } from '@boardsesh/shared-schema';
+import { SUPPORTED_BOARDS } from '@boardsesh/shared-schema';
 import type { ClimbSearchParams, ParsedBoardRouteParameters } from '../../../db/queries/climbs/index';
 import { getClimbByUuid } from '../../../db/queries/climbs/index';
 import { getSizeEdges } from '../../../db/queries/util/product-sizes-data';
@@ -20,7 +21,7 @@ export const climbQueries = {
 
     // Validate board name
     if (!isValidBoardName(input.boardName)) {
-      throw new Error(`Invalid board name: ${input.boardName}. Must be 'kilter' or 'tension'`);
+      throw new Error(`Invalid board name: ${input.boardName}. Must be one of: ${SUPPORTED_BOARDS.join(', ')}`);
     }
 
     // Get size edges for filtering
@@ -34,7 +35,7 @@ export const climbQueries = {
 
     // Build route parameters
     const params: ParsedBoardRouteParameters = {
-      board_name: input.boardName as 'kilter' | 'tension',
+      board_name: input.boardName as BoardName,
       layout_id: input.layoutId,
       size_id: input.sizeId,
       set_ids: setIds,
@@ -89,7 +90,7 @@ export const climbQueries = {
     validateInput(BoardNameSchema, boardName, 'boardName');
 
     if (!isValidBoardName(boardName)) {
-      throw new Error(`Invalid board name: ${boardName}. Must be 'kilter' or 'tension'`);
+      throw new Error(`Invalid board name: ${boardName}. Must be one of: ${SUPPORTED_BOARDS.join(', ')}`);
     }
 
     // Validate all parameters
@@ -101,7 +102,7 @@ export const climbQueries = {
     if (DEBUG) console.log('[climb] Fetching:', { boardName, layoutId, sizeId, setIds, angle, climbUuid });
 
     const climb = await getClimbByUuid({
-      board_name: boardName as 'kilter' | 'tension',
+      board_name: boardName as BoardName,
       layout_id: layoutId,
       size_id: sizeId,
       angle,
diff --git a/packages/backend/src/graphql/resolvers/playlists/queries.ts b/packages/backend/src/graphql/resolvers/playlists/queries.ts
index b776a8de..e6837a2c 100644
--- a/packages/backend/src/graphql/resolvers/playlists/queries.ts
+++ b/packages/backend/src/graphql/resolvers/playlists/queries.ts
@@ -1,5 +1,6 @@
 import { eq, and, inArray, desc, sql, or, isNull, asc } from 'drizzle-orm';
-import type { ConnectionContext, Climb } from '@boardsesh/shared-schema';
+import type { ConnectionContext, Climb, BoardName } from '@boardsesh/shared-schema';
+import { SUPPORTED_BOARDS } from '@boardsesh/shared-schema';
 import { db } from '../../../db/client';
 import * as dbSchema from '@boardsesh/db/schema';
 import { requireAuthenticated, validateInput } from '../shared/helpers';
@@ -17,7 +18,7 @@ import type { LitUpHoldsMap, HoldState } from '@boardsesh/shared-schema';
 // Hold state mapping for converting frames string to lit up holds map
 type HoldColor = string;
 type HoldCode = number;
-type BoardName = 'kilter' | 'tension';
+// BoardName is imported from @boardsesh/shared-schema
 
 const HOLD_STATE_MAP: Record<
   BoardName,
@@ -43,6 +44,12 @@ const HOLD_STATE_MAP: Record<
     7: { name: 'FINISH', displayColor: '#FF0000', color: '#FF0000' },
     8: { name: 'FOOT', displayColor: '#FF00FF', color: '#FF00FF' },
   },
+  // MoonBoard uses a different hold format - holds are identified by grid position
+  moonboard: {
+    1: { name: 'STARTING', color: '#00FF00' },
+    2: { name: 'HAND', color: '#0000FF' },
+    3: { name: 'FINISH', color: '#FF0000' },
+  },
 };
 
 function convertLitUpHoldsStringToMap(litUpHolds: string, board: BoardName): Record<number, LitUpHoldsMap> {
@@ -290,7 +297,7 @@ export const playlistQueries = {
 
     // Validate board name
     if (!isValidBoardName(boardName)) {
-      throw new Error(`Invalid board name: ${boardName}. Must be 'kilter' or 'tension'`);
+      throw new Error(`Invalid board name: ${boardName}. Must be one of: ${SUPPORTED_BOARDS.join(', ')}`);
     }
 
     // Get size edges for filtering
diff --git a/packages/backend/src/graphql/resolvers/ticks/queries.ts b/packages/backend/src/graphql/resolvers/ticks/queries.ts
index d6935c78..15d4b571 100644
--- a/packages/backend/src/graphql/resolvers/ticks/queries.ts
+++ b/packages/backend/src/graphql/resolvers/ticks/queries.ts
@@ -1,5 +1,6 @@
 import { eq, and, desc, inArray, sql, count } from 'drizzle-orm';
-import type { ConnectionContext } from '@boardsesh/shared-schema';
+import type { ConnectionContext, BoardName } from '@boardsesh/shared-schema';
+import { SUPPORTED_BOARDS } from '@boardsesh/shared-schema';
 import { db } from '../../../db/client';
 import * as dbSchema from '@boardsesh/db/schema';
 import { requireAuthenticated, validateInput } from '../shared/helpers';
@@ -423,7 +424,7 @@ export const tickQueries = {
       return { totalDistinctClimbs: 0, layoutStats: [] };
     }
 
-    const boardTypes = ['kilter', 'tension'] as const;
+    const boardTypes = SUPPORTED_BOARDS;
     const layoutStatsMap: Record<string, {
       boardType: string;
       layoutId: number | null;
@@ -432,7 +433,7 @@ export const tickQueries = {
     const allClimbUuids = new Set<string>();
 
     // Helper function to fetch stats for a single board type
-    const fetchBoardStats = async (boardType: 'kilter' | 'tension') => {
+    const fetchBoardStats = async (boardType: BoardName) => {
       // Run both queries in parallel for this board type
       const [gradeResults, distinctClimbs] = await Promise.all([
         // Get distinct climb counts grouped by layoutId and difficulty using SQL aggregation
diff --git a/packages/backend/src/validation/schemas.ts b/packages/backend/src/validation/schemas.ts
index 6bf10c87..88993997 100644
--- a/packages/backend/src/validation/schemas.ts
+++ b/packages/backend/src/validation/schemas.ts
@@ -148,10 +148,10 @@ export function validateInput<T>(schema: z.ZodSchema<T>, data: unknown, fieldNam
 // ============================================
 
 /**
- * Board name validation schema (kilter, tension)
+ * Board name validation schema (kilter, tension, moonboard)
  */
-export const BoardNameSchema = z.enum(['kilter', 'tension'], {
-  errorMap: () => ({ message: 'Board name must be kilter or tension' }),
+export const BoardNameSchema = z.enum(['kilter', 'tension', 'moonboard'], {
+  errorMap: () => ({ message: 'Board name must be kilter, tension, or moonboard' }),
 });
 
 // ============================================
diff --git a/packages/shared-schema/src/types.ts b/packages/shared-schema/src/types.ts
index 86501cc5..6acb5ca6 100644
--- a/packages/shared-schema/src/types.ts
+++ b/packages/shared-schema/src/types.ts
@@ -105,7 +105,10 @@ export type EventsReplayResponse = {
 // Board Configuration Types
 // ============================================
 
-export type BoardName = 'kilter' | 'tension';
+export type BoardName = 'kilter' | 'tension' | 'moonboard';
+
+// All supported board types - single source of truth
+export const SUPPORTED_BOARDS: BoardName[] = ['kilter', 'tension', 'moonboard'];
 
 export type Grade = {
   difficultyId: number;
diff --git a/packages/web/app/api/internal/favorites/route.ts b/packages/web/app/api/internal/favorites/route.ts
index d50aa517..e8e846a6 100644
--- a/packages/web/app/api/internal/favorites/route.ts
+++ b/packages/web/app/api/internal/favorites/route.ts
@@ -7,13 +7,13 @@ import { z } from "zod";
 import { authOptions } from "@/app/lib/auth/auth-options";
 
 const favoriteSchema = z.object({
-  boardName: z.enum(["kilter", "tension"]),
+  boardName: z.enum(["kilter", "tension", "moonboard"]),
   climbUuid: z.string().min(1),
   angle: z.number().int(),
 });
 
 const checkFavoriteSchema = z.object({
-  boardName: z.enum(["kilter", "tension"]),
+  boardName: z.enum(["kilter", "tension", "moonboard"]),
   climbUuids: z.array(z.string().min(1)),
   angle: z.number().int(),
 });
diff --git a/packages/web/app/api/internal/hold-classifications/__tests__/validation.test.ts b/packages/web/app/api/internal/hold-classifications/__tests__/validation.test.ts
index 74a92cdf..cc38e459 100644
--- a/packages/web/app/api/internal/hold-classifications/__tests__/validation.test.ts
+++ b/packages/web/app/api/internal/hold-classifications/__tests__/validation.test.ts
@@ -29,10 +29,10 @@ describe('hold-classifications validation', () => {
     it('should accept valid board types', () => {
       expect(isValidBoardType('kilter')).toBe(true);
       expect(isValidBoardType('tension')).toBe(true);
+      expect(isValidBoardType('moonboard')).toBe(true);
     });
 
     it('should reject invalid board types', () => {
-      expect(isValidBoardType('moonboard')).toBe(false);
       expect(isValidBoardType('invalid')).toBe(false);
       expect(isValidBoardType('')).toBe(false);
       expect(isValidBoardType(null)).toBe(false);
@@ -44,7 +44,8 @@ describe('hold-classifications validation', () => {
     it('should have correct board types in constant', () => {
       expect(VALID_BOARD_TYPES).toContain('kilter');
       expect(VALID_BOARD_TYPES).toContain('tension');
-      expect(VALID_BOARD_TYPES.length).toBe(2);
+      expect(VALID_BOARD_TYPES).toContain('moonboard');
+      expect(VALID_BOARD_TYPES.length).toBe(3);
     });
   });
 
diff --git a/packages/web/app/api/internal/hold-classifications/validation.ts b/packages/web/app/api/internal/hold-classifications/validation.ts
index 69cef980..d5cd3e07 100644
--- a/packages/web/app/api/internal/hold-classifications/validation.ts
+++ b/packages/web/app/api/internal/hold-classifications/validation.ts
@@ -1,6 +1,9 @@
-// Valid board types
-export const VALID_BOARD_TYPES = ['kilter', 'tension'] as const;
-export type ValidBoardType = (typeof VALID_BOARD_TYPES)[number];
+import { SUPPORTED_BOARDS } from '@/app/lib/board-data';
+import type { BoardName } from '@/app/lib/types';
+
+// Valid board types - use the centralized SUPPORTED_BOARDS constant
+export const VALID_BOARD_TYPES = SUPPORTED_BOARDS;
+export type ValidBoardType = BoardName;
 
 // Valid hold types matching the database enum
 export const VALID_HOLD_TYPES = ['jug', 'sloper', 'pinch', 'crimp', 'pocket'] as const;
@@ -20,7 +23,7 @@ export function parseIntSafe(value: string | null): number | null {
  * Validates board type against known boards
  */
 export function isValidBoardType(value: unknown): value is ValidBoardType {
-  return typeof value === 'string' && VALID_BOARD_TYPES.includes(value as ValidBoardType);
+  return typeof value === 'string' && (VALID_BOARD_TYPES as readonly string[]).includes(value);
 }
 
 /**
diff --git a/packages/web/app/components/board-page/header.tsx b/packages/web/app/components/board-page/header.tsx
index df15d8a9..39732339 100644
--- a/packages/web/app/components/board-page/header.tsx
+++ b/packages/web/app/components/board-page/header.tsx
@@ -113,18 +113,21 @@ export default function BoardSeshHeader({ boardDetails, angle }: BoardSeshHeader
     ? `/${boardDetails.board_name}/${generateLayoutSlug(boardDetails.layout_name)}/${generateSizeSlug(boardDetails.size_name)}/${generateSetSlug(boardDetails.set_names)}/${angle}/playlists`
     : null;
 
+  // Hide playlists and classify holds for moonboard (not yet supported)
+  const isMoonboard = boardDetails.board_name === 'moonboard';
+
   const userMenuItems: MenuProps['items'] = [
-    ...(playlistsUrl ? [{
+    ...(playlistsUrl && !isMoonboard ? [{
       key: 'playlists',
       icon: <TagOutlined />,
       label: <Link href={playlistsUrl}>My Playlists</Link>,
     }] : []),
-    {
+    ...(!isMoonboard ? [{
       key: 'classify-holds',
       icon: <AimOutlined />,
       label: 'Classify Holds',
       onClick: () => setShowHoldClassification(true),
-    },
+    }] : []),
     {
       key: 'profile',
       icon: <LineChartOutlined />,
@@ -157,18 +160,18 @@ export default function BoardSeshHeader({ boardDetails, angle }: BoardSeshHeader
       icon: <PlusOutlined />,
       label: <Link href={createClimbUrl}>Create Climb</Link>,
     }] : []),
-    ...(session?.user && playlistsUrl ? [{
+    ...(session?.user && playlistsUrl && !isMoonboard ? [{
       key: 'playlists',
       icon: <TagOutlined />,
       label: <Link href={playlistsUrl}>My Playlists</Link>,
     }] : []),
     ...(session?.user ? [
-      {
+      ...(!isMoonboard ? [{
         key: 'classify-holds',
         icon: <AimOutlined />,
         label: 'Classify Holds',
         onClick: () => setShowHoldClassification(true),
-      },
+      }] : []),
       {
         key: 'profile',
         icon: <LineChartOutlined />,
diff --git a/packages/web/app/components/climb-actions/actions/fork-action.tsx b/packages/web/app/components/climb-actions/actions/fork-action.tsx
index 983abe23..f45b3077 100644
--- a/packages/web/app/components/climb-actions/actions/fork-action.tsx
+++ b/packages/web/app/components/climb-actions/actions/fork-action.tsx
@@ -20,7 +20,9 @@ export function ForkAction({
   className,
   onComplete,
 }: ClimbActionProps): ClimbActionResult {
-  const canFork = !!(boardDetails.layout_name && boardDetails.size_name && boardDetails.set_names);
+  // Fork is not supported for moonboard yet
+  const isMoonboard = boardDetails.board_name === 'moonboard';
+  const canFork = !isMoonboard && !!(boardDetails.layout_name && boardDetails.size_name && boardDetails.set_names);
 
   const url = canFork
     ? constructCreateClimbUrl(
diff --git a/packages/web/app/components/climb-actions/actions/playlist-action.tsx b/packages/web/app/components/climb-actions/actions/playlist-action.tsx
index 41a9415d..94c6f3db 100644
--- a/packages/web/app/components/climb-actions/actions/playlist-action.tsx
+++ b/packages/web/app/components/climb-actions/actions/playlist-action.tsx
@@ -30,6 +30,9 @@ export function PlaylistAction({
   className,
   onComplete,
 }: ClimbActionProps): ClimbActionResult {
+  // Playlists not supported for moonboard yet
+  const isMoonboard = boardDetails.board_name === 'moonboard';
+
   const [showAuthModal, setShowAuthModal] = useState(false);
   const [popoverOpen, setPopoverOpen] = useState(false);
   const [showCreateForm, setShowCreateForm] = useState(false);
@@ -358,7 +361,7 @@ export function PlaylistAction({
     expandedContent,
     menuItem,
     key: 'playlist',
-    available: true,
+    available: !isMoonboard,
   };
 }
 
diff --git a/packages/web/app/components/persistent-session/persistent-session-context.tsx b/packages/web/app/components/persistent-session/persistent-session-context.tsx
index 18474422..69f7d6d2 100644
--- a/packages/web/app/components/persistent-session/persistent-session-context.tsx
+++ b/packages/web/app/components/persistent-session/persistent-session-context.tsx
@@ -20,6 +20,7 @@ import {
   SessionEvent,
   QueueState,
   EventsReplayResponse,
+  SUPPORTED_BOARDS,
 } from '@boardsesh/shared-schema';
 import { ClimbQueueItem as LocalClimbQueueItem } from '../queue-control/types';
 import { BoardDetails, ParsedBoardRouteParameters } from '@/app/lib/types';
@@ -60,8 +61,8 @@ function transformToSubscriptionEvent(event: QueueEvent): SubscriptionQueueEvent
 // Default backend URL from environment variable
 const DEFAULT_BACKEND_URL = process.env.NEXT_PUBLIC_WS_URL || null;
 
-// Board names to check if we're on a board route
-const BOARD_NAMES = ['kilter', 'tension'];
+// Board names to check if we're on a board route - use centralized constant
+const BOARD_NAMES = SUPPORTED_BOARDS;
 
 // Session type matching the GraphQL response
 export interface Session {
diff --git a/packages/web/app/crusher/[user_id]/profile-page-content.tsx b/packages/web/app/crusher/[user_id]/profile-page-content.tsx
index 7db589b4..9d4b9d94 100644
--- a/packages/web/app/crusher/[user_id]/profile-page-content.tsx
+++ b/packages/web/app/crusher/[user_id]/profile-page-content.tsx
@@ -36,6 +36,7 @@ import {
   type GetUserProfileStatsQueryResponse,
 } from '@/app/lib/graphql/operations';
 import { FONT_GRADE_COLORS, getGradeColorWithOpacity } from '@/app/lib/grade-colors';
+import { SUPPORTED_BOARDS } from '@/app/lib/board-data';
 
 dayjs.extend(isoWeek);
 dayjs.extend(isSameOrAfter);
@@ -129,8 +130,8 @@ const angleColors = [
 type TimeframeType = 'all' | 'lastYear' | 'lastMonth' | 'lastWeek' | 'custom';
 type AggregatedTimeframeType = 'today' | 'lastWeek' | 'lastMonth' | 'lastYear' | 'all';
 
-// Board types available in Boardsesh
-const BOARD_TYPES = ['kilter', 'tension'] as const;
+// Board types available in Boardsesh - use SUPPORTED_BOARDS from board-data
+const BOARD_TYPES = SUPPORTED_BOARDS;
 
 // Layout name mapping: boardType-layoutId -> display name
 const layoutNames: Record<string, string> = {

From 69e5ea58650938ac0ad6f22cb5d8d4b981a0ac7b Mon Sep 17 00:00:00 2001
From: Marco de Jongh <mdejongh@atlassian.com>
Date: Sat, 24 Jan 2026 12:22:39 +1100
Subject: [PATCH 13/21] fix: Use MoonBoard-specific board details for MoonBoard
 routes

MoonBoard uses grid-based rendering with its own configuration in
moonboard-config.ts, not the Aurora board product-sizes-data.ts.
Updated route pages to call getMoonBoardDetails() for MoonBoard
instead of getBoardDetails() which only supports Aurora boards.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .../[angle]/play/[climb_uuid]/page.tsx         | 18 +++++++++++++++---
 .../[set_ids]/[angle]/play/layout.tsx          | 11 +++++++++--
 .../[angle]/playlist/[playlist_uuid]/page.tsx  | 16 ++++++++++++++--
 .../[set_ids]/[angle]/playlists/page.tsx       | 16 ++++++++++++++--
 .../[angle]/view/[climb_uuid]/page.tsx         | 18 +++++++++++++++---
 5 files changed, 67 insertions(+), 12 deletions(-)

diff --git a/packages/web/app/[board_name]/[layout_id]/[size_id]/[set_ids]/[angle]/play/[climb_uuid]/page.tsx b/packages/web/app/[board_name]/[layout_id]/[size_id]/[set_ids]/[angle]/play/[climb_uuid]/page.tsx
index 8b77e22b..f323bdc3 100644
--- a/packages/web/app/[board_name]/[layout_id]/[size_id]/[set_ids]/[angle]/play/[climb_uuid]/page.tsx
+++ b/packages/web/app/[board_name]/[layout_id]/[size_id]/[set_ids]/[angle]/play/[climb_uuid]/page.tsx
@@ -1,19 +1,31 @@
 import React from 'react';
-import { BoardRouteParametersWithUuid } from '@/app/lib/types';
+import { BoardRouteParametersWithUuid, BoardDetails, ParsedBoardRouteParameters } from '@/app/lib/types';
 import { parseBoardRouteParams, extractUuidFromSlug, constructPlayUrlWithSlugs } from '@/app/lib/url-utils';
 import { parseBoardRouteParamsWithSlugs } from '@/app/lib/url-utils.server';
 import { getBoardDetails } from '@/app/lib/__generated__/product-sizes-data';
+import { getMoonBoardDetails } from '@/app/lib/moonboard-config';
 import { getClimb } from '@/app/lib/data/queries';
 import { convertLitUpHoldsStringToMap } from '@/app/components/board-renderer/util';
 import PlayViewClient from './play-view-client';
 import { Metadata } from 'next';
 
+// Helper to get board details for any board type
+function getBoardDetailsForBoard(params: ParsedBoardRouteParameters): BoardDetails {
+  if (params.board_name === 'moonboard') {
+    return getMoonBoardDetails({
+      layout_id: params.layout_id,
+      set_ids: params.set_ids,
+    });
+  }
+  return getBoardDetails(params);
+}
+
 export async function generateMetadata(props: { params: Promise<BoardRouteParametersWithUuid> }): Promise<Metadata> {
   const params = await props.params;
 
   try {
     const parsedParams = await parseBoardRouteParamsWithSlugs(params);
-    const [boardDetails, currentClimb] = await Promise.all([getBoardDetails(parsedParams), getClimb(parsedParams)]);
+    const [boardDetails, currentClimb] = await Promise.all([getBoardDetailsForBoard(parsedParams), getClimb(parsedParams)]);
 
     const climbName = currentClimb.name || `${boardDetails.board_name} Climb`;
     const climbGrade = currentClimb.difficulty || 'Unknown Grade';
@@ -97,7 +109,7 @@ export default async function PlayPage(props: {
     parsedParams = await parseBoardRouteParamsWithSlugs(params);
   }
 
-  const boardDetails = await getBoardDetails(parsedParams);
+  const boardDetails = getBoardDetailsForBoard(parsedParams);
 
   // Try to get the initial climb for SSR
   let initialClimb = null;
diff --git a/packages/web/app/[board_name]/[layout_id]/[size_id]/[set_ids]/[angle]/play/layout.tsx b/packages/web/app/[board_name]/[layout_id]/[size_id]/[set_ids]/[angle]/play/layout.tsx
index 783e7ada..38c67e94 100644
--- a/packages/web/app/[board_name]/[layout_id]/[size_id]/[set_ids]/[angle]/play/layout.tsx
+++ b/packages/web/app/[board_name]/[layout_id]/[size_id]/[set_ids]/[angle]/play/layout.tsx
@@ -1,10 +1,11 @@
 import React from 'react';
 import { PropsWithChildren } from 'react';
 
-import { BoardRouteParameters, ParsedBoardRouteParameters } from '@/app/lib/types';
+import { BoardRouteParameters, ParsedBoardRouteParameters, BoardDetails } from '@/app/lib/types';
 import { parseBoardRouteParams } from '@/app/lib/url-utils';
 import { parseBoardRouteParamsWithSlugs } from '@/app/lib/url-utils.server';
 import { getBoardDetails } from '@/app/lib/__generated__/product-sizes-data';
+import { getMoonBoardDetails } from '@/app/lib/moonboard-config';
 import PlayLayoutClient from './layout-client';
 
 interface LayoutProps {
@@ -28,7 +29,13 @@ export default async function PlayLayout(props: PropsWithChildren<LayoutProps>)
     parsedParams = await parseBoardRouteParamsWithSlugs(params);
   }
 
-  const boardDetails = await getBoardDetails(parsedParams);
+  // Use MoonBoard-specific details function for moonboard
+  let boardDetails: BoardDetails;
+  if (parsedParams.board_name === 'moonboard') {
+    boardDetails = getMoonBoardDetails(parsedParams);
+  } else {
+    boardDetails = getBoardDetails(parsedParams);
+  }
 
   return <PlayLayoutClient boardDetails={boardDetails}>{children}</PlayLayoutClient>;
 }
diff --git a/packages/web/app/[board_name]/[layout_id]/[size_id]/[set_ids]/[angle]/playlist/[playlist_uuid]/page.tsx b/packages/web/app/[board_name]/[layout_id]/[size_id]/[set_ids]/[angle]/playlist/[playlist_uuid]/page.tsx
index b29dab4b..2198b355 100644
--- a/packages/web/app/[board_name]/[layout_id]/[size_id]/[set_ids]/[angle]/playlist/[playlist_uuid]/page.tsx
+++ b/packages/web/app/[board_name]/[layout_id]/[size_id]/[set_ids]/[angle]/playlist/[playlist_uuid]/page.tsx
@@ -1,14 +1,26 @@
 import React from 'react';
 import { notFound } from 'next/navigation';
 import { getServerSession } from 'next-auth/next';
-import { BoardRouteParameters } from '@/app/lib/types';
+import { BoardRouteParameters, BoardDetails, ParsedBoardRouteParameters } from '@/app/lib/types';
 import { getBoardDetails } from '@/app/lib/__generated__/product-sizes-data';
+import { getMoonBoardDetails } from '@/app/lib/moonboard-config';
 import { parseBoardRouteParamsWithSlugs } from '@/app/lib/url-utils.server';
 import { Metadata } from 'next';
 import { authOptions } from '@/app/lib/auth/auth-options';
 import PlaylistViewContent from './playlist-view-content';
 import styles from './playlist-view.module.css';
 
+// Helper to get board details for any board type
+function getBoardDetailsForBoard(params: ParsedBoardRouteParameters): BoardDetails {
+  if (params.board_name === 'moonboard') {
+    return getMoonBoardDetails({
+      layout_id: params.layout_id,
+      set_ids: params.set_ids,
+    });
+  }
+  return getBoardDetails(params);
+}
+
 type PlaylistRouteParameters = BoardRouteParameters & {
   playlist_uuid: string;
 };
@@ -25,7 +37,7 @@ export default async function PlaylistViewPage(props: { params: Promise<Playlist
 
   try {
     const parsedParams = await parseBoardRouteParamsWithSlugs(params);
-    const boardDetails = await getBoardDetails(parsedParams);
+    const boardDetails = getBoardDetailsForBoard(parsedParams);
 
     // Get auth session for ownership check
     const session = await getServerSession(authOptions);
diff --git a/packages/web/app/[board_name]/[layout_id]/[size_id]/[set_ids]/[angle]/playlists/page.tsx b/packages/web/app/[board_name]/[layout_id]/[size_id]/[set_ids]/[angle]/playlists/page.tsx
index bc1cbf11..ab7fb343 100644
--- a/packages/web/app/[board_name]/[layout_id]/[size_id]/[set_ids]/[angle]/playlists/page.tsx
+++ b/packages/web/app/[board_name]/[layout_id]/[size_id]/[set_ids]/[angle]/playlists/page.tsx
@@ -1,12 +1,24 @@
 import React from 'react';
 import { notFound } from 'next/navigation';
-import { BoardRouteParameters } from '@/app/lib/types';
+import { BoardRouteParameters, BoardDetails, ParsedBoardRouteParameters } from '@/app/lib/types';
 import { getBoardDetails } from '@/app/lib/__generated__/product-sizes-data';
+import { getMoonBoardDetails } from '@/app/lib/moonboard-config';
 import { parseBoardRouteParamsWithSlugs } from '@/app/lib/url-utils.server';
 import { Metadata } from 'next';
 import PlaylistsListContent from './playlists-list-content';
 import styles from './playlists.module.css';
 
+// Helper to get board details for any board type
+function getBoardDetailsForBoard(params: ParsedBoardRouteParameters): BoardDetails {
+  if (params.board_name === 'moonboard') {
+    return getMoonBoardDetails({
+      layout_id: params.layout_id,
+      set_ids: params.set_ids,
+    });
+  }
+  return getBoardDetails(params);
+}
+
 export async function generateMetadata(): Promise<Metadata> {
   return {
     title: 'My Playlists | Boardsesh',
@@ -19,7 +31,7 @@ export default async function PlaylistsListPage(props: { params: Promise<BoardRo
 
   try {
     const parsedParams = await parseBoardRouteParamsWithSlugs(params);
-    const boardDetails = await getBoardDetails(parsedParams);
+    const boardDetails = getBoardDetailsForBoard(parsedParams);
 
     return (
       <div className={styles.pageContainer}>
diff --git a/packages/web/app/[board_name]/[layout_id]/[size_id]/[set_ids]/[angle]/view/[climb_uuid]/page.tsx b/packages/web/app/[board_name]/[layout_id]/[size_id]/[set_ids]/[angle]/view/[climb_uuid]/page.tsx
index b703097f..71a353c2 100644
--- a/packages/web/app/[board_name]/[layout_id]/[size_id]/[set_ids]/[angle]/view/[climb_uuid]/page.tsx
+++ b/packages/web/app/[board_name]/[layout_id]/[size_id]/[set_ids]/[angle]/view/[climb_uuid]/page.tsx
@@ -1,9 +1,21 @@
 import React from 'react';
 import { notFound, permanentRedirect } from 'next/navigation';
-import { BoardRouteParametersWithUuid } from '@/app/lib/types';
+import { BoardRouteParametersWithUuid, BoardDetails, ParsedBoardRouteParameters } from '@/app/lib/types';
 import { getClimb } from '@/app/lib/data/queries';
 import { getBoardDetails } from '@/app/lib/__generated__/product-sizes-data';
+import { getMoonBoardDetails } from '@/app/lib/moonboard-config';
 import ClimbCard from '@/app/components/climb-card/climb-card';
+
+// Helper to get board details for any board type
+function getBoardDetailsForBoard(params: ParsedBoardRouteParameters): BoardDetails {
+  if (params.board_name === 'moonboard') {
+    return getMoonBoardDetails({
+      layout_id: params.layout_id,
+      set_ids: params.set_ids,
+    });
+  }
+  return getBoardDetails(params);
+}
 import BetaVideos from '@/app/components/beta-videos/beta-videos';
 import { LogbookSection } from '@/app/components/logbook/logbook-section';
 import {
@@ -29,7 +41,7 @@ export async function generateMetadata(props: { params: Promise<BoardRouteParame
 
   try {
     const parsedParams = await parseBoardRouteParamsWithSlugs(params);
-    const [boardDetails, currentClimb] = await Promise.all([getBoardDetails(parsedParams), getClimb(parsedParams)]);
+    const [boardDetails, currentClimb] = await Promise.all([getBoardDetailsForBoard(parsedParams), getClimb(parsedParams)]);
 
     const climbName = currentClimb.name || `${boardDetails.board_name} Climb`;
     const climbGrade = currentClimb.difficulty || 'Unknown Grade';
@@ -161,7 +173,7 @@ export default async function DynamicResultsPage(props: { params: Promise<BoardR
 
     // Fetch the search results using searchCLimbs
     const [boardDetails, currentClimb, betaLinks] = await Promise.all([
-      getBoardDetails(parsedParams),
+      getBoardDetailsForBoard(parsedParams),
       getClimb(parsedParams),
       fetchBetaLinks(),
     ]);

From 3378dd6dc17cfa598392ef1a01cfe33d8dd2de7d Mon Sep 17 00:00:00 2001
From: Marco de Jongh <mdejongh@atlassian.com>
Date: Sat, 24 Jan 2026 12:24:35 +1100
Subject: [PATCH 14/21] fix: Correct MoonBoard hold state colors (green=start,
 red=finish)

MoonBoard uses green for starting holds and red for finish holds,
which is the opposite of what was previously configured.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .../[layout_id]/[size_id]/[set_ids]/[angle]/list/page.tsx | 8 ++++----
 packages/web/app/components/board-renderer/types.ts       | 4 ++--
 packages/web/app/lib/moonboard-config.ts                  | 4 ++--
 3 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/web/app/[board_name]/[layout_id]/[size_id]/[set_ids]/[angle]/list/page.tsx b/packages/web/app/[board_name]/[layout_id]/[size_id]/[set_ids]/[angle]/list/page.tsx
index 3002954e..f897b16c 100644
--- a/packages/web/app/[board_name]/[layout_id]/[size_id]/[set_ids]/[angle]/list/page.tsx
+++ b/packages/web/app/[board_name]/[layout_id]/[size_id]/[set_ids]/[angle]/list/page.tsx
@@ -48,12 +48,12 @@ function parseMoonboardFrames(frames: string): LitUpHoldsMap {
 
     if (roleCode === MOONBOARD_HOLD_STATE_CODES.start) {
       state = 'STARTING';
-      color = '#FF0000';
-      displayColor = '#FF3333';
-    } else if (roleCode === MOONBOARD_HOLD_STATE_CODES.finish) {
-      state = 'FINISH';
       color = '#00FF00';
       displayColor = '#44FF44';
+    } else if (roleCode === MOONBOARD_HOLD_STATE_CODES.finish) {
+      state = 'FINISH';
+      color = '#FF0000';
+      displayColor = '#FF3333';
     }
 
     map[holdId] = { state, color, displayColor };
diff --git a/packages/web/app/components/board-renderer/types.ts b/packages/web/app/components/board-renderer/types.ts
index 1b853b31..bdff8c64 100644
--- a/packages/web/app/components/board-renderer/types.ts
+++ b/packages/web/app/components/board-renderer/types.ts
@@ -63,8 +63,8 @@ export const HOLD_STATE_MAP: Record<
   },
   // MoonBoard uses simple codes: 1=start, 2=hand, 3=finish (no foot holds)
   moonboard: {
-    1: { name: 'STARTING', displayColor: '#FF3333', color: '#FF0000' }, // Red
+    1: { name: 'STARTING', displayColor: '#44FF44', color: '#00FF00' }, // Green
     2: { name: 'HAND', displayColor: '#4444FF', color: '#0000FF' }, // Blue
-    3: { name: 'FINISH', displayColor: '#44FF44', color: '#00FF00' }, // Green
+    3: { name: 'FINISH', displayColor: '#FF3333', color: '#FF0000' }, // Red
   },
 };
diff --git a/packages/web/app/lib/moonboard-config.ts b/packages/web/app/lib/moonboard-config.ts
index 250f9643..6a42c0d8 100644
--- a/packages/web/app/lib/moonboard-config.ts
+++ b/packages/web/app/lib/moonboard-config.ts
@@ -98,9 +98,9 @@ export const MOONBOARD_SIZE = {
 
 // MoonBoard hold states (different color scheme from Aurora)
 export const MOONBOARD_HOLD_STATES = {
-  start: { name: 'STARTING' as const, color: '#FF0000', displayColor: '#FF3333' }, // Red
+  start: { name: 'STARTING' as const, color: '#00FF00', displayColor: '#44FF44' }, // Green
   hand: { name: 'HAND' as const, color: '#0000FF', displayColor: '#4444FF' }, // Blue
-  finish: { name: 'FINISH' as const, color: '#00FF00', displayColor: '#44FF44' }, // Green
+  finish: { name: 'FINISH' as const, color: '#FF0000', displayColor: '#FF3333' }, // Red
 } as const;
 
 // Hold state codes for frames encoding (compatible with Aurora format)

From 2b37eda421ffdb36801875a72fce45bd5307cc5b Mon Sep 17 00:00:00 2001
From: Marco de Jongh <mdejongh@atlassian.com>
Date: Sat, 24 Jan 2026 12:30:43 +1100
Subject: [PATCH 15/21] fix: Add MoonBoard layout display names to profile page
 and activity feed

MoonBoard ticks now show proper layout names (e.g., "MoonBoard 2024")
instead of generic fallback names like "Moonboard (Layout 3)".

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .../app/components/activity-feed/ascents-feed.tsx  |  5 +++++
 .../app/crusher/[user_id]/profile-page-content.tsx | 14 ++++++++++++--
 2 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/packages/web/app/components/activity-feed/ascents-feed.tsx b/packages/web/app/components/activity-feed/ascents-feed.tsx
index c3ec8ea7..8916a72a 100644
--- a/packages/web/app/components/activity-feed/ascents-feed.tsx
+++ b/packages/web/app/components/activity-feed/ascents-feed.tsx
@@ -36,6 +36,11 @@ const layoutNames: Record<string, string> = {
   'tension-9': 'Tension Classic',
   'tension-10': 'Tension 2 Mirror',
   'tension-11': 'Tension 2 Spray',
+  'moonboard-1': 'MoonBoard 2010',
+  'moonboard-2': 'MoonBoard 2016',
+  'moonboard-3': 'MoonBoard 2024',
+  'moonboard-4': 'MoonBoard Masters 2017',
+  'moonboard-5': 'MoonBoard Masters 2019',
 };
 
 const getLayoutDisplayName = (boardType: string, layoutId: number | null): string => {
diff --git a/packages/web/app/crusher/[user_id]/profile-page-content.tsx b/packages/web/app/crusher/[user_id]/profile-page-content.tsx
index 9d4b9d94..2038657a 100644
--- a/packages/web/app/crusher/[user_id]/profile-page-content.tsx
+++ b/packages/web/app/crusher/[user_id]/profile-page-content.tsx
@@ -140,6 +140,11 @@ const layoutNames: Record<string, string> = {
   'tension-9': 'Tension Classic',
   'tension-10': 'Tension 2 Mirror',
   'tension-11': 'Tension 2 Spray',
+  'moonboard-1': 'MoonBoard 2010',
+  'moonboard-2': 'MoonBoard 2016',
+  'moonboard-3': 'MoonBoard 2024',
+  'moonboard-4': 'MoonBoard Masters 2017',
+  'moonboard-5': 'MoonBoard Masters 2019',
 };
 
 // Colors for each layout
@@ -149,6 +154,11 @@ const layoutColors: Record<string, string> = {
   'tension-9': 'rgba(239, 68, 68, 0.7)',   // Red - Tension Classic
   'tension-10': 'rgba(249, 115, 22, 0.7)', // Orange - Tension 2 Mirror
   'tension-11': 'rgba(234, 179, 8, 0.7)',  // Yellow - Tension 2 Spray
+  'moonboard-1': 'rgba(255, 215, 0, 0.7)',  // Gold - MoonBoard 2010
+  'moonboard-2': 'rgba(255, 165, 0, 0.7)',  // Orange - MoonBoard 2016
+  'moonboard-3': 'rgba(255, 140, 0, 0.7)',  // Dark Orange - MoonBoard 2024
+  'moonboard-4': 'rgba(255, 193, 7, 0.7)',  // Amber - MoonBoard Masters 2017
+  'moonboard-5': 'rgba(255, 152, 0, 0.7)',  // Deep Orange - MoonBoard Masters 2019
 };
 
 // Get layout key from board type and layout ID
@@ -412,8 +422,8 @@ export default function ProfilePageContent({ userId }: { userId: string }) {
     // Sort grades by difficulty order
     const sortedGrades = Object.values(difficultyMapping).filter((g) => allGrades.has(g));
 
-    // Define the order for layouts (Kilter first, then Tension)
-    const layoutOrder = ['kilter-1', 'kilter-8', 'tension-9', 'tension-10', 'tension-11'];
+    // Define the order for layouts (Kilter first, then Tension, then MoonBoard)
+    const layoutOrder = ['kilter-1', 'kilter-8', 'tension-9', 'tension-10', 'tension-11', 'moonboard-1', 'moonboard-2', 'moonboard-3', 'moonboard-4', 'moonboard-5'];
     const sortedLayouts = Array.from(allLayouts).sort((a, b) => {
       const indexA = layoutOrder.indexOf(a);
       const indexB = layoutOrder.indexOf(b);

From dc9848d772f159fc2226326275e6c49e4be50052 Mon Sep 17 00:00:00 2001
From: Marco de Jongh <mdejongh@atlassian.com>
Date: Sat, 24 Jan 2026 12:31:29 +1100
Subject: [PATCH 16/21] refactor: Consolidate MoonBoard color definitions to
 single source

Remove duplicate color definitions by deriving HOLD_STATE_MAP.moonboard
and parseMoonboardFrames() colors from MOONBOARD_HOLD_STATES in
moonboard-config.ts, ensuring consistency across the codebase.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .../[size_id]/[set_ids]/[angle]/list/page.tsx | 29 +++++++++----------
 .../app/components/board-renderer/types.ts    | 10 +++----
 2 files changed, 19 insertions(+), 20 deletions(-)

diff --git a/packages/web/app/[board_name]/[layout_id]/[size_id]/[set_ids]/[angle]/list/page.tsx b/packages/web/app/[board_name]/[layout_id]/[size_id]/[set_ids]/[angle]/list/page.tsx
index f897b16c..eeafb076 100644
--- a/packages/web/app/[board_name]/[layout_id]/[size_id]/[set_ids]/[angle]/list/page.tsx
+++ b/packages/web/app/[board_name]/[layout_id]/[size_id]/[set_ids]/[angle]/list/page.tsx
@@ -13,7 +13,7 @@ import ClimbsList from '@/app/components/board-page/climbs-list';
 import { cachedSearchClimbs } from '@/app/lib/graphql/server-cached-client';
 import { SEARCH_CLIMBS, type ClimbSearchResponse } from '@/app/lib/graphql/operations/climb-search';
 import { getBoardDetails } from '@/app/lib/__generated__/product-sizes-data';
-import { getMoonBoardDetails, MOONBOARD_HOLD_STATE_CODES } from '@/app/lib/moonboard-config';
+import { getMoonBoardDetails, MOONBOARD_HOLD_STATE_CODES, MOONBOARD_HOLD_STATES } from '@/app/lib/moonboard-config';
 import { MAX_PAGE_SIZE } from '@/app/components/board-page/constants';
 import { dbz } from '@/app/lib/db/db';
 import { UNIFIED_TABLES } from '@/app/lib/db/queries/util/table-select';
@@ -42,21 +42,20 @@ function parseMoonboardFrames(frames: string): LitUpHoldsMap {
   while ((match = regex.exec(frames)) !== null) {
     const holdId = parseInt(match[1], 10);
     const roleCode = parseInt(match[2], 10);
-    let state: HoldState = 'HAND';
-    let color = '#0000FF';
-    let displayColor = '#4444FF';
-
-    if (roleCode === MOONBOARD_HOLD_STATE_CODES.start) {
-      state = 'STARTING';
-      color = '#00FF00';
-      displayColor = '#44FF44';
-    } else if (roleCode === MOONBOARD_HOLD_STATE_CODES.finish) {
-      state = 'FINISH';
-      color = '#FF0000';
-      displayColor = '#FF3333';
-    }
 
-    map[holdId] = { state, color, displayColor };
+    // Determine which hold state to use based on role code
+    const holdStateKey = roleCode === MOONBOARD_HOLD_STATE_CODES.start
+      ? 'start'
+      : roleCode === MOONBOARD_HOLD_STATE_CODES.finish
+        ? 'finish'
+        : 'hand';
+    const holdState = MOONBOARD_HOLD_STATES[holdStateKey];
+
+    map[holdId] = {
+      state: holdState.name,
+      color: holdState.color,
+      displayColor: holdState.displayColor,
+    };
   }
   return map;
 }
diff --git a/packages/web/app/components/board-renderer/types.ts b/packages/web/app/components/board-renderer/types.ts
index bdff8c64..5a30431f 100644
--- a/packages/web/app/components/board-renderer/types.ts
+++ b/packages/web/app/components/board-renderer/types.ts
@@ -1,5 +1,5 @@
 import { BoardName } from '@/app/lib/types';
-import { MOONBOARD_ENABLED } from '@/app/lib/moonboard-config';
+import { MOONBOARD_ENABLED, MOONBOARD_HOLD_STATES, MOONBOARD_HOLD_STATE_CODES } from '@/app/lib/moonboard-config';
 
 export type LitUpHolds = string;
 
@@ -61,10 +61,10 @@ export const HOLD_STATE_MAP: Record<
     7: { name: 'FINISH', displayColor: '#FF0000', color: '#FF0000' },
     8: { name: 'FOOT', displayColor: '#FF00FF', color: '#FF00FF' },
   },
-  // MoonBoard uses simple codes: 1=start, 2=hand, 3=finish (no foot holds)
+  // MoonBoard hold states derived from moonboard-config.ts (no foot holds)
   moonboard: {
-    1: { name: 'STARTING', displayColor: '#44FF44', color: '#00FF00' }, // Green
-    2: { name: 'HAND', displayColor: '#4444FF', color: '#0000FF' }, // Blue
-    3: { name: 'FINISH', displayColor: '#FF3333', color: '#FF0000' }, // Red
+    [MOONBOARD_HOLD_STATE_CODES.start]: { name: MOONBOARD_HOLD_STATES.start.name, color: MOONBOARD_HOLD_STATES.start.color, displayColor: MOONBOARD_HOLD_STATES.start.displayColor },
+    [MOONBOARD_HOLD_STATE_CODES.hand]: { name: MOONBOARD_HOLD_STATES.hand.name, color: MOONBOARD_HOLD_STATES.hand.color, displayColor: MOONBOARD_HOLD_STATES.hand.displayColor },
+    [MOONBOARD_HOLD_STATE_CODES.finish]: { name: MOONBOARD_HOLD_STATES.finish.name, color: MOONBOARD_HOLD_STATES.finish.color, displayColor: MOONBOARD_HOLD_STATES.finish.displayColor },
   },
 };

From e28853f7614af22f664c80c1af162ead22584485 Mon Sep 17 00:00:00 2001
From: Marco de Jongh <mdejongh@atlassian.com>
Date: Sat, 24 Jan 2026 12:38:34 +1100
Subject: [PATCH 17/21] refactor: Extract shared board utils and improve
 MoonBoard code quality

- Extract getBoardDetailsForBoard to shared utility (board-utils.ts)
  removing duplicate implementations from 6 page files
- Add warning log for unexpected MoonBoard role codes in parseMoonboardFrames
- Add clarifying comment for grade difficulty float-to-int conversion
- Improve OCR upload warning logs to include climb name for traceability
- Document MoonBoard hold state codes (42, 43, 44) and Aurora compatibility
- Add type guard and validation for OCR test data metadata in backend

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .../backend/src/handlers/ocr-test-data.ts     | 45 +++++++++++++++++--
 .../[set_ids]/[angle]/list/layout.tsx         | 13 +-----
 .../[size_id]/[set_ids]/[angle]/list/page.tsx | 39 ++++++++--------
 .../[angle]/play/[climb_uuid]/page.tsx        | 13 +-----
 .../[angle]/playlist/[playlist_uuid]/page.tsx | 13 +-----
 .../[set_ids]/[angle]/playlists/page.tsx      | 13 +-----
 .../[angle]/view/[climb_uuid]/page.tsx        | 13 +-----
 packages/web/app/lib/board-utils.ts           | 23 ++++++++++
 packages/web/app/lib/moonboard-config.ts      | 14 ++++--
 packages/web/app/lib/moonboard-ocr-upload.ts  | 10 ++++-
 10 files changed, 109 insertions(+), 87 deletions(-)
 create mode 100644 packages/web/app/lib/board-utils.ts

diff --git a/packages/backend/src/handlers/ocr-test-data.ts b/packages/backend/src/handlers/ocr-test-data.ts
index 6b444ab0..c352812d 100644
--- a/packages/backend/src/handlers/ocr-test-data.ts
+++ b/packages/backend/src/handlers/ocr-test-data.ts
@@ -14,6 +14,37 @@ const MIME_TO_EXT: Record<string, string> = {
   'image/webp': 'webp',
 };
 
+// Expected metadata structure from OCR upload
+// This matches the metadata object created in moonboard-ocr-upload.ts
+interface OcrUploadMetadata {
+  layoutId: number;
+  angle: number;
+  climb: {
+    name?: string;
+    grade?: string;
+    holds?: unknown;
+    sourceFile?: string;
+  };
+}
+
+/**
+ * Type guard to check if the parsed metadata has the expected structure.
+ * We only validate the presence of required fields, not deep structure,
+ * since this is for test data collection and flexibility is preferred.
+ */
+function isValidOcrMetadata(value: unknown): value is OcrUploadMetadata {
+  if (typeof value !== 'object' || value === null) {
+    return false;
+  }
+  const obj = value as Record<string, unknown>;
+  return (
+    typeof obj.layoutId === 'number' &&
+    typeof obj.angle === 'number' &&
+    typeof obj.climb === 'object' &&
+    obj.climb !== null
+  );
+}
+
 /**
  * Extract auth token from Authorization header
  */
@@ -159,9 +190,9 @@ export async function handleOcrTestDataUpload(req: IncomingMessage, res: ServerR
       }
 
       // Parse metadata
-      let metadata: unknown;
+      let parsedMetadata: unknown;
       try {
-        metadata = JSON.parse(metadataJson);
+        parsedMetadata = JSON.parse(metadataJson);
       } catch {
         res.writeHead(400, { 'Content-Type': 'application/json' });
         res.end(JSON.stringify({ error: 'Invalid metadata JSON' }));
@@ -169,6 +200,14 @@ export async function handleOcrTestDataUpload(req: IncomingMessage, res: ServerR
         return;
       }
 
+      // Validate metadata structure
+      if (!isValidOcrMetadata(parsedMetadata)) {
+        res.writeHead(400, { 'Content-Type': 'application/json' });
+        res.end(JSON.stringify({ error: 'Invalid metadata structure: expected layoutId, angle, and climb fields' }));
+        resolve();
+        return;
+      }
+
       // Generate unique folder name
       const folderName = generateFolderName();
       const ext = MIME_TO_EXT[mimeType] || 'png';
@@ -182,7 +221,7 @@ export async function handleOcrTestDataUpload(req: IncomingMessage, res: ServerR
         const fullMetadata = {
           version: 1,
           uploadedAt: new Date().toISOString(),
-          ...(metadata as object),
+          ...parsedMetadata,
           imageMetadata: {
             originalFilename: originalFilename || 'unknown',
             mimeType,
diff --git a/packages/web/app/[board_name]/[layout_id]/[size_id]/[set_ids]/[angle]/list/layout.tsx b/packages/web/app/[board_name]/[layout_id]/[size_id]/[set_ids]/[angle]/list/layout.tsx
index 5fb572fa..91170b53 100644
--- a/packages/web/app/[board_name]/[layout_id]/[size_id]/[set_ids]/[angle]/list/layout.tsx
+++ b/packages/web/app/[board_name]/[layout_id]/[size_id]/[set_ids]/[angle]/list/layout.tsx
@@ -5,21 +5,10 @@ import { PropsWithChildren } from 'react';
 import { BoardRouteParameters, ParsedBoardRouteParameters, BoardDetails } from '@/app/lib/types';
 import { parseBoardRouteParams, constructClimbListWithSlugs } from '@/app/lib/url-utils';
 import { parseBoardRouteParamsWithSlugs } from '@/app/lib/url-utils.server';
-import { getBoardDetails } from '@/app/lib/__generated__/product-sizes-data';
-import { getMoonBoardDetails } from '@/app/lib/moonboard-config';
+import { getBoardDetailsForBoard } from '@/app/lib/board-utils';
 import { permanentRedirect } from 'next/navigation';
 import ListLayoutClient from './layout-client';
 
-// Helper to get board details for any board type
-function getBoardDetailsForBoard(params: ParsedBoardRouteParameters): BoardDetails {
-  if (params.board_name === 'moonboard') {
-    return getMoonBoardDetails({
-      layout_id: params.layout_id,
-      set_ids: params.set_ids,
-    });
-  }
-  return getBoardDetails(params);
-}
 
 interface LayoutProps {
   params: Promise<BoardRouteParameters>;
diff --git a/packages/web/app/[board_name]/[layout_id]/[size_id]/[set_ids]/[angle]/list/page.tsx b/packages/web/app/[board_name]/[layout_id]/[size_id]/[set_ids]/[angle]/list/page.tsx
index eeafb076..07ffb657 100644
--- a/packages/web/app/[board_name]/[layout_id]/[size_id]/[set_ids]/[angle]/list/page.tsx
+++ b/packages/web/app/[board_name]/[layout_id]/[size_id]/[set_ids]/[angle]/list/page.tsx
@@ -12,8 +12,8 @@ import { parseBoardRouteParamsWithSlugs } from '@/app/lib/url-utils.server';
 import ClimbsList from '@/app/components/board-page/climbs-list';
 import { cachedSearchClimbs } from '@/app/lib/graphql/server-cached-client';
 import { SEARCH_CLIMBS, type ClimbSearchResponse } from '@/app/lib/graphql/operations/climb-search';
-import { getBoardDetails } from '@/app/lib/__generated__/product-sizes-data';
-import { getMoonBoardDetails, MOONBOARD_HOLD_STATE_CODES, MOONBOARD_HOLD_STATES } from '@/app/lib/moonboard-config';
+import { getBoardDetailsForBoard } from '@/app/lib/board-utils';
+import { MOONBOARD_HOLD_STATE_CODES, MOONBOARD_HOLD_STATES } from '@/app/lib/moonboard-config';
 import { MAX_PAGE_SIZE } from '@/app/components/board-page/constants';
 import { dbz } from '@/app/lib/db/db';
 import { UNIFIED_TABLES } from '@/app/lib/db/queries/util/table-select';
@@ -22,21 +22,12 @@ import { eq, and, desc } from 'drizzle-orm';
 import { getGradeByDifficultyId } from '@/app/lib/board-data';
 import type { LitUpHoldsMap, HoldState } from '@/app/components/board-renderer/types';
 
-// Helper to get board details for any board type
-function getBoardDetailsForBoard(params: { board_name: BoardName; layout_id: number; size_id: number; set_ids: SetIdList }): BoardDetails {
-  if (params.board_name === 'moonboard') {
-    return getMoonBoardDetails({
-      layout_id: params.layout_id,
-      set_ids: params.set_ids,
-    });
-  }
-  return getBoardDetails(params);
-}
 
 // Parse Moonboard frames string to lit up holds map
 function parseMoonboardFrames(frames: string): LitUpHoldsMap {
   const map: LitUpHoldsMap = {};
   // Format: p{holdId}r{roleCode} e.g., "p1r42p45r43p198r44"
+  // Role codes: 42=start, 43=hand, 44=finish (see MOONBOARD_HOLD_STATE_CODES)
   const regex = /p(\d+)r(\d+)/g;
   let match;
   while ((match = regex.exec(frames)) !== null) {
@@ -44,11 +35,20 @@ function parseMoonboardFrames(frames: string): LitUpHoldsMap {
     const roleCode = parseInt(match[2], 10);
 
     // Determine which hold state to use based on role code
-    const holdStateKey = roleCode === MOONBOARD_HOLD_STATE_CODES.start
-      ? 'start'
-      : roleCode === MOONBOARD_HOLD_STATE_CODES.finish
-        ? 'finish'
-        : 'hand';
+    let holdStateKey: 'start' | 'hand' | 'finish';
+    if (roleCode === MOONBOARD_HOLD_STATE_CODES.start) {
+      holdStateKey = 'start';
+    } else if (roleCode === MOONBOARD_HOLD_STATE_CODES.finish) {
+      holdStateKey = 'finish';
+    } else if (roleCode === MOONBOARD_HOLD_STATE_CODES.hand) {
+      holdStateKey = 'hand';
+    } else {
+      // Unexpected role code - log a warning and default to 'hand'
+      console.warn(
+        `[MoonBoard] Unexpected role code ${roleCode} for hold ${holdId} in frames "${frames.slice(0, 50)}${frames.length > 50 ? '...' : ''}". Defaulting to HAND state.`
+      );
+      holdStateKey = 'hand';
+    }
     const holdState = MOONBOARD_HOLD_STATES[holdStateKey];
 
     map[holdId] = {
@@ -99,7 +99,10 @@ async function getMoonboardClimbs(layoutId: number, angle: number, limit: number
     .limit(limit);
 
   return results.map((row) => {
-    // Look up grade info from the shared BOULDER_GRADES constant
+    // Look up grade info from the shared BOULDER_GRADES constant.
+    // displayDifficulty is stored as double precision in the database but represents
+    // an integer difficulty_id. getGradeByDifficultyId rounds it to handle any
+    // floating point imprecision from database/ORM serialization.
     const gradeInfo = row.displayDifficulty ? getGradeByDifficultyId(row.displayDifficulty) : undefined;
 
     return {
diff --git a/packages/web/app/[board_name]/[layout_id]/[size_id]/[set_ids]/[angle]/play/[climb_uuid]/page.tsx b/packages/web/app/[board_name]/[layout_id]/[size_id]/[set_ids]/[angle]/play/[climb_uuid]/page.tsx
index f323bdc3..ecba5c6d 100644
--- a/packages/web/app/[board_name]/[layout_id]/[size_id]/[set_ids]/[angle]/play/[climb_uuid]/page.tsx
+++ b/packages/web/app/[board_name]/[layout_id]/[size_id]/[set_ids]/[angle]/play/[climb_uuid]/page.tsx
@@ -2,23 +2,12 @@ import React from 'react';
 import { BoardRouteParametersWithUuid, BoardDetails, ParsedBoardRouteParameters } from '@/app/lib/types';
 import { parseBoardRouteParams, extractUuidFromSlug, constructPlayUrlWithSlugs } from '@/app/lib/url-utils';
 import { parseBoardRouteParamsWithSlugs } from '@/app/lib/url-utils.server';
-import { getBoardDetails } from '@/app/lib/__generated__/product-sizes-data';
-import { getMoonBoardDetails } from '@/app/lib/moonboard-config';
+import { getBoardDetailsForBoard } from '@/app/lib/board-utils';
 import { getClimb } from '@/app/lib/data/queries';
 import { convertLitUpHoldsStringToMap } from '@/app/components/board-renderer/util';
 import PlayViewClient from './play-view-client';
 import { Metadata } from 'next';
 
-// Helper to get board details for any board type
-function getBoardDetailsForBoard(params: ParsedBoardRouteParameters): BoardDetails {
-  if (params.board_name === 'moonboard') {
-    return getMoonBoardDetails({
-      layout_id: params.layout_id,
-      set_ids: params.set_ids,
-    });
-  }
-  return getBoardDetails(params);
-}
 
 export async function generateMetadata(props: { params: Promise<BoardRouteParametersWithUuid> }): Promise<Metadata> {
   const params = await props.params;
diff --git a/packages/web/app/[board_name]/[layout_id]/[size_id]/[set_ids]/[angle]/playlist/[playlist_uuid]/page.tsx b/packages/web/app/[board_name]/[layout_id]/[size_id]/[set_ids]/[angle]/playlist/[playlist_uuid]/page.tsx
index 2198b355..3a70ad78 100644
--- a/packages/web/app/[board_name]/[layout_id]/[size_id]/[set_ids]/[angle]/playlist/[playlist_uuid]/page.tsx
+++ b/packages/web/app/[board_name]/[layout_id]/[size_id]/[set_ids]/[angle]/playlist/[playlist_uuid]/page.tsx
@@ -2,24 +2,13 @@ import React from 'react';
 import { notFound } from 'next/navigation';
 import { getServerSession } from 'next-auth/next';
 import { BoardRouteParameters, BoardDetails, ParsedBoardRouteParameters } from '@/app/lib/types';
-import { getBoardDetails } from '@/app/lib/__generated__/product-sizes-data';
-import { getMoonBoardDetails } from '@/app/lib/moonboard-config';
+import { getBoardDetailsForBoard } from '@/app/lib/board-utils';
 import { parseBoardRouteParamsWithSlugs } from '@/app/lib/url-utils.server';
 import { Metadata } from 'next';
 import { authOptions } from '@/app/lib/auth/auth-options';
 import PlaylistViewContent from './playlist-view-content';
 import styles from './playlist-view.module.css';
 
-// Helper to get board details for any board type
-function getBoardDetailsForBoard(params: ParsedBoardRouteParameters): BoardDetails {
-  if (params.board_name === 'moonboard') {
-    return getMoonBoardDetails({
-      layout_id: params.layout_id,
-      set_ids: params.set_ids,
-    });
-  }
-  return getBoardDetails(params);
-}
 
 type PlaylistRouteParameters = BoardRouteParameters & {
   playlist_uuid: string;
diff --git a/packages/web/app/[board_name]/[layout_id]/[size_id]/[set_ids]/[angle]/playlists/page.tsx b/packages/web/app/[board_name]/[layout_id]/[size_id]/[set_ids]/[angle]/playlists/page.tsx
index ab7fb343..7c08caa3 100644
--- a/packages/web/app/[board_name]/[layout_id]/[size_id]/[set_ids]/[angle]/playlists/page.tsx
+++ b/packages/web/app/[board_name]/[layout_id]/[size_id]/[set_ids]/[angle]/playlists/page.tsx
@@ -1,23 +1,12 @@
 import React from 'react';
 import { notFound } from 'next/navigation';
 import { BoardRouteParameters, BoardDetails, ParsedBoardRouteParameters } from '@/app/lib/types';
-import { getBoardDetails } from '@/app/lib/__generated__/product-sizes-data';
-import { getMoonBoardDetails } from '@/app/lib/moonboard-config';
+import { getBoardDetailsForBoard } from '@/app/lib/board-utils';
 import { parseBoardRouteParamsWithSlugs } from '@/app/lib/url-utils.server';
 import { Metadata } from 'next';
 import PlaylistsListContent from './playlists-list-content';
 import styles from './playlists.module.css';
 
-// Helper to get board details for any board type
-function getBoardDetailsForBoard(params: ParsedBoardRouteParameters): BoardDetails {
-  if (params.board_name === 'moonboard') {
-    return getMoonBoardDetails({
-      layout_id: params.layout_id,
-      set_ids: params.set_ids,
-    });
-  }
-  return getBoardDetails(params);
-}
 
 export async function generateMetadata(): Promise<Metadata> {
   return {
diff --git a/packages/web/app/[board_name]/[layout_id]/[size_id]/[set_ids]/[angle]/view/[climb_uuid]/page.tsx b/packages/web/app/[board_name]/[layout_id]/[size_id]/[set_ids]/[angle]/view/[climb_uuid]/page.tsx
index 71a353c2..f2903659 100644
--- a/packages/web/app/[board_name]/[layout_id]/[size_id]/[set_ids]/[angle]/view/[climb_uuid]/page.tsx
+++ b/packages/web/app/[board_name]/[layout_id]/[size_id]/[set_ids]/[angle]/view/[climb_uuid]/page.tsx
@@ -2,20 +2,9 @@ import React from 'react';
 import { notFound, permanentRedirect } from 'next/navigation';
 import { BoardRouteParametersWithUuid, BoardDetails, ParsedBoardRouteParameters } from '@/app/lib/types';
 import { getClimb } from '@/app/lib/data/queries';
-import { getBoardDetails } from '@/app/lib/__generated__/product-sizes-data';
-import { getMoonBoardDetails } from '@/app/lib/moonboard-config';
+import { getBoardDetailsForBoard } from '@/app/lib/board-utils';
 import ClimbCard from '@/app/components/climb-card/climb-card';
 
-// Helper to get board details for any board type
-function getBoardDetailsForBoard(params: ParsedBoardRouteParameters): BoardDetails {
-  if (params.board_name === 'moonboard') {
-    return getMoonBoardDetails({
-      layout_id: params.layout_id,
-      set_ids: params.set_ids,
-    });
-  }
-  return getBoardDetails(params);
-}
 import BetaVideos from '@/app/components/beta-videos/beta-videos';
 import { LogbookSection } from '@/app/components/logbook/logbook-section';
 import {
diff --git a/packages/web/app/lib/board-utils.ts b/packages/web/app/lib/board-utils.ts
new file mode 100644
index 00000000..e1949ea4
--- /dev/null
+++ b/packages/web/app/lib/board-utils.ts
@@ -0,0 +1,23 @@
+import type { BoardDetails, ParsedBoardRouteParameters } from './types';
+import type { SetIdList } from './board-data';
+import { getBoardDetails } from './__generated__/product-sizes-data';
+import { getMoonBoardDetails } from './moonboard-config';
+
+/**
+ * Get board details for any board type (Aurora or MoonBoard).
+ *
+ * This is a unified helper that routes to the appropriate board details function
+ * based on the board name. For MoonBoard, it uses getMoonBoardDetails; for Aurora
+ * boards (kilter, tension), it uses the generated getBoardDetails.
+ */
+export function getBoardDetailsForBoard(
+  params: ParsedBoardRouteParameters | { board_name: string; layout_id: number; size_id: number; set_ids: SetIdList }
+): BoardDetails {
+  if (params.board_name === 'moonboard') {
+    return getMoonBoardDetails({
+      layout_id: params.layout_id,
+      set_ids: params.set_ids,
+    });
+  }
+  return getBoardDetails(params as Parameters<typeof getBoardDetails>[0]);
+}
diff --git a/packages/web/app/lib/moonboard-config.ts b/packages/web/app/lib/moonboard-config.ts
index 6a42c0d8..03a2bfe2 100644
--- a/packages/web/app/lib/moonboard-config.ts
+++ b/packages/web/app/lib/moonboard-config.ts
@@ -103,11 +103,17 @@ export const MOONBOARD_HOLD_STATES = {
   finish: { name: 'FINISH' as const, color: '#FF0000', displayColor: '#FF3333' }, // Red
 } as const;
 
-// Hold state codes for frames encoding (compatible with Aurora format)
+// Hold state codes for frames encoding (compatible with Aurora format).
+// These codes are used in the frames string format: p{holdId}r{roleCode}
+// e.g., "p1r42p45r43p198r44" means hold 1 is start, hold 45 is hand, hold 198 is finish.
+//
+// The codes 42, 43, 44 are chosen to be compatible with Aurora boards (Kilter/Tension),
+// which use similar role code patterns in their placement strings. This allows shared
+// parsing logic between MoonBoard and Aurora boards when processing climb data.
 export const MOONBOARD_HOLD_STATE_CODES = {
-  start: 42, // Using 42 for STARTING (matches Kilter pattern)
-  hand: 43, // Using 43 for HAND
-  finish: 44, // Using 44 for FINISH
+  start: 42,
+  hand: 43,
+  finish: 44,
 } as const;
 
 // Grid coordinate types
diff --git a/packages/web/app/lib/moonboard-ocr-upload.ts b/packages/web/app/lib/moonboard-ocr-upload.ts
index 09e2af5d..bb02ef09 100644
--- a/packages/web/app/lib/moonboard-ocr-upload.ts
+++ b/packages/web/app/lib/moonboard-ocr-upload.ts
@@ -44,7 +44,10 @@ export async function uploadOcrTestData(
 
     if (!response.ok) {
       const errorData = await response.json().catch(() => ({}));
-      console.warn('[OCR Upload] Upload failed:', errorData.error || response.statusText);
+      console.warn(
+        `[OCR Upload] Upload failed for climb "${parsedResult.name || 'Unknown'}":`,
+        errorData.error || response.statusText
+      );
       return;
     }
 
@@ -56,7 +59,10 @@ export async function uploadOcrTestData(
     }
   } catch (error) {
     // Fire-and-forget: log but don't throw
-    console.warn('[OCR Upload] Failed to upload test data:', error);
+    console.warn(
+      `[OCR Upload] Failed to upload test data for climb "${parsedResult.name || 'Unknown'}":`,
+      error
+    );
   }
 }
 

From 9781b796e6cb9c3882ba477ab6401058e8981288 Mon Sep 17 00:00:00 2001
From: Marco de Jongh <mdejongh@atlassian.com>
Date: Sat, 24 Jan 2026 12:40:23 +1100
Subject: [PATCH 18/21] fix: Enable MoonBoard board preview in profile activity
 feed

- Add default configurations for all MoonBoard layouts (1-5) in
  default-board-configs.ts to enable thumbnail rendering
- Use getBoardDetailsForBoard in ascent-thumbnail.tsx which correctly
  routes MoonBoard requests to getMoonBoardDetails
- Inline MoonBoard hold state values (42, 43, 44) in HOLD_STATE_MAP
  to avoid computed property issues with bundlers

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .../components/activity-feed/ascent-thumbnail.tsx    |  4 ++--
 packages/web/app/components/board-renderer/types.ts  | 12 +++++++-----
 packages/web/app/lib/default-board-configs.ts        | 10 ++++++++++
 3 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/packages/web/app/components/activity-feed/ascent-thumbnail.tsx b/packages/web/app/components/activity-feed/ascent-thumbnail.tsx
index af4e5251..42a71ca8 100644
--- a/packages/web/app/components/activity-feed/ascent-thumbnail.tsx
+++ b/packages/web/app/components/activity-feed/ascent-thumbnail.tsx
@@ -5,7 +5,7 @@ import Link from 'next/link';
 import { BoardDetails, BoardName } from '@/app/lib/types';
 import BoardRenderer from '@/app/components/board-renderer/board-renderer';
 import { convertLitUpHoldsStringToMap } from '@/app/components/board-renderer/util';
-import { getBoardDetails } from '@/app/lib/__generated__/product-sizes-data';
+import { getBoardDetailsForBoard } from '@/app/lib/board-utils';
 import { getDefaultBoardConfig, getDefaultClimbViewPath } from '@/app/lib/default-board-configs';
 import styles from './ascents-feed.module.css';
 
@@ -37,7 +37,7 @@ const AscentThumbnail: React.FC<AscentThumbnailProps> = ({
     if (!config) return null;
 
     try {
-      return getBoardDetails({
+      return getBoardDetailsForBoard({
         board_name: boardName,
         layout_id: layoutId,
         size_id: config.sizeId,
diff --git a/packages/web/app/components/board-renderer/types.ts b/packages/web/app/components/board-renderer/types.ts
index 5a30431f..f89b2d3f 100644
--- a/packages/web/app/components/board-renderer/types.ts
+++ b/packages/web/app/components/board-renderer/types.ts
@@ -1,5 +1,5 @@
 import { BoardName } from '@/app/lib/types';
-import { MOONBOARD_ENABLED, MOONBOARD_HOLD_STATES, MOONBOARD_HOLD_STATE_CODES } from '@/app/lib/moonboard-config';
+import { MOONBOARD_ENABLED } from '@/app/lib/moonboard-config';
 
 export type LitUpHolds = string;
 
@@ -61,10 +61,12 @@ export const HOLD_STATE_MAP: Record<
     7: { name: 'FINISH', displayColor: '#FF0000', color: '#FF0000' },
     8: { name: 'FOOT', displayColor: '#FF00FF', color: '#FF00FF' },
   },
-  // MoonBoard hold states derived from moonboard-config.ts (no foot holds)
+  // MoonBoard hold states (no foot holds)
+  // Values inlined from moonboard-config.ts MOONBOARD_HOLD_STATE_CODES and MOONBOARD_HOLD_STATES
+  // to avoid computed property issues with bundlers
   moonboard: {
-    [MOONBOARD_HOLD_STATE_CODES.start]: { name: MOONBOARD_HOLD_STATES.start.name, color: MOONBOARD_HOLD_STATES.start.color, displayColor: MOONBOARD_HOLD_STATES.start.displayColor },
-    [MOONBOARD_HOLD_STATE_CODES.hand]: { name: MOONBOARD_HOLD_STATES.hand.name, color: MOONBOARD_HOLD_STATES.hand.color, displayColor: MOONBOARD_HOLD_STATES.hand.displayColor },
-    [MOONBOARD_HOLD_STATE_CODES.finish]: { name: MOONBOARD_HOLD_STATES.finish.name, color: MOONBOARD_HOLD_STATES.finish.color, displayColor: MOONBOARD_HOLD_STATES.finish.displayColor },
+    42: { name: 'STARTING', color: '#00FF00', displayColor: '#44FF44' }, // start
+    43: { name: 'HAND', color: '#0000FF', displayColor: '#4444FF' }, // hand
+    44: { name: 'FINISH', color: '#FF0000', displayColor: '#FF3333' }, // finish
   },
 };
diff --git a/packages/web/app/lib/default-board-configs.ts b/packages/web/app/lib/default-board-configs.ts
index 6632d82d..2401a708 100644
--- a/packages/web/app/lib/default-board-configs.ts
+++ b/packages/web/app/lib/default-board-configs.ts
@@ -27,6 +27,16 @@ const DEFAULT_CONFIGS: Record<string, DefaultBoardConfig> = {
   'tension-10': { sizeId: 6, setIds: [12, 13] },
   // Tension Board 2 Spray (layout 11) - 12x12 with Wood + Plastic
   'tension-11': { sizeId: 6, setIds: [12, 13] },
+  // MoonBoard 2010 (layout 1) - Original School Holds
+  'moonboard-1': { sizeId: 1, setIds: [1] },
+  // MoonBoard 2016 (layout 2) - All available sets
+  'moonboard-2': { sizeId: 1, setIds: [2, 3, 4] },
+  // MoonBoard 2024 (layout 3) - All available sets
+  'moonboard-3': { sizeId: 1, setIds: [5, 6, 7, 8, 9, 10] },
+  // MoonBoard Masters 2017 (layout 4) - All available sets
+  'moonboard-4': { sizeId: 1, setIds: [11, 12, 13, 14, 15, 16] },
+  // MoonBoard Masters 2019 (layout 5) - All available sets
+  'moonboard-5': { sizeId: 1, setIds: [17, 18, 19, 20, 21, 22, 23] },
 };
 
 /**

From d308929f996e7d612a55845acb670f38cc09a23e Mon Sep 17 00:00:00 2001
From: Marco de Jongh <mdejongh@atlassian.com>
Date: Sat, 24 Jan 2026 12:49:05 +1100
Subject: [PATCH 19/21] fix: Improve null safety and cleanup unused imports

- Extract userId before guard checks in create-climb-form and bulk-import
  for proper TypeScript type narrowing
- Use explicit null check (difficultyId !== null) in saveClimb route
- Update stale comment in moonboard-config to match actual color scheme
- Remove unused imports (SetIdList, BoardName, HoldState) from list page

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .../[layout_id]/[size_id]/[set_ids]/[angle]/list/page.tsx  | 5 ++---
 .../web/app/api/v1/[board_name]/proxy/saveClimb/route.ts   | 2 +-
 .../web/app/components/create-climb/create-climb-form.tsx  | 7 ++++---
 .../components/moonboard-import/moonboard-bulk-import.tsx  | 5 +++--
 packages/web/app/lib/moonboard-config.ts                   | 7 ++++---
 5 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/packages/web/app/[board_name]/[layout_id]/[size_id]/[set_ids]/[angle]/list/page.tsx b/packages/web/app/[board_name]/[layout_id]/[size_id]/[set_ids]/[angle]/list/page.tsx
index 07ffb657..a38be47c 100644
--- a/packages/web/app/[board_name]/[layout_id]/[size_id]/[set_ids]/[angle]/list/page.tsx
+++ b/packages/web/app/[board_name]/[layout_id]/[size_id]/[set_ids]/[angle]/list/page.tsx
@@ -1,8 +1,7 @@
 import React from 'react';
 
 import { notFound, permanentRedirect } from 'next/navigation';
-import { BoardRouteParametersWithUuid, SearchRequestPagination, BoardDetails, BoardName, Climb } from '@/app/lib/types';
-import { SetIdList } from '@/app/lib/board-data';
+import { BoardRouteParametersWithUuid, SearchRequestPagination, BoardDetails, Climb } from '@/app/lib/types';
 import {
   parseBoardRouteParams,
   parsedRouteSearchParamsToSearchParams,
@@ -20,7 +19,7 @@ import { UNIFIED_TABLES } from '@/app/lib/db/queries/util/table-select';
 import { boardClimbStats } from '@boardsesh/db/schema';
 import { eq, and, desc } from 'drizzle-orm';
 import { getGradeByDifficultyId } from '@/app/lib/board-data';
-import type { LitUpHoldsMap, HoldState } from '@/app/components/board-renderer/types';
+import type { LitUpHoldsMap } from '@/app/components/board-renderer/types';
 
 
 // Parse Moonboard frames string to lit up holds map
diff --git a/packages/web/app/api/v1/[board_name]/proxy/saveClimb/route.ts b/packages/web/app/api/v1/[board_name]/proxy/saveClimb/route.ts
index bd402928..edccf196 100644
--- a/packages/web/app/api/v1/[board_name]/proxy/saveClimb/route.ts
+++ b/packages/web/app/api/v1/[board_name]/proxy/saveClimb/route.ts
@@ -73,7 +73,7 @@ export async function POST(request: Request, props: { params: Promise<{ board_na
       // If a grade was provided, create climb stats
       if (validatedData.options.user_grade) {
         const difficultyId = fontGradeToDifficultyId(validatedData.options.user_grade);
-        if (difficultyId) {
+        if (difficultyId !== null) {
           await saveClimbStats('moonboard', {
             climbUuid: response.uuid,
             angle: validatedData.options.angle,
diff --git a/packages/web/app/components/create-climb/create-climb-form.tsx b/packages/web/app/components/create-climb/create-climb-form.tsx
index eea9692a..d172e166 100644
--- a/packages/web/app/components/create-climb/create-climb-form.tsx
+++ b/packages/web/app/components/create-climb/create-climb-form.tsx
@@ -244,7 +244,8 @@ export default function CreateClimbForm({
 
   // Save climb - MoonBoard
   const doSaveMoonBoardClimb = useCallback(async () => {
-    if (!layoutId || !session?.user?.id) return;
+    const userId = session?.user?.id;
+    if (!layoutId || !userId) return;
 
     setIsSaving(true);
 
@@ -268,7 +269,7 @@ export default function CreateClimbForm({
         body: JSON.stringify({
           options: {
             layout_id: layoutId,
-            user_id: session.user.id,
+            user_id: userId,
             name: climbName,
             description: description || '',
             holds,
@@ -295,7 +296,7 @@ export default function CreateClimbForm({
     } finally {
       setIsSaving(false);
     }
-  }, [layoutId, session?.user?.id, litUpHoldsMap, climbName, description, userGrade, isBenchmark, isDraft, selectedAngle, pathname, router]);
+  }, [layoutId, session, litUpHoldsMap, climbName, description, userGrade, isBenchmark, isDraft, selectedAngle, pathname, router]);
 
   const handlePublish = useCallback(async () => {
     if (!isValid || !climbName.trim()) {
diff --git a/packages/web/app/components/moonboard-import/moonboard-bulk-import.tsx b/packages/web/app/components/moonboard-import/moonboard-bulk-import.tsx
index 9c1ab7a6..c2cdd718 100644
--- a/packages/web/app/components/moonboard-import/moonboard-bulk-import.tsx
+++ b/packages/web/app/components/moonboard-import/moonboard-bulk-import.tsx
@@ -167,7 +167,8 @@ export default function MoonBoardBulkImport({
   const handleSaveAll = useCallback(async () => {
     if (state.climbs.length === 0) return;
 
-    if (!session?.user?.id) {
+    const userId = session?.user?.id;
+    if (!userId) {
       message.error('Please log in to save climbs');
       return;
     }
@@ -187,7 +188,7 @@ export default function MoonBoardBulkImport({
             body: JSON.stringify({
               options: {
                 layout_id: layoutId,
-                user_id: session.user.id,
+                user_id: userId,
                 name: climb.name,
                 description: `Setter: ${climb.setter}\nGrade: ${climb.userGrade}${climb.isBenchmark ? '\n(Benchmark)' : ''}`,
                 holds: climb.holds,
diff --git a/packages/web/app/lib/moonboard-config.ts b/packages/web/app/lib/moonboard-config.ts
index 03a2bfe2..51f012e7 100644
--- a/packages/web/app/lib/moonboard-config.ts
+++ b/packages/web/app/lib/moonboard-config.ts
@@ -97,10 +97,11 @@ export const MOONBOARD_SIZE = {
 };
 
 // MoonBoard hold states (different color scheme from Aurora)
+// Green for start holds, Blue for hand/intermediate holds, Red for finish holds
 export const MOONBOARD_HOLD_STATES = {
-  start: { name: 'STARTING' as const, color: '#00FF00', displayColor: '#44FF44' }, // Green
-  hand: { name: 'HAND' as const, color: '#0000FF', displayColor: '#4444FF' }, // Blue
-  finish: { name: 'FINISH' as const, color: '#FF0000', displayColor: '#FF3333' }, // Red
+  start: { name: 'STARTING' as const, color: '#00FF00', displayColor: '#44FF44' },
+  hand: { name: 'HAND' as const, color: '#0000FF', displayColor: '#4444FF' },
+  finish: { name: 'FINISH' as const, color: '#FF0000', displayColor: '#FF3333' },
 } as const;
 
 // Hold state codes for frames encoding (compatible with Aurora format).

From be80a6f38a72d8355c340d735653724447f72e71 Mon Sep 17 00:00:00 2001
From: Marco de Jongh <mdejongh@atlassian.com>
Date: Sat, 24 Jan 2026 12:51:24 +1100
Subject: [PATCH 20/21] fix: Disable climb view page button for MoonBoard
 climbs

The climb view/details page doesn't properly support MoonBoard yet.
Hide the viewDetails action in ClimbCard for MoonBoard climbs until
the view page is adapted for MoonBoard's grid-based rendering.

Relates to #617

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .../web/app/components/climb-card/climb-card.tsx   | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/packages/web/app/components/climb-card/climb-card.tsx b/packages/web/app/components/climb-card/climb-card.tsx
index d808a7cc..d626416e 100644
--- a/packages/web/app/components/climb-card/climb-card.tsx
+++ b/packages/web/app/components/climb-card/climb-card.tsx
@@ -64,6 +64,18 @@ function ClimbCardWithActions({
   const cover = <ClimbCardCover climb={climb} boardDetails={boardDetails} onClick={onCoverClick} onDoubleClick={onCoverDoubleClick} />;
   const cardTitle = <ClimbTitle climb={climb} layout="horizontal" showSetterInfo />;
 
+  // Build exclude list - MoonBoard doesn't have a view details page yet
+  const excludeActions: ('tick' | 'openInApp' | 'mirror' | 'share' | 'addToList' | 'viewDetails')[] = [
+    'tick',
+    'openInApp',
+    'mirror',
+    'share',
+    'addToList',
+  ];
+  if (boardDetails.board_name === 'moonboard') {
+    excludeActions.push('viewDetails');
+  }
+
   return (
     <div data-testid="climb-card">
       <Card
@@ -99,7 +111,7 @@ function ClimbCardWithActions({
             boardDetails={boardDetails}
             angle={climb.angle}
             viewMode="icon"
-            exclude={['tick', 'openInApp', 'mirror', 'share', 'addToList']}
+            exclude={excludeActions}
           />
         </div>
       </Card>

From 67eb1e4248031c015305ca22754350ede85d6c33 Mon Sep 17 00:00:00 2001
From: Marco de Jongh <mdejongh@atlassian.com>
Date: Sat, 24 Jan 2026 12:54:49 +1100
Subject: [PATCH 21/21] fix: Add moonboard support to backend hold state and
 product size maps

Add moonboard entries to HOLD_STATE_MAP and PRODUCT_SIZES records to
satisfy Record<BoardName, ...> type requirements now that moonboard
is included in BoardName union type.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 packages/backend/src/db/queries/climbs/get-climb.ts        | 5 +++++
 packages/backend/src/db/queries/climbs/search-climbs.ts    | 5 +++++
 packages/backend/src/db/queries/util/product-sizes-data.ts | 4 ++++
 3 files changed, 14 insertions(+)

diff --git a/packages/backend/src/db/queries/climbs/get-climb.ts b/packages/backend/src/db/queries/climbs/get-climb.ts
index 7a5b666a..88223016 100644
--- a/packages/backend/src/db/queries/climbs/get-climb.ts
+++ b/packages/backend/src/db/queries/climbs/get-climb.ts
@@ -31,6 +31,11 @@ const HOLD_STATE_MAP: Record<
     7: { name: 'FINISH', displayColor: '#FF0000', color: '#FF0000' },
     8: { name: 'FOOT', displayColor: '#FF00FF', color: '#FF00FF' },
   },
+  moonboard: {
+    42: { name: 'STARTING', color: '#00FF00', displayColor: '#44FF44' },
+    43: { name: 'HAND', color: '#0000FF', displayColor: '#4444FF' },
+    44: { name: 'FINISH', color: '#FF0000', displayColor: '#FF3333' },
+  },
 };
 
 // Warned hold states to avoid log spam
diff --git a/packages/backend/src/db/queries/climbs/search-climbs.ts b/packages/backend/src/db/queries/climbs/search-climbs.ts
index a5d67cbc..20c0fc93 100644
--- a/packages/backend/src/db/queries/climbs/search-climbs.ts
+++ b/packages/backend/src/db/queries/climbs/search-climbs.ts
@@ -37,6 +37,11 @@ const HOLD_STATE_MAP: Record<
     7: { name: 'FINISH', displayColor: '#FF0000', color: '#FF0000' },
     8: { name: 'FOOT', displayColor: '#FF00FF', color: '#FF00FF' },
   },
+  moonboard: {
+    42: { name: 'STARTING', color: '#00FF00', displayColor: '#44FF44' },
+    43: { name: 'HAND', color: '#0000FF', displayColor: '#4444FF' },
+    44: { name: 'FINISH', color: '#FF0000', displayColor: '#FF3333' },
+  },
 };
 
 
diff --git a/packages/backend/src/db/queries/util/product-sizes-data.ts b/packages/backend/src/db/queries/util/product-sizes-data.ts
index 2fd4ab6f..de109b72 100644
--- a/packages/backend/src/db/queries/util/product-sizes-data.ts
+++ b/packages/backend/src/db/queries/util/product-sizes-data.ts
@@ -56,6 +56,10 @@ export const PRODUCT_SIZES: Record<BoardName, Record<number, ProductSizeData>> =
     8: { id: 8, name: '12 high x 8 wide', description: '', edgeLeft: -44, edgeRight: 44, edgeBottom: 0, edgeTop: 144, productId: 5 },
     9: { id: 9, name: '10 high x 8 wide', description: '', edgeLeft: -44, edgeRight: 44, edgeBottom: 0, edgeTop: 120, productId: 5 },
   },
+  // MoonBoard has a single fixed size: 11 columns (A-K) x 18 rows
+  moonboard: {
+    1: { id: 1, name: 'Standard', description: '11x18 Grid', edgeLeft: 0, edgeRight: 11, edgeBottom: 0, edgeTop: 18, productId: 1 },
+  },
 };
 
 /**