Hiring Pipeline Builder
Run ID: 69cb3d6561b1021a29a873432026-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: Research & Design Requirements

Project Goal: To design and develop a comprehensive, intuitive, and efficient Hiring Pipeline Builder platform that streamlines the recruitment process from job creation to onboarding. This document outlines the detailed design specifications, wireframe concepts, visual identity, and user experience recommendations for the platform.


1. Introduction & Project Overview

This document serves as the foundational design blueprint for the "Hiring Pipeline Builder." It translates the core requirements—job descriptions, interview question banks, scoring rubrics, offer letter templates, and onboarding checklists—into actionable design specifications. The aim is to create a seamless, integrated experience that empowers hiring teams to manage their recruitment workflows effectively, ensure consistency, and enhance candidate experience.


2. Core Functionality & Modules (Research Insights)

Based on industry best practices and common user needs, the platform will be structured around the following key modules:

  • 2.1. Job Description (JD) Creator & Manager

* Purpose: Enable users to quickly create, manage, and publish detailed job descriptions.

* Key Features:

* Template Library: Pre-built, customizable templates for various roles and industries.

* Rich Text Editor: WYSIWYG editor for formatting, bullet points, links, etc.

* Custom Fields: Ability to add company-specific sections, benefits, or requirements.

* Version Control: Track changes and revert to previous versions.

* Publishing Options: Internal sharing, external job board integration (future consideration).

  • 2.2. Interview Question Bank

* Purpose: Provide a centralized repository of interview questions categorized by skills, competencies, and interview stages.

* Key Features:

* Categorization: Organize questions by type (e.g., behavioral, technical, situational), skill (e.g., leadership, problem-solving), or job role.

* Custom Question Creation: Users can add their own questions and tag them appropriately.

* Rating Scales Integration: Link questions directly to specific scoring rubrics or general rating scales.

* Search & Filter: Easily find relevant questions for specific interviews.

  • 2.3. Scoring Rubric Builder

* Purpose: Ensure consistent and objective candidate evaluation across all interviewers and stages.

* Key Features:

* Customizable Criteria: Define specific evaluation criteria (e.g., communication, technical proficiency, cultural fit).

* Weighted Scores: Assign different weights to criteria based on their importance for the role.

* Rating Scales: Define numerical or descriptive rating scales (e.g., 1-5, "Needs Improvement" to "Exceptional").

* Rubric Templates: Save and reuse rubrics for similar roles.

* Interviewer Guidance: Provide clear definitions for each rating level to minimize bias.

  • 2.4. Offer Letter Template Generator

* Purpose: Streamline the creation and delivery of professional offer letters.

* Key Features:

* Dynamic Fields: Auto-populate candidate name, salary, start date, title, and other details from candidate profile.

* Template Library: Customizable offer letter templates with company branding.

* Conditional Logic: Include/exclude clauses based on role or candidate type.

* Approval Workflow: Define an internal approval process before sending the offer.

* E-Signature Integration: Seamless integration with e-signature platforms (e.g., DocuSign, Adobe Sign).

  • 2.5. Onboarding Checklist Manager

* Purpose: Ensure a smooth and consistent onboarding experience for new hires.

* Key Features:

* Task Assignment: Assign onboarding tasks to specific individuals (e.g., IT, HR, Hiring Manager).

* Due Dates & Reminders: Set deadlines and send automated reminders.

* Progress Tracking: Visualize the completion status of each checklist item.

* Resource Library: Attach relevant documents, links, or videos for new hires and assignees.

* Role-Based Checklists: Create different checklists for various roles or departments.

  • 2.6. Pipeline Visualization & Management

* Purpose: Provide an intuitive overview and control of the entire hiring process for each job opening.

* Key Features:

* Kanban Board View: Drag-and-drop functionality for moving candidates between stages (e.g., Applied, Screening, Interview, Offer, Hired).

* Candidate Cards: Quick view of candidate name, photo, current stage, and key notes.

* Quick Actions: Easily move, reject, or schedule actions directly from candidate cards.

* Filters & Search: Filter candidates by stage, skills, source, or other criteria.


3. Design Specifications

3.1. User Roles & Permissions

To ensure data security and appropriate access, the platform will support the following user roles:

  • Administrator (Admin): Full access to all features, settings, user management, and company-wide templates.
  • Hiring Manager: Can create/manage job openings for their departments, view/manage candidates in their pipelines, assign interviews, and review feedback. Limited access to company-wide settings and user management.
  • Recruiter: Can manage all job openings and candidates across the organization, create/edit templates (JDs, Q-Bank, Rubrics), and manage offer letters. Limited access to user management.
  • Interviewer: Can view assigned candidate profiles, access interview questions, and submit feedback using the defined scoring rubrics. No access to pipeline management or sensitive candidate data beyond their interview context.

3.2. Technical Requirements

  • Responsive Design: The platform must be fully responsive, providing an optimal viewing and interaction experience across various devices (desktop, tablet).
  • Cloud-Based Architecture: Hosted on a secure, scalable cloud infrastructure.
  • API Integrations (Future): Design for potential future integrations with:

* HR Information Systems (HRIS)

* Applicant Tracking Systems (ATS)

* Calendar applications (Google Calendar, Outlook Calendar)

* Communication tools (Slack, Teams)

* E-signature providers (DocuSign, Adobe Sign)

  • Performance: Fast loading times and smooth interactions for a seamless user experience.

3.3. Data Management & Security

  • Encryption: All sensitive data (candidate information, personal details) must be encrypted both in transit and at rest.
  • Compliance: Adherence to data privacy regulations such as GDPR and CCPA.
  • Audit Trails: Log all significant user actions for accountability and security.
  • Regular Backups: Implement robust data backup and recovery procedures.

3.4. Accessibility

  • WCAG 2.1 AA Compliance: Design and develop the platform to meet Web Content Accessibility Guidelines (WCAG) 2.1 Level AA standards.

* Color Contrast: Sufficient contrast between text and background colors.

* Keyboard Navigation: All interactive elements must be navigable and operable via keyboard.

* Screen Reader Support: Semantic HTML and ARIA attributes for screen reader compatibility.

* Focus Indicators: Clear visual focus indicators for interactive elements.


4. Wireframe Descriptions (Key Screens)

This section outlines the conceptual layout and key components for critical screens within the Hiring Pipeline Builder.

4.1. Dashboard / Pipeline Overview

  • Purpose: Provide a centralized hub for all active job openings and candidate pipelines.
  • Layout:

* Left Sidebar: Global navigation (Dashboard, Jobs, Candidates, Templates, Settings).

* Top Header: Company logo, user profile/notifications, global search.

* Main Content Area:

* Job Opening Selector: Dropdown or tabs to switch between different job pipelines.

* Pipeline Stages (Kanban View): Horizontal columns representing recruitment stages (e.g., Applied, Phone Screen, Interview, Offer, Hired). Each column will show the number of candidates in that stage.

* Candidate Cards: Within each stage, individual cards for candidates displaying:

* Candidate Photo/Initials

* Name

* Current Stage

* Last Activity/Next Action

* Quick Action Buttons (e.g., "Move," "Reject," "View Profile")

* Filters: Ability to filter candidates by source, skills, recruiter, or date applied.

* Key Metrics (Optional): Small widgets displaying "Time to Hire," "Active Candidates," "Open Roles."

  • Interactions: Drag-and-drop candidate cards between stages, click cards to view detailed profiles, use filters to refine view.

4.2. Job Creation / Editing Page

  • Purpose: Facilitate the creation and modification of job descriptions and associated pipeline settings.
  • Layout:

* Multi-Step Form/Tabbed Interface: Guiding users through different sections (Job Details, Description, Requirements, Pipeline Stages, Team).

* Job Details Section:

* Job Title, Department, Location, Employment Type, Salary Range.

* Dropdown for selecting a Job Description Template.

* Job Description Editor:

* Rich Text Editor for detailed job description, responsibilities, and qualifications.

* Preview button to see how the JD will look.

* Pipeline Stages Configuration:

* List of customizable pipeline stages with drag-and-drop reordering.

* Option to add/remove stages and assign default interview kits/rubrics to stages.

* Hiring Team Assignment:

* Fields to assign Hiring Manager(s) and Recruiter(s).

* Option to invite Interviewers for specific stages.

* Action Buttons: "Save Draft," "Publish Job," "Cancel."

4.3. Candidate Profile Page

  • Purpose: Centralized view of all information related to a specific candidate.
  • Layout:

* Top Section: Candidate photo, name, current job applied for, current pipeline stage, contact info.

* Action Bar: Buttons for "Move Stage," "Reject," "Send Email," "Schedule Interview," "Make Offer."

* Left Sidebar (Contextual Navigation): Tabs for "Overview," "Resume," "Interviews," "Feedback," "Notes," "Documents," "Activity Log."

* Main Content Area (Based on Tab Selection):

* Overview: Summary of application, key skills, source.

* Resume: Embeddable/downloadable resume viewer.

* Interviews: List of scheduled/completed interviews, interviewer, date, status.

* Feedback: Consolidated view of all interview feedback, scores from rubrics, and comments.

* Notes: Chron

gemini Output

Hiring Pipeline Builder: Design Specifications

This document outlines the detailed design specifications for the "Hiring Pipeline Builder," a comprehensive tool designed to streamline the entire recruitment lifecycle. It covers high-level design goals, core features, information architecture, specific wireframe descriptions, user experience (UX) recommendations, and user interface (UI) design elements, including color palettes and typography.


1. Executive Summary & Design Goals

The Hiring Pipeline Builder aims to be an intuitive, efficient, and integrated platform that empowers organizations to manage their recruitment process from job requisition to onboarding. The design prioritizes clarity, consistency, and actionable insights to enhance the hiring team's productivity and improve the candidate experience.

1.1. Core Design Goals:

  • User-Centric & Intuitive: Easy to learn and use, minimizing cognitive load and guiding users through complex workflows.
  • Comprehensive & Integrated: Provide all necessary tools within a single platform, reducing the need for multiple disparate systems.
  • Scalable & Flexible: Support varying organizational sizes and recruitment volumes, allowing for customization of workflows, templates, and rubrics.
  • Actionable & Efficient: Enable quick decision-making and task completion through clear data visualization, quick actions, and automation.
  • Professional & Trustworthy: A clean, modern, and branded aesthetic that reflects professionalism and builds confidence.
  • Collaborative: Facilitate seamless teamwork among hiring managers, recruiters, and interviewers.

2. Core Features & Functionality

The Hiring Pipeline Builder will encompass the following key functional modules:

  • Job Requisition & Posting: Create, approve, and manage job openings. Integrate with job boards (optional, future scope).
  • Job Description (JD) Builder: A rich-text editor with templating capabilities, AI-assisted content generation, and version control for JDs.
  • Candidate Management System (CMS): Track candidate applications, move candidates through stages, view profiles, and manage communication.
  • Interview Management: Schedule interviews, create interview panels, and prepare interview kits.
  • Interview Question Banks: Centralized repository of structured interview questions, categorized by skill, role, and stage.
  • Scoring Rubric Builder: Customizable rubrics for consistent and objective candidate evaluation, supporting weighted criteria.
  • Candidate Evaluation & Feedback: Structured feedback forms tied to rubrics, enabling quick and fair assessment.
  • Offer Management: Generate offer letters using templates, manage approval workflows, and track offer status (sent, accepted, declined).
  • Onboarding Checklists: Customizable checklists for pre-boarding and onboarding tasks, assigned to relevant stakeholders with due dates.
  • Reporting & Analytics: Dashboard views and detailed reports on pipeline health, time-to-hire, source effectiveness, and diversity metrics.
  • User Roles & Permissions: Granular control over user access (e.g., Admin, Recruiter, Hiring Manager, Interviewer).

3. Information Architecture (IA)

The platform's information architecture will be clear, logical, and designed for easy navigation, primarily using a persistent left-hand sidebar navigation.

3.1. Global Navigation (Left Sidebar):

  • Dashboard: High-level overview and quick actions.
  • Jobs: List of all job requisitions, creation, and management.
  • Candidates: Global candidate search and management across all jobs.
  • Interviews: Overview of scheduled interviews, question bank, rubric builder.
  • Offers: Management of all job offers.
  • Onboarding: Management of onboarding checklists.
  • Reports: Analytics and custom reports.
  • Settings: Account, integrations, user management, templates.

3.2. Hierarchical Structure (Example for a Job):

  • Jobs

* Specific Job Title (e.g., "Senior Software Engineer")

* Overview (Summary, JD, Team)

* Candidates (Pipeline view for this specific job)

* Interviews (Scheduled for this job)

* Offers (Extended for this job)

* Settings (Job-specific configurations)

3.3. Contextual Navigation:

  • Within a Candidate Profile, tabs or sections will allow users to navigate between "Overview," "Resume," "Interviews," "Feedback," "Offer," and "Activity Log."
  • Within the Interview Management section, sub-navigation will allow switching between "Schedule," "Question Banks," and "Rubrics."

4. Wireframe Descriptions

The following describes key screens and their components. These are conceptual layouts guiding the visual design.

4.1. Dashboard

  • Layout: Grid-based, responsive.
  • Components:

* "Pipeline Snapshot" Card: Visual representation (e.g., bar chart) of candidates in different stages across all active jobs.

* "Active Jobs" Card: List of currently open positions, showing number of applicants and current stage. Quick links to job details.

* "Upcoming Interviews" Card: Chronological list of interviews, showing candidate, job, interviewer, and time. Quick action to view interview kit.

* "Pending Actions" Card: Tasks requiring user attention (e.g., "Review 5 New Applicants," "Send Offer for [Candidate Name]").

* "Offers Sent/Accepted" Card: Summary of recent offer activities.

* "Quick Actions" Section: Buttons for "Create New Job," "Add Candidate," "Schedule Interview."

4.2. Job Management (List View)

  • Layout: Data table with filters and search.
  • Components:

* Header: "Jobs" title, "Create New Job" button (primary action).

* Search & Filters: Search bar, dropdowns for Status (Open, Closed, Draft), Department, Hiring Manager.

* Job Table:

* Columns: Job Title, Department, Hiring Manager, Applicants, Stage, Status, Creation Date, Actions.

* Sortable columns.

* Actions column: "View," "Edit," "Close Job," "Duplicate Job."

* Pagination: For large lists of jobs.

4.3. Job Creation/Edit (Multi-step Wizard)

  • Layout: Step-by-step form presented in a modal or full-page wizard. Progress indicator at the top.
  • Steps (Example):

1. Basic Information: Job Title, Department, Location, Employment Type, Salary Range.

2. Job Description:

* Rich Text Editor: Bold, italics, lists, links.

* "Load Template" dropdown.

* "AI Assist" button (generates/refines JD based on title/keywords).

* Pre-populated sections for "Responsibilities," "Qualifications," "About Us."

3. Hiring Team & Stages: Select Hiring Manager, Recruiters, Interviewers. Define custom pipeline stages (e.g., Application Review, Phone Screen, Technical Interview, On-site Interview, Offer).

4. Interview Kits: Assign default question banks and rubrics for each stage.

5. Review & Publish: Summary of all inputs, "Save as Draft" or "Publish Job" buttons.

4.4. Candidate Profile

  • Layout: Two-column layout, left column for core info, right for detailed tabs.
  • Components:

* Left Column (Candidate Header): Profile picture, Name, Current Status, Contact Info, "Move Stage" dropdown, "Reject" button, "Make Offer" button.

* Right Column (Tabbed Navigation):

* Overview: Summary of application, resume preview, cover letter.

* Interviews: List of scheduled/completed interviews, links to feedback forms.

* Feedback: Consolidated view of all interviewer feedback and scores, average score.

* Offer: Details of any offer extended, status, offer letter preview.

* Activity Log: Chronological record of all interactions, status changes, emails.

* Attachments: Other documents.

4.5. Interview Management (Question Bank & Rubric Builder)

  • Question Bank:

* Layout: Filterable, searchable list of questions.

* Components: "Add New Question" button. Filters by Category (e.g., Behavioral, Technical, Situational), Skill, Stage.

* Question Card/Row: Question text, associated skills, type (e.g., open-ended, scenario), "Edit," "Delete."

  • Rubric Builder:

* Layout: Form-based builder with drag-and-drop capabilities.

* Components: "Create New Rubric" button.

* Rubric Details: Name, Description, Associated Job Stages.

* Criteria Section: Add/edit criteria (e.g., "Problem Solving," "Communication," "Technical Acumen").

* Scoring Scale: Define scale (e.g., 1-5, Poor-Excellent) and descriptions for each level.

* Weighting: Assign a percentage weight to each criterion.

* "Save Rubric" button.

4.6. Offer Management

  • Layout: Table view of offers with filters.
  • Components:

* Header: "Offers" title, "Create New Offer" button.

* Search & Filters: Candidate

gemini Output

This document outlines the detailed design specifications, wireframe descriptions, color palettes, and user experience (UX) recommendations for the "Hiring Pipeline Builder." This comprehensive output serves as a blueprint for developing an intuitive, powerful, and professional tool for managing recruitment assets.


1. Executive Summary

The "Hiring Pipeline Builder" is designed to empower HR professionals and hiring managers to efficiently create, manage, and standardize all critical assets required for a successful recruitment process. This includes Job Descriptions, Interview Question Banks, Scoring Rubrics, Offer Letter Templates, and Onboarding Checklists. The design prioritizes a clean, intuitive user interface, robust functionality, and a consistent user experience across all modules, ensuring ease of use and high productivity.


2. Overall Hiring Pipeline Builder Interface Design

The overarching design philosophy for the builder emphasizes clarity, modularity, and guided workflows, while still allowing for flexible navigation.

2.1. Design Specifications (Global)

  • Layout Structure: A common three-panel layout will be used:

* Top Navigation Bar: For global actions, branding, and user profile.

* Left Sidebar Navigation: For primary module selection (e.g., Dashboard, Job Descriptions, etc.).

* Main Content Area: Dynamic area displaying module-specific content, editors, or lists.

  • Workflow Paradigm: A hybrid approach combining a central dashboard for overview and quick access, with dedicated editors for each asset type. Users can follow a guided "New Pipeline" wizard or navigate directly to specific asset creation/editing.
  • Modularity: Each asset type (Job Description, Interview Questions, etc.) will be treated as a distinct module with its own specific editor and management view, ensuring focused user interaction.
  • Responsiveness: The interface will be designed to be fully responsive, adapting gracefully to various screen sizes (desktop, tablet).

2.2. Wireframe Description (Global)

  • Top Navigation Bar:

* Left: Company Logo / Product Name (e.g., "PantheraHire").

* Center-Left: "New Pipeline" button (Primary CTA, initiates a guided workflow).

* Center: Global Search Bar (for finding any asset, candidate, or pipeline).

* Right: Notifications Icon, Help/Support Icon, User Avatar/Profile Menu.

  • Left Sidebar Navigation:

* Top: Dashboard (Overview of active pipelines, quick stats).

* Main Links:

* Job Descriptions (Icon: Briefcase)

* Interview Question Banks (Icon: Question Mark / Chat Bubble)

* Scoring Rubrics (Icon: Scorecard / Star Ratings)

* Offer Letter Templates (Icon: Document / Handshake)

* Onboarding Checklists (Icon: Checklist / Clipboard)

* Bottom: Settings, Feedback.

* Each link will highlight upon selection.

  • Main Content Area:

* Dashboard View: Displays an overview of active hiring pipelines, quick links to create new assets, and summary statistics.

* Module View (e.g., Job Descriptions):

* Header: Module Title ("Job Descriptions"), "Create New Job Description" button (Secondary CTA), Filters & Sort options.

* Content: A list or card view of existing assets, with key information (e.g., Job Title, Status, Last Modified). Each item will have "Edit," "Duplicate," "Delete" actions.

* Editor View (e.g., New Job Description): A dedicated, full-width workspace for creating or editing the specific asset, as detailed in Section 3.

2.3. UX Recommendations (Global)

  • Intuitive Flow: Guided workflows for first-time users or complex tasks (e.g., "New Pipeline" wizard) with clear progress indicators.
  • Consistency: Consistent UI elements (buttons, forms, icons) and interaction patterns across all modules.
  • Feedback & Confirmation: Clear visual and textual feedback for user actions (e.g., "Saved successfully," "Item deleted"). Confirmation modals for destructive actions.
  • Save & Versioning: Automatic saving of drafts. Robust version history for all assets, allowing users to revert to previous states.
  • Contextual Help: Tooltips for complex fields, inline help text, and links to detailed documentation within the interface.
  • Keyboard Navigation: Full support for keyboard navigation to ensure accessibility and efficiency for power users.
  • Empty States: Thoughtful empty states for new users or sections with no content, guiding them on how to get started.

3. Core Asset Design Specifications & Wireframes

Each core asset will have a dedicated creation/editing interface designed for optimal usability.

3.1. Job Descriptions Module Design Specifications

  • Input Fields:

* Basic Info: Job Title (text input), Department (dropdown/searchable select), Location (text input with suggestions), Employment Type (dropdown: Full-time, Part-time, Contract).

* Rich Text Editor (WYSIWYG): For core content sections: "About the Role," "Responsibilities," "Required Qualifications," "Preferred Qualifications," "What We Offer."

* Standard formatting options: bold, italic, underline, lists (bulleted, numbered), headings, links.

* Ability to insert images/videos.

  • Key Features:

* Template Library: Access to predefined, industry-standard templates.

* AI Suggestions: Contextual AI suggestions for content generation or refinement (e.g., "Suggest responsibilities for a 'Senior Software Engineer'").

* Preview Function: Instantly view how the job description will appear to candidates.

* SEO Optimization: Fields for keywords and meta-description.

3.2. Job Descriptions Module Wireframe Description

  • Header: "Create New Job Description" / "Edit [Job Title]".
  • Left Panel (Fixed Width):

* Basic Information Section: Grouped fields for Job Title, Department, Location, Employment Type.

* Section Management: A list of content sections ("About the Role," "Responsibilities," etc.) that can be reordered via drag-and-drop.

  • Main Content Area (Primary Focus):

* Rich Text Editor: The active section selected from the left panel will be displayed here for editing.

  • Right Sidebar (Collapsible):

* Template Selector: Dropdown or gallery of available templates.

* AI Assistant Panel: Button to trigger AI suggestions, displaying results.

* Preview Button: Opens a modal or new tab with the JD preview.

* SEO Fields: Collapsible section for meta-data.

  • Bottom Bar: "Save Draft," "Publish," "
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);}});}