usegenerationstream-hook

name	usegenerationstream-hook
description	This skill covers patterns for managing generation streams in a React application. Trigger: Load when using `useGenerationStream` for state management.
license	Apache-2.0
metadata	{"author":"repoforge","version":"1.0","complexity":"medium","token_estimate":350,"dependencies":[],"related_skills":[],"load_priority":"high"}

usegenerationstream-hook

This skill covers patterns for managing generation streams in a React application.

Trigger: Load when using useGenerationStream for state management.

Quick Reference

Task	Pattern
Manage stream status	StreamStatus
Handle step items	StepItem

Critical Patterns (Summary)

• StreamStatus Management: Utilize StreamStatus to track the state of the generation stream.
• StepItem Handling: Use StepItem to represent individual steps in the generation process.

Critical Patterns (Detailed)

StreamStatus Management

Utilize StreamStatus to track the state of the generation stream, allowing for responsive UI updates.

import { StreamStatus } from '@/hooks/useGenerationStream';

const status: StreamStatus = StreamStatus.RUNNING; // Example usage

StepItem Handling

Use StepItem to represent individual steps in the generation process, enabling detailed tracking of progress.

import { StepItem } from '@/hooks/useGenerationStream';

const step: StepItem = { id: 1, description: 'Initializing...' }; // Example usage

When to Use

• When managing the state of a generation process in a React component.
• When displaying progress through individual steps of a generation task.

Commands

docker-compose up
python repoforge/cli.py

Anti-Patterns

Don't: Ignore StreamState

Ignoring StreamState can lead to unresponsive UI and poor user experience.

// BAD
const state = {}; // Missing StreamState management