d2ab3cd5095d4ee61ec0065d7ecdeec0a00c308e
4 Commits
| Author | SHA1 | Message | Date | |
|---|---|---|---|---|
 João Salavisa
|
140e828ead |
fix(web): subdue voice input button to ghost style (#1233)
* fix(web): subdue voice input button to ghost style The voice button was styled as a primary-filled circle to mirror SubmitButton, but in the task-create dialog there is no adjacent Submit (the submit button lives in the footer), so the loud styling read as the dialog's primary action rather than as a secondary input control. In the chat composer it also competed visually with Submit where Submit should win. Switch to `variant="ghost"` with muted-foreground icon so voice sits in the toolbar alongside attach/enhance as one secondary action among several. Recording state keeps the pulsing destructive ring for unmistakable visual feedback but uses a tinted `bg-destructive/15` instead of a full destructive fill. Unsupported fallback also moves from `secondary` to `ghost` so the greyed-out variant matches. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> * refactor(web): couple voice mic ring radius to button corner radius Use `rounded-[inherit]` on the recording pulse-ring so the corner radius follows the underlying `Button`'s actual radius instead of being hardcoded to `rounded-md`. The two happen to match today (shadcn's ghost Button defaults to `rounded-md`), but the implicit coupling would silently misalign if the Button base styles ever change. Flagged in PR review by both Claude and Greptile. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> --------- Co-authored-by: Kandev Agent <agent@kandev.dev> Co-authored-by: Claude Opus 4.7 <noreply@anthropic.com> |
||
|
João Salavisa
|
aea266ee71 |
fix(web): fix hold-to-talk on mobile and add coarse-pointer toggle fallback (#1231)
* fix(web): make voice-mode hold gesture survive touch and add mobile coverage
Mobile users with the chat composer's mic button in hold-to-talk mode lost
their recording the moment a finger crept off the 28px target, because
`buildHoldHandlers` aborted on `pointerleave`/`pointercancel` without ever
claiming the pointer.
- `buildHoldHandlers` now claims the pointer on `pointerdown` via
`setPointerCapture` and releases it on `pointerup`/`pointercancel`. The
`pointerleave` handler is dropped — capture keeps the gesture alive across
small finger movement, OS gesture handoff, and soft-keyboard reflows.
- `EnabledVoiceInputButton` resolves an `effectiveMode` via a coarse-pointer
check (`matchMedia("(pointer: coarse)")`); when the stored preference is
`hold` and the device is touch-first, the mic falls back to toggle so a
bad stored preference can't trap users in a broken UX. Persisted
`voiceMode.mode` is left untouched so docking a keyboard restores the
user's choice without a save.
- The button bumps to 40×40 on coarse-pointer devices to meet the 44pt touch-
target floor without disturbing the desktop submit/voice pair.
- The unsupported fallback path (`UnsupportedVoiceButton`) is unchanged so
LAN-HTTP mobile users still get the HTTPS explanation toast.
Adds `voice-input-button.test.tsx` covering capture/release on pointer
events, the absence of `pointerleave` regression, the coarse-pointer toggle
override, and the touch-target class swap.
Adds `mobile-voice-mode.spec.ts` (Playwright mobile-chrome / Pixel 5)
verifying the Voice Mode settings page is reachable from the mobile sidebar
trigger and that the mic button mounts with `data-effective-mode="toggle"`
on the mobile chat composer.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
* test(web): drop unused testPage param from mobile-voice-mode seedTask helper
The helper only calls apiClient and does not touch the Playwright Page
object — the parameter was carried over from the neighbour spec's pattern
where the helper also navigates. Removing it also drops the now-unused
`Page` type import.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
* refactor(web): drop redundant Element type cast from safePointerRelease
`Element.hasPointerCapture` and `releasePointerCapture` are already declared
in lib.dom.d.ts, so the `target as Element & { hasPointerCapture?: ... }`
casts were over-defensive. Replace with a direct `typeof` runtime check,
which still guards against the headless DOMs that strip these methods.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
* test(web): assert coarse-pointer touch-target class in mobile voice spec
The previous assertion (`data-effective-mode === "toggle"`) would have
passed even if the coarse-pointer override were reverted, since the default
stored `voiceMode.mode` is already `"toggle"`. Add a check on the `h-10
w-10` class swap — that class pair is only emitted when
`useIsCoarsePointer()` returned true, so the test now genuinely exercises
the override on the e2e surface.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
* test(web): extend voice-input-button unit coverage for toggle paths
- Toggle-mode + fine-pointer: pointerdown must not start recording; click
drives the toggle. Guards against an accidental future change that wires
hold pointer handlers when stored mode is "toggle".
- Recording state + click: stop() fires (not start()), exercising the
buildToggleHandler branch the original suite skipped.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
* test(web): seed hold mode in E2E and fix misleading test title
- Add `voice_mode` field to `saveUserSettings` in api-client.ts so E2E
tests can PATCH the user's stored activation mode via the API.
- Seed `mode: "hold"` before the mic-button assertion so
`data-mode="hold"` + `data-effective-mode="toggle"` together prove the
coarse-pointer override fired (not that the default was already toggle).
- Rename settings-page test to drop the "from mobile sidebar" claim —
the test navigates directly to the URL; sidebar existence is still
asserted as a regression guard.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---------
Co-authored-by: Kandev Agent <agent@kandev.dev>
Co-authored-by: Claude Opus 4.7 <noreply@anthropic.com>
|
||
|
João Salavisa
|
58dd2773a2 |
feat(web): show inline download progress for Whisper Web model (#1228)
* feat(web): show download progress for voice mode Whisper Web model First-time use of voice mode with the Whisper Web engine downloads ~40–240 MB of model files before the first transcription. The existing modelLoad progress was only surfaced via the mic-button tooltip, so the download felt silent — users couldn't tell whether it was progressing, stuck, or how much was left. Adds a compact inline indicator next to the mic button that renders a percent label and a Progress bar while the model is downloading, and a short error label when load fails. The indicator stays hidden for the Web Speech and server-Whisper engines (which don't download models) and clears once the model is ready. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> * refactor(web): tidy VoiceModelLoadIndicator class names and a11y - drop unused cn() import (single-string className doesn't need it) - drop redundant max-w-[8rem] (w-32 already equals 8rem in tailwind) - include modelLabel in the error state's aria-label so screen readers identify which model failed Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> * refactor(web): a11y improvements for VoiceModelLoadIndicator - Replace two separate loading/error divs with a single stable role="status" wrapper so AT announces the loading→error transition (newly-inserted live regions are silently ignored by most screen readers). - Move numeric progress to role="progressbar" + aria-valuenow/min/max on the inner div; removes per-tick live-region announcements. - Drop redundant aria-live="polite" (role="status" implies it per ARIA spec). - Align error visible text with aria-label: both now use modelLabel ("Whisper Base failed to load") instead of the generic string. - Standardize tooltip wording to match indicator: "Downloading {model}…" instead of "Loading model…". - Update test: error branch expects model-specific label. * refactor(web): fix nested progressbar and clamp tooltip percent - Remove role="progressbar" + aria-value* from the wrapper div; <Progress> (Radix) already renders its own progressbar — the nested node confused AT. Pass aria-label directly to <Progress> for the accessible name. - Drop outer aria-label on the loading state (Radix progressbar carries it). - Clamp tooltip percent in voice-input-button.tsx to 0–100 and handle NaN (mirrors clampPercent in the indicator, keeps UI consistent on edge values from transformers.js). - Update test: assert aria-label via getByRole("progressbar").getAttribute(). * fix(web): guard tooltip percent against NaN; assert error aria-label in test - Tooltip loading percent: add Number.isFinite guard so NaN from transformers.js progress produces "0%" instead of "NaN%". - Test: assert aria-label on error state root matches modelLabel. * fix(web): add w-32 to error variant to prevent layout shift on state change Loading branch uses w-32 to hold a stable 128px slot in the toolbar. Error branch lacked it, so the mic button shifted on loading→error transition. --------- Co-authored-by: Kandev Agent <agent@kandev.dev> Co-authored-by: Claude Opus 4.7 <noreply@anthropic.com> |
||
|
João Salavisa
|
1fdeda904b |
feat: add voice mode for chat input (#1159)
* feat: add voice mode for chat input Adds a voice input button to the chat composer with three transcription engines: in-browser Web Speech API, in-browser Whisper via @huggingface/transformers, and a server-side OpenAI Whisper fallback gated on KANDEV_VOICE_OPENAI_API_KEY. User-configurable from a new /settings/voice-mode page: - Master on/off toggle (defaults to on; opt-out, not opt-in) - Engine preference (auto / Web Speech / Whisper Web / Whisper Server) - Language hint (auto-detect or BCP-47 pinned) - Activation mode (click-to-toggle or hold-to-talk) - Auto-send after transcription - Whisper Web model size (tiny / base / small) - Editable Cmd+Shift+M keyboard shortcut Voice settings live under user_settings.voice_mode as a nested JSON object — no schema migration. Setting changes broadcast via the existing user.settings.updated WS event so any open chat tab updates live. The mic button is rendered on the right of the composer alongside the send button (round primary fill; destructive fill with pulse ring while recording). On browsers without a usable engine (e.g. iOS Chrome over HTTP) the button stays visible as a muted greyed icon — tapping it surfaces a toast with the reason (typically a missing secure context). Whisper Web runs in a Web Worker with fp16 decoder weights (avoids the MatMulNBits scale-missing crash that q4/q8 hit on WASM). Models are pulled from the onnx-community/* mirror and cached by transformers.js in the Cache Storage on first use. * fix: address voice mode PR review feedback and E2E selector clash Bot-review fixes from #1159: - Map http.MaxBytesError from c.FormFile to 413 instead of bare 400. - Strip BCP-47 region suffix before passing language hint to Whisper Web. - Recover from worker crash: terminate + null worker + reset ready flag so next init/transcribe creates a fresh worker instead of hanging. - Read live store state via storeApi.getState() in voice-mode settings savers to avoid stale-closure clobbering concurrent settings updates. - Detach Web Speech callbacks before abort() so trailing onend/onerror events don't mutate hook state after cancel(). - Spread caller init before method/body in voice-api fetch so a caller- supplied init can't override the multipart POST. - Replace t.Fatalf with t.Errorf+return inside test HTTP handler goroutine (FailNow from non-test goroutine is unsafe). - Add Enabled/AutoSend zeroing assertions in partial-update test so the bool-overwrite-on-PATCH behavior is locked in explicitly. E2E fix: - toolbar-overflow spec used button.rounded-full which now matches both the send and voice buttons (strict-mode violation). Switched to the submit-message-button testid for an unambiguous locator. * fix: scope voice settings rollback + whisper worker error to changed keys Round 2 of PR review feedback on #1159: - voice-mode settings rollback now restores only the keys patched by the failing request (not the whole snapshot), preserving concurrent edits to unrelated voiceMode fields. - Shortcut rollback diffs previous vs next and reverts only the changed keys (restore prior value or delete if absent), preserving other concurrent shortcut edits. - Whisper worker error handler captures the worker reference at attach time and only clears refs when this.worker still matches it — a stale error from a previously replaced worker no longer nukes the active one. - Update stale whisper-web-models JSDoc that still pointed at Xenova mirrors. * fix: voice mode progress scale, hold-mode race, race-aware rollback Round 3 of PR review feedback on #1159: - Normalise Whisper progress to 0–1 in ensureWhisperClient (transformers.js emits 0–100, the button's display + the `ready: 1` convention expect 0–1 — fixes the 5000% mid-download display). - Claim driverRef synchronously at the top of finishCapture so concurrent pointerup + pointerleave invocations early-return instead of racing and clobbering a freshly-started recording's ref. - Race-aware rollback: voice-mode and shortcut catch branches now skip reverting a key when latest[key] !== next[key]. A failed earlier request no longer overwrites a later successful save to the same key. - Update the Worker wire-protocol comment to show onnx-community/whisper-base instead of the stale Xenova/* example. --------- Co-authored-by: Kandev Agent <agent@kandev.dev> |