Process App - Features & Capabilities Report

Template Version: 1.0.0 Generated: 2026-01-22 Package: @epicdm/flowstate-app-process App ID: process

Table of Contents

1. Overview
2. App Identity
3. Feature Categories
4. Capabilities
5. Data Models
6. User Workflows
7. Integration Points
8. Commands & Keybindings
9. Architecture Summary
10. Quality & Compliance

Overview

Purpose

The Process App is the visual process design and workflow documentation application for FlowState. It provides interactive flowchart visualization with ReactFlow, hierarchical subprocess navigation, full process editing with command-based undo/redo, configurable approval workflows, a visual JSON Schema editor for entity templates, and comprehensive execution statistics with analytics dashboards.

Target Users

Value Proposition

• Visual Process Design: Interactive flowchart editor with drag-and-drop step palette
• Hierarchical Navigation: Subprocess drill-down with breadcrumb trail
• Command-Based Editing: Full undo/redo support with auto-save
• Approval Workflows: Multi-approver gates with configurable thresholds
• Schema Editor: Visual JSON Schema design for entity creation templates
• Execution Analytics: Comprehensive statistics with charts and metrics
• Integration Ready: API calls, scripts, and AI agent task support

App Identity

Entry Points

Feature Categories

Category 1: Process Viewer

Core process visualization and navigation

Feature: Process List View

Description: Browseable list of processes with search and filter capabilities by status and category.

User Story: As a process designer, I want to browse and search processes so that I can quickly find the process I need to view or edit.

Acceptance Criteria:

• [x] Display processes in a scrollable list
• [x] Search by process title, name, or description
• [x] Filter by process status (draft, active, archived, all)
• [x] Filter by process category
• [x] Highlight selected process
• [x] Show process metadata (version, status badge)

Implementation:

Feature: Flowchart Visualization

Description: Interactive flowchart rendering using ReactFlow with custom node types for each process step type.

User Story: As a user, I want to see processes as visual flowcharts so that I can understand the process flow at a glance.

Acceptance Criteria:

• [x] Render process steps as nodes with type-specific styling
• [x] Display connections between steps as edges
• [x] Support pan and zoom on the canvas
• [x] Highlight selected step
• [x] Auto-layout using Dagre algorithm
• [x] Custom node types for all step categories

Implementation:

Feature: Subprocess Navigation

Description: Navigate into subprocess steps to view nested process definitions with breadcrumb trail for hierarchy tracking.

User Story: As a user, I want to navigate into subprocesses so that I can view nested process details without losing my place.

Acceptance Criteria:

• [x] Double-click subprocess steps to drill down
• [x] Display breadcrumb navigation showing hierarchy
• [x] Navigate to any level via breadcrumb clicks
• [x] "Home" breadcrumb to return to process list
• [x] Preserve selection state during navigation

Implementation:

Feature: Step Detail Panel

Description: Expandable panel showing detailed information about the selected step including type-specific configuration.

User Story: As a user, I want to see step details so that I can understand what each step does.

Acceptance Criteria:

• [x] Display step title and description
• [x] Show step type with icon
• [x] Display type-specific configuration
• [x] Show subprocess link for subprocess steps
• [x] Collapsible panel when no step selected

Implementation:

Category 2: Process Editor

Visual process editing with undo/redo support

Feature: Step Palette

Description: Drag-and-drop palette of step types organized by category (flow, actions, integration).

User Story: As a process designer, I want to drag step types onto the canvas so that I can quickly build process flows.

Acceptance Criteria:

• [x] Group step types by category
• [x] Display step type with icon and label
• [x] Drag initiation from palette items
• [x] Visual feedback during drag
• [x] Category headers with icons

Implementation:

Step Types Available:

Feature: Editor Toolbar

Description: Toolbar with undo/redo, delete, save status, and publish actions.

User Story: As a process designer, I want editing controls so that I can undo mistakes and publish my changes.

Acceptance Criteria:

• [x] Undo/Redo buttons with disabled state
• [x] Delete selected button
• [x] Dirty/saved indicator
• [x] Saving spinner during auto-save
• [x] Publish button with validation

Implementation:

Feature: Step Property Panel

Description: Editable property panel for configuring step details with type-specific fields.

User Story: As a process designer, I want to configure step properties so that I can customize step behavior.

Acceptance Criteria:

• [x] Common fields (title, description)
• [x] Type-specific fields based on step type
• [x] Process selector for subprocess steps
• [x] Condition builder for decision steps
• [x] Live updates with auto-save

Implementation:

Feature: Command-Based Undo/Redo

Description: Full command pattern implementation for reversible editing operations.

User Story: As a process designer, I want to undo and redo changes so that I can recover from mistakes.

Acceptance Criteria:

• [x] Create/Delete step commands
• [x] Update step property commands
• [x] Move step position commands
• [x] Create/Delete edge commands
• [x] Stack-based undo/redo
• [x] Clear stacks on save

Implementation:

Feature: Publish Workflow

Description: Validation and confirmation dialog for publishing processes.

User Story: As a process designer, I want to publish my process so that it becomes available for execution.

Acceptance Criteria:

• [x] Validation for start/end steps
• [x] Confirmation dialog with process info
• [x] Step and connection count display
• [x] Publish button disabled when invalid
• [x] Status update on successful publish

Implementation:

Category 3: Approval Workflows

Configurable multi-approver approval gates

Feature: Approval Step Configuration

Description: Configure approval steps with approvers, threshold, blocking behavior, and instructions.

User Story: As a workflow manager, I want to configure approval steps so that processes require proper authorization.

Acceptance Criteria:

• [x] Add/remove approvers by ID
• [x] Set required approval threshold
• [x] Configure blocking vs non-blocking
• [x] Add approval instructions
• [x] Link documents for review

Implementation:

Feature: Approval Actions

Description: Take approval actions (approve, reject, request revision, comment) with required comments.

User Story: As an approver, I want to take approval actions so that I can authorize or request changes to work.

Acceptance Criteria:

• [x] Approve action with optional comment
• [x] Reject action with required comment
• [x] Request revision with required comment
• [x] Add comment without decision
• [x] Action button state management

Implementation:

Feature: Approval Status & History

Description: Display approval status badges and timeline of approval events.

User Story: As a user, I want to see approval status and history so that I can track the approval process.

Acceptance Criteria:

• [x] Status badge (pending, approved, rejected, needs-revision)
• [x] Progress indicator for partial approvals
• [x] Event timeline with actor and timestamp
• [x] Comment display in timeline

Implementation:

Feature: Approval Hooks

Description: React hooks for approval state management and configuration.

User Story: As a developer, I want approval hooks so that I can integrate approval functionality into components.

Acceptance Criteria:

• [x] useApproval hook for approval state
• [x] useApprovalConfig hook for configuration
• [x] Approval service for business logic

Implementation:

Category 4: Schema Editor

Visual JSON Schema editing for entity templates

Feature: Visual Schema Editor

Description: Visual editor for creating and modifying JSON Schemas with field management.

User Story: As a process designer, I want to visually edit schemas so that I can define data structures without writing JSON.

Acceptance Criteria:

• [x] Add fields with type selection
• [x] Configure field constraints (min/max, pattern, enum)
• [x] Mark fields as required
• [x] Reorder fields via drag-and-drop
• [x] Nested object support
• [x] Array field configuration

Implementation:

Feature: Entity Template Editor

Description: Configure entity creation templates that use base collection schemas with field overrides.

User Story: As a process designer, I want to configure entity templates so that process steps can create tasks, milestones, or projects.

Acceptance Criteria:

• [x] Select target collection (tasks, milestones, projects)
• [x] Override field inclusion
• [x] Set default values
• [x] Variable interpolation support

Implementation:

Feature: Schema Validation & Preview

Description: Real-time schema validation and JSON preview with form preview.

User Story: As a process designer, I want to validate my schema so that I can catch errors before publishing.

Acceptance Criteria:

• [x] Live validation with error display
• [x] JSON Schema preview panel
• [x] Generated form preview
• [x] Validation error highlighting

Implementation:

Category 5: Execution Statistics

Analytics dashboard for process execution metrics

Feature: Statistics Dashboard

Description: Main statistics page with time range selector and metric cards.

User Story: As a workflow manager, I want to see execution statistics so that I can monitor process performance.

Acceptance Criteria:

• [x] Time range toggle (7 days / 30 days)
• [x] Total executions metric
• [x] Success rate with color coding
• [x] Average duration metric
• [x] Currently running count (live)

Implementation:

Feature: Execution Charts

Description: Visual charts for execution data including time series, breakdown, and comparison views.

User Story: As a workflow manager, I want visual charts so that I can identify trends and patterns.

Acceptance Criteria:

• [x] Executions over time stacked area chart
• [x] Status breakdown pie chart
• [x] Process comparison bar chart
• [x] Execution timeline/Gantt chart
• [x] Loading states for all charts

Implementation:

Feature: Linked Entities Panel

Description: Display projects, milestones, and tasks created by process executions.

User Story: As a workflow manager, I want to see linked entities so that I can track what processes have created.

Acceptance Criteria:

• [x] List entities by type
• [x] Show entity name and creation date
• [x] Show originating process
• [x] Navigate to entity on click

Implementation:

Capabilities

Core Capabilities

Technical Capabilities

Integration Capabilities

Data Models

Collections Used

Entity Relationships

Process
    |
    +-- ProcessSteps (hasMany)
            |
            +-- Outgoing Connections (embedded in nextStepIds)
            |
            +-- Subprocess Reference (optional)
            |
            +-- Approval Configuration (optional)

Key Data Flows

User Action --> Component --> Hook --> RxDB Collection --> UI Update
                                  |
                                  +--> Command Stack (for undo/redo)
                                  |
                                  +--> Auto-save (debounced)
                                  |
                                  +--> Replication --> Server

User Workflows

Workflow 1: View a Process

Navigate to and explore a process flowchart

Trigger: Navigate to Processes page

Steps:

Success Outcome: User understands process flow and step details Failure Handling: Error state shown if process not found

Workflow 2: Edit a Process

Create or modify process steps

Trigger: Toggle edit mode on a process

Steps:

Success Outcome: Process saved and published Failure Handling: Undo available for mistakes, validation prevents invalid publish

Workflow 3: Configure Approval Step

Set up a multi-approver approval gate

Trigger: Select an approval step in edit mode

Steps:

Success Outcome: Approval step configured for workflow Failure Handling: Validation ensures required fields

Workflow 4: Review Execution Statistics

Monitor process performance

Trigger: Navigate to Statistics page

Steps:

Success Outcome: User understands process performance Failure Handling: Loading states while data fetches

State Transitions

Process Status States

┌─────────┐   ┌─────────┐   ┌──────────┐
│  Draft  │──▶│ Active  │──▶│ Archived │
└─────────┘   └─────────┘   └──────────┘
      │              │
      ▼              ▼
  (Publish)    (Archive)

Approval Status States

┌─────────┐   ┌──────────┐
│ Pending │──▶│ Approved │
└─────────┘   └──────────┘
      │
      ├───▶ ┌──────────┐
      │     │ Rejected │
      │     └──────────┘
      │
      └───▶ ┌────────────────┐
            │ Needs Revision │
            └────────────────┘
                    │
                    ▼
              ┌─────────┐
              │ Pending │
              └─────────┘

Integration Points

Internal Integrations

External Integrations

MCP Integration

Commands & Keybindings

Keyboard Shortcuts

Implementation

Architecture Summary

Directory Structure

src/
├── components/           # UI components
│   ├── approval/        # Approval workflow components (7 files)
│   ├── editor/          # Editor components (6 files)
│   ├── nodes/           # ReactFlow node components (10 files)
│   ├── schema-editor/   # Schema editor components (10 files)
│   ├── stats/           # Statistics components (7 files)
│   ├── Header.tsx       # App header
│   ├── Sidebar.tsx      # App sidebar
│   ├── ProcessBreadcrumb.tsx
│   ├── ProcessFlowchartView.tsx
│   ├── ProcessHeader.tsx
│   ├── ProcessListView.tsx
│   ├── ProcessStatusBadge.tsx
│   └── ProcessStepDetail.tsx
├── hooks/               # Custom React hooks (14 hooks)
├── pages/               # Page components (5 files)
├── services/            # Business logic services (1 service)
├── types/               # TypeScript definitions (5 files)
├── utils/               # Utility functions (9 files)
├── App.tsx              # Main app component
├── ProcessViewerApp.tsx # Process viewer orchestrator
├── plugin.ts            # FlowState plugin
├── index.ts             # Package exports
└── standalone.tsx       # Standalone entry

Key Architectural Patterns

Hooks Overview

Quality & Compliance

Test Coverage

Accessibility

Security Considerations

FlowState Alignment

Spec-Driven Development

This app follows the FlowState Standard for spec-driven development:

• Requirements: .flowstate/specs/{{feature-name}}/requirements.md
• Design: .flowstate/specs/{{feature-name}}/design.md
• Wireframes: .flowstate/specs/{{feature-name}}/wireframes.html
• Tasks: .flowstate/specs/{{feature-name}}/tasks.md

Quality Gates

Appendix

Related Documentation

Version History