feat: add guided artifact starters

Author: Gini

docs/IMPLEMENTATION-LOG.md

@@ -44,6 +44,7 @@
 - Added durable run identity to the event chain. `beginTurn` persists a run ID before the first event; every subsequent event—including Computer frames—binds it into the hash, and terminal events clear the active run. The Computer header exposes a concise run marker for replay across follow-ups and retries.
 - Replaced the hidden click-to-cycle composer mode control with an animated, keyboard-accessible nine-mode creation catalogue for Agent, Website, Slides, Document, Research, Data story, Design, App, and Game. Each option explains its output contract; the selected mode persists into normal task creation.
 - Added an expandable pre-delegation safety cue to the primary composer. It makes the secret-handling, untrusted-context, workspace-policy, and independent VTI Wallet boundaries legible at the point users supply a task.
+- Added a compact, animated task-template gallery to the primary composer. Website, executive briefing, research, and internal-tool starters prefill an editable brief and select the matching persisted creation mode; this is a guided starting point, not an opaque one-click action.
 - Added governed task scheduling. Schedules are durable, claim due work atomically, advance their next run before dispatch, and create normal project-bound tasks with an explicit `Scheduled run claimed` evidence event. They cannot publish or approve anything independently.
 - Aligned the ONEVibe sandbox client with ONEComputer's authenticated API-key contract. It now supports server-only `oc_*` project keys and the required `X-Project-Id` header for organization-scoped keys, including headless visual-runtime capture requests.
 - Performed a live Azure API attempt through the ONEVibe runtime. API health and sandbox route reachability were verified, and the provider began a real Kasm bootstrap; the request was cancelled before it returned a persisted sandbox ID. The test container was removed and no sandbox record remained. The required provider lifecycle remediation and success criteria are recorded in `ONECOMPUTER-LIVE-E2E.md`.

docs/MANUS-PARITY.md

@@ -44,9 +44,9 @@ This is the implementation gate, not a marketing checklist. **I** means behavior
 30. **P** Build Website mode — website artifacts and isolated preview work; mode-specific workflow is pending.
 31. **P** Design mode — concept rationale and design-token artifacts exist; richer visual generation is pending.
 32. **P** Create Games mode — dedicated plan and app scaffold exist; playable game generation is pending.
-33. **P** Expandable mode catalogue — the composer exposes nine purpose-specific modes with output descriptions and persists the chosen mode. Template galleries and mode-specific starter packs remain pending.
+33. **P** Expandable mode catalogue — the composer exposes nine purpose-specific modes with output descriptions and persists the chosen mode. A compact starter gallery now preconfigures editable Website, Briefing, Research, and Internal-tool tasks; deeper per-mode template packs remain pending.
 34. **M** E-commerce / Shopify template.
-35. **M** Landing-page template.
+35. **P** Landing-page template — an editable Website starter is available in the composer; reusable visual/template packs remain pending.
 36. **M** Dashboard template.
 37. **M** Portfolio template.
 38. **M** Corporate-site template.

src/components/PromptComposer.tsx

@@ -18,6 +18,13 @@ const modeCatalog: Array<{ id: TaskMode; label: string; detail: string; icon: ty
   { id: 'game', label: 'Game', detail: 'Playable web experience', icon: Gamepad2 },
 ]
 
+const starterTemplates: Array<{ title: string; outcome: string; prompt: string; mode: TaskMode }> = [
+  { title: 'Ship a website', outcome: 'Responsive site + preview', mode: 'website', prompt: 'Build a polished responsive landing page for a secure enterprise AI workspace. Include a clear value proposition, product flow, and accessible mobile layout.' },
+  { title: 'Make a briefing', outcome: 'Narrative deck + speaker notes', mode: 'slides', prompt: 'Create an executive update deck: context, decision, delivery plan, risks, and next steps. Keep it concise, evidence-led, and ready to present.' },
+  { title: 'Investigate a question', outcome: 'Cited research brief', mode: 'research', prompt: 'Research this question, distinguish evidence from inference, and produce a concise brief with sources, open questions, and recommended next steps.' },
+  { title: 'Prototype an internal tool', outcome: 'Interactive app', mode: 'app', prompt: 'Create a focused internal tool prototype with a clean workflow, realistic sample data, and a responsive interface. Explain the decisions made.' },
+]
+
 export const PromptComposer = ({ compact = false, busy = false, onSubmit }: Props) => {
   const [prompt, setPrompt] = useState('')
   const [provider, setProvider] = useState<Task['provider']>('demo')
@@ -47,6 +54,10 @@ export const PromptComposer = ({ compact = false, busy = false, onSubmit }: Prop
       {!compact && referencesOpen && <div className="reference-popover"><input value={referenceDraft} onChange={(event) => setReferenceDraft(event.target.value)} placeholder="https://example.com/reference" onKeyDown={(event) => { if (event.key !== 'Enter') return; event.preventDefault(); try { const url = new URL(referenceDraft); if (!/^https?:$/.test(url.protocol) || url.username || url.password || /(?:token|secret|api[_-]?key|password)=/i.test(url.search)) return; setReferences((current) => current.includes(url.toString()) || current.length >= 8 ? current : [...current, url.toString()]); setReferenceDraft('') } catch { /* URL remains editable until valid */ } }} /><span>Press Enter to attach a public reference. ONEVibe does not fetch it automatically.</span></div>}
       {!compact && references.length > 0 && <div className="reference-chips">{references.map((reference) => <span key={reference}>{new URL(reference).hostname}<button aria-label={`Remove ${reference}`} onClick={() => setReferences((current) => current.filter((item) => item !== reference))}><X size={11} /></button></span>)}</div>}
       {!compact && attachments.length > 0 && <div className="reference-chips attachment-chips">{attachments.map((attachment) => <span key={`${attachment.name}-${attachment.size}`}>{attachment.name} · {Math.ceil(attachment.size / 1024)} KB<button aria-label={`Remove ${attachment.name}`} onClick={() => setAttachments((current) => current.filter((item) => item !== attachment))}><X size={11} /></button></span>)}</div>}
+      {!compact && !prompt && <motion.div className="template-gallery" initial={{ opacity: 0, y: 5 }} animate={{ opacity: 1, y: 0 }}>
+        <span>Start from a shape</span>
+        <div>{starterTemplates.map((template) => <button key={template.title} type="button" onClick={() => { setPrompt(template.prompt); setMode(template.mode) }}><strong>{template.title}</strong><small>{template.outcome}</small></button>)}</div>
+      </motion.div>}
       <textarea
         value={prompt}
         onChange={(event) => setPrompt(event.target.value)}