Problem

src/pages/profile/[id].tsx:49 stores the active profile tab in React state:

const [activeTab, setActiveTab] = useState<ProfileTab>("command-center");

On refresh, the user is always sent back to "command-center" — even if they were viewing Settings, Arsenal, or Service Record. Tabs also cannot be deep-linked (e.g., sharing "view my arsenal").

Expected behavior

Active tab is reflected in the URL (e.g., /profile/abc?tab=arsenal) and survives page reload, back/forward navigation, and sharing.

Acceptance criteria

• Active tab derived from router.query.tab, defaulting to "command-center" when absent.
• Clicking a tab calls router.push({ query: { ...router.query, tab } }, undefined, { shallow: true }).
• Reload preserves the tab.
• Deep links like /profile/{id}?tab=settings work.
• Invalid ?tab= values fall back to default gracefully (no crash).

Suggested approach

const router = useRouter();
const tabFromUrl = router.query.tab as ProfileTab | undefined;
const activeTab: ProfileTab = VALID_TABS.includes(tabFromUrl) ? tabFromUrl : "command-center";

Keep a shallow-routing helper so tab changes don't re-run getServerSideProps.