name: foundary-refine description: "Foundary Studio UX refinement: Fix empty state, add project creation flow, and make Kanban columns visible when empty." version: 1 vars: project_id: "" # Required - existing foundary project ID domain: "" # Required - project domain (e.g., 73dxju73.threesix.ai) git_clone_http: "" # Required - git clone URL for build dispatch steps: # ============================================================ # SECTION 1: PROJECT CREATION UX # Fix the dead-end empty state and add project creation flow # ============================================================ build-project-ux: description: "Fix empty state UX and add project creation flow" action: api method: POST endpoint: "/projects/{{ .vars.project_id }}/builds" body: prompt: | Fix the studio-ui empty state UX. Right now when a user visits the app with no projects, they see "No projects found" with no way to create one. This is a dead end. Requirements: 1. Empty state: When GET /api/studio-api/projects returns an empty array, show a prominent empty state with a "+ Create Project" button/card instead of "No projects found". Make it visually inviting — center it on the page with a brief message like "Create your first project to get started". 2. Create Project modal: Clicking "+ Create Project" opens a modal with: - Name field (required) - Description field (optional textarea) - "Create" and "Cancel" buttons - POST to /api/studio-api/projects with { name, description } - On success: close modal, auto-select the new project, show the Kanban board - On error: show error message in the modal 3. Header/sidebar project creation: When projects already exist, add a "+ New Project" option accessible from the project selector dropdown or a button near it, so users can always create additional projects. 4. Auto-select behavior: After creating a project, immediately select it and transition to the Kanban board view. The user should never be stuck on the empty state after creating a project. Work in the components/studio-ui/ directory. Use the existing Tailwind CSS styling conventions already in the project. auto_commit: true auto_push: true git_clone_url: "{{ .vars.git_clone_http }}" outputs: - build_id: .data.task_id wait-build-1: description: "Wait for project creation UX build" depends_on: [build-project-ux] action: wait_build build_id: "{{ .outputs.build-project-ux.build_id }}" max_attempts: 720 poll_interval: 5 wait-deploy-1: description: "Wait for deployment after project creation UX" depends_on: [wait-build-1] action: wait_pipeline project_id: "{{ .vars.project_id }}" max_attempts: 720 # ============================================================ # SECTION 2: KANBAN EMPTY STATE + POLISH # Show columns when empty, fix task button, polish interactions # ============================================================ build-kanban-ux: description: "Fix empty Kanban columns and polish task interactions" depends_on: [wait-deploy-1] action: api method: POST endpoint: "/projects/{{ .vars.project_id }}/builds" body: prompt: | Fix the Kanban board empty state in studio-ui. Right now, when a project has no tasks, the Kanban columns (To Do, In Progress, Done) are invisible. Users see a blank area with no visual structure. Requirements: 1. Always-visible columns: The three Kanban columns (To Do, In Progress, Done) must always render with their headers and a visible column container, even when empty. Use a light background or border to make the column boundaries clear. Add placeholder text like "No tasks yet" or "Drag tasks here" in empty columns. 2. New Task button: The "+ New Task" button should be disabled or hidden when no project is selected. When a project IS selected, the button should work and create tasks in the currently selected project. 3. Project selector: Ensure the project selector in the header properly lists all projects from GET /api/studio-api/projects and switching projects refreshes the Kanban board with that project's tasks. 4. Visual polish: - Column headers should show task count (e.g., "To Do (3)") - Empty columns should have a dashed border or subtle background to indicate they are drop targets - The overall board should fill the available space below the header Work in the components/studio-ui/ directory. Use the existing Tailwind CSS styling conventions already in the project. auto_commit: true auto_push: true git_clone_url: "{{ .vars.git_clone_http }}" outputs: - build_id: .data.task_id wait-build-2: description: "Wait for Kanban UX build" depends_on: [build-kanban-ux] action: wait_build build_id: "{{ .outputs.build-kanban-ux.build_id }}" max_attempts: 720 poll_interval: 5 wait-deploy-2: description: "Wait for deployment after Kanban UX" depends_on: [wait-build-2] action: wait_pipeline project_id: "{{ .vars.project_id }}" max_attempts: 720 # ============================================================ # SECTION 3: VERIFY # Confirm site loads and UX improvements are live # ============================================================ verify-site: description: "Verify site is live after UX improvements" depends_on: [wait-deploy-2] action: wait_site domain: "{{ .vars.domain }}" max_attempts: 120 verify-complete: description: "Print success summary" depends_on: [verify-site] action: shell command: | echo "" echo "============================================================" echo "SUCCESS: Foundary Studio UX refinement complete" echo "============================================================" echo "" echo "Domain: {{ .vars.domain }}" echo "Project ID: {{ .vars.project_id }}" echo "" echo "UX improvements:" echo " 1. Empty state shows '+ Create Project' instead of dead end" echo " 2. Project creation modal with name/description fields" echo " 3. Kanban columns always visible (To Do, In Progress, Done)" echo " 4. Task counts in column headers" echo " 5. Project selector works and refreshes board" echo "============================================================" exit 0