Show elapsed time in recording capsule

[Michealmyson]

User description

Summary

This is a smaller follow-up to #406, adjusted to match the current typeless capsule processing logic.

Changes:

• Show elapsed recording time inside the existing recording capsule, e.g. 00:08.
• Keep the existing recording / transcribing / polishing capsule states unchanged.
• Do not add a new capsule state or backend processing type.
• Add i18n keys for the elapsed-time label.
• Clarify the inserted-count copy with a character unit where needed.

Why

The previous PR added an explicit inserting capsule state, but the latest upstream capsule implementation now favors typeless processing with the existing thinking/insertion flow. This PR keeps that architecture intact and focuses only on the visible user feedback gap during recording.

Verification

• Ran npm run build successfully.

---

PR Type

Enhancement

---

Description

• Show recording elapsed time

• Track elapsedMs in capsule UI

• Clarify inserted count wording

• Localize capsule progress strings

---

Diagram Walkthrough

flowchart LR
  A["Capsule state event"] -- "carry `elapsedMs`" --> B["Capsule.tsx"]
  B -- "render elapsed time" --> C["Recording capsule UI"]
  B -- "use localized labels" --> D["i18n strings"]
  D -- "update inserted copy" --> C

Loading

File Walkthrough

	Relevant files
Enhancement	Capsule.tsx Render elapsed time in recording state                                      openless-all/app/src/components/Capsule.tsx Adds formatElapsed() to format recording time as mm:ss. Stores elapsedMs from incoming capsule:state events. Renders recording state with audio bars plus elapsed-time text. Passes elapsedMs into Pill for state-specific display. +38/-2
Documentation	en.ts Update English capsule copy                                                            openless-all/app/src/i18n/en.ts Adds capsule.recordingElapsed for the recording timer label. Changes inserted feedback to Inserted {{count}} chars. +2/-1      ja.ts Add Japanese recording timer label                                              openless-all/app/src/i18n/ja.ts Adds capsule.recordingElapsed for localized elapsed-time text. Keeps the existing inserted feedback wording unchanged. +1/-0      ko.ts Add Korean recording timer label                                                  openless-all/app/src/i18n/ko.ts Adds capsule.recordingElapsed for localized elapsed-time text. Keeps the existing inserted feedback wording unchanged. +1/-0      zh-CN.ts Update Simplified Chinese capsule copy                                      openless-all/app/src/i18n/zh-CN.ts Adds capsule.recordingElapsed for the recording timer label. Changes inserted feedback to 已插入 {{count}} 字. +2/-1      zh-TW.ts Update Traditional Chinese capsule copy                                    openless-all/app/src/i18n/zh-TW.ts Adds capsule.recordingElapsed for the recording timer label. Changes inserted feedback to 已插入 {{count}} 字. +2/-1

---

[github-actions]

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

🎫 Ticket compliance analysis ✅ 406 - Fully compliant Compliant requirements: Show elapsed recording time inside the existing recording capsule. Keep the current recording / transcribing / polishing capsule states unchanged. Do not add a new capsule state or backend processing type. Add i18n keys for the elapsed-time label. Clarify the inserted-count copy with a character unit where needed.

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

🧪 No relevant tests

🔒 No security concerns identified

⚡ Recommended focus areas for review Timer reset elapsedMs is reset to 0 whenever a capsule:state event does not include the field. If the backend sends partial state updates during recording, the capsule will jump back to 00:00 instead of keeping the last elapsed time, which makes the new feedback flicker or appear broken. setElapsedMs(p.elapsedMs ?? 0);