13 KiB
13 KiB
| phase | plan | type | wave | depends_on | files_modified | autonomous | requirements | must_haves | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 43-documents-branding | 03 | execute | 3 |
|
|
false |
|
|
Purpose: Give users a UI to generate PDFs (reports, invoices, one-pagers, API docs) and complete brand identity kits from a prompt. Adds "Documents" and "Brand" tabs to ContentStudio. Output: DocumentGeneratePanel, BrandKitPanel, BrandKitResult components, updated ContentStudio.
<execution_context> @$HOME/.claude/get-shit-done/workflows/execute-plan.md @$HOME/.claude/get-shit-done/templates/summary.md </execution_context>
@.planning/PROJECT.md @.planning/ROADMAP.md @.planning/STATE.md @.planning/phases/43-documents-branding/43-RESEARCH.md @.planning/phases/43-documents-branding/43-01-SUMMARY.md @.planning/phases/43-documents-branding/43-02-SUMMARY.md@ui/src/pages/ContentStudio.tsx @ui/src/components/SocialPostPanel.tsx @ui/src/hooks/useContentJob.ts @ui/src/api/contentJobs.ts
From server/src/services/renderers/types.ts (Plan 01):
export interface PdfDocumentBundle {
type: "pdf-document-bundle";
docType: string;
title: string;
pdfBase64: string;
}
export interface BrandKitBundle {
type: "brand-kit-bundle";
spec: { name: string; tagline: string; primaryColor: string; secondaryColor: string; fontStyle: string; industry: string; };
logoSvgBase64: string;
avatarPngs: Record<string, string>; // "512"|"256"|"128"|"64"|"32" -> base64
socialImages: Record<string, string>; // "twitter-profile" etc -> base64
signatureHtml: string;
letterheadHtml: string;
guidelinesPdfBase64: string;
zipBase64: string;
}
From ui/src/hooks/useContentJob.ts:
export function useContentJob(companyId: string): {
submit: (jobType: string, input: Record<string, unknown>) => void;
status: string | null;
bundle: unknown;
resultAssetId: string | null;
error: string | null;
};
From ui/src/api/contentJobs.ts:
export function getContentJobAsset(companyId: string, assetId: string): Promise<{ url: string }>;
UI pattern from SocialPostPanel.tsx:
- useContentJob for submit + SSE progress
- When status="done" && resultAssetId && !bundle -> fetch asset -> JSON.parse -> setBundle
- Display result component
- Download via URL.createObjectURL + .click()
**BrandKitPanel.tsx:**
- Props: `{ companyId: string }`
- State: prompt (string), bundle (BrandKitBundle | null)
- Define BrandKitBundle type locally (matching server shape)
- useContentJob(companyId) for submit + status
- UI layout:
- Textarea for brand description prompt (placeholder: "Describe the brand you want to create -- name, industry, style preferences, colors...")
- Generate button with loading state
- Progress bar during generation
- When done: fetch asset, parse JSON, setBundle, render BrandKitResult
**BrandKitResult.tsx:**
- Props: `{ bundle: BrandKitBundle }`
- Display in a grid layout:
- **Logo section**: SVG preview via `<img src="data:image/svg+xml;base64,{logoSvgBase64}" />`
- **Avatars section**: Grid of 5 avatar sizes as `<img src="data:image/png;base64,{avatarPngs[size]}" />` with size labels
- **Social images section**: Grid of social platform images with platform name labels
- **Templates section**: "Email Signature" and "Letterhead" cards with HTML preview in sandboxed iframes (`srcdoc={signatureHtml}`)
- **Guidelines**: "Brand Guidelines" card with a "Download PDF" button (decode guidelinesPdfBase64 -> blob download)
- **Full Kit Download**: Prominent "Download Brand Kit (ZIP)" button at the bottom
- ZIP download function: same base64-to-blob pattern but with type "application/zip" and `.zip` extension (use the downloadZip pattern from RESEARCH.md)
- PDF download for guidelines: same base64-to-blob pattern with type "application/pdf"
Use shadcn components: Card, CardHeader, CardTitle, CardContent, Button, Textarea, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Progress. Import Loader2 from lucide-react.
2. Add two new TabsTrigger entries in the TabsList, AFTER the "Social" trigger:
```tsx
<TabsTrigger value="documents">Documents</TabsTrigger>
<TabsTrigger value="brand">Brand</TabsTrigger>
```
3. Add two new TabsContent blocks after the social TabsContent:
```tsx
<TabsContent value="documents" className="mt-4">
{companyId ? (
<DocumentGeneratePanel companyId={companyId} />
) : (
<p className="text-sm text-muted-foreground">Select a company to get started.</p>
)}
</TabsContent>
<TabsContent value="brand" className="mt-4">
{companyId ? (
<BrandKitPanel companyId={companyId} />
) : (
<p className="text-sm text-muted-foreground">Select a company to get started.</p>
)}
</TabsContent>
```
Keep `defaultValue="diagrams"` unchanged. Use stable string values "documents" and "brand" for tab IDs.
How to verify:
1. Navigate to Content Studio in the Nexus UI
2. Verify 7 tabs visible: Diagrams, Icons, Themes, Wallpapers, Social, Documents, Brand
3. Click "Documents" tab:
- Select "Report" from dropdown
- Enter a title and prompt
- Click Generate — verify spinner/progress appears
- When done, verify "Download PDF" button appears
4. Click "Brand" tab:
- Enter a brand description
- Click Generate — verify progress appears
- When done, verify logo SVG preview, avatar grid, social images, template previews, and "Download Brand Kit (ZIP)" button
5. Download the ZIP — verify it contains logo/, social/, templates/, guidelines.pdf
Resume signal: Type "approved" or describe issues.
<success_criteria>
- Documents tab: user can select type, enter prompt, generate PDF, download it
- Brand tab: user can enter description, generate full brand kit, see all previews, download ZIP
- All 7 ContentStudio tabs render correctly
- TypeScript clean </success_criteria>