Afterword: prompt templates feature

[yoonwaiyan]

User description

Summary

Incremental build-out of the Afterword (custom prompt templates) feature. Tickets landed so far on this branch, in order:

• AUD-56 — Afterword data model, CRUD IPC handlers, and built-in presets
• AUD-59 — Afterword list view in Settings — cards, badges, overflow menu, sidebar nav
• AUD-57 — Wire Afterword engine into summarisation pipeline and add preview IPC
• AUD-66 — Per-session Afterword selector dropdown in main recording view
• AUD-62 — Afterword editor — name, system prompt, variable chips, output sections, action bar
• AUD-65 — New Afterword creation modal — blank or from preset
• AUD-63 — Output section drag-and-drop reordering in Afterword editor

This branch is a persistent feature branch and will accumulate further Afterword tickets before a single merge to main.

Test plan

• npm run typecheck passes
• npm run lint clean on all touched files (pre-existing warnings elsewhere untouched)
• npm run build succeeds
• Playwright e2e green: prompt-templates.spec.ts, prompt-template-editor.spec.ts, new-template-modal.spec.ts, output-section-reorder.spec.ts (pointer drag, keyboard reorder, single-section edge case)

🤖 Generated with Claude Code

---

PR Type

Enhancement, Tests, Bug fix, Documentation

---

Description

• Adds full template editor workflow

• Supports preset-based template creation

• Renames active templates to default

• Adds drag reordering and coverage

---

Diagram Walkthrough

flowchart LR
  list["Template list"] -- "create or duplicate" --> editor["Template editor"]
  editor -- "edit prompts and sections" --> api["Templates IPC"]
  api -- "persist default templates" --> store["Template store"]
  store -- "resolve template" --> summary["Summarisation/session detail"]

Loading

File Walkthrough

	Relevant files
Enhancement	17 files TemplateEditorPage.tsx Implements full prompt template editor page                            +293/-22 OutputSectionList.tsx Adds sortable output sections list                                              +217/-0  OutputSectionRow.tsx Adds editable draggable section rows                                          +112/-0  SystemPromptEditor.tsx Adds prompt editor with variable chips                                      +148/-0  InlineEditableText.tsx Adds reusable inline editable text control                              +108/-0  TemplateActionBar.tsx Adds editor preview save actions                                                  +85/-0    NewTemplateModal.tsx Implements blank and preset creation modal                              +97/-15  PresetCard.tsx Adds preset option card component                                                +31/-0    DeleteTemplateDialog.tsx Adds template deletion confirmation dialog                              +61/-0    DiscardChangesDialog.tsx Adds unsaved changes confirmation dialog                                  +52/-0    TemplateListPage.tsx Wires default actions and modal data                                          +9/-5      TemplateCard.tsx Updates card badge to default terminology                                +4/-4      TemplateOverflowMenu.tsx Renames active menu action to default                                        +6/-6      logic.ts Renames active template logic to default                                  +14/-14  ipc.ts Adds default and session resolution IPC                                    +12/-4    engine.ts Resolves summaries through default template                            +2/-2      SessionDetail.tsx Shows resolved summary template name                                          +11/-0
Bug fix	1 files store.ts Migrates legacy active template storage                                    +17/-6
Tests	1 files output-section-reorder.spec.ts Adds output section reordering tests                                          +122/-0
Documentation	1 files CHANGELOG.md Documents Afterword feature additions                                        +22/-0
Additional files	19 files pr-agent.yml +5/-0      new-template-modal.spec.ts +84/-0    prompt-template-editor.spec.ts +86/-0    prompt-templates.spec.ts +6/-5      summarisation.spec.ts +4/-4      package.json +3/-0      builtins.ts +1/-1      engine.test.ts +6/-6      logic.test.ts +31/-31  store.test.ts +5/-5      types.ts +2/-2      index.d.ts +3/-2      index.ts +3/-1      TemplateSelector.tsx +6/-6      PillBadge.tsx +2/-2      useTemplates.ts +1/-1      useUnsavedChanges.ts +30/-0    relativeTime.ts +26/-0    VariableChip.tsx +27/-0

---

[github-actions]

PR Reviewer Guide 🔍

(Review updated until commit 0da318b)

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 4 🔵🔵🔵🔵⚪

🧪 PR contains tests

🔒 No security concerns identified

⚡ Recommended focus areas for review Stale State When the route id changes, the editor keeps rendering the previous template and form until the new get request resolves. Because React Router can reuse this component for /prefs/templates/:id changes, users can briefly see or act on the wrong template; resetting template/form to loading state at the start of the effect avoids accidental edits against the new id. useEffect(() => { if (!id) return let cancelled = false window.api.templates.get(id).then((t) => { if (cancelled) return setTemplate(t) if (t) { const fresh = toFormState(t) setForm(fresh) markSaved(fresh) } }) return () => { cancelled = true } // eslint-disable-next-line react-hooks/exhaustive-deps }, [id]) Stale Preview Preview generation uses window.api.templates.preview(id), so it previews the last saved template rather than the current editor form. If a user changes the system prompt or output sections and clicks Preview before saving, the preview can show outdated content, making the editor feedback misleading. const handlePreview = async (): Promise<void> => { if (!id) return const token = ++previewTokenRef.current setPreviewState({ status: 'loading' }) try { const { markdown } = await window.api.templates.preview(id) if (previewTokenRef.current !== token) return // closed (or re-opened) before this resolved

[github-actions]

PR Code Suggestions ✨

Latest suggestions up to 0da318b

Explore these optional code suggestions:

Category	Suggestion	Impact
Security	Validate session directory paths Validate sessionDir before passing it to resolveTemplateForSession. As written, any renderer that can call window.api.templates.resolveForSession can cause the main process to read session.json from an arbitrary directory. src/main/templates/ipc.ts [74-80] ipcMain.handle( 'audist:templates:resolveForSession', (_, { sessionDir }: { sessionDir: string }): { id: string; name: string } => { - const template = resolveTemplateForSession(sessionDir) + const saveRoot = resolve(getSaveDirectory()) + const requestedDir = resolve(sessionDir) + const relativePath = relative(saveRoot, requestedDir) + + if (relativePath.startsWith('..') || relativePath === '' || relativePath.startsWith('/')) { + throw new Error('Invalid session directory') + } + + const template = resolveTemplateForSession(requestedDir) return { id: template.id, name: template.name } } ) Suggestion importance[1-10]: 7 __ Why: The suggestion identifies a real trust-boundary issue: sessionDir from the renderer is passed to main-process filesystem-reading logic without validation. The proposed fix is conceptually sound, though the snippet would also need resolve/relative imports and more robust path containment checks.	Medium
General	Prevent stale template previews window.api.templates.preview(id) renders the persisted template, so previewing with unsaved edits shows stale output. Block preview until the draft is saved, or extend the preview API to accept the current form state. src/renderer/src/pages/prefs/templates/TemplateEditorPage.tsx [134-149] const handlePreview = async (): Promise<void> => { if (!id) return + + if (hasUnsavedChanges && !isBuiltIn) { + setPreviewState({ + status: 'error', + message: 'Save your changes before generating a preview.' + }) + return + } + const token = ++previewTokenRef.current setPreviewState({ status: 'loading' }) try { const { markdown } = await window.api.templates.preview(id) if (previewTokenRef.current !== token) return // closed (or re-opened) before this resolved setPreviewState({ status: 'done', markdown }) } catch (err) { if (previewTokenRef.current !== token) return setPreviewState({ status: 'error', message: err instanceof Error ? err.message : 'Failed to generate preview' }) } } Suggestion importance[1-10]: 6 __ Why: This correctly notes that window.api.templates.preview(id) previews the persisted template, so unsaved edits in form are not reflected. Blocking preview until save is a reasonable UX safeguard, though accepting draft state in the preview API would be a fuller solution.	Low
Possible issue	Stabilize drag drop ordering Avoid relying on dropTarget state inside handleDragEnd, because React state can be stale if the user drops immediately after onDragOver. Compute the target from the final active and over ids so pointer and keyboard reorders are deterministic. src/renderer/src/pages/prefs/templates/OutputSectionList.tsx [129-146] const handleDragEnd = (event: DragEndEvent): void => { const { active, over } = event setActiveId(null) - const target = dropTarget setDropTarget(null) - if (!over || active.id === over.id || !target) return + if (!over || active.id === over.id) return const draggedIndex = sections.findIndex((s) => s.id === active.id) - if (draggedIndex === -1) return + const overIndex = sections.findIndex((s) => s.id === over.id) + if (draggedIndex === -1 || overIndex === -1) return + const dragged = sections[draggedIndex] const rest = sections.filter((s) => s.id !== active.id) - const overIndexInRest = rest.findIndex((s) => s.id === target.overId) + const overIndexInRest = rest.findIndex((s) => s.id === over.id) if (overIndexInRest === -1) return - const insertAt = target.position === 'before' ? overIndexInRest : overIndexInRest + 1 + const insertAt = draggedIndex < overIndex ? overIndexInRest + 1 : overIndexInRest const reordered = [...rest.slice(0, insertAt), dragged, ...rest.slice(insertAt)] onChange(reordered.map((s, index) => ({ ...s, order: index }))) } Suggestion importance[1-10]: 5 __ Why: Avoiding reliance on dropTarget state is a plausible reliability improvement because drag state updates can be asynchronous. However, the proposed replacement loses the current before/after drop-position behavior and may not preserve precise pointer drop intent.	Low

---

Previous suggestions

Suggestions up to commit 6792909

Category	Suggestion	Impact
Security	Validate session directory input Validate sessionDir before passing it to resolveTemplateForSession. This IPC endpoint currently lets the renderer ask the main process to read session.json from arbitrary filesystem locations. src/main/templates/ipc.ts [2-80] -import { join } from 'path' +import { isAbsolute, join, relative, resolve } from 'path' ... ipcMain.handle( 'audist:templates:resolveForSession', (_, { sessionDir }: { sessionDir: string }): { id: string; name: string } => { - const template = resolveTemplateForSession(sessionDir) + const saveDir = resolve(getSaveDirectory()) + const requestedDir = resolve(sessionDir) + const relativePath = relative(saveDir, requestedDir) + + if (relativePath.startsWith('..') || isAbsolute(relativePath)) { + throw new Error('Invalid session directory') + } + + const template = resolveTemplateForSession(requestedDir) return { id: template.id, name: template.name } } ) Suggestion importance[1-10]: 7 __ Why: The new IPC handler accepts a renderer-provided sessionDir and passes it into filesystem-reading logic, so constraining it to the configured save directory is a sound security hardening. The practical exposure appears limited because only template metadata is returned, but validating main-process file access is still important.	Medium
Possible issue	Protect default template deletion Guard deletion using store.defaultTemplateId as well as existing.isDefault. If migrated or stale data has mismatched flags, the current default template can otherwise be deleted, leaving defaultTemplateId pointing at a missing template. src/main/templates/logic.ts [136-141] -if (existing.isDefault) throw new TemplateOperationError('Cannot delete the default template') +if (store.defaultTemplateId === id || existing.isDefault) { + throw new TemplateOperationError('Cannot delete the default template') +} return { store: { ...store, templates: store.templates.filter((t) => t.id !== id) }, success: true } Suggestion importance[1-10]: 6 __ Why: This is a valid defensive data-integrity improvement because resolveTemplateForSession uses store.defaultTemplateId, while deletion currently only checks existing.isDefault. It prevents stale or migrated stores with mismatched flags from leaving defaultTemplateId pointing to a deleted template.	Low
	Prevent accidental edit loss useBlocker only covers router navigation, but the preferences window appears to have a global Escape-to-close handler. Intercept Escape while hasUnsavedChanges is true so users do not accidentally close the window and lose edits without seeing the discard confirmation. src/renderer/src/pages/prefs/templates/TemplateEditorPage.tsx [67-73] const blocker = useBlocker( useCallback( ({ currentLocation, nextLocation }) => hasUnsavedChanges && currentLocation.pathname !== nextLocation.pathname, [hasUnsavedChanges] ) ) +useEffect(() => { + if (!hasUnsavedChanges) return + + const handleEscape = (e: KeyboardEvent): void => { + if (e.key !== 'Escape') return + e.preventDefault() + e.stopPropagation() + setPendingBack(true) + } + + window.addEventListener('keydown', handleEscape, true) + return () => window.removeEventListener('keydown', handleEscape, true) +}, [hasUnsavedChanges]) + Suggestion importance[1-10]: 5 __ Why: The concern is plausible because useBlocker only handles router navigation and other PR code references a global Escape-to-close handler in PrefsLayout. However, the proposed capture-phase Escape listener may interfere with child controls like InlineEditableText that already use Escape to cancel editing, so the implementation needs care.	Low

Suggestions up to commit 99dec5a

Category	Suggestion	Impact
Security	Validate renderer-provided paths The new resolveForSession IPC handler accepts an arbitrary sessionDir from the renderer and passes it to code that reads session.json. Validate that the resolved path stays inside the configured save directory before reading from it to avoid exposing main-process filesystem reads to untrusted renderer input. src/main/templates/ipc.ts [2-80] -import { join } from 'path' +import { join, relative, resolve } from 'path' ... ipcMain.handle( 'audist:templates:resolveForSession', (_, { sessionDir }: { sessionDir: string }): { id: string; name: string } => { - const template = resolveTemplateForSession(sessionDir) + const root = resolve(getSaveDirectory()) + const target = resolve(sessionDir) + const rel = relative(root, target) + + if (rel === '..' || rel.startsWith(`..${join('/', '').replace('/', '')}`) || resolve(rel) === rel) { + throw new Error('Invalid session directory') + } + + const template = resolveTemplateForSession(target) return { id: template.id, name: template.name } } ) Suggestion importance[1-10]: 7 __ Why: The resolveForSession IPC handler does trust a renderer-provided sessionDir, so constraining it to getSaveDirectory() is a meaningful hardening improvement. The proposed path check is somewhat awkward and could be simplified, but the underlying issue is relevant and security-oriented.	Medium
Possible issue	Bypass blocker after deletion Deleting a template with unsaved edits can trigger the route blocker after the delete succeeds, leaving the user on an editor page for a template that no longer exists. Add an explicit navigation bypass for destructive actions that intentionally leave the page. src/renderer/src/pages/prefs/templates/TemplateEditorPage.tsx [67-126] +const allowNavigationRef = useRef(false) + const blocker = useBlocker( useCallback( ({ currentLocation, nextLocation }) => - hasUnsavedChanges && currentLocation.pathname !== nextLocation.pathname, + !allowNavigationRef.current && + hasUnsavedChanges && + currentLocation.pathname !== nextLocation.pathname, [hasUnsavedChanges] ) ) ... const handleDelete = async (): Promise<void> => { if (!id) return await window.api.templates.delete(id) - navigate('/prefs/templates') + allowNavigationRef.current = true + navigate('/prefs/templates', { replace: true }) } Suggestion importance[1-10]: 7 __ Why: This correctly identifies that useBlocker can intercept the post-delete navigation when hasUnsavedChanges is true, potentially leaving the user on a deleted template editor. A bypass flag for intentional destructive navigation is a practical fix with moderate functional impact.	Medium

Suggestions up to commit e70194e

Category	Suggestion	Impact
Security	Validate session directory paths The new IPC handler trusts renderer-provided sessionDir, allowing a compromised renderer to make the main process read session.json from arbitrary filesystem locations. Normalize the path and reject anything outside the configured save directory before calling resolveTemplateForSession. src/main/templates/ipc.ts [74-80] ipcMain.handle( 'audist:templates:resolveForSession', (_, { sessionDir }: { sessionDir: string }): { id: string; name: string } => { - const template = resolveTemplateForSession(sessionDir) + const saveRoot = resolve(getSaveDirectory()) + const requestedDir = resolve(sessionDir) + const relativePath = relative(saveRoot, requestedDir) + + if ( + relativePath === '..' || + relativePath.startsWith(`..${sep}`) || + isAbsolute(relativePath) + ) { + throw new Error('Invalid session directory') + } + + const template = resolveTemplateForSession(requestedDir) return { id: template.id, name: template.name } } ) Suggestion importance[1-10]: 8 __ Why: This is a valid security concern because resolveForSession reads from a renderer-provided sessionDir, which could let a compromised renderer probe arbitrary paths. The suggested path validation is relevant, though the shown patch would also need corresponding path imports.	Medium
General	Prevent stale async updates These async reads can resolve after the user navigates to a different session, causing stale summary/template data to be rendered. Add a cancellation guard and clear summaryTemplateName when the session changes. src/renderer/src/pages/SessionDetail.tsx [116-121] useEffect(() => { if (!session) return - window.api.summary.read(session.dir).then(setSummary) - window.api.transcription.read(session.dir).then(setTranscript) - window.api.templates.resolveForSession(session.dir).then((t) => setSummaryTemplateName(t.name)) + + let cancelled = false + setSummaryTemplateName(null) + + window.api.summary.read(session.dir).then((value) => { + if (!cancelled) setSummary(value) + }) + window.api.transcription.read(session.dir).then((value) => { + if (!cancelled) setTranscript(value) + }) + window.api.templates.resolveForSession(session.dir).then((t) => { + if (!cancelled) setSummaryTemplateName(t.name) + }) + + return () => { + cancelled = true + } }, [session?.dir]) Suggestion importance[1-10]: 6 __ Why: Adding a cancellation guard is a sound fix for async reads resolving after session changes. The suggestion is useful, but it only clears summaryTemplateName, so existing summary or transcript can still remain visible until replacement reads complete.	Low
	Avoid stale preview output preview(id) renders the persisted template, so pressing Preview after editing but before saving shows stale output that does not match the visible form. Either send the draft form to the preview IPC or block preview until changes are saved. src/renderer/src/pages/prefs/templates/TemplateEditorPage.tsx [134-149] const handlePreview = async (): Promise<void> => { if (!id) return + + if (hasUnsavedChanges) { + setPreviewState({ + status: 'error', + message: 'Save changes before previewing this template.' + }) + return + } + const token = ++previewTokenRef.current setPreviewState({ status: 'loading' }) try { const { markdown } = await window.api.templates.preview(id) if (previewTokenRef.current !== token) return // closed (or re-opened) before this resolved setPreviewState({ status: 'done', markdown }) } catch (err) { if (previewTokenRef.current !== token) return setPreviewState({ status: 'error', message: err instanceof Error ? err.message : 'Failed to generate preview' }) } } Suggestion importance[1-10]: 6 __ Why: This correctly identifies that window.api.templates.preview(id) previews the persisted template, not the unsaved form state. Blocking preview while hasUnsavedChanges is a reasonable UX/correctness fix, though sending the draft would be a more complete solution.	Low

[github-actions]

Persistent review updated to latest commit 99dec5a

[github-actions]

Persistent review updated to latest commit 6792909

[github-actions]

Persistent review updated to latest commit 0da318b

[yoonwaiyan]

/review

[github-actions]

Persistent review updated to latest commit 0da318b