Why this order matters. Dependencies flow downward — a file can only be extracted after everything it calls already exists as a standalone import. Utils go first (no JSX, no React, nothing can break). Shared UI components go second (used by multiple modules). Feature modules go last, ordered by their own cross-dependencies. The shell is cleaned up in the final session once every import resolves.

Import alias. Use @/ throughout — already confirmed working in the live file (@/components/JobFeed etc). Maps to the app/ root. New paths: @/utils/colors, @/components/ui/Toast etc. Never use relative paths like ../../utils.

# 1. Confirm you are on staging — never on main
git branch

# 2. Pull latest staging
git pull origin staging

# 3. Get current live line count (shifts after each session — never trust the plan's numbers)
(Get-Content app\platform\page.jsx).Count

# 4. Grep for the function you are about to extract to get its real current line
Select-String -Path app\platform\page.jsx -Pattern "^function ComponentName|^const ComponentName"

# 5. Verify staging.yarashi.com.au is live and the previous session's module still works
# Open browser, sign in, click through the module extracted last session

1.  git checkout staging
2.  git pull origin staging
3.  CREATE the new file — copy extracted lines verbatim, add export keywords, add required imports at top
4.  ADD the import line at the top of page.jsx (after existing imports)
5.  DELETE the extracted block from page.jsx (PowerShell str_replace — never manual edit)
6.  git diff app/platform/page.jsx     ← verify ONLY the deleted block and new import line changed
7.  git diff app/[new-file-path]       ← verify new file matches extracted content exactly
8.  git add -A
9.  git commit -m "refactor: extract [Name] to [filepath] (split session N)"
10. git push origin staging
11. Open staging.yarashi.com.au — run the Session Test Checklist below
12. IF all tests pass: git checkout main && git merge staging && git push origin main
13. IF any test fails: git revert HEAD on staging, investigate, do NOT merge to main

app/
  platform/
    page.jsx                     (~300 lines — shell + imports only)
    MyHub.jsx                    (already separate — untouched)
  utils/
    colors.js                    (54 lines)
    fetch.js                     (includes withRetry — ~130 lines)
    plan.js                      (includes JobLimitGate — ~70 lines)
    exports.js                   (~220 lines)
  components/
    ui/
      Toast.jsx                  (68 lines)
      Logo.jsx                   (59 lines)
      Shared.jsx                 (~350 lines — Tag, Pill, MatchRing, Stat, MiniBar,
                                   SourceTag, FLabel, CopyBtn, Field, DashCard,
                                   DashSectionTitle, DashPill, SkeletonCard,
                                   LoadingScreen, GlobalStyles, AddToKanbanBtn,
                                   SaveToProfileBtn, Chips, LocationPicker,
                                   ListField, SectionHead, F)
      InfoBtn.jsx                (138 lines)
      CVUpload.jsx               (248 lines)
      PricingModal.jsx           (~413 lines)
    NewUserChecklist.jsx         (213 lines)
    Dashboard.jsx                (482 lines)
    ApplicationTracker.jsx       (573 lines — exports autoSaveToTracker)
    CVMatchEngine.jsx            (689 lines)
    JobAnalyser.jsx              (631 lines)
    JobIntelligence.jsx          (~891 lines — includes LOC constants)
    InterviewPrep.jsx            (557 lines)
    CoverLetterBuilder.jsx       (483 lines)
    CVMaestroModule.jsx          (472 lines)
    CVTailorModule.jsx           (766 lines)
    ProfileModule.jsx            (~1,100 lines — exports dbRowToProfile)
    SkillsGapAnalyser.jsx        (~885 lines — includes UsageBadge)
    LinkedInOptimiser.jsx        (387 lines)
    AuthScreen.jsx               (~860 lines — includes AdminPanel, SplashGrabWidget,
                                   JobsWrapper, OnboardingGuide)
  (already external — untouched)
    components/JobFeed.jsx
    components/MyMatches.jsx
    components/JobActionHub.jsx
    components/OnboardingFlow.jsx
    components/RolePrefsPanel.jsx
    components/AdminFeatureBoard.jsx

'use client';
export const dynamic = 'force-dynamic';

// Already external
import JobFeed from '@/components/JobFeed';
import MyMatches from '@/components/MyMatches';
import JobActionHub from '@/components/JobActionHub';
import OnboardingFlow, { GettingStarted } from '@/components/OnboardingFlow';
import RolePrefsPanel from '@/components/RolePrefsPanel';
import AdminFeatureBoard from '@/components/AdminFeatureBoard';
import MyHub from './MyHub';
import React, { useState, useMemo, useCallback, useEffect, useRef, forwardRef, useImperativeHandle } from 'react';

// Extracted in split sessions
import { C } from '@/utils/colors';
import { safeFetch, setCachedAnalysis } from '@/utils/fetch';
import { isPlanPro, useCVCount } from '@/utils/plan';
import { LogoSVG, YarashiMark } from '@/components/ui/Logo';
import { ToastContainer, showToast } from '@/components/ui/Toast';
import { LoadingScreen, GlobalStyles } from '@/components/ui/Shared';
import CVUpload from '@/components/ui/CVUpload';
import { PricingModal } from '@/components/ui/PricingModal';
import NewUserChecklist from '@/components/NewUserChecklist';
import Dashboard from '@/components/Dashboard';
import ApplicationTracker from '@/components/ApplicationTracker';
import CVMatchEngine from '@/components/CVMatchEngine';
import { JobAnalyser } from '@/components/JobAnalyser';
import JobIntelligence from '@/components/JobIntelligence';
import InterviewPrep from '@/components/InterviewPrep';
import CoverLetterBuilder from '@/components/CoverLetterBuilder';
import CVMaestroModule from '@/components/CVMaestroModule';
import CVTailorModule from '@/components/CVTailorModule';
import ProfileModule, { dbRowToProfile } from '@/components/ProfileModule';
import SkillsGapAnalyser from '@/components/SkillsGapAnalyser';
import LinkedInOptimiser from '@/components/LinkedInOptimiser';
import { AdminPanel, AuthScreen, JobsWrapper } from '@/components/AuthScreen';
import SupportBot from '@/components/SupportBot';

SupportBot (lines 4102–4311, 210 lines) was not assigned a session in the table above because it sits between CVTailorModule and JobAnalyser in the file and has no dependency on autoSaveToTracker. Extract it in its own session between Session 20 (CVTailorModule) and Session 21 (ProfileModule), or bundle with Session 20. It depends only on C and LogoSVG.