User Onboarding Flow
Run ID: 69b6fa04896970b0894649882026-03-29UX Design
PantheraHive BOS
BOS Dashboard

Workflow Execution Summary

This document outlines a proposed "User Onboarding Flow" tailored for a product or service within the "AI Technology" domain, designed to be completed within a 5-minute timeframe. The objective is to provide a concise, impactful, and value-driven initial experience for new users. This execution is a "Test run" as per the user's request, focusing on best practices for rapid user activation.

User Inputs:

  • Description: Test run
  • Topic: AI Technology
  • Execution Time: 5 min (+100 cr)

Objective of this Onboarding Flow:

To quickly introduce new users to the core value proposition of an AI Technology product, guide them through their first successful interaction, and establish a foundation for continued engagement, all within a focused 5-minute window.

1. Onboarding Flow Design Principles (for AI Technology, 5-min)

Designing an effective 5-minute onboarding for an AI product requires a strategic approach focused on immediate value and clarity.

  • Show, Don't Tell: Prioritize interactive experiences over lengthy explanations. Let the AI demonstrate its capabilities.
  • Focus on the "Aha!" Moment: Identify the single most impactful feature or outcome that will make the user understand the product's value and build excitement. Get them there as fast as possible.
  • Minimal Friction: Reduce cognitive load, minimize form fields, and avoid complex choices.
  • Progressive Disclosure: Introduce advanced features only after the user has grasped the core functionality.
  • Personalization (Light): Offer quick, simple ways to tailor the initial experience without adding significant time.
  • Clear Call to Action: Guide the user on what to do next at every step.
  • Optimized for Speed: Utilize visual cues, concise copy, and pre-filled examples where appropriate.

2. Proposed 5-Minute User Onboarding Flow: "AI Technology Tool - Quick Start"

For this workflow, we will assume the AI product is "PantheraWrite AI", an AI-powered content generation tool. This allows for a tangible "Aha!" moment within the time limit.


Onboarding Flow Title: PantheraWrite AI - Your First AI-Powered Content in 5 Minutes

Target Persona: Marketing professionals, bloggers, content creators, or small business owners looking to quickly generate engaging content.

Overall Goal: Guide the user to generate, review, and understand the basic utility of their first piece of AI-generated content within 5 minutes.


Step 1: Welcome & Value Reinforcement (0:00 - 0:30)

  • Action: User lands on a dedicated onboarding screen immediately after sign-up/login.
  • Purpose: Reassure the user of their choice, reiterate the core benefit, and set an exciting tone.
  • Recommended UX Elements:

* Headline: "Welcome to PantheraWrite AI! Generate Your First Content in Minutes."

* Sub-headline/Copy: "Unlock effortless content creation with AI. Let's get you started with your first piece of content."

* Visual: A short, looping animation or hero image showcasing AI-generated text appearing rapidly.

* Call to Action (CTA): Prominent button: "Start Generating Now"

* Optional: Small "Skip Onboarding" link (less prominent).

Step 2: Quick Persona/Use Case Selection (0:30 - 1:00)

  • Action: User briefly identifies their primary role or content need.
  • Purpose: Light personalization to tailor the subsequent quick-start template and make the first generation more relevant.
  • Recommended UX Elements:

* Headline: "What brings you to PantheraWrite AI today?"

* Options: 3-4 visually distinct, clickable cards/buttons (e.g., "Marketing Copy," "Blog Posts," "Social Media," "Website Content").

* Example: If "Social Media" is chosen, the next step will pre-load a social media prompt.

* CTA: "Next" (auto-advances upon selection).

Step 3: First AI Generation - Guided Prompt (1:00 - 3:30)

  • Action: User inputs minimal information and triggers their first AI content generation. This is the core "Aha!" moment.
  • Purpose: Directly demonstrate the product's primary functionality and value.
  • Recommended UX Elements:

* Headline: "Let's Create Your First [Selected Content Type]!" (e.g., "Let's Create Your First Social Media Post!")

* Guided Input Field: A single, clear text input field.

* Pre-filled Example: Based on Step 2, pre-fill with a simple, high-impact example (e.g., "Write 3 catchy social media captions for a new coffee shop opening").

* Placeholder Text: "Tell AI what you want to create (e.g., 'a headline for a new tech product')."

* Contextual Tip: Small tooltip or helper text near the input: "Keep it simple for your first try!"

* CTA: Prominent button: "Generate Content"

* Loading State: Engaging animation or progress bar during generation (e.g., "AI is writing...").

Step 4: Review & Simple Action (3:30 - 4:30)

  • Action: User reviews the generated content and takes a simple action (copy, save, or refine).
  • Purpose: Allow immediate interaction with the AI output, showing its utility and flexibility.
  • Recommended UX Elements:

* Display Area: Clearly present the generated content (e.g., 3 social media captions).

* Headline: "Here's Your AI-Generated Content!"

* Action Buttons:

* "Copy All" (to clipboard)

* "Save to Project" (with a quick confirmation message)

* "Refine" (opens a simple modal for minor edits or re-generation with new instructions)

* Guidance: "Like what you see? You can copy, save, or refine it!"

* Optional: Quick satisfaction rating (e.g., "Was this helpful? Yes/No").

Step 5: Call to Action & Explore (4:30 - 5:00)

  • Action: Direct the user to the main dashboard or encourage exploration of other features.
  • Purpose: Guide the user beyond the onboarding, ensuring they know how to continue using the product.
  • Recommended UX Elements:

* Headline: "Great Job! You've Mastered Your First AI Generation."

* Main CTA: Prominent button: "Go to Dashboard"

* Secondary CTAs (Optional, smaller):

* "Explore More Templates" (e.g., for different content types)

* "View Saved Content"

* "Invite Team Members" (if applicable)

* Reinforcement: "Your journey to effortless content creation has just begun!"

* Visual: A checkmark or celebratory graphic.


3. Key Recommendations for Implementation

  1. A/B Test Elements: Continuously test headlines, CTA copy, visual elements, and the specific "Aha!" moment to optimize conversion and satisfaction rates.
  2. Analytics Integration: Implement robust analytics to track user progression through each step, identify drop-off points, and measure time spent.
  3. Performance Optimization: Ensure rapid loading times for all assets and AI generation. Any delay beyond a few seconds will severely impact the 5-minute goal.
  4. Mobile Responsiveness: Design the onboarding flow to be seamless and intuitive on both desktop and mobile devices.
  5. Contextual Help: While aiming for minimal text, provide unobtrusive tooltips or a small "Need Help?" link that offers quick FAQs or directs to support.
  6. User Feedback Loop: Implement a quick, unobtrusive feedback mechanism (e.g., a simple emoji rating or "Was this helpful?") at the end of the flow to gather immediate qualitative data.
  7. Iterative Improvement: Based on analytics and feedback, be prepared to iterate rapidly on the onboarding flow.

4. Metrics for Success & Tracking

To evaluate the effectiveness of this 5-minute onboarding flow, track the following key performance indicators (KPIs):

  • Onboarding Completion Rate: Percentage of users who complete all 5 steps.
  • Time to First Generation: Average time taken from initial sign-up to completing Step 3 (first AI generation). Target: < 3.5 minutes.
  • "Aha!" Moment Confirmation: Track engagement with the generated content (e.g., clicks on "Copy All," "Save," or "Refine").
  • First-Day Retention: Percentage of users who return to the product within 24 hours after completing onboarding.
  • Feature Adoption (Post-Onboarding): Track usage of features like "Explore More Templates" or "Start a New Project" within the first week.
  • Qualitative Feedback: User satisfaction scores from optional feedback prompts.
  • Drop-off Points: Identify specific steps where users abandon the onboarding process.

5. Future Enhancements & Iteration

Once the core 5-minute flow is established and performing well, consider these enhancements:

  • Advanced Personalization: After the initial quick setup, offer more in-depth profile settings or preferences for power users.
  • Gamification: Introduce small rewards or progress badges for completing key tasks beyond onboarding.
  • Contextual Tutorials: Implement short, on-demand micro-tutorials for specific features as users encounter them naturally.
  • Email Drip Campaign: Trigger a targeted email sequence based on onboarding completion status or chosen persona, providing tips and highlighting relevant features.
  • Walkthroughs for Specific Use Cases: Offer alternative 5-minute onboarding paths for highly distinct user segments or feature sets (e.g., "AI for Developers" vs. "AI for Marketers").
  • Success Stories/Case Studies: Integrate relevant short testimonials or examples of how other users achieved success with the AI tool, particularly after the first successful generation.

6. Structured Data: Onboarding Flow Breakdown Table

| Step # | Title | Estimated Duration | Key Action | Purpose | Recommended UX Elements |

| :----- | :-------------------------------------- | :----------------- | :--------------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |

| 1 | Welcome & Value Reinforcement | 0:30 | Landing & Acknowledgment | Reassure, excite, set expectations, introduce core benefit. | Headline: "Welcome to PantheraWrite AI!", Sub-headline: "Generate Your First Content in Minutes.", Visual: Looping AI text animation. CTA: "Start Generating Now". |

| 2 | Quick Persona/Use Case Selection | 0:30 | Select primary content need | Light personalization, tailor subsequent experience. | Headline: "What brings you to PantheraWrite AI today?", 3-4 clickable cards (e.g., "Marketing Copy," "Blog Posts," "Social Media"). Auto-advance on selection. |

| 3 | First AI Generation - Guided Prompt | 2:30 | Input prompt & generate content | Deliver the core "Aha!" moment, demonstrate primary functionality. | Headline: "Let's Create Your First [Content Type]!", Single input field (pre-filled example based on Step 2), Contextual tip: "Keep it simple for your first try!". CTA: "Generate Content". Loading animation during generation. |

| 4 | Review & Simple Action | 1:00 | Review output, copy/save/refine | Show utility, allow immediate interaction, encourage minor refinement. | Display generated content clearly. Action buttons: "Copy All," "Save to Project," "Refine". Guidance: "Like what you see? You can copy, save, or refine it!". |

| 5 | Call to Action & Explore | 0:30 | Navigate to dashboard/explore | Guide post-onboarding engagement, encourage deeper exploration. | Headline: "Great Job! You've Mastered Your First AI Generation.", Main CTA: "Go to Dashboard". Secondary CTAs: "Explore More Templates," "View Saved Content." Reinforcement text. |

| Total | PantheraWrite AI - Quick Start Flow | 5:00 | First successful AI content generation | New user understands core value, experiences product's power, and is guided to continued engagement within 5 minutes. | Seamless progression through welcoming, personalization, core functionality demonstration, immediate interaction, and clear next steps. |

user_onboarding_flow.md
Download as Markdown
Copy all content
Full output as text
Download ZIP
IDE-ready project ZIP
Copy share link
Permanent URL for this run
Get Embed Code
Embed this result on any website
Print / Save PDF
Use browser print dialog
\n\n\n"); var hasSrcMain=Object.keys(extracted).some(function(k){return k.indexOf("src/main")>=0;}); if(!hasSrcMain) zip.file(folder+"src/main."+ext,"import React from 'react'\nimport ReactDOM from 'react-dom/client'\nimport App from './App'\nimport './index.css'\n\nReactDOM.createRoot(document.getElementById('root')!).render(\n \n \n \n)\n"); var hasSrcApp=Object.keys(extracted).some(function(k){return k==="src/App."+ext||k==="App."+ext;}); if(!hasSrcApp) zip.file(folder+"src/App."+ext,"import React from 'react'\nimport './App.css'\n\nfunction App(){\n return(\n
\n
\n

"+slugTitle(pn)+"

\n

Built with PantheraHive BOS

\n
\n
\n )\n}\nexport default App\n"); zip.file(folder+"src/index.css","*{margin:0;padding:0;box-sizing:border-box}\nbody{font-family:system-ui,-apple-system,sans-serif;background:#f0f2f5;color:#1a1a2e}\n.app{min-height:100vh;display:flex;flex-direction:column}\n.app-header{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:40px}\nh1{font-size:2.5rem;font-weight:700}\n"); zip.file(folder+"src/App.css",""); zip.file(folder+"src/components/.gitkeep",""); zip.file(folder+"src/pages/.gitkeep",""); zip.file(folder+"src/hooks/.gitkeep",""); Object.keys(extracted).forEach(function(p){ var fp=p.startsWith("src/")?p:"src/"+p; zip.file(folder+fp,extracted[p]); }); zip.file(folder+"README.md","# "+slugTitle(pn)+"\n\nGenerated by PantheraHive BOS.\n\n## Setup\n\`\`\`bash\nnpm install\nnpm run dev\n\`\`\`\n\n## Build\n\`\`\`bash\nnpm run build\n\`\`\`\n\n## Open in IDE\nOpen the project folder in VS Code or WebStorm.\n"); zip.file(folder+".gitignore","node_modules/\ndist/\n.env\n.DS_Store\n*.local\n"); } /* --- Vue (Vite + Composition API + TypeScript) --- */ function buildVue(zip,folder,app,code,panelTxt){ var pn=pkgName(app); var C=cc(pn); var extracted=extractCode(panelTxt); zip.file(folder+"package.json",'{\n "name": "'+pn+'",\n "version": "0.0.0",\n "type": "module",\n "scripts": {\n "dev": "vite",\n "build": "vue-tsc -b && vite build",\n "preview": "vite preview"\n },\n "dependencies": {\n "vue": "^3.5.13",\n "vue-router": "^4.4.5",\n "pinia": "^2.3.0",\n "axios": "^1.7.9"\n },\n "devDependencies": {\n "@vitejs/plugin-vue": "^5.2.1",\n "typescript": "~5.7.3",\n "vite": "^6.0.5",\n "vue-tsc": "^2.2.0"\n }\n}\n'); zip.file(folder+"vite.config.ts","import { defineConfig } from 'vite'\nimport vue from '@vitejs/plugin-vue'\nimport { resolve } from 'path'\n\nexport default defineConfig({\n plugins: [vue()],\n resolve: { alias: { '@': resolve(__dirname,'src') } }\n})\n"); zip.file(folder+"tsconfig.json",'{"files":[],"references":[{"path":"./tsconfig.app.json"},{"path":"./tsconfig.node.json"}]}\n'); zip.file(folder+"tsconfig.app.json",'{\n "compilerOptions":{\n "target":"ES2020","useDefineForClassFields":true,"module":"ESNext","lib":["ES2020","DOM","DOM.Iterable"],\n "skipLibCheck":true,"moduleResolution":"bundler","allowImportingTsExtensions":true,\n "isolatedModules":true,"moduleDetection":"force","noEmit":true,"jsxImportSource":"vue",\n "strict":true,"paths":{"@/*":["./src/*"]}\n },\n "include":["src/**/*.ts","src/**/*.d.ts","src/**/*.tsx","src/**/*.vue"]\n}\n'); zip.file(folder+"env.d.ts","/// \n"); zip.file(folder+"index.html","\n\n\n \n \n "+slugTitle(pn)+"\n\n\n
\n \n\n\n"); var hasMain=Object.keys(extracted).some(function(k){return k==="src/main.ts"||k==="main.ts";}); if(!hasMain) zip.file(folder+"src/main.ts","import { createApp } from 'vue'\nimport { createPinia } from 'pinia'\nimport App from './App.vue'\nimport './assets/main.css'\n\nconst app = createApp(App)\napp.use(createPinia())\napp.mount('#app')\n"); var hasApp=Object.keys(extracted).some(function(k){return k.indexOf("App.vue")>=0;}); if(!hasApp) zip.file(folder+"src/App.vue","\n\n\n\n\n"); zip.file(folder+"src/assets/main.css","*{margin:0;padding:0;box-sizing:border-box}body{font-family:system-ui,sans-serif;background:#fff;color:#213547}\n"); zip.file(folder+"src/components/.gitkeep",""); zip.file(folder+"src/views/.gitkeep",""); zip.file(folder+"src/stores/.gitkeep",""); Object.keys(extracted).forEach(function(p){ var fp=p.startsWith("src/")?p:"src/"+p; zip.file(folder+fp,extracted[p]); }); zip.file(folder+"README.md","# "+slugTitle(pn)+"\n\nGenerated by PantheraHive BOS.\n\n## Setup\n\`\`\`bash\nnpm install\nnpm run dev\n\`\`\`\n\n## Build\n\`\`\`bash\nnpm run build\n\`\`\`\n\nOpen in VS Code or WebStorm.\n"); zip.file(folder+".gitignore","node_modules/\ndist/\n.env\n.DS_Store\n*.local\n"); } /* --- Angular (v19 standalone) --- */ function buildAngular(zip,folder,app,code,panelTxt){ var pn=pkgName(app); var C=cc(pn); var sel=pn.replace(/_/g,"-"); var extracted=extractCode(panelTxt); zip.file(folder+"package.json",'{\n "name": "'+pn+'",\n "version": "0.0.0",\n "scripts": {\n "ng": "ng",\n "start": "ng serve",\n "build": "ng build",\n "test": "ng test"\n },\n "dependencies": {\n "@angular/animations": "^19.0.0",\n "@angular/common": "^19.0.0",\n "@angular/compiler": "^19.0.0",\n "@angular/core": "^19.0.0",\n "@angular/forms": "^19.0.0",\n "@angular/platform-browser": "^19.0.0",\n "@angular/platform-browser-dynamic": "^19.0.0",\n "@angular/router": "^19.0.0",\n "rxjs": "~7.8.0",\n "tslib": "^2.3.0",\n "zone.js": "~0.15.0"\n },\n "devDependencies": {\n "@angular-devkit/build-angular": "^19.0.0",\n "@angular/cli": "^19.0.0",\n "@angular/compiler-cli": "^19.0.0",\n "typescript": "~5.6.0"\n }\n}\n'); zip.file(folder+"angular.json",'{\n "$schema": "./node_modules/@angular/cli/lib/config/schema.json",\n "version": 1,\n "newProjectRoot": "projects",\n "projects": {\n "'+pn+'": {\n "projectType": "application",\n "root": "",\n "sourceRoot": "src",\n "prefix": "app",\n "architect": {\n "build": {\n "builder": "@angular-devkit/build-angular:application",\n "options": {\n "outputPath": "dist/'+pn+'",\n "index": "src/index.html",\n "browser": "src/main.ts",\n "tsConfig": "tsconfig.app.json",\n "styles": ["src/styles.css"],\n "scripts": []\n }\n },\n "serve": {"builder":"@angular-devkit/build-angular:dev-server","configurations":{"production":{"buildTarget":"'+pn+':build:production"},"development":{"buildTarget":"'+pn+':build:development"}},"defaultConfiguration":"development"}\n }\n }\n }\n}\n'); zip.file(folder+"tsconfig.json",'{\n "compileOnSave": false,\n "compilerOptions": {"baseUrl":"./","outDir":"./dist/out-tsc","forceConsistentCasingInFileNames":true,"strict":true,"noImplicitOverride":true,"noPropertyAccessFromIndexSignature":true,"noImplicitReturns":true,"noFallthroughCasesInSwitch":true,"paths":{"@/*":["src/*"]},"skipLibCheck":true,"esModuleInterop":true,"sourceMap":true,"declaration":false,"experimentalDecorators":true,"moduleResolution":"bundler","importHelpers":true,"target":"ES2022","module":"ES2022","useDefineForClassFields":false,"lib":["ES2022","dom"]},\n "references":[{"path":"./tsconfig.app.json"}]\n}\n'); zip.file(folder+"tsconfig.app.json",'{\n "extends":"./tsconfig.json",\n "compilerOptions":{"outDir":"./dist/out-tsc","types":[]},\n "files":["src/main.ts"],\n "include":["src/**/*.d.ts"]\n}\n'); zip.file(folder+"src/index.html","\n\n\n \n "+slugTitle(pn)+"\n \n \n \n\n\n \n\n\n"); zip.file(folder+"src/main.ts","import { bootstrapApplication } from '@angular/platform-browser';\nimport { appConfig } from './app/app.config';\nimport { AppComponent } from './app/app.component';\n\nbootstrapApplication(AppComponent, appConfig)\n .catch(err => console.error(err));\n"); zip.file(folder+"src/styles.css","* { margin: 0; padding: 0; box-sizing: border-box; }\nbody { font-family: system-ui, -apple-system, sans-serif; background: #f9fafb; color: #111827; }\n"); var hasComp=Object.keys(extracted).some(function(k){return k.indexOf("app.component")>=0;}); if(!hasComp){ zip.file(folder+"src/app/app.component.ts","import { Component } from '@angular/core';\nimport { RouterOutlet } from '@angular/router';\n\n@Component({\n selector: 'app-root',\n standalone: true,\n imports: [RouterOutlet],\n templateUrl: './app.component.html',\n styleUrl: './app.component.css'\n})\nexport class AppComponent {\n title = '"+pn+"';\n}\n"); zip.file(folder+"src/app/app.component.html","
\n
\n

"+slugTitle(pn)+"

\n

Built with PantheraHive BOS

\n
\n \n
\n"); zip.file(folder+"src/app/app.component.css",".app-header{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:60vh;gap:16px}h1{font-size:2.5rem;font-weight:700;color:#6366f1}\n"); } zip.file(folder+"src/app/app.config.ts","import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { provideRouter } from '@angular/router';\nimport { routes } from './app.routes';\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n provideRouter(routes)\n ]\n};\n"); zip.file(folder+"src/app/app.routes.ts","import { Routes } from '@angular/router';\n\nexport const routes: Routes = [];\n"); Object.keys(extracted).forEach(function(p){ var fp=p.startsWith("src/")?p:"src/"+p; zip.file(folder+fp,extracted[p]); }); zip.file(folder+"README.md","# "+slugTitle(pn)+"\n\nGenerated by PantheraHive BOS.\n\n## Setup\n\`\`\`bash\nnpm install\nng serve\n# or: npm start\n\`\`\`\n\n## Build\n\`\`\`bash\nng build\n\`\`\`\n\nOpen in VS Code with Angular Language Service extension.\n"); zip.file(folder+".gitignore","node_modules/\ndist/\n.env\n.DS_Store\n*.local\n.angular/\n"); } /* --- Python --- */ function buildPython(zip,folder,app,code){ var title=slugTitle(app); var pn=pkgName(app); var src=code.replace(/^\`\`\`[\w]*\n?/m,"").replace(/\n?\`\`\`$/m,"").trim(); var reqMap={"numpy":"numpy","pandas":"pandas","sklearn":"scikit-learn","tensorflow":"tensorflow","torch":"torch","flask":"flask","fastapi":"fastapi","uvicorn":"uvicorn","requests":"requests","sqlalchemy":"sqlalchemy","pydantic":"pydantic","dotenv":"python-dotenv","PIL":"Pillow","cv2":"opencv-python","matplotlib":"matplotlib","seaborn":"seaborn","scipy":"scipy"}; var reqs=[]; Object.keys(reqMap).forEach(function(k){if(src.indexOf("import "+k)>=0||src.indexOf("from "+k)>=0)reqs.push(reqMap[k]);}); var reqsTxt=reqs.length?reqs.join("\n"):"# add dependencies here\n"; zip.file(folder+"main.py",src||"# "+title+"\n# Generated by PantheraHive BOS\n\nprint(title+\" loaded\")\n"); zip.file(folder+"requirements.txt",reqsTxt); zip.file(folder+".env.example","# Environment variables\n"); zip.file(folder+"README.md","# "+title+"\n\nGenerated by PantheraHive BOS.\n\n## Setup\n\`\`\`bash\npython3 -m venv .venv\nsource .venv/bin/activate\npip install -r requirements.txt\n\`\`\`\n\n## Run\n\`\`\`bash\npython main.py\n\`\`\`\n"); zip.file(folder+".gitignore",".venv/\n__pycache__/\n*.pyc\n.env\n.DS_Store\n"); } /* --- Node.js --- */ function buildNode(zip,folder,app,code){ var title=slugTitle(app); var pn=pkgName(app); var src=code.replace(/^\`\`\`[\w]*\n?/m,"").replace(/\n?\`\`\`$/m,"").trim(); var depMap={"mongoose":"^8.0.0","dotenv":"^16.4.5","axios":"^1.7.9","cors":"^2.8.5","bcryptjs":"^2.4.3","jsonwebtoken":"^9.0.2","socket.io":"^4.7.4","uuid":"^9.0.1","zod":"^3.22.4","express":"^4.18.2"}; var deps={}; Object.keys(depMap).forEach(function(k){if(src.indexOf(k)>=0)deps[k]=depMap[k];}); if(!deps["express"])deps["express"]="^4.18.2"; var pkgJson=JSON.stringify({"name":pn,"version":"1.0.0","main":"src/index.js","scripts":{"start":"node src/index.js","dev":"nodemon src/index.js"},"dependencies":deps,"devDependencies":{"nodemon":"^3.0.3"}},null,2)+"\n"; zip.file(folder+"package.json",pkgJson); var fallback="const express=require(\"express\");\nconst app=express();\napp.use(express.json());\n\napp.get(\"/\",(req,res)=>{\n res.json({message:\""+title+" API\"});\n});\n\nconst PORT=process.env.PORT||3000;\napp.listen(PORT,()=>console.log(\"Server on port \"+PORT));\n"; zip.file(folder+"src/index.js",src||fallback); zip.file(folder+".env.example","PORT=3000\n"); zip.file(folder+".gitignore","node_modules/\n.env\n.DS_Store\n"); zip.file(folder+"README.md","# "+title+"\n\nGenerated by PantheraHive BOS.\n\n## Setup\n\`\`\`bash\nnpm install\n\`\`\`\n\n## Run\n\`\`\`bash\nnpm run dev\n\`\`\`\n"); } /* --- Vanilla HTML --- */ function buildVanillaHtml(zip,folder,app,code){ var title=slugTitle(app); var isFullDoc=code.trim().toLowerCase().indexOf("=0||code.trim().toLowerCase().indexOf("=0; var indexHtml=isFullDoc?code:"\n\n\n\n\n"+title+"\n\n\n\n"+code+"\n\n\n\n"; zip.file(folder+"index.html",indexHtml); zip.file(folder+"style.css","/* "+title+" — styles */\n*{margin:0;padding:0;box-sizing:border-box}\nbody{font-family:system-ui,-apple-system,sans-serif;background:#fff;color:#1a1a2e}\n"); zip.file(folder+"script.js","/* "+title+" — scripts */\n"); zip.file(folder+"assets/.gitkeep",""); zip.file(folder+"README.md","# "+title+"\n\nGenerated by PantheraHive BOS.\n\n## Open\nDouble-click \`index.html\` in your browser.\n\nOr serve locally:\n\`\`\`bash\nnpx serve .\n# or\npython3 -m http.server 3000\n\`\`\`\n"); zip.file(folder+".gitignore",".DS_Store\nnode_modules/\n.env\n"); } /* ===== MAIN ===== */ var sc=document.createElement("script"); sc.src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"; sc.onerror=function(){ if(lbl)lbl.textContent="Download ZIP"; alert("JSZip load failed — check connection."); }; sc.onload=function(){ var zip=new JSZip(); var base=(_phFname||"output").replace(/\.[^.]+$/,""); var app=base.toLowerCase().replace(/[^a-z0-9]+/g,"_").replace(/^_+|_+$/g,"")||"my_app"; var folder=app+"/"; var vc=document.getElementById("panel-content"); var panelTxt=vc?(vc.innerText||vc.textContent||""):""; var lang=detectLang(_phCode,panelTxt); if(_phIsHtml){ buildVanillaHtml(zip,folder,app,_phCode); } else if(lang==="flutter"){ buildFlutter(zip,folder,app,_phCode,panelTxt); } else if(lang==="react-native"){ buildReactNative(zip,folder,app,_phCode,panelTxt); } else if(lang==="swift"){ buildSwift(zip,folder,app,_phCode,panelTxt); } else if(lang==="kotlin"){ buildKotlin(zip,folder,app,_phCode,panelTxt); } else if(lang==="react"){ buildReact(zip,folder,app,_phCode,panelTxt); } else if(lang==="vue"){ buildVue(zip,folder,app,_phCode,panelTxt); } else if(lang==="angular"){ buildAngular(zip,folder,app,_phCode,panelTxt); } else if(lang==="python"){ buildPython(zip,folder,app,_phCode); } else if(lang==="node"){ buildNode(zip,folder,app,_phCode); } else { /* Document/content workflow */ var title=app.replace(/_/g," "); var md=_phAll||_phCode||panelTxt||"No content"; zip.file(folder+app+".md",md); var h=""+title+""; h+="

"+title+"

"; var hc=md.replace(/&/g,"&").replace(//g,">"); hc=hc.replace(/^### (.+)$/gm,"

$1

"); hc=hc.replace(/^## (.+)$/gm,"

$1

"); hc=hc.replace(/^# (.+)$/gm,"

$1

"); hc=hc.replace(/\*\*(.+?)\*\*/g,"$1"); hc=hc.replace(/\n{2,}/g,"

"); h+="

"+hc+"

Generated by PantheraHive BOS
"; zip.file(folder+app+".html",h); zip.file(folder+"README.md","# "+title+"\n\nGenerated by PantheraHive BOS.\n\nFiles:\n- "+app+".md (Markdown)\n- "+app+".html (styled HTML)\n"); } zip.generateAsync({type:"blob"}).then(function(blob){ var a=document.createElement("a"); a.href=URL.createObjectURL(blob); a.download=app+".zip"; a.click(); URL.revokeObjectURL(a.href); if(lbl)lbl.textContent="Download ZIP"; }); }; document.head.appendChild(sc); } function phShare(){navigator.clipboard.writeText(window.location.href).then(function(){var el=document.getElementById("ph-share-lbl");if(el){el.textContent="Link copied!";setTimeout(function(){el.textContent="Copy share link";},2500);}});}function phEmbed(){var runId=window.location.pathname.split("/").pop().replace(".html","");var embedUrl="https://pantherahive.com/embed/"+runId;var code='';navigator.clipboard.writeText(code).then(function(){var el=document.getElementById("ph-embed-lbl");if(el){el.textContent="Embed code copied!";setTimeout(function(){el.textContent="Get Embed Code";},2500);}});}