@pheem49/mint 1.15.0 → 1.16.0

package/src/renderer/shared/components/GeminiLiveOverlay.test.tsx

@@ -0,0 +1,24 @@
+import React from 'react'
+import { renderToStaticMarkup } from 'react-dom/server'
+import { describe, expect, it } from 'vitest'
+import GeminiLiveOverlay from './GeminiLiveOverlay'
+
+const props = {
+  userTranscript: '', assistantTranscript: '', isPaused: false,
+  onTogglePause() {}, onEndCall() {}, voice: 'Puck', voices: ['Puck', 'Kore'], onChangeVoice() {},
+}
+
+describe('Live conversation', () => {
+  it('shows connection progress before a microphone session exists', () => {
+    const html = renderToStaticMarkup(<GeminiLiveOverlay {...props} status={'connecting' as any} />)
+    expect(html).toContain('Connecting')
+    expect(html).not.toContain('Say something to get started')
+  })
+  it('exposes named call controls and spoken conversation separately from the decorative orb', () => {
+    const html = renderToStaticMarkup(<GeminiLiveOverlay {...props} status="listening" userTranscript="สวัสดี" assistantTranscript="Hello" />)
+    expect(html).toContain('aria-label="Pause microphone"')
+    expect(html).toContain('aria-label="End Live conversation"')
+    expect(html).toContain('สวัสดี')
+    expect(html).toContain('Hello')
+  })
+})

package/src/renderer/shared/components/GeminiLiveOverlay.tsx

@@ -1,7 +1,12 @@
-import { useState } from 'react'
+import { useEffect, useRef, useState, type RefObject } from 'react'
+import { createPortal } from 'react-dom'
+import { Mic, MicOff, PhoneOff, Volume2 } from 'lucide-react'
+import { VoicePoweredOrb } from './ui/voice-powered-orb'
+import { Button } from './ui/button'
+import './GeminiLiveOverlay.css'
 
-interface GeminiLiveOverlayProps {
-  status: 'listening' | 'speaking' | 'thinking' | 'paused'
+export interface GeminiLiveOverlayProps {
+  status: 'connecting' | 'listening' | 'speaking' | 'thinking' | 'paused' | 'error'
   userTranscript: string
   assistantTranscript: string
   isPaused: boolean
@@ -10,119 +15,98 @@ interface GeminiLiveOverlayProps {
   voice: string
   voices: readonly string[]
   onChangeVoice: (voice: string) => void
+  analyserRef?: RefObject<AnalyserNode | null>
 }
-
 const STATUS_LABEL: Record<GeminiLiveOverlayProps['status'], string> = {
-  listening: 'Listening',
-  speaking: 'Speaking',
-  thinking: 'Thinking',
-  paused: 'Paused'
+  connecting: 'Connecting', listening: 'Listening', speaking: 'Speaking',
+  thinking: 'Thinking', paused: 'Microphone paused', error: 'Connection unavailable',
+}
+const STATUS_HINT: Record<GeminiLiveOverlayProps['status'], string> = {
+  connecting: 'Opening your microphone and Live session…',
+  listening: 'Speak naturally. Mint is listening.',
+  speaking: 'Mint is speaking. You can interrupt at any time.',
+  thinking: 'Waiting for Mint’s response…',
+  paused: 'Resume the microphone when you’re ready.',
+  error: 'End this call and try again when you’re ready.',
 }
 
 export default function GeminiLiveOverlay({
-  status,
-  userTranscript,
-  assistantTranscript,
-  isPaused,
-  onTogglePause,
-  onEndCall,
-  voice,
-  voices,
-  onChangeVoice
+  status, userTranscript, assistantTranscript, isPaused, onTogglePause, onEndCall,
+  voice, voices, onChangeVoice, analyserRef,
 }: GeminiLiveOverlayProps) {
   const [voicePickerOpen, setVoicePickerOpen] = useState(false)
+  const dialogRef = useRef<HTMLDivElement>(null)
+  const endCall = useRef(onEndCall)
+  endCall.current = onEndCall
+  // The decorative orb must not own a microphone in this call surface.
+  const emptyAnalyser = useRef<AnalyserNode | null>(null)
+  useEffect(() => {
+    const previousFocus = document.activeElement as HTMLElement | null
+    const previousOverflow = document.body.style.overflow
+    document.body.style.overflow = 'hidden'
+    const dialog = dialogRef.current!
+    dialog.querySelector<HTMLButtonElement>('[data-call-control]:not(:disabled), [aria-label="End Live conversation"]')?.focus()
+    const onKey = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') { event.preventDefault(); endCall.current(); return }
+      if (event.key !== 'Tab') return
+      const controls = Array.from(dialog.querySelectorAll<HTMLElement>('button:not(:disabled), [tabindex="0"]'))
+      const first = controls[0], last = controls[controls.length - 1]
+      if (event.shiftKey && (document.activeElement === first || !dialog.contains(document.activeElement))) {
+        event.preventDefault(); last?.focus()
+      } else if (!event.shiftKey && (document.activeElement === last || !dialog.contains(document.activeElement))) {
+        event.preventDefault(); first?.focus()
+      }
+    }
+    document.addEventListener('keydown', onKey)
+    return () => {
+      document.removeEventListener('keydown', onKey)
+      document.body.style.overflow = previousOverflow
+      previousFocus?.focus({ preventScroll: true })
+    }
+  }, [])
 
-  return (
-    <div className="gemini-live-overlay" role="dialog" aria-modal="true" aria-label="Gemini Live conversation">
+  const dialog = (
+    <div ref={dialogRef} className="gemini-live-overlay live-orb-dialog" role="dialog" aria-modal="true" aria-label="Gemini Live conversation" data-status={status}>
       <div className="gemini-live-card">
-        <span className="gemini-live-badge">Gemini Live</span>
-        <div className={`gemini-live-orb ${status}`} aria-hidden="true" />
-        <div className="gemini-live-status">{STATUS_LABEL[status]}</div>
-        <div className="gemini-live-transcript">
-          {userTranscript || assistantTranscript ? (
-            <>
-              {userTranscript && (
-                <p className="gemini-live-transcript-line">
-                  <span className="gemini-live-transcript-speaker">You:</span> {userTranscript}
-                </p>
-              )}
-              {assistantTranscript && (
-                <p className="gemini-live-transcript-line">
-                  <span className="gemini-live-transcript-speaker">Mint:</span> {assistantTranscript}
-                </p>
-              )}
-            </>
-          ) : (
-            'Say something to get started...'
-          )}
+        <header className="live-orb-header">
+          <span className="gemini-live-badge">Gemini Live</span>
+          <h2>Live conversation</h2>
+        </header>
+        <div className="live-orb-stage">
+          <VoicePoweredOrb hue={0} animate={status !== 'paused' && status !== 'error'} enableVoiceControl={status === 'listening' || status === 'speaking' || status === 'thinking'} analyserRef={analyserRef ?? emptyAnalyser} />
+        </div>
+        <div className="live-orb-state">
+          <div className="gemini-live-status" role="status">{STATUS_LABEL[status]}</div>
+          <p>{STATUS_HINT[status]}</p>
+        </div>
+        <div className="gemini-live-transcript" aria-label="Conversation transcript" tabIndex={0}>
+          {userTranscript || assistantTranscript ? <>
+            {userTranscript && <p className="gemini-live-transcript-line"><span className="gemini-live-transcript-speaker">You</span>{userTranscript}</p>}
+            {assistantTranscript && <p className="gemini-live-transcript-line"><span className="gemini-live-transcript-speaker">Mint</span>{assistantTranscript}</p>}
+          </> : <p className="live-orb-empty">{status === 'connecting' ? 'Your conversation will appear here.' : status === 'error' ? 'No conversation yet.' : 'Say something to get started…'}</p>}
         </div>
-
         <div className="gemini-live-voice-picker">
-          <button
-            type="button"
-            className="gemini-live-voice-btn"
-            onClick={() => setVoicePickerOpen((open) => !open)}
-            title="Change voice"
-            aria-expanded={voicePickerOpen}
-          >
-            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-              <path d="M11 5 6 9H2v6h4l5 4V5z" />
-              <path d="M15.5 8.5a5 5 0 0 1 0 7" />
-            </svg>
-            <span>{voice}</span>
-          </button>
-          {voicePickerOpen && (
-            <div className="gemini-live-voice-menu" role="listbox">
-              {voices.map((voiceName) => (
-                <button
-                  key={voiceName}
-                  type="button"
-                  role="option"
-                  aria-selected={voiceName === voice}
-                  className={`gemini-live-voice-option ${voiceName === voice ? 'active' : ''}`}
-                  onClick={() => {
-                    setVoicePickerOpen(false)
-                    if (voiceName !== voice) onChangeVoice(voiceName)
-                  }}
-                >
-                  {voiceName}
-                </button>
-              ))}
-            </div>
-          )}
+          <Button type="button" variant="ghost" className="gemini-live-voice-btn" aria-label="Change voice" aria-expanded={voicePickerOpen} aria-haspopup="listbox" onClick={() => setVoicePickerOpen(open => !open)}>
+            <Volume2 size={16} aria-hidden="true" /><span>{voice}</span>
+          </Button>
+          {voicePickerOpen && <div className="gemini-live-voice-menu" role="listbox" aria-label="Live voice">
+            {voices.map(voiceName => <button key={voiceName} type="button" role="option" aria-selected={voiceName === voice} data-voice={voiceName} className={`gemini-live-voice-option ${voiceName === voice ? 'active' : ''}`} onClick={() => {
+              setVoicePickerOpen(false)
+              if (voiceName !== voice) onChangeVoice(voiceName)
+            }}>{voiceName}</button>)}
+          </div>}
         </div>
-
         <div className="gemini-live-controls">
-          <button
-            type="button"
-            className="gemini-live-btn"
-            onClick={onTogglePause}
-            title={isPaused ? 'Resume' : 'Pause'}
-          >
-            {isPaused ? (
-              <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
-                <path d="M8 5v14l11-7z" />
-              </svg>
-            ) : (
-              <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
-                <rect x="6" y="5" width="4" height="14" rx="1" />
-                <rect x="14" y="5" width="4" height="14" rx="1" />
-              </svg>
-            )}
-          </button>
-          <button
-            type="button"
-            className="gemini-live-btn gemini-live-end"
-            onClick={onEndCall}
-            title="End Live conversation"
-          >
-            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
-              <line x1="18" y1="6" x2="6" y2="18"></line>
-              <line x1="6" y1="6" x2="18" y2="18"></line>
-            </svg>
-          </button>
+          <Button type="button" data-call-control variant="secondary" size="lg" className="gemini-live-btn" onClick={onTogglePause} disabled={status === 'connecting' || status === 'error'} aria-label={isPaused ? 'Resume microphone' : 'Pause microphone'} aria-pressed={isPaused}>
+            {isPaused ? <Mic size={18} aria-hidden="true" /> : <MicOff size={18} aria-hidden="true" />}<span>{isPaused ? 'Resume' : 'Pause mic'}</span>
+          </Button>
+          <Button type="button" variant="destructive" size="lg" className="gemini-live-btn gemini-live-end" onClick={onEndCall} aria-label="End Live conversation">
+            <PhoneOff size={18} aria-hidden="true" /><span>End call</span>
+          </Button>
         </div>
       </div>
     </div>
   )
+  // Escape chat layout containment (transforms, filters and clipped panels).
+  return typeof document === 'undefined' ? dialog : createPortal(dialog, document.body)
 }

package/src/renderer/shared/components/GlideSelect.css

@@ -0,0 +1,138 @@
+.glide-select {
+  --gs-accent: #f5f5f5;
+  --gs-surface: #27272a;
+  --gs-highlight: #3f3f46;
+  --gs-text: #f5f5f5;
+  --gs-radius: 10px;
+  --gs-inner-radius: 6px;
+  --gs-chip: 32px;
+  --gs-row: 30px;
+  --gs-font: 13px;
+  --gs-menu-w: 176px;
+  --gs-pop: 180ms;
+  --gs-pop-out: 120ms;
+  --gs-glide: 220ms;
+  --gs-origin: top left;
+  --gs-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
+  position: relative;
+  display: inline-block;
+  min-width: 0;
+}
+.glide-select[data-disabled] { opacity: 0.5; }
+.glide-select__trigger {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  height: var(--gs-chip);
+  margin: 0;
+  padding: 0 8px 0 10px;
+  border: 0;
+  border-radius: var(--gs-inner-radius);
+  background: var(--gs-surface);
+  color: var(--gs-text);
+  font-family: inherit;
+  font-size: var(--gs-font);
+  font-weight: 500;
+  line-height: 1;
+  cursor: pointer;
+  outline: none;
+  user-select: none;
+  -webkit-user-select: none;
+  -webkit-tap-highlight-color: transparent;
+  touch-action: manipulation;
+  transition: background-color 100ms ease, transform 160ms var(--gs-ease-out);
+}
+.glide-select__trigger:disabled { cursor: default; }
+@media (hover: hover) and (pointer: fine) {
+  .glide-select__trigger:not(:disabled):hover { background: color-mix(in srgb, var(--gs-highlight) 60%, var(--gs-surface)); }
+}
+.glide-select__trigger[aria-expanded='true'] { background: color-mix(in srgb, var(--gs-highlight) 60%, var(--gs-surface)); }
+.glide-select__trigger:not(:disabled):active { transform: scale(0.97); }
+.glide-select__label[data-empty] { opacity: 0.6; }
+.glide-select[data-swap] .glide-select__label { animation: gs-swap 160ms ease; }
+@keyframes gs-swap { from { opacity: 0.6; filter: blur(2px); } }
+.glide-select__chevron {
+  display: inline-flex;
+  color: color-mix(in srgb, var(--gs-text) 55%, transparent);
+  transition: transform 200ms var(--gs-ease-out);
+}
+.glide-select__trigger[aria-expanded='true'] .glide-select__chevron { transform: rotate(180deg); }
+.glide-select__menu {
+  --gs-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
+  position: fixed;
+  z-index: 10000;
+  box-sizing: border-box;
+  width: var(--gs-menu-w);
+  padding: 4px;
+  border-radius: var(--gs-radius);
+  background: var(--gs-surface);
+  box-shadow: 0 4px 16px color-mix(in srgb, #000 22%, transparent);
+  transform-origin: var(--gs-origin);
+  opacity: 0;
+  transform: scale(0.95);
+  transition: opacity var(--gs-pop) var(--gs-ease-out), transform var(--gs-pop) var(--gs-ease-out);
+}
+.glide-select__menu[data-state='open'] { opacity: 1; transform: none; }
+.glide-select__menu[data-state='closed'] { transition-duration: var(--gs-pop-out); pointer-events: none; }
+.glide-select__list { position: relative; display: grid; gap: 1px; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; scrollbar-width: thin; }
+.glide-select__pill {
+  position: absolute;
+  top: 0; right: 0; left: 0;
+  height: var(--gs-row);
+  border-radius: var(--gs-inner-radius);
+  background: var(--gs-highlight);
+  opacity: 0;
+  pointer-events: none;
+  transition: transform var(--gs-glide) var(--gs-ease-out), opacity 150ms ease;
+}
+.glide-select__option {
+  position: relative;
+  z-index: 1;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  height: var(--gs-row);
+  padding: 0 8px 0 10px;
+  border-radius: var(--gs-inner-radius);
+  color: var(--gs-text);
+  font-family: inherit;
+  font-size: var(--gs-font);
+  cursor: pointer;
+  user-select: none;
+  -webkit-user-select: none;
+  -webkit-tap-highlight-color: transparent;
+  transition: background-color 150ms ease;
+}
+.glide-select__option[aria-selected='true'] { background: color-mix(in srgb, var(--gs-highlight) 60%, transparent); }
+.glide-select__list[data-live] .glide-select__option[aria-selected='true'] { background: transparent; }
+.glide-select__name { flex: 1 1 auto; min-width: 0; overflow: hidden; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; }
+.glide-select__tag { flex-shrink: 0; color: color-mix(in srgb, var(--gs-text) 55%, transparent); font-size: calc(var(--gs-font) - 2px); }
+.glide-select__check { display: inline-flex; flex-shrink: 0; color: var(--gs-accent); visibility: hidden; }
+.glide-select__check[data-on] { visibility: visible; }
+/* Mint integration: focus, constrained fields, and platform accessibility. */
+.glide-select__trigger:focus-visible { outline: 2px solid var(--gs-accent); outline-offset: 2px; }
+.glide-select[data-full-width] { display: block; width: 100%; }
+.glide-select[data-full-width] .glide-select__trigger { display: flex; width: 100%; justify-content: space-between; }
+.glide-select__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
+.glide-select__chevron { flex-shrink: 0; }
+@media (prefers-reduced-motion: reduce) {
+  .glide-select__menu { transform: none !important; transition: opacity var(--gs-pop) ease; }
+  .glide-select__menu[data-state='closed'] { transition-duration: var(--gs-pop-out); }
+  .glide-select__pill { transition: opacity 150ms ease; }
+  .glide-select__chevron { transition: none; }
+  .glide-select__trigger { transition: background-color 100ms ease; }
+  .glide-select__trigger:not(:disabled):active { transform: none; }
+  .glide-select[data-swap] .glide-select__label { animation: none; }
+}
+@media (forced-colors: active) {
+  .glide-select__trigger, .glide-select__menu { border: 1px solid ButtonText; }
+  .glide-select__option[aria-selected='true'] { outline: 1px solid Highlight; outline-offset: -1px; }
+  .glide-select__trigger:focus-visible { outline-color: Highlight; }
+}
+/* Retain existing layout hooks without painting a second native-select surface. */
+.glide-select.mint-select-field { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
+.glide-select.mint-select-field.code-sort-select { width: auto; flex-shrink: 0; }
+.glide-select.mint-select-field.schedule-repeat-select { width: auto; min-width: 130px; }
+.glide-select.mint-select-field.schedule-timezone-select { width: auto; min-width: 180px; max-width: 260px; }

package/src/renderer/shared/components/GlideSelect.d.ts

@@ -0,0 +1,31 @@
+import type { CSSProperties, ReactNode } from 'react'
+export interface GlideOption { value: string; label: ReactNode; tag?: string }
+export interface GlideSelectProps {
+  options?: (string | GlideOption)[]
+  value?: string
+  defaultValue?: string
+  onChange?: (value: string, option: GlideOption) => void
+  placeholder?: string
+  showTags?: boolean
+  accentColor?: string
+  surfaceColor?: string
+  highlightColor?: string
+  textColor?: string
+  size?: 'sm' | 'md' | 'lg'
+  radius?: number
+  menuWidth?: number
+  placement?: 'top' | 'bottom'
+  align?: 'left' | 'right'
+  popDuration?: number
+  glideDuration?: number
+  rememberPosition?: boolean
+  disabled?: boolean
+  ariaLabel?: string
+  className?: string
+  id?: string
+  labelledBy?: string
+  title?: string
+  style?: CSSProperties
+  fullWidth?: boolean
+}
+export default function GlideSelect(props: GlideSelectProps): ReactNode