frontier-os-app-builder 1.1.0 → 1.2.0

package/templates/app/sdk-context.tsx

@@ -1,4 +1,4 @@
-import { createContext, useContext, useEffect, useRef, useState, type ReactNode } from 'react';
+import { createContext, useContext, useEffect, useState, type ReactNode } from 'react';
 import { FrontierSDK } from '@frontiertower/frontier-sdk';
 
 const SdkContext = createContext<FrontierSDK | null>(null);
@@ -10,23 +10,21 @@ export const useSdk = (): FrontierSDK => {
 };
 
 export const SdkProvider = ({ children }: { children: ReactNode }) => {
-  const sdkRef = useRef<FrontierSDK | null>(null);
-  const [ready, setReady] = useState(false);
+  const [sdk, setSdk] = useState<FrontierSDK | null>(null);
 
   useEffect(() => {
-    const sdk = new FrontierSDK();
-    sdkRef.current = sdk;
-    setReady(true);
+    const instance = new FrontierSDK();
+    setSdk(instance);
 
     return () => {
-      sdk.destroy();
+      instance.destroy();
     };
   }, []);
 
-  if (!ready) return null;
+  if (!sdk) return null;
 
   return (
-    <SdkContext.Provider value={sdkRef.current}>
+    <SdkContext.Provider value={sdk}>
       {children}
     </SdkContext.Provider>
   );

package/templates/app/sdk-services.tsx

@@ -1,123 +1,98 @@
-import { FrontierSDK } from '@frontiertower/frontier-sdk';
-import type { FrontierServices } from './frontier-services';
+/**
+ * SDK Services Adapter
+ *
+ * Maps the FrontierServices interface to real SDK module calls.
+ * Used when the app runs inside the Frontier OS iframe.
+ * Only modules declared in manifest.json are wired; unused modules throw.
+ *
+ * During SDK Integration the executor should:
+ * 1. Wire modules the app actually uses (replace Proxy stubs with real SDK calls)
+ * 2. Keep Proxy stubs for unused modules
+ */
+
+import type { FrontierSDK } from '@frontiertower/frontier-sdk';
+import type {
+  FrontierServices,
+  WalletService,
+  StorageService,
+  ChainService,
+  UserService,
+  PartnershipsService,
+  ThirdPartyService,
+  CommunitiesService,
+  EventsService,
+  OfficesService,
+  NavigationService,
+} from './frontier-services';
+
+function notAvailable(module: string): never {
+  throw new Error(`[SDK] ${module} module is not available in this app`);
+}
 
 export function createSdkServices(sdk: FrontierSDK): FrontierServices {
-  const wallet = sdk.getWallet();
-  const storage = sdk.getStorage();
-  const chain = sdk.getChain();
-  const user = sdk.getUser();
-  const partnerships = sdk.getPartnerships();
-  const thirdParty = sdk.getThirdParty();
-  const communities = sdk.getCommunities();
-  const events = sdk.getEvents();
-  const offices = sdk.getOffices();
-  const navigation = sdk.getNavigation();
+  void sdk; // marks `sdk` used while modules are still stubs; remove once you wire one below (e.g. sdk.getWallet())
+  // ── Wire modules your app uses ──────────────────────────────
+  // Replace the Proxy stubs below with real SDK adapter objects
+  // for each module declared in manifest.json.
+  //
+  // Example (wallet):
+  //   const walletAccess = sdk.getWallet();
+  //   const wallet: WalletService = {
+  //     getBalance: () => walletAccess.getBalance(),
+  //     ...
+  //   };
+
+  // ── Stub modules not used by this app ───────────────────────
+  const wallet = new Proxy({} as WalletService, {
+    get: () => () => notAvailable('Wallet'),
+  });
+
+  const storage = new Proxy({} as StorageService, {
+    get: () => () => notAvailable('Storage'),
+  });
+
+  const chain = new Proxy({} as ChainService, {
+    get: () => () => notAvailable('Chain'),
+  });
+
+  const user = new Proxy({} as UserService, {
+    get: () => () => notAvailable('User'),
+  });
+
+  const partnerships = new Proxy({} as PartnershipsService, {
+    get: () => () => notAvailable('Partnerships'),
+  });
+
+  const thirdParty = new Proxy({} as ThirdPartyService, {
+    get: () => () => notAvailable('ThirdParty'),
+  });
+
+  const communities = new Proxy({} as CommunitiesService, {
+    get: () => () => notAvailable('Communities'),
+  });
+
+  const events = new Proxy({} as EventsService, {
+    get: () => () => notAvailable('Events'),
+  });
+
+  const offices = new Proxy({} as OfficesService, {
+    get: () => () => notAvailable('Offices'),
+  });
+
+  const navigation = new Proxy({} as NavigationService, {
+    get: () => () => notAvailable('Navigation'),
+  });
 
   return {
-    wallet: {
-      getBalance: () => wallet.getBalance(),
-      getBalanceFormatted: () => wallet.getBalanceFormatted(),
-      getAddress: () => wallet.getAddress(),
-      getSmartAccount: () => wallet.getSmartAccount(),
-      transferERC20: (tokenAddress, to, amount, overrides) => wallet.transferERC20(tokenAddress, to, amount, overrides),
-      approveERC20: (tokenAddress, spender, amount, overrides) => wallet.approveERC20(tokenAddress, spender, amount, overrides),
-      transferNative: (to, amount, overrides) => wallet.transferNative(to, amount, overrides),
-      executeCall: (call, overrides) => wallet.executeCall(call, overrides),
-      executeBatchCall: (calls, overrides) => wallet.executeBatchCall(calls, overrides),
-      transferFrontierDollar: (to, amount, overrides) => wallet.transferFrontierDollar(to, amount, overrides),
-      transferInternalFrontierDollar: (to, amount, overrides) => wallet.transferInternalFrontierDollar(to, amount, overrides),
-      transferOverallFrontierDollar: (to, amount, overrides) => wallet.transferOverallFrontierDollar(to, amount, overrides),
-      getSupportedTokens: () => wallet.getSupportedTokens(),
-      swap: (sourceToken, targetToken, sourceNetwork, targetNetwork, amount) => wallet.swap(sourceToken, targetToken, sourceNetwork, targetNetwork, amount),
-      quoteSwap: (sourceToken, targetToken, sourceNetwork, targetNetwork, amount) => wallet.quoteSwap(sourceToken, targetToken, sourceNetwork, targetNetwork, amount),
-      getUsdDepositInstructions: () => wallet.getUsdDepositInstructions(),
-      getEurDepositInstructions: () => wallet.getEurDepositInstructions(),
-      getLinkedBanks: () => wallet.getLinkedBanks(),
-      linkUsBankAccount: (accountOwnerName, bankName, routingNumber, accountNumber, checkingOrSavings, address) => wallet.linkUsBankAccount(accountOwnerName, bankName, routingNumber, accountNumber, checkingOrSavings, address),
-      linkEuroAccount: (accountOwnerName, accountOwnerType, firstName, lastName, ibanAccountNumber, bic) => wallet.linkEuroAccount(accountOwnerName, accountOwnerType, firstName, lastName, ibanAccountNumber, bic),
-      deleteLinkedBank: (bankId) => wallet.deleteLinkedBank(bankId),
-      getDeprecatedSmartAccounts: () => wallet.getDeprecatedSmartAccounts(),
-    },
-    storage: {
-      get: <T,>(key: string) => storage.get<T>(key),
-      set: (key, value) => storage.set(key, value),
-      remove: (key) => storage.remove(key),
-      clear: () => storage.clear(),
-    },
-    chain: {
-      getCurrentNetwork: () => chain.getCurrentNetwork(),
-      getAvailableNetworks: () => chain.getAvailableNetworks(),
-      switchNetwork: (network) => chain.switchNetwork(network),
-      getCurrentChainConfig: () => chain.getCurrentChainConfig(),
-      getContractAddresses: () => chain.getContractAddresses(),
-    },
-    user: {
-      getDetails: () => user.getDetails(),
-      getProfile: () => user.getProfile(),
-      getReferralOverview: () => user.getReferralOverview(),
-      getReferralDetails: (page) => user.getReferralDetails(page),
-      addUserContact: (data) => user.addUserContact(data),
-      getOrCreateKyc: (redirectUri) => user.getOrCreateKyc(redirectUri),
-      createSignupRequest: (payload) => user.createSignupRequest(payload),
-      getVerifiedAccessControls: () => user.getVerifiedAccessControls(),
-    },
-    partnerships: {
-      createSponsorPass: (payload) => partnerships.createSponsorPass(payload),
-      listActiveSponsorPasses: (payload) => partnerships.listActiveSponsorPasses(payload),
-      listAllSponsorPasses: (payload) => partnerships.listAllSponsorPasses(payload),
-      listSponsors: (payload) => partnerships.listSponsors(payload),
-      getSponsor: (payload) => partnerships.getSponsor(payload),
-      getSponsorPass: (payload) => partnerships.getSponsorPass(payload),
-      revokeSponsorPass: (payload) => partnerships.revokeSponsorPass(payload),
-    },
-    thirdParty: {
-      listDevelopers: (payload) => thirdParty.listDevelopers(payload),
-      getDeveloper: (payload) => thirdParty.getDeveloper(payload),
-      updateDeveloper: (payload) => thirdParty.updateDeveloper(payload),
-      rotateDeveloperApiKey: (payload) => thirdParty.rotateDeveloperApiKey(payload),
-      listApps: (payload) => thirdParty.listApps(payload),
-      createApp: (payload) => thirdParty.createApp(payload),
-      getApp: (payload) => thirdParty.getApp(payload),
-      updateApp: (payload) => thirdParty.updateApp(payload),
-      deleteApp: (payload) => thirdParty.deleteApp(payload),
-      listWebhooks: (payload) => thirdParty.listWebhooks(payload),
-      createWebhook: (payload) => thirdParty.createWebhook(payload),
-      getWebhook: (payload) => thirdParty.getWebhook(payload),
-      updateWebhook: (payload) => thirdParty.updateWebhook(payload),
-      deleteWebhook: (payload) => thirdParty.deleteWebhook(payload),
-      rotateWebhookSigningKey: (payload) => thirdParty.rotateWebhookSigningKey(payload),
-    },
-    communities: {
-      listCommunities: (payload) => communities.listCommunities(payload),
-      getCommunity: (payload) => communities.getCommunity(payload),
-      createInternshipPass: (payload) => communities.createInternshipPass(payload),
-      listInternshipPasses: (payload) => communities.listInternshipPasses(payload),
-      getInternshipPass: (payload) => communities.getInternshipPass(payload),
-      revokeInternshipPass: (payload) => communities.revokeInternshipPass(payload),
-      createReassignRequest: (payload) => communities.createReassignRequest(payload),
-      listReassignRequests: (payload) => communities.listReassignRequests(payload),
-      getReassignRequest: (payload) => communities.getReassignRequest(payload),
-      acceptReassignRequest: (payload) => communities.acceptReassignRequest(payload),
-      rejectReassignRequest: (payload) => communities.rejectReassignRequest(payload),
-    },
-    events: {
-      listEvents: (payload) => events.listEvents(payload),
-      createEvent: (payload) => events.createEvent(payload),
-      addEventHost: (payload) => events.addEventHost(payload),
-      listLocations: (payload) => events.listLocations(payload),
-      listRoomBookings: (payload) => events.listRoomBookings(payload),
-      createRoomBooking: (payload) => events.createRoomBooking(payload),
-    },
-    offices: {
-      createAccessPass: (payload) => offices.createAccessPass(payload),
-      listAccessPasses: (payload) => offices.listAccessPasses(payload),
-      getAccessPass: (payload) => offices.getAccessPass(payload),
-      revokeAccessPass: (payload) => offices.revokeAccessPass(payload),
-    },
-    navigation: {
-      openApp: (appId, options) => navigation.openApp(appId, options),
-      close: () => navigation.close(),
-      onDeepLink: (callback) => navigation.onDeepLink(callback),
-    },
+    wallet,
+    storage,
+    chain,
+    user,
+    partnerships,
+    thirdParty,
+    communities,
+    events,
+    offices,
+    navigation,
   };
 }

package/templates/app/vercel.json

@@ -5,13 +5,6 @@
   "headers": [
     {
       "source": "/(.*)",
-      "has": [
-        {
-          "type": "header",
-          "key": "Origin",
-          "value": "https://os.frontiertower.io"
-        }
-      ],
       "headers": [
         {
           "key": "Access-Control-Allow-Origin",
@@ -24,54 +17,22 @@
         {
           "key": "Access-Control-Allow-Headers",
           "value": "Content-Type"
-        }
-      ]
-    },
-    {
-      "source": "/(.*)",
-      "has": [
-        {
-          "type": "header",
-          "key": "Origin",
-          "value": "https://sandbox.os.frontiertower.io"
-        }
-      ],
-      "headers": [
-        {
-          "key": "Access-Control-Allow-Origin",
-          "value": "https://sandbox.os.frontiertower.io"
         },
         {
-          "key": "Access-Control-Allow-Methods",
-          "value": "GET, OPTIONS"
+          "key": "Content-Security-Policy",
+          "value": "frame-ancestors https://os.frontiertower.io https://sandbox.os.frontiertower.io http://localhost:5173;"
         },
         {
-          "key": "Access-Control-Allow-Headers",
-          "value": "Content-Type"
-        }
-      ]
-    },
-    {
-      "source": "/(.*)",
-      "has": [
-        {
-          "type": "header",
-          "key": "Origin",
-          "value": "http://localhost:5173"
-        }
-      ],
-      "headers": [
-        {
-          "key": "Access-Control-Allow-Origin",
-          "value": "http://localhost:5173"
+          "key": "X-Content-Type-Options",
+          "value": "nosniff"
         },
         {
-          "key": "Access-Control-Allow-Methods",
-          "value": "GET, OPTIONS"
+          "key": "Referrer-Policy",
+          "value": "strict-origin-when-cross-origin"
         },
         {
-          "key": "Access-Control-Allow-Headers",
-          "value": "Content-Type"
+          "key": "Permissions-Policy",
+          "value": "camera=(), microphone=(), geolocation=()"
         }
       ]
     }

package/templates/state/plan.md

@@ -42,8 +42,9 @@ SDK Modules: [Which SDK modules are used in this plan, if any]
 @.frontier-app/ROADMAP.md
 @.frontier-app/STATE.md
 
-# SDK reference for modules used in this plan:
-@frontier-sdk/docs/[module].md
+# Feature phases consume the mock service layer (useServices) — no SDK docs in <context>.
+# SDK module docs are referenced ONLY in the final SDK Integration plan, via:
+# @frontier-os-app-builder/references/sdk/[module].md
 
 # Only reference prior plan SUMMARYs if genuinely needed:
 # - This plan uses types/exports from prior plan
@@ -88,7 +89,7 @@ SDK Modules: [Which SDK modules are used in this plan, if any]
   <how-to-verify>Visit http://localhost:{{DEV_PORT}} and verify:
   - [Visual check 1]
   - [Visual check 2]
-  Open Frontier OS at localhost:3000 and verify app loads in iframe.</how-to-verify>
+  (SDK Integration phase only) Open Frontier OS at localhost:3000 and verify the app loads in the iframe.</how-to-verify>
   <resume-signal>Type "approved" or describe issues</resume-signal>
 </task>
 
@@ -136,26 +137,43 @@ After completion, create `.frontier-app/phases/XX-name/{phase}-{plan}-SUMMARY.md
 
 ## Frontier OS Specifics
 
-**Phase 1 plans always include:**
+**Phase 1 (scaffold) plans always include — standalone-first:**
 - Vite scaffold from `templates/app/vite.config.ts`
-- SdkProvider from `templates/app/sdk-context.tsx`
-- Layout with iframe detection from `templates/app/layout.tsx`
-- Dark theme setup via Tailwind
-- Standalone fallback UI
+- `FrontierServicesProvider` + mock services from `templates/app/frontier-services.tsx` → `src/lib/frontier-services.tsx` (feature code calls `useServices()`)
+- Layout from `templates/app/layout-standalone.tsx` → `src/views/Layout.tsx` (NO iframe detection, NO SdkProvider)
+- Entry from `templates/app/main-router.tsx` (router entry — all apps use the router)
+- Dark theme via Tailwind 4 `@theme` in `src/styles/index.css` (CSS-only — no `tailwind.config`)
+- Standalone UI rendering with mock data
 - Dev server on assigned port
 
-**SDK usage in tasks:**
-- Always specify the exact import: `import { FrontierSDK } from '@frontiertower/frontier-sdk'`
-- Always use `useSdk()` hook, never instantiate SDK directly in components
-- Always wrap SDK calls in try/catch — SDK may not be available in standalone mode
-- Reference the specific SDK module docs in `<context>` section
+**Phase 1 BLOCKLIST — NEVER include these in a scaffold plan:**
+- ❌ `sdk-context.tsx` — this file is created during SDK Integration phase, NOT Phase 1
+- ❌ `layout.tsx` template — use `layout-standalone.tsx` instead (no iframe detection, no SdkProvider)
+- ❌ single-component entries — use `main-router.tsx` instead (all apps use the router; no single-component entry)
+- ❌ `package.json` template — use `package-standalone.json` instead (no SDK dependency)
+- ❌ `vercel.json` template — use `vercel-standalone.json` instead (no CORS headers)
+- ❌ `@frontiertower/frontier-sdk` in dependencies — SDK is added during SDK Integration phase
+- ❌ `isInFrontierApp()` or `createStandaloneHTML()` in Layout — these are SDK Integration concerns
+- ❌ `SdkProvider` wrapping — use `FrontierServicesProvider` instead
+- ❌ `useSdk()` — use `useServices()` instead
+- ❌ Any import from `@frontiertower/frontier-sdk` — the SDK package does not exist in Phase 1
+
+**Service usage in feature phases (Phase 2+):**
+- Call service methods through the mock seam: `services.<module>.<method>()` (e.g. `services.wallet.getBalance()`)
+- Always obtain services via `useServices()` — `import { useServices } from '../lib/frontier-services'`
+- Wrap service calls in try/catch and handle loading/error states
+- Never import `@frontiertower/frontier-sdk` or call `useSdk()` in feature code
+- The `FrontierSDK` import + `useSdk()` pattern belongs ONLY to the final SDK Integration phase
 
 **Verification always includes:**
 - Build succeeds (`npm run build`)
 - Dev server starts on correct port
 - No TypeScript errors
 - Dark theme renders correctly (no white backgrounds)
-- App works in both iframe and standalone modes
+- Standalone renders with mock services (`useServices()` resolves)
+
+**SDK Integration tier (final phase) additionally verifies:**
+- App works in both iframe and standalone modes (in-frame `services.*` resolve via the SDK bridge)
 
 ---
 

package/templates/state/roadmap.md

@@ -71,7 +71,7 @@ Plans:
   1. sdk-context.tsx exists and exports useSdk + SdkProvider
   2. sdk-services.tsx maps all service methods to real SDK calls
   3. Layout.tsx has isInFrontierApp() detection and SdkProvider wrapping
-  4. vercel.json has all 3 CORS origin blocks
+  4. vercel.json has CORS + CSP frame-ancestors (3 origins) + security headers
   5. App works both standalone (mocks) and in iframe (real SDK)
   6. npm run build succeeds
 **Plans**: 1 plan (mechanical)
@@ -142,7 +142,7 @@ Plans:
 - `templates/app/vite.config.ts` → configured with app's dev port
 - `templates/app/frontier-services.tsx` → useServices() provider + mock services
 - `templates/app/layout-standalone.tsx` → dark theme shell with FrontierServicesProvider
-- `templates/app/main-simple-standalone.tsx` or `main-router.tsx` → entry point
+- `templates/app/main-router.tsx` → entry point
 - `templates/app/package-standalone.json` → dependencies without SDK
 - `templates/app/vercel-standalone.json` → SPA rewrite only (no CORS)
 - `templates/app/tsconfig.json` → TypeScript config

package/templates/state/summary.md

@@ -71,8 +71,8 @@ Each task was committed atomically:
 
 ## Files Created/Modified
 
-- `src/App.tsx` — What it does
-- `src/lib/sdk-context.tsx` — What it does
+- `src/main.tsx` — What it does
+- `src/lib/frontier-services.tsx` — What it does
 
 ## SDK Integration Notes
 
@@ -136,7 +136,7 @@ Or "No SDK module integration in this plan" if scaffold-only.]
 
 **One-liner:**
 Must be substantive. Examples:
-- "Vite + React scaffold with SdkProvider, iframe detection, and dark Tailwind theme"
+- "Vite + React scaffold with mock services layer, FrontierServicesProvider, and dark Tailwind theme"
 - "Event listing page with real-time updates via Events SDK module"
 - "Wallet integration for USDC payments with transaction confirmation UI"
 
@@ -164,30 +164,30 @@ NOT: "Phase complete" / "Scaffold done" / "Feature implemented"
 phase: 01-scaffold
 plan: 01
 subsystem: scaffold
-tags: [react, vite, tailwind, frontier-sdk, iframe-detection]
+tags: [react, vite, tailwind, mock-services, standalone]
 
 requires: []
 provides:
   - "Vite + React project structure"
-  - "SdkProvider context with useSdk hook"
-  - "Iframe detection with standalone fallback"
+  - "FrontierServicesProvider context with useServices hook"
+  - "Mock services layer via createMockServices()"
   - "Dark theme via Tailwind"
 affects: [02-event-listing, 03-event-creation]
 
 tech-stack:
-  added: [react, vite, tailwind, @frontiertower/frontier-sdk]
-  patterns: [SdkProvider wrapper, useSdk hook, iframe detection utility]
+  added: [react, react-dom, react-router-dom, vite, tailwindcss, vitest]
+  patterns: [FrontierServicesProvider + useServices(), mock services layer, dark Tailwind 4 @theme]
 
 key-files:
-  created: [src/App.tsx, src/lib/sdk-context.tsx, src/lib/iframe.ts, src/components/Layout.tsx]
+  created: [src/main.tsx, src/lib/frontier-services.tsx, src/views/Layout.tsx, src/styles/index.css, vite.config.ts, tsconfig.json, postcss.config.js, index.html]
   modified: []
 
 key-decisions:
   - "Used Tailwind for styling — matches Frontier OS design system"
-  - "Iframe detection via window.self !== window.top with fallback UI"
+  - "Standalone-first: feature code consumes useServices(), never the SDK directly"
 
 patterns-established:
-  - "SdkProvider: All SDK access via useSdk() hook, never direct instantiation"
+  - "Services: All data access via useServices() hook; mocks until SDK Integration"
   - "Dark theme: bg-neutral-950 base, text-white, no light mode support"
 
 sdk-modules-used: []
@@ -200,7 +200,7 @@ completed: 2026-03-27
 
 # Phase 1: Scaffold + Standalone Shell — Plan 1 Summary
 
-**Vite + React scaffold with services layer, mock data, dark Tailwind theme on port 5180**
+**Vite + React scaffold with mock services layer, FrontierServicesProvider, and dark Tailwind theme on port 5180**
 
 ## Performance
 
@@ -213,38 +213,35 @@ completed: 2026-03-27
 ## Accomplishments
 
 - Full Vite + React + TypeScript project scaffolded
-- SdkProvider wraps app, useSdk() available everywhere
-- Iframe detection works — shows standalone banner when not in Frontier OS
+- FrontierServicesProvider wraps app, useServices() available everywhere
+- Mock services layer returns realistic data via createMockServices()
 - Dark theme via Tailwind — bg-neutral-950 base, all components dark
 
 ## Task Commits
 
 1. **Task 1: Scaffold Vite project** — `a1b2c3d` (feat: scaffold)
-2. **Task 2: SdkProvider + iframe detection** — `e4f5g6h` (feat: sdk integration)
+2. **Task 2: FrontierServicesProvider + mock services** — `e4f5g6h` (feat: services layer)
 3. **Task 3: Dark theme + layout** — `i7j8k9l` (feat: dark theme)
 
 ## Files Created/Modified
 
-- `src/App.tsx` — Root component with SdkProvider
-- `src/lib/sdk-context.tsx` — SdkProvider + useSdk hook
-- `src/lib/iframe.ts` — Iframe detection utility
-- `src/components/Layout.tsx` — Dark theme shell
-- `vite.config.ts` — Dev server on port 5180
-- `tailwind.config.ts` — Dark theme configuration
+- `src/main.tsx` — React root; wraps the app in FrontierServicesProvider
+- `src/lib/frontier-services.tsx` — FrontierServicesProvider + useServices() hook + createMockServices()
+- `src/views/Layout.tsx` — Dark theme shell
+- `src/styles/index.css` — Tailwind + dark theme variables
+- `vite.config.ts` — Vite + Vitest, dev server on port 5180
 - `tsconfig.json` — TypeScript strict mode
 - `postcss.config.js` — Tailwind PostCSS setup
+- `index.html` — Entry HTML with `<body class="dark">`
 
 ## SDK Integration Notes
 
-- SDK initialized once in SdkProvider via useRef to prevent re-instantiation
-- SDK destroyed on unmount via cleanup in useEffect
-- useSdk() throws if used outside SdkProvider — fail-fast pattern
-- No SDK modules used yet — just core initialization
+No SDK in this phase — services come from `createMockServices()`; the real SDK is wired in the final SDK Integration phase.
 
 ## Decisions Made
 
 - Used Tailwind instead of CSS modules — better dark theme support, matches Frontier OS
-- Iframe detection uses window.self !== window.top — simple, reliable
+- Standalone-first: feature code consumes useServices(), keeping the SDK out of Phase 1
 
 ## Deviations from Plan
 
@@ -256,13 +253,13 @@ None — plan executed exactly as written
 - [x] Dev server: pass on port 5180
 - [x] TypeScript: pass (strict mode, no errors)
 - [x] Dark theme: pass (no white backgrounds)
-- [x] Iframe mode: pass (renders in Frontier OS)
-- [x] Standalone mode: pass (shows fallback banner)
+- [x] Iframe mode: N/A (wired during SDK Integration phase)
+- [x] Standalone mode: pass (renders with mock data)
 
 ## Next Phase Readiness
 
 - Scaffold complete, ready for feature development
-- SdkProvider available for module integration in Phase 2
+- useServices() available for feature hooks in Phase 2
 - No blockers
 
 ---

package/workflows/add-feature.md

@@ -35,10 +35,15 @@ Check if `$ARGUMENTS` contains a feature description.
 Adding feature: "[description]"
 ```
 
-**If no description:** Use AskUserQuestion:
+**If no description:** Use AskUserQuestion (if available):
 - header: "New Feature"
 - question: "What feature do you want to add to [App Name]? Describe what it does."
 
+If AskUserQuestion denied: error and exit — a description is required:
+```
+Error: No feature description provided. Usage: /fos:add-feature "describe the feature"
+```
+
 **Store the description** for module inference.
 </step>
 

package/workflows/discuss.md

@@ -108,7 +108,7 @@ Extract from ROADMAP.md for this phase:
 
 **If `has_context` is true:**
 
-Use AskUserQuestion:
+Use AskUserQuestion (if available):
 - header: "Context Exists"
 - question: "Phase [X] already has context decisions. What do you want to do?"
 - options:
@@ -120,6 +120,8 @@ Use AskUserQuestion:
 **If "View":** Display CONTEXT.md, then offer Update/Skip.
 **If "Skip":** Exit workflow with next-up pointing to `/fos:plan N`.
 
+**If AskUserQuestion denied:** Skip — use existing context as-is, proceed to planning.
+
 **If `has_context` is false:** Continue to analyze_phase.
 </step>
 
@@ -294,7 +296,7 @@ I've identified [count] areas where your input will shape the implementation:
 4. **[Area 4]** — [One sentence]
 ```
 
-Use AskUserQuestion:
+Use AskUserQuestion (if available):
 - header: "Topics"
 - question: "Which areas do you want to discuss? I'll handle the rest with sensible defaults."
 - multiSelect: true
@@ -302,12 +304,16 @@ Use AskUserQuestion:
 
 **If "None":** Set all areas as "Claude's Discretion" and skip to write_context.
 **If specific areas selected:** Discuss those, mark unselected as "Claude's Discretion".
+
+**If AskUserQuestion denied (autonomous/don't-ask mode):** Present the gray areas and your recommended defaults, then mark all as "Claude's Discretion" and proceed to write_context. Briefly explain each choice so the user can review in CONTEXT.md.
 </step>
 
 <step name="discuss_areas">
 **Deep-dive each selected area.**
 
-For each selected gray area, ask ONE focused question at a time. Use AskUserQuestion with concrete options — never open-ended "what do you think?"
+For each selected gray area, ask ONE focused question at a time. Use AskUserQuestion (if available) with concrete options — never open-ended "what do you think?"
+
+**If AskUserQuestion denied (autonomous/don't-ask mode):** This step is skipped — all areas were already resolved with defaults in the present_gray_areas step.
 
 **Prior decision awareness:** If `prior_decisions` contains a relevant decision for this area, present it as context: "In Phase [N], you decided [decision]. Apply the same approach here, or different?" Offer "Same as Phase [N]" as the first option, then the other alternatives.
 

package/workflows/execute-plan.md

@@ -32,7 +32,7 @@ This workflow runs inside a subagent — it does not spawn further subagents.
 8. **Iframe detection:** `isInFrontierApp()` check in Layout.tsx. Standalone mode shows fallback banner.
 9. **SdkProvider wrapping:** Entire app wrapped in SdkProvider when inside iframe. SDK initialized once via useRef, destroyed on unmount.
 10. **Permissions:** Every SDK method used must have its permission declared in manifest.json.
-11. **CORS:** vercel.json must include all 3 Frontier OS origins (os.frontiertower.io, sandbox.os.frontiertower.io, localhost:5173).
+11. **CORS:** vercel.json sets CORS for the production origin + a CSP `frame-ancestors` listing the 3 Frontier OS origins (os.frontiertower.io, sandbox.os.frontiertower.io, localhost:5173) + security headers.
 12. **SDK imports:** Use `@frontiertower/frontier-sdk` for SDK classes and types. Exact import paths, not barrel imports.
 </frontier_os_rules>
 
@@ -154,8 +154,8 @@ npx tsc --noEmit           # No TypeScript errors
 
 Also run FOS-specific validation:
 ```bash
-node "$HOME/.claude/frontier-os-app-builder/bin/fos-tools.cjs" validate structure
-node "$HOME/.claude/frontier-os-app-builder/bin/fos-tools.cjs" validate permissions
+node "$HOME/.claude/frontier-os-app-builder/bin/fos-tools.cjs" validate structure --phase "$PHASE"
+node "$HOME/.claude/frontier-os-app-builder/bin/fos-tools.cjs" validate permissions --phase "$PHASE"
 ```
 
 Document results for SUMMARY.md.