Carlos Florêncio
134 lines
5.3 KiB
Markdown
134 lines
5.3 KiB
Markdown
---
|
|
id: "02-present-launch-preview-controls"
|
|
title: "Present launch preview controls"
|
|
status: done
|
|
wave: 2
|
|
depends_on:
|
|
- "01-resolve-launch-preview-data"
|
|
plan: "plan.md"
|
|
requirements:
|
|
- REQ-TASKS-TASK-CREATE-LAUNCH-PREVIEW-001
|
|
- REQ-TASKS-TASK-CREATE-LAUNCH-PREVIEW-002
|
|
acceptance_criteria:
|
|
- AC-TASKS-TASK-CREATE-LAUNCH-PREVIEW-001.1
|
|
- AC-TASKS-TASK-CREATE-LAUNCH-PREVIEW-001.3
|
|
- AC-TASKS-TASK-CREATE-LAUNCH-PREVIEW-002.1
|
|
- AC-TASKS-TASK-CREATE-LAUNCH-PREVIEW-002.2
|
|
- AC-TASKS-TASK-CREATE-LAUNCH-PREVIEW-002.5
|
|
- AC-TASKS-TASK-CREATE-LAUNCH-PREVIEW-002.6
|
|
system_design:
|
|
- ../../specs/tasks/system-design/task-create-launch-preview.md
|
|
---
|
|
|
|
# Task 02: Present Launch Preview Controls
|
|
|
|
## Summary
|
|
|
|
Show the launch destination beside, but outside, the workflow selector. Keep
|
|
the selector trigger at its intrinsic width and add an inline information
|
|
button for launch-step guidance. Add the prompt preview toggle, localization,
|
|
component coverage, and public task guidance.
|
|
|
|
## In scope
|
|
|
|
- Render an information button immediately after the selected workflow trigger,
|
|
followed by the muted **Start step: {{step}}** label.
|
|
- Keep the workflow selector trigger independent from the adjacent launch-step
|
|
label and information button.
|
|
- Add localized launch-step help to the information button with a coarse-pointer
|
|
hit area of at least 44 CSS pixels.
|
|
- Add the preview icon after **Enhance prompt with AI**.
|
|
- Toggle between the unchanged editor and a read-only composed preview.
|
|
- Add accessible names, pressed state, and coarse-pointer sizing.
|
|
- Update all locale catalogs and the public task creation guide.
|
|
|
|
## Out of scope
|
|
|
|
- Launch behavior, API contracts, or persisted state.
|
|
- Other prompt composers.
|
|
|
|
## Acceptance
|
|
|
|
- The selector and prompt editor render the shared launch-preview model without
|
|
adding a second routing rule.
|
|
- Toggling the preview preserves the exact task prompt. Losing the preview model
|
|
returns the editor to edit mode.
|
|
- Localized, accessible controls work at desktop and coarse-pointer sizes. The
|
|
selector trigger remains independently clickable, and the adjacent help
|
|
button explains the action-sensitive launch destination.
|
|
|
|
## Verification
|
|
|
|
```bash
|
|
cd apps/web
|
|
pnpm test -- --run components/task-create-dialog-selectors.test.tsx components/task-create-dialog-form-body.test.tsx components/workflow-selector-row.test.tsx components/task-create-dialog.test.tsx
|
|
pnpm run typecheck
|
|
pnpm exec eslint --max-warnings 0 components/task-create-dialog-selectors.tsx components/task-create-dialog-selectors.test.tsx components/task-create-dialog-form-body.tsx components/task-create-dialog-form-body.test.tsx components/workflow-selector-row.tsx components/workflow-selector-row.test.tsx
|
|
pnpm run i18n:check
|
|
pnpm run i18n:ratchet
|
|
cd ../..
|
|
node --test scripts/validate-public-docs.test.mjs
|
|
node scripts/validate-public-docs.mjs
|
|
git diff --check
|
|
```
|
|
|
|
## Files likely touched
|
|
|
|
- `apps/web/components/task-create-dialog-selectors.tsx`
|
|
- `apps/web/components/task-create-dialog-selectors.test.tsx`
|
|
- `apps/web/components/task-create-dialog-form-body.tsx`
|
|
- `apps/web/components/task-create-dialog-form-body.test.tsx`
|
|
- `apps/web/components/workflow-selector-row.tsx`
|
|
- `apps/web/components/workflow-selector-row.test.tsx`
|
|
- `apps/web/e2e/tests/task/create-task.spec.ts`
|
|
- `apps/web/e2e/tests/task/mobile-create-task-launch-preview.spec.ts`
|
|
- `apps/web/components/task-create-dialog.test.tsx`
|
|
- `apps/web/src/locales/en/task.json`
|
|
- `apps/web/src/locales/pt-pt/task.json`
|
|
- `apps/web/src/locales/zh-cn/task.json`
|
|
- `apps/web/src/locales/zh-hk/task.json`
|
|
- `apps/web/src/locales/zh-tw/task.json`
|
|
- `docs/public/tasks-and-workflows.md`
|
|
|
|
## Dependencies
|
|
|
|
- Task 01 supplies the launch-preview model and composition helper.
|
|
|
|
## Risks
|
|
|
|
- The large shared composer can exceed lint limits if preview presentation is
|
|
not extracted into a focused component.
|
|
- Long prompt content needs bounded wrapping without adding document overflow.
|
|
|
|
## Parallelism
|
|
|
|
`sequential`
|
|
|
|
## Inputs
|
|
|
|
- The prompt editor and workflow selector sections in the system design.
|
|
- Existing task-create composer toolbar and selector component tests.
|
|
- The public **Create a task** procedure.
|
|
|
|
## Results
|
|
|
|
- Added the muted **Start step: {{step}}** destination beside, but outside, the
|
|
workflow selector and an inline preview toggle after **Enhance prompt with AI**.
|
|
- Made the preview tooltip identify the workflow step prompt it will show.
|
|
- Added the read-only wrapping preview surface, localized accessible labels,
|
|
pressed state, and 44-pixel coarse-pointer sizing.
|
|
- Added all five locale catalog entries, regenerated the pseudo catalog, and
|
|
updated the public task creation guide.
|
|
- Wrapped the disabled preview button in the shared focusable tooltip-trigger
|
|
pattern so its explanation remains reachable by keyboard and pointer.
|
|
- Follow-up refinement moved the launch-step controls outside the selector,
|
|
placed the information button immediately after the trigger, changed the
|
|
copy to **Start step: {{step}}**, and made the preview tooltip identify its
|
|
workflow step prompt.
|
|
- Focused component tests passed (43 tests), typecheck passed, and the focused
|
|
ESLint command passed with zero warnings.
|
|
- `cd apps/web && pnpm run i18n:check` passed; `pnpm run i18n:ratchet` passed.
|
|
- `node --test scripts/validate-public-docs.test.mjs` passed (61 tests) and
|
|
`node scripts/validate-public-docs.mjs` validated 45 pages.
|
|
- `git diff --check` passed.
|