Hiring Pipeline Builder
Run ID: 69cbadfd61b1021a29a8b5172026-03-31HR
PantheraHive BOS
BOS Dashboard

Build a complete hiring pipeline with job descriptions, interview question banks, scoring rubrics, offer letter templates, and onboarding checklists.

Hiring Pipeline Builder: Design & Requirements Specification

Project Goal: To create a comprehensive, intuitive, and efficient platform that streamlines the entire hiring process, from job creation and candidate management to offer generation and onboarding. The platform will standardize recruitment practices, enhance collaboration among hiring teams, and improve the overall candidate experience.


1. Core Features & Functional Requirements

The Hiring Pipeline Builder will encompass the following key modules and functionalities:

  • Job Description (JD) Management:

* Create, edit, and store job descriptions using a rich text editor.

* Leverage customizable templates for various roles and departments.

* Version control for JD updates.

* Publish JDs to career pages or external job boards (future integration).

  • Interview Question Bank:

* Centralized repository of categorized interview questions (e.g., by skill, competency, role, experience level).

* Ability to build custom interview kits by selecting questions from the bank or adding new ones.

* Support for different question types (behavioral, technical, situational).

  • Scoring Rubric Builder:

* Design and attach standardized scoring rubrics to specific interviews or entire job requisitions.

* Define custom evaluation criteria and rating scales (e.g., 1-5, Meets/Exceeds/Below Expectations).

* Ensure objective and consistent candidate evaluation across interviewers.

  • Offer Letter Templates:

* Manage and customize multiple offer letter templates.

* Auto-populate candidate-specific data (name, salary, start date) and job-specific details.

* Integration for digital signatures (future consideration).

* Track offer status (sent, viewed, accepted, rejected).

  • Onboarding Checklist Creator:

* Build comprehensive, customizable onboarding checklists for new hires.

* Assign tasks to specific individuals or departments (e.g., HR, IT, Manager).

* Track task completion status and progress.

* Ability to share relevant documents and resources with new hires.

  • Candidate Management System (CMS):

* Centralized database for all candidates.

* Detailed candidate profiles including resume, application details, communication history, interview feedback, and documents.

* Search and filter capabilities for candidate pool.

  • Hiring Pipeline Visualization & Tracking:

* Interactive dashboard displaying all active job requisitions and candidates within each stage.

* Kanban-style board for visual representation of candidate progress.

* Drag-and-drop functionality to move candidates between pipeline stages.

  • User & Role Management:

* Define and assign roles (e.g., Admin, Hiring Manager, Interviewer, Recruiter) with specific permissions.

* Secure access control based on roles.

  • Reporting & Analytics:

* Basic reports on key metrics (e.g., time-to-hire, pipeline conversion rates, candidate source).

* Data visualization for trends and insights.

  • Notifications & Reminders:

* Automated notifications for pending tasks, interview schedules, and pipeline changes.


2. Design Specifications

2.1 User Personas

To ensure the platform meets the needs of its diverse users, we've identified key personas:

  • Hiring Manager (Primary User):

* Goals: Quickly create new job requisitions, review qualified candidates, schedule interviews efficiently, provide timely feedback, and make informed hiring decisions.

* Needs: Intuitive interface, clear overview of candidate progress, easy access to evaluation tools, collaborative features.

  • Recruiter / HR Administrator (Primary User):

* Goals: Manage the entire hiring lifecycle, maintain templates, track pipeline health, generate reports, ensure compliance.

* Needs: Comprehensive system controls, robust search and filtering, customization options, data insights.

  • Interviewer (Secondary User):

* Goals: Access candidate profiles, review interview questions, submit structured feedback and scores promptly.

* Needs: Simple, focused interface, easy navigation to relevant information, clear instructions for evaluation.

  • New Hire (Limited Access):

* Goals: Access and complete assigned onboarding tasks, submit required documents, find essential company information.

* Needs: Clear, self-service portal, mobile-friendly access, easy task completion.

2.2 Information Architecture (IA)

The platform's structure will prioritize logical grouping and ease of access:

  • Dashboard: Personalized overview of active jobs, pending tasks, and pipeline summaries.
  • Jobs: List of all job requisitions (Open, Draft, Closed).

* Create New Job

gemini Output

This document outlines the detailed design specifications for the "Hiring Pipeline Builder" application, ensuring a professional, intuitive, and highly functional user experience.


1. Detailed Design Specifications

The Hiring Pipeline Builder will be a robust, web-based application designed to streamline the entire recruitment process, from job creation to candidate onboarding. It will feature a modular architecture, allowing for future scalability and integration.

1.1. Overall Architecture

  • Cloud-Based SaaS Application: Accessible via web browser, ensuring high availability and scalability.
  • Modular Design: Core modules (Job Management, Candidate Management, Interview Management, Offer Management, Onboarding) will be distinct but interconnected, allowing for focused development and maintenance.
  • API-First Approach: Internal and potentially external APIs to facilitate integrations with HRIS, ATS, calendar systems, and communication tools.
  • Responsive Web Design: Optimized for various screen sizes (desktop, tablet, mobile) to ensure usability on any device.

1.2. Key Modules and Features

1.2.1. Dashboard & Analytics

  • Pipeline Snapshot: Visual overview of active jobs, showing the number of candidates in each stage (e.g., Applied, Interviewing, Offer, Hired).
  • Upcoming Activities: Widget displaying scheduled interviews, pending feedback, and onboarding tasks.
  • Quick Actions: Shortcuts for common tasks like "Create New Job," "Add Candidate," "Schedule Interview."
  • Performance Metrics: Key recruitment metrics such as Time-to-Hire, Source Effectiveness, Offer Acceptance Rate, and Interview-to-Offer Ratio, presented with interactive charts and graphs.

1.2.2. Job Management

  • Job Creation & Editing:

* Multi-step wizard for defining job details (title, department, location, type).

* Rich text editor for detailed job descriptions, with pre-built templates.

* Ability to define custom hiring stages (e.g., Application Review, Phone Screen, Technical Interview, Culture Fit, Offer).

* Assignment of hiring team members (Hiring Manager, Recruiters, Interviewers).

  • Job Status & Archiving: Manage active, paused, closed, and archived job postings.
  • Template Library Integration: Seamlessly link job descriptions, interview question banks, and scoring rubrics from the central template library.

1.2.3. Candidate Management

  • Candidate Profile: Comprehensive view including resume/CV upload, contact information, application history, notes, and internal ratings.
  • Pipeline Progression: Drag-and-drop interface to move candidates between hiring stages.
  • Communication Log: Centralized record of all communication with candidates (emails, calls, notes).
  • Source Tracking: Track candidate source (e.g., LinkedIn, Indeed, Referral, Career Page) for analytics.
  • Bulk Actions: Ability to select multiple candidates for actions like moving stages, sending emails, or rejecting.

1.2.4. Interview Management

  • Interview Scheduling:

* Integration with calendar systems (Google Calendar, Outlook) to check interviewer availability.

* Automated invitation sending to candidates and interviewers with meeting details.

* Support for various interview types (phone, video, in-person).

  • Interview Question Banks (IQB):

* Centralized library of structured interview questions categorized by job role, skill, or stage.

* Ability to assign specific IQBs to interviews.

  • Structured Feedback & Scoring Rubrics:

* Customizable scoring rubrics with weighted criteria for each interview stage.

* Interviewers submit feedback directly within the platform, linking to the assigned IQB and rubric.

* Consolidated feedback view for hiring teams.

1.2.5. Offer Management

  • Offer Letter Templates:

* Library of customizable offer letter templates.

* Dynamic fields for candidate-specific information (salary, start date, title).

  • Offer Generation & Tracking: Generate, send, and track the status of offer letters (sent, viewed, accepted, rejected).
  • E-Signature Integration (Optional): Seamless integration with e-signature platforms for faster offer acceptance.

1.2.6. Onboarding Checklists

  • Customizable Checklists: Create and manage pre-boarding and onboarding task lists.
  • Task Assignment & Tracking: Assign tasks to new hires, HR, IT, and managers, with due dates and status tracking.
  • Resource Sharing: Attach relevant documents, links, and guides for new hires.
  • Progress Monitoring: Dashboard view to track the onboarding progress of new hires.

1.2.7. Templates Library

  • Central Repository: Store and manage templates for Job Descriptions, Interview Question Banks, Scoring Rubrics, Offer Letters, and Onboarding Checklists.
  • Version Control: Track changes and revisions to templates.
  • Sharing & Permissions: Control who can view, edit, or create templates.

1.2.8. User & Permissions Management

  • Role-Based Access Control (RBAC): Define roles (e.g., Admin, Hiring Manager, Recruiter, Interviewer) with specific permissions.
  • Team Collaboration: Tools for internal notes, @mentions, and activity feeds to foster team collaboration.

1.3. Core User Flows (Examples)

  • Hiring Manager: Creating a New Job & Pipeline

1. Navigate to "Jobs" -> "Create New Job."

2. Fill in Job Details (Title, Department, Location, Description).

3. Define Hiring Stages (e.g., Application, Phone Screen, Interview Panel, Offer).

4. Select/Customize Job Description, Interview Question Banks, and Scoring Rubrics from the Templates Library.

5. Assign Hiring Team Members.

6. Publish Job.

  • Interviewer: Submitting Interview Feedback

1. Receive notification/calendar invite for an interview.

2. Access the platform, navigate to "My Interviews."

3. Select the scheduled interview.

4. View Candidate Profile and assigned Interview Question Bank.

5. Conduct interview.

6. Fill out the structured feedback form, utilizing the integrated scoring rubric.

7. Add free-form notes and recommendations.

8. Submit Feedback.

2. Wireframe Descriptions

The wireframes prioritize a clean, intuitive, and efficient user interface.

2.1. Dashboard / Pipeline Overview

  • Layout: Left-hand persistent navigation sidebar. Main content area divided into sections.
  • Elements:

* Top Bar: Logo, user profile/settings, global search, notifications.

* Sidebar: "Dashboard," "Jobs," "Candidates," "Interviews," "Offers," "Onboarding," "Templates," "Reports," "Settings."

* Pipeline Snapshot (Main Area): Card-based display for each active job. Each card shows Job Title, Department, and a visual representation of candidates in each stage (e.g., a mini-funnel or stacked bar chart). Clickable to drill down.

* Upcoming Interviews (Right Panel): List of interviews scheduled for the current user/team, with candidate name, job title, date, and quick link to feedback form.

* Recent Candidates (Right Panel): List of most recently added candidates across all jobs, with their current stage.

* Quick Actions (Top Right of Main Area): Buttons for "Add Job," "Add Candidate," "Schedule Interview."

2.2. Job Creation / Editing (Multi-Step Form)

  • Layout: Full-width content area with a progress indicator/stepper at the top (e.g., "1. Details" -> "2. Stages" -> "3. Templates" -> "4. Team").
  • Elements (per step):

* Details: Text fields for Job Title, Department, Location, Job Type. Rich text editor for Job Description. File upload for external JD documents.

* Stages: Drag-and-drop list of default hiring stages, with options to add, edit, or delete custom stages. Toggle for "require feedback" at each stage.

* Templates: Dropdowns/searchable lists to select pre-existing Job Description, Interview Question Bank, and Scoring Rubric templates. Preview functionality.

* Team: Searchable user list to assign Hiring Manager, Recruiters, and Interviewers.

  • Navigation: "Back" and "Next" buttons, "Save Draft" option.

2.3. Candidate Management (Table View & Detail View)

  • Table View (Job-Specific Candidate List):

* Layout: Top bar with job title and stage filters. Main area is a sortable, filterable data table.

* Elements: Columns for Candidate Name, Current Stage, Application Date, Source, Last Activity, Resume Link, Actions (e.g., "Move Stage," "Schedule Interview," "Reject"). Checkboxes for bulk actions.

* Stage Progression: A visual indicator (e.g., a progress bar or colored pill) for the candidate's current stage. Drag-and-drop functionality to move candidates to the next stage directly from the table.

  • Detail View (Individual Candidate Profile):

* Layout: Left panel for key candidate info (photo, contact, current stage). Main content area with tabs or accordion sections.

* Elements:

* Profile Overview: Name, contact details, current stage, resume preview, quick actions (Move Stage, Schedule Interview, Make

gemini Output

This document outlines the detailed design specifications for the "Hiring Pipeline Builder," focusing on user experience, visual aesthetics, and actionable functionality. The goal is to deliver a professional, intuitive, and comprehensive system that empowers users to efficiently manage their hiring processes.


1. Overall Design Philosophy & Specifications

The Hiring Pipeline Builder is designed to be a professional, clean, and intuitive platform. Our design principles prioritize clarity, efficiency, and consistency to ensure a seamless user experience.

  • Professional & Clean Aesthetic: A minimalist design with ample white space, clear typography, and a balanced color palette to convey professionalism and reduce cognitive load.
  • Intuitive Navigation: Logical information architecture and consistent navigation elements allow users to easily find and manage all pipeline assets.
  • Actionable & Customizable: Components are designed for easy customization, download, and direct application, making the entire hiring process more efficient.
  • Scalable: The design accommodates growth, allowing for an increasing number of job roles, candidates, and pipeline assets without compromising usability.
  • Responsive Design: Optimized for various screen sizes (desktop, tablet, mobile) to ensure accessibility from any device.

1.1 Typography

  • Headings (H1, H2, H3): Montserrat (Bold, Semi-Bold) - Modern, strong, and highly readable for titles and section headers.
  • Body Text & Labels: Open Sans (Regular, Semi-Bold) - Clean, versatile, and highly legible for long-form content and UI elements.
  • Font Sizes:

* H1: 28px

* H2: 22px

* H3: 18px

* Body: 16px

* Small Text/Captions: 14px

  • Line Height: 1.5 for body text to improve readability.

1.2 Iconography

  • Style: Clean, modern line icons (e.g., Feather Icons, custom vector icons).
  • Usage: Used to visually represent actions (Edit, Delete, Download), categories (Job Description, Onboarding), and status indicators.
  • Consistency: All icons maintain a consistent stroke weight and visual style.

1.3 Interactivity & Feedback

  • Hover States: Clear visual feedback (e.g., subtle background change, text color change) for interactive elements like buttons, links, and list items.
  • Focus States: Visible outlines or highlights for keyboard navigation accessibility.
  • Loading Indicators: Spinners or progress bars for actions that take time (e.g., generating a report, saving changes).
  • Notifications: Non-intrusive toast messages for success, warning, or error feedback (e.g., "Job Description Saved," "Error: Please fill all required fields").
  • Modals & Overlays: Used for focused tasks like quick edits, confirmations, or previews, ensuring the user remains in context.

2. Color Palettes

Our color palette is chosen to evoke professionalism, trustworthiness, and clarity, while also providing clear visual cues for different states and actions.

2.1 Primary Palette (Brand & Core Actions)

  • Primary Blue: #2C5E8D (Deep, professional blue)

Usage:* Primary call-to-action buttons, active navigation states, key headings, brand elements. Conveys trust and stability.

  • Accent Green: #5CB85C (Positive, vibrant green)

Usage:* "Create New" buttons, success messages, positive highlights, and indicators of completion.

  • Neutral Gray: #6C757D (Versatile medium gray)

Usage:* Secondary text, borders, subtle separators, inactive states. Provides visual separation without distraction.

2.2 Secondary Palette (UI Elements & Feedback)

  • Background Light Gray: #F8F9FA

Usage:* Clean, subtle background for content areas, cards, and panels.

  • Dark Text: #212529

Usage:* Primary body text, main headings, ensuring high readability.

  • Link Blue: #007BFF

Usage:* Standard, accessible color for hyperlinks.

  • Warning Yellow: #FFC107

Usage:* Alerts, pending actions, non-critical warnings.

  • Error Red: #DC3545

Usage:* Critical error messages, delete actions, destructive buttons.

  • Success Background: #D4EDDA

Usage:* Background for success notification messages.

2.3 Typography Colors

  • Headings: #212529 (Dark Text)
  • Body Text: `#212529
hiring_pipeline_builder.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);}});}