@nebulit/embuilder 0.1.39 → 0.1.41

package/templates/frontend/prompt.md

@@ -0,0 +1,484 @@
+# Frontend Agent Prompt - UI Component Generation
+
+Build React + TypeScript UI components from slice JSON definitions using established patterns.
+
+---
+
+## 0. Available Skills (Use These!)
+
+This project has custom skills available in `.claude/skills/` that automate common tasks:
+
+- **`/ui-build-slice-ui`**: Complete orchestrator - builds entire UI from slice definitions (types → API → hooks → components)
+- **`/ui-analyze-slices`**: Analyze slice JSON files to identify grouping, dependencies, and implementation strategy
+- **`/ui-read-ui-prompts`**: Find and parse UI prompts from slice definitions and `ui-prompt.md`
+- **`/ui-generate-types`**: Generate TypeScript interfaces from slice field definitions
+- **`/ui-generate-api`**: Generate API layer functions for queries (Supabase) and commands (POST)
+- **`/ui-generate-hook`**: Generate React Query hooks for STATE_VIEW (queries) and STATE_CHANGE (mutations)
+- **`/ui-scaffold-component`**: Scaffold React components (List, Dialog, Page) using Bulma CSS
+
+**IMPORTANT**: When asked to build UI from slices, USE the `/ui-build-slice-ui` skill first! It will orchestrate all other skills in the correct order. Only use individual skills when you need to regenerate or modify a specific part.
+
+---
+
+## 1. Slice Composition (CRITICAL)
+
+### Slice Types
+
+- **STATE_VIEW**: One read model table → Query hook → List component
+- **STATE_CHANGE**: One command/POST endpoint → Mutation hook → Form/Dialog
+
+### Grouping Rule
+
+**Slices with same `groupId` → Implement together as one component**
+
+```javascript
+// Multiple slices, same groupId → One component
+Slice A: { groupId: "123", sliceType: "STATE_VIEW", title: "Events View" }
+Slice B: { groupId: "123", sliceType: "STATE_CHANGE", title: "Create Event" }
+Slice C: { groupId: "123", sliceType: "STATE_CHANGE", title: "Cancel Event" }
+// → Combine into EventsPage component
+```
+
+### UI Prompts Priority
+
+1. Check `ui-prompt.md` (detailed specs) - Use `/ui-read-ui-prompts` skill
+2. Check `codeGen.uiPrompts` array (high-level guidance) - Use `/ui-read-ui-prompts` skill
+3. Follow this prompt (standard patterns)
+4. Keep it simple if no guidance
+
+---
+
+## 2. Authentication & API Context
+
+```typescript
+// AuthContext: user, session, restaurantId
+import { useAuth } from "@/contexts/AuthContext";
+const { user, session, restaurantId } = useAuth();
+
+// ApiContext: token, restaurantId, userId (auto-injected into headers)
+import { useApiContext } from "@/hooks/useApiContext";
+const ctx = useApiContext();
+```
+
+---
+
+## 3. Hooks Pattern
+
+### Query Hook (STATE_VIEW)
+
+```typescript
+// src/hooks/api/useEvents.ts
+import { useQuery } from "@tanstack/react-query";
+import * as api from "@/lib/api";
+
+export function useEvents() {
+    return useQuery({
+        queryKey: ["events"],
+        queryFn: () => api.fetchEvents(),
+    });
+}
+```
+
+### Mutation Hook (STATE_CHANGE)
+
+```typescript
+export function useCreateEvent() {
+    const ctx = useApiContext();
+    const queryClient = useQueryClient();
+
+    return useMutation({
+        mutationFn: (params: api.CreateEventParams) => api.createEvent(params, ctx),
+        onSuccess: () => {
+            queryClient.invalidateQueries({ queryKey: ["events"] });
+        },
+    });
+}
+```
+
+---
+
+## 4. API Layer (CQRS)
+
+### Query (Read from Supabase)
+
+```typescript
+// src/lib/api.ts
+export async function fetchEvents(): Promise<Event[]> {
+    const { data, error } = await supabase
+        .from("events_for_planning")  // Read model table
+        .select("*");
+    if (error) throw new Error(error.message);
+    return data || [];
+}
+```
+
+### Command (POST to Backend)
+
+```typescript
+export async function createEvent(params: CreateEventParams, ctx: ApiContext) {
+    const response = await apiRequest(
+        commandEndpoints.createEvent,  // /api/createevent
+        ctx,
+        { method: "POST", body: { ...params } }
+    );
+    if (!response.ok) throw new Error(response.error);
+    return response.data;
+}
+```
+
+**Add endpoint in `src/lib/api-client.ts`**:
+```typescript
+export const commandEndpoints = {
+    createEvent: "/api/createevent",
+    // ...
+};
+```
+
+---
+
+## 5. Component Patterns
+
+### List Component (STATE_VIEW)
+
+```typescript
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Skeleton } from "@/components/ui/skeleton";
+import { useEvents } from "@/hooks/api/useEvents";
+
+export function EventList() {
+    const { data: events = [], isLoading } = useEvents();
+
+    if (isLoading) {
+        return <Skeleton className="h-20 w-full" />;
+    }
+
+    return (
+        <div className="grid gap-4 md:grid-cols-2">
+            {events.map(event => (
+                    <Card key={event.id}>
+                        <CardHeader><CardTitle>{event.name}</CardTitle></CardHeader>
+            <CardContent>{event.date}</CardContent>
+            </Card>
+    ))}
+    </div>
+);
+}
+```
+
+### Dialog Component (STATE_CHANGE)
+
+```typescript
+import { useState } from "react";
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { useCreateEvent } from "@/hooks/api/useEvents";
+import { toast } from "sonner";
+
+export function CreateEventDialog({ open, onOpenChange }) {
+    const createEvent = useCreateEvent();
+    const [form, setForm] = useState({ name: "", date: "" });
+
+    const handleSubmit = async () => {
+        if (!form.name) return toast.error("Name required");
+        try {
+            await createEvent.mutateAsync(form);
+            toast.success("Created");
+            onOpenChange(false);
+        } catch (err) {
+            toast.error(`Error: ${err.message}`);
+        }
+    };
+
+    return (
+        <Dialog open={open} onOpenChange={onOpenChange}>
+        <DialogContent>
+            <DialogHeader><DialogTitle>Create Event</DialogTitle></DialogHeader>
+    <div className="space-y-4">
+        <div>
+            <Label>Name</Label>
+        <Input value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} />
+    </div>
+    <Button onClick={handleSubmit} disabled={createEvent.isPending}>
+        Create
+        </Button>
+        </div>
+        </DialogContent>
+        </Dialog>
+);
+}
+```
+
+### Page Composition (Combine Slices)
+
+```typescript
+export function EventsPage() {
+    const [dialogOpen, setDialogOpen] = useState(false);
+
+    return (
+        <div className="p-6">
+        <div className="flex justify-between mb-6">
+        <h1 className="text-2xl font-bold">Events</h1>
+            <Button onClick={() => setDialogOpen(true)}>Create Event</Button>
+    </div>
+
+    <EventList />
+    <CreateEventDialog open={dialogOpen} onOpenChange={setDialogOpen} />
+    </div>
+);
+}
+```
+
+---
+
+## 6. Implementation Workflow
+
+### Recommended Approach: Use Skills!
+
+**For complete UI generation from slices:**
+```bash
+# Use the orchestrator skill - it handles everything
+/ui-build-slice-ui <slice-file-paths>
+```
+
+This will automatically:
+1. Analyze slices (`/ui-analyze-slices`)
+2. Read UI prompts (`/ui-read-ui-prompts`)
+3. Generate types (`/ui-generate-types`)
+4. Generate API functions (`/ui-generate-api`)
+5. Generate hooks (`/ui-generate-hook`)
+6. Scaffold components (`/ui-scaffold-component`)
+7. Verify integration
+
+**For individual tasks:**
+- **Analyze before coding**: `/ui-analyze-slices <slice-files>` - Understand grouping and dependencies
+- **Read requirements**: `/ui-read-ui-prompts <slice-folder>` - Extract design specs and validation rules
+- **Generate types only**: `/ui-generate-types <slice-file>` - Create TypeScript interfaces
+- **Generate API only**: `/ui-generate-api <slice-file>` - Create Supabase queries or POST commands
+- **Generate hook only**: `/ui-generate-hook <slice-file>` - Create React Query hooks
+- **Generate component only**: `/ui-scaffold-component <slice-files>` - Create React components with Bulma CSS
+
+### Manual Workflow (If not using skills)
+
+### Step 0: Analyze Grouping
+- Find all slices with same `groupId`
+- Check `codeGen.uiPrompts` and `ui-prompt.md`
+- Plan to implement together
+
+### Step 1: Types
+```typescript
+// src/types/index.ts
+export interface Event {
+    event_id: string;
+    name: string;
+    date: string;
+}
+
+export interface CreateEventParams {
+    name: string;
+    date: string;
+}
+```
+
+### Step 2: API Functions
+- Add endpoints to `src/lib/api-client.ts`
+- Implement queries (Supabase) in `src/lib/api.ts`
+- Implement commands (POST) in `src/lib/api.ts`
+
+### Step 3: Hooks
+- Create query/mutation hooks in `src/hooks/api/use<Entity>.ts`
+- Export in `src/hooks/api/index.ts`
+
+### Step 4: Components
+- Build list component (STATE_VIEW)
+- Build dialog/form components (STATE_CHANGE)
+- Compose into page component
+
+---
+
+## 7. Field Type Mapping
+
+| JSON Type | TypeScript | UI Component |
+|-----------|-----------|--------------|
+| `string` | `string` | `<Input type="text">` |
+| `number` | `number` | `<Input type="number">` |
+| `date` | `string` | `<Input type="date">` |
+| `time` | `string` | `<Input type="time">` |
+| `boolean` | `boolean` | `<Switch>` or `<Checkbox>` |
+
+---
+
+## 8. Common Patterns
+
+**Loading**: `if (isLoading) return <Skeleton />;`
+
+**Error Handling**:
+```typescript
+try {
+    await mutation.mutateAsync(params);
+    toast.success("Success");
+} catch (err) {
+    toast.error(`Error: ${err.message}`);
+}
+```
+
+**Form State**: `const [form, setForm] = useState({ field: "" });`
+
+**Invalidation**: `queryClient.invalidateQueries({ queryKey: ["entity"] });`
+
+---
+
+## 9. UI Components
+
+**NOTE**: The skills in `.claude/skills/` are configured to use **Bulma CSS** for styling. If you're using the skills (especially `/scaffold-component`), components will be generated with Bulma classes.
+
+### Bulma CSS (Used by Skills)
+
+When using skills, components use Bulma classes:
+- Layout: `container`, `section`, `columns`, `column`
+- Components: `card`, `modal`, `button`, `notification`, `box`
+- Forms: `field`, `control`, `label`, `input`, `select`, `textarea`
+- Modifiers: `is-primary`, `is-active`, `is-fullwidth`, `has-text-centered`
+
+### shadcn/ui (Alternative)
+
+If manually implementing (not using skills), you can use shadcn/ui components:
+
+Import from `@/components/ui/*`:
+- `Button`, `Input`, `Label`, `Textarea`, `Select`
+- `Card`, `CardHeader`, `CardTitle`, `CardContent`
+- `Dialog`, `DialogContent`, `DialogHeader`, `DialogTitle`
+- `Table`, `Tabs`, `Skeleton`
+- `toast` from `sonner`
+
+**Recommendation**: Use the skills with Bulma CSS for consistency with project configuration.
+
+---
+
+## Checklist
+
+**Pre-Implementation**:
+- [ ] Check `groupId` - find all related slices
+- [ ] Read `ui-prompt.md` and `codeGen.uiPrompts`
+- [ ] Identify STATE_VIEW vs STATE_CHANGE slices
+
+**Implementation**:
+- [ ] Define types in `src/types/index.ts`
+- [ ] Add endpoints to `src/lib/api-client.ts`
+- [ ] Implement API functions in `src/lib/api.ts`
+- [ ] Create hooks in `src/hooks/api/use<Entity>.ts`
+- [ ] Build components in `src/components/<domain>/`
+- [ ] Compose page combining all grouped slices
+- [ ] Test loading, error handling, success flows
+
+---
+
+## Quick Reference
+
+✅ **Same `groupId`** = Implement together
+✅ **STATE_VIEW** = Read table → Query hook → List
+✅ **STATE_CHANGE** = Command → Mutation hook → Form/Dialog
+✅ **Keep modular** = Sub-components for each slice capability
+✅ **Keep simple** = Follow existing patterns, don't over-engineer
+
+---
+
+## 10. Skills Usage Examples
+
+### Example 1: Building Complete UI from Scratch
+
+**User Request**: "Build the UI for the events management slices"
+
+**Your Response**:
+```bash
+# First, analyze what we're working with
+/ui-analyze-slices src/slices/events/*.json
+
+# Then build everything at once
+/ui-build-slice-ui src/slices/events/ViewEvents.json src/slices/events/CreateEvent.json
+```
+
+### Example 2: Just Need to Understand Slices
+
+**User Request**: "What slices are in the orders group?"
+
+**Your Response**:
+```bash
+# Use ui-analyze-slices to understand the grouping
+/ui-analyze-slices src/slices/orders/*.json
+```
+
+### Example 3: Regenerating Just Types
+
+**User Request**: "The Event interface is wrong, regenerate it from the slice"
+
+**Your Response**:
+```bash
+# Use ui-generate-types to recreate just the TypeScript interfaces
+/ui-generate-types src/slices/events/ViewEvents.json
+```
+
+### Example 4: Adding New API Endpoint
+
+**User Request**: "Add the API function for the CancelEvent command"
+
+**Your Response**:
+```bash
+# Use ui-generate-api to create the API layer
+/ui-generate-api src/slices/events/CancelEvent.json
+```
+
+### Example 5: Understanding UI Requirements
+
+**User Request**: "What are the validation rules for the event form?"
+
+**Your Response**:
+```bash
+# Use ui-read-ui-prompts to extract requirements
+/ui-read-ui-prompts src/slices/events/
+```
+
+### Example 6: Fixing Component Styling
+
+**User Request**: "The EventList component doesn't look right, regenerate it with proper Bulma styling"
+
+**Your Response**:
+```bash
+# Use ui-scaffold-component to regenerate with Bulma CSS
+/ui-scaffold-component src/slices/events/ViewEvents.json
+```
+
+### Decision Tree: Which Skill to Use?
+
+```
+Need to build complete UI from slices?
+  └─> /ui-build-slice-ui (orchestrates everything)
+
+Just exploring/understanding?
+  └─> /ui-analyze-slices (analysis only)
+
+Just need to understand UI requirements?
+  └─> /ui-read-ui-prompts (extract specs)
+
+Need to fix/regenerate specific layer?
+  ├─> Types wrong? → /ui-generate-types
+  ├─> API functions wrong? → /ui-generate-api
+  ├─> Hooks wrong? → /ui-generate-hook
+  └─> Components wrong? → /ui-scaffold-component
+
+Don't know which skill to use?
+  └─> Start with /ui-analyze-slices, then use /ui-build-slice-ui
+```
+
+---
+
+## Remember
+
+**ALWAYS** prefer using the skills over manual implementation! They ensure:
+- Consistency across the codebase
+- Proper use of Bulma CSS
+- Correct CQRS patterns
+- Proper TypeScript types
+- React Query best practices
+- Adherence to UI prompts and validation rules

package/templates/prompt.md

@@ -1,139 +1,11 @@
 # Ralph Agent Instructions
 
-You are an autonomous coding agent working on a software project. You apply your skills to build software slices. You only work on one slice at a time.
+You are an autonomous software architect, oversseing the sliced architecture.  working on the backend of a software project. You apply your skills to build software slices. You only work on one slice at a time.
 
 The structure defined in the Project-Skills is relevant.
 
 ## Your Task
 
-0. Do not read the entire code base. Focus on the tasks in this description.
-1. Read the description at `.slices/index.json` (in the same directory as this file). Every item in status "planned" is a task.
-2. Read the progress log at `progress.txt` (check Codebase Patterns section first)
-3. Make sure you are on the right branch "feature/<slicename>", if unsure, start from main.
-5. Pick the **highest priority** slice where status is "planned" ( case insensitive ). This becomes your PRD. Set the status "InProgress" in the index.json. If no slice has status planned, reply with:
-   <promise>NO_TASKS</promise> and stop. Do not work on other slices.
-6. Pick the slice definition from the project root /.slices in <folder> defined in the prd. Never work on more than one slice per iteration.
-7. A slice can define additional prompts as codegen/backendPrompt. any additional prompts defined in backend are hints for the implementation of the slice and have to be taken into account. If you use the additional prompt, add a line in progress.txt
-7. Define the slice type and load the matching skill. If the processors-array is not empty, it´s an automation slice.
-8. Write a short progress one liner after each step to progress.txt
-9. Analyze and Implement that single slice, make use of the skills in the skills directory, but also your previsously collected
-   knowledge. Make a list TODO list for what needs to be done. Also make sure to adjust the implementation according to the json definition. Carefully inspect events, fields and compare against the implemented slice. JSON is the desired state. ATTENTION: A "planned" task can also be just added specifications. So always look at the slice itself, but also the specifications. If specifications were added in json, which are not on code, you need to add them in code.
-10. The slice in the json is always true, the code follows what is defined in the json
-11. slice is only 'Done' if business logic is implemented as defined in the JSON, APIs are implemented, all scenarios in  JSON are implemented in code and it
-    fulfills the slice.json. There must be no specification in json, that has no equivalent in code.
-12. make sure to write the ui-prompt.md as defined if defined in the skill
-13. Run quality checks ( npm run build, npm run test ) - Attention - it´s enough to run the tests for the slice. Do not run all tests.
-14. even if the slice is fully implemented, run your test-analyzer skill and provide the code-slice.json file as defined in the skill
-15. Update the Slice in the index.json to either `status: Done` for the completed, 'status: Planned' if rework is necessary.
-16. If checks pass, commit ALL changes with message: `feat: [Slice Name]` and merge back to main as FF merge ( update
-    first )
-17. Append your progress to `progress.txt` after each step in the iteration.
-18. append your new learnings to AGENTS.md in a compressed form, reusable for future iterations. Only add learnings if they are not already there.
-19. Finish the iteration.
-
-## Progress Report Format
-
-APPEND to progress.txt (never replace, always append):
-
-```
-## [Date/Time] - [Slice]
-
-- What was implemented
-- Files changed
-- **Learnings for future iterations:**
-  - Patterns discovered (e.g., "this codebase uses X for Y")
-  - Gotchas encountered (e.g., "don't forget to update Z when changing W")
-  - Useful context (e.g., "the evaluation panel is in component X")
----
-```
-
-The learnings section is critical - it helps future iterations avoid repeating mistakes and understand the codebase
-better.
-
-## Consolidate Patterns
-
-If you discover a **reusable pattern** that future iterations should know, add it to the `## Codebase Patterns` section
-at the TOP of progress.txt (create it if it doesn't exist). This section should consolidate the most important
-learnings:
-
-```
-## Codebase Patterns
-- Example: Use `sql<number>` template for aggregations
-- Example: Always use `IF NOT EXISTS` for migrations
-- Example: Export types from actions.ts for UI components
-```
-
-Only add patterns that are **general and reusable**, not story-specific details.
-
-## Update AGENTS.md Files
-
-Before committing, check if any edited files have learnings worth preserving in nearby AGENTS.md files:
-
-1. **Identify directories with edited files** - Look at which directories you modified
-3. **Add valuable learnings that apply to all tasks** to the Agents.md - If you discovered something future developers/agents should know:
-    - API patterns or conventions specific to that module
-    - Gotchas or non-obvious requirements
-    - Dependencies between files
-    - Testing approaches for that area
-    - Configuration or environment requirements
-
-**Examples of good AGENTS.md additions:**
-
-- "When modifying X, also update Y to keep them in sync"
-- "This module uses pattern Z for all API calls"
-- "Tests require the dev server running on PORT 3000"
-- "Field names must match the template exactly"
-
-**Do NOT add:**
-
-- Slice specific implementation details
-- Story-specific implementation details
-- Temporary debugging notes
-- Information already in progress.txt
-- Task speecific learnings like "- Timesheet approval requires: submitted=true, reverted=false, approved=false, declined=false"
-
-Only update AGENTS.md if you have **genuinely reusable knowledge** that would help future work
-
-## Quality Requirements
-
-- ALL commits must pass your project's quality checks (typecheck, lint, test)
-- run 'npm run build'
-- run 'npm run test'
-- Do NOT commit broken code
-- Keep changes focused and minimal
-- Follow existing code patterns
-
-## Skills
-
-Use the provided skills in the skills folder as guidance.
-Update skill definitions if you find an improvement you can make.
-
-## Specifications
-
-For every specification added to the Slice, you need to implement one use executable Specification in Code.
-
-A Slice is not complete if specifications are missing or can´t be executed.
-
-## Stop Condition
-
-After completing a user story, check if ALL slices have `status: Done`.
-
-If ALL stories are complete and passing, reply with:
-<promise>COMPLETE</promise>
-
-If there are no stories with `status: Planned` (but not all are Done), reply with:
-<promise>NO_TASKS</promise>
-
-If there are still stories with `status: Planned`, end your response normally (another iteration will pick up the next
-story).
-
-## Important
-
-- Work on ONE slice per iteration
-- Commit frequently
-- update progress.txt frequently
-- Read the Codebase Patterns section in progress.txt before starting
-
-## When an iteration completes
-
-Use all the key learnings from the project.txt and update the Agends.md file with those learning.
+1. find the most important next slice
+2. if the slice is in status planned and not assigned, assign it to backend_worker (property assigned in ) and continue with backend/prompt.md. Ignore the rest of this file.
+3. if the slice is in status planned and assigned to ui_worker, continue with frontend/prompt.md. Ignore the rest of this file.

package/templates/server.mjs

@@ -172,6 +172,18 @@ const server = createServer(async (req, res) => {
 
                 // Write all slices
                 if (config.slices) {
+                    // Build a map of slice ID to group ID from sliceGroups
+                    const sliceToGroupMap = new Map();
+                    if (config.sliceGroups) {
+                        config.sliceGroups.forEach((group) => {
+                            if (group.sliceIds) {
+                                group.sliceIds.forEach((sliceId) => {
+                                    sliceToGroupMap.set(sliceId, group.id);
+                                });
+                            }
+                        });
+                    }
+
                     config.slices.forEach((slice) => {
                         const baseFolder = join(SLICES_DIR, slice.context ?? "default");
                         const sliceFolder = slice.title?.replaceAll(" ", "")?.replaceAll("slice:", "")?.toLowerCase();
@@ -184,6 +196,13 @@ const server = createServer(async (req, res) => {
                         const filePath = join(folder, 'slice.json');
                         const sliceData = { ...slice };
                         delete sliceData.index;
+
+                        // Add group ID to slice data if it belongs to a group
+                        const groupId = sliceToGroupMap.get(slice.id);
+                        if (groupId) {
+                            sliceData.group = groupId;
+                        }
+
                         writeFileSync(filePath, JSON.stringify(sliceData, null, 2));
 
                         const sliceIndex = {
@@ -195,6 +214,11 @@ const server = createServer(async (req, res) => {
                             status: slice.status
                         };
 
+                        // Add group ID to index entry if it belongs to a group
+                        if (groupId) {
+                            sliceIndex.group = groupId;
+                        }
+
                         const index = sliceIndices.slices.findIndex(it => it.id == slice.id);
                         if (index == -1) {
                             sliceIndices.slices.push(sliceIndex);
@@ -223,8 +247,6 @@ const server = createServer(async (req, res) => {
                 }
 
                 sendJSON(res, { success: true, path: join(ROOT, fileName) });
-                console.log('🛑 Shutting down server...');
-                server.close(() => process.exit(0));
             } catch (err) {
                 sendJSON(res, { success: false, error: err.message }, 400);
             }