feat: Add ability to purchase provider coding plans

apps/web/src/app/(app)/components/PersonalAppSidebar.tsx

@@ -3,7 +3,7 @@
 import { Sidebar, SidebarContent, SidebarHeader } from '@/components/ui/sidebar';
 import { useUser } from '@/hooks/useUser';
 import { useKiloClawStatus } from '@/hooks/useKiloClaw';
-import { useEffect, useMemo, useState } from 'react';
+import { useState } from 'react';
 import {
   Code,
   Coins,
@@ -197,6 +197,7 @@ export default function PersonalAppSidebar(props: React.ComponentProps<typeof Si
     title: string;
     icon: React.ElementType;
     url: string;
+    badge?: string;
     className?: string;
   }> = [
     {
@@ -262,13 +263,16 @@ export default function PersonalAppSidebar(props: React.ComponentProps<typeof Si
     : 'unknown';
   const hasKiloClawInstance = kiloClawInstanceState === 'present';
   const isKiloClawPath = pathname === kiloClawBaseUrl || pathname.startsWith(kiloClawBaseUrl + '/');
-  const [sidebarMenu, setSidebarMenu] = useState<'main' | 'kiloClaw'>(
-    isKiloClawPath && hasKiloClawInstance ? 'kiloClaw' : 'main'
-  );
-
-  useEffect(() => {
-    setSidebarMenu(isKiloClawPath && hasKiloClawInstance ? 'kiloClaw' : 'main');
-  }, [hasKiloClawInstance, isKiloClawPath]);
+  const [sidebarMenuOverride, setSidebarMenuOverride] = useState<{
+    pathname: string;
+    menu: 'main' | 'kiloClaw';
+  } | null>(null);
+  const sidebarMenu =
+    hasKiloClawInstance && sidebarMenuOverride?.pathname === pathname
+      ? sidebarMenuOverride.menu
+      : isKiloClawPath && hasKiloClawInstance
+        ? 'kiloClaw'
+        : 'main';
 
   const kiloClawEntryItems: Array<{
     title: string;
@@ -282,7 +286,7 @@ export default function PersonalAppSidebar(props: React.ComponentProps<typeof Si
         {
           title: 'KiloClaw',
           icon: MessageSquare,
-          onClick: () => setSidebarMenu('kiloClaw'),
+          onClick: () => setSidebarMenuOverride({ pathname, menu: 'kiloClaw' }),
           isActive: isKiloClawPath,
           suffixIcon: ChevronRight,
         },
@@ -304,22 +308,18 @@ export default function PersonalAppSidebar(props: React.ComponentProps<typeof Si
     {
       title: 'Back',
       icon: ChevronLeft,
-      onClick: () => setSidebarMenu('main'),
+      onClick: () => setSidebarMenuOverride({ pathname, menu: 'main' }),
     },
   ];
 
-  const allUrls = useMemo(
-    () =>
-      [
-        kiloClawBaseUrl,
-        ...dashboardItems,
-        ...kiloClawItems,
-        ...cloudItems,
-        ...accountItems,
-        ...startItems,
-      ].map(i => (typeof i === 'string' ? i : i.url)),
-    [kiloClawBaseUrl, dashboardItems, kiloClawItems, cloudItems, accountItems, startItems]
-  );
+  const allUrls = [
+    kiloClawBaseUrl,
+    ...dashboardItems,
+    ...kiloClawItems,
+    ...cloudItems,
+    ...accountItems,
+    ...startItems,
+  ].map(i => (typeof i === 'string' ? i : i.url));
 
   return (
     <Sidebar {...props}>

apps/web/src/app/(app)/subscriptions/coding-plans/[subscriptionId]/page.tsx

@@ -1,10 +1,16 @@
 import { PageContainer } from '@/components/layouts/PageContainer';
 import { CodingPlanDetail } from '@/components/subscriptions/coding-plans/CodingPlanDetail';
 
-export default function CodingPlanSubscriptionPage() {
+export default async function CodingPlanSubscriptionPage({
+  params,
+}: {
+  params: Promise<{ subscriptionId: string }>;
+}) {
+  const { subscriptionId } = await params;
+
   return (
     <PageContainer>
-      <CodingPlanDetail />
+      <CodingPlanDetail key={subscriptionId} subscriptionId={subscriptionId} />
     </PageContainer>
   );
 }

apps/web/src/app/(app)/subscriptions/page.tsx

@@ -1,5 +1,6 @@
 import { PersonalSubscriptions } from '@/components/subscriptions/PersonalSubscriptions';
+import { CODING_PLANS_PURCHASE_ENABLED } from '@/lib/config.server';
 
 export default function SubscriptionsPage() {
-  return <PersonalSubscriptions />;
+  return <PersonalSubscriptions codingPlansEnabled={CODING_PLANS_PURCHASE_ENABLED} />;
 }