admin/OpenQode
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Add 'Generate UX Package' button to Preview Toolbar

Browse Source 
- Replaced 'Build Backend' feature with a frontend exporter.
- Clicking the button now creates and downloads a 'ux_package.json' containing all frontend assets (HTML, CSS, JS) and metadata.
- This package is intended to be loaded into external coding AIs for backend development.
This commit is contained in:
Gemini AI
2025-12-20 16:18:35 +04:00
Unverified
parent 64449e2343
commit 4cdb320144
1 changed files with 34 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
bin/goose-ultra-final/src/components/Views.tsx
View File

@@ -1445,41 +1445,50 @@ Start with "# 🔧 Repair Plan" and be concise.`;
</button> </button>
<button <button
onClick={async () => { onClick={async () => {
if (confirm('Generate a Node.js/Express backend for this frontend?')) { if (confirm('Export this frontend as a UX Package for external backend development?')) {
const htmlContent = state.files['index.html'] || ''; const htmlContent = state.files['index.html'] || '';
const cssContent = state.files['style.css'] || '';
const jsContent = state.files['script.js'] || '';
const projectId = state.activeProject?.id || 'unknown_project';
if (!htmlContent) { if (!htmlContent) {
alert('No frontend code found to analyze.'); alert('No frontend code found to export.');
return; return;
} }
// Switch to Build mode (Plan tab) to show progress const uxPackage = {
dispatch({ type: 'SET_MODE', mode: GlobalMode.Build }); meta: {
dispatch({ type: 'SET_TAB', tab: TabId.Plan }); project: state.activeProject?.name || "Vibe Project",
exportedAt: new Date().toISOString(),
generator: "Goose Ultra Vibe Engine",
description: "Frontend UX Package for Backend Integration"
},
files: {
"index.html": htmlContent,
"style.css": cssContent,
"script.js": jsContent
},
instructions: "This package contains the complete frontend UI. Use this to build the backend logic."
};
const prompt = `[BACKEND_REQUEST] const blob = new Blob([JSON.stringify(uxPackage, null, 2)], { type: 'application/json' });
I need a backend for my frontend. const url = URL.createObjectURL(blob);
Here is the current HTML/JS code: const a = document.createElement('a');
\`\`\`html a.href = url;
${htmlContent.substring(0, 15000)}... (truncated) a.download = `ux_package_${projectId}.json`;
\`\`\` document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
Please build a 'server.js' file using Express that: dispatch({ type: 'ADD_LOG', log: { id: Date.now().toString(), timestamp: Date.now(), type: 'system', message: "UX Package exported successfully." } });
1. Serves this static file.
2. Implements any API endpoints found in the fetch() calls.
3. Provides mock data for those endpoints.`;
dispatch({ type: 'START_REQUEST', sessionId: Date.now().toString(), messageDraft: prompt });
// We rely on the LayoutComponents handler to pick this up,
// but we need to ensure the system prompt knows how to handle it.
// Ideally, we'd invoke the automationService directly, but flowing through chat maintains state consistency.
} }
}} }}
className="ml-2 px-3 py-2 rounded-xl text-xs font-bold border border-white/10 bg-indigo-500/10 text-indigo-300 hover:bg-indigo-500/20 hover:text-white transition-colors flex items-center gap-2" className="ml-2 px-3 py-2 rounded-xl text-xs font-bold border border-white/10 bg-cyan-500/10 text-cyan-300 hover:bg-cyan-500/20 hover:text-white transition-colors flex items-center gap-2"
title="Generate Backend Service" title="Download Frontend for Backend Dev"
> >
<Icons.Server className="w-3.5 h-3.5" /> <Icons.Package className="w-3.5 h-3.5" />
Build Backend Generate UX Package
</button> </button>
</div> </div>