@pheem49/mint 1.15.0 → 1.17.0

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

@@ -0,0 +1,139 @@
+.glide-select {
+  --gs-accent: var(--interactive-fg, #f5f5f5);
+  --gs-surface: var(--bg-surface-raised, #27272a);
+  --gs-highlight: var(--bg-surface-hover, #3f3f46);
+  --gs-text: var(--text-primary, #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: 1px solid var(--border-default, transparent);
+  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: 1px solid var(--border-default, transparent);
+  border-radius: var(--gs-radius);
+  background: var(--gs-surface);
+  box-shadow: var(--shadow-md, 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/ui/ProviderBrandIcon.test.tsx

@@ -0,0 +1,67 @@
+/// <reference path="../../env.d.ts" />
+import { describe, expect, it } from 'vitest'
+// @ts-ignore react-dom/server lacks types without @types/react-dom
+import { renderToStaticMarkup } from 'react-dom/server'
+import ProviderBrandIcon, { matchProviderKey } from './ProviderBrandIcon'
+
+describe('matchProviderKey', () => {
+  it('correctly maps various provider and model combinations', () => {
+    expect(matchProviderKey('deepseek', 'deepseek-flash')).toBe('deepseek')
+    expect(matchProviderKey('DeepSeek', 'deepseek-chat')).toBe('deepseek')
+    expect(matchProviderKey('google', 'gemini-1.5-pro')).toBe('gemini')
+    expect(matchProviderKey('gemini', 'gemini-2.0-flash')).toBe('gemini')
+    expect(matchProviderKey('anthropic', 'claude-3-5-sonnet')).toBe('anthropic')
+    expect(matchProviderKey('openai', 'gpt-4o')).toBe('openai')
+    expect(matchProviderKey('groq', 'llama-3.3-70b')).toBe('groq')
+    expect(matchProviderKey('ollama', 'qwen2.5-coder')).toBe('ollama')
+    expect(matchProviderKey('openrouter', 'anthropic/claude-3.5')).toBe('anthropic') // 'claude' / 'anthropic' matched via combined
+    expect(matchProviderKey('openrouter', 'mistralai/mistral-large')).toBe('openrouter') // openrouter prioritized
+    expect(matchProviderKey('custom_unknown', 'unknown_model')).toBe(null)
+  })
+})
+
+describe('ProviderBrandIcon component', () => {
+  it('renders a brand logo for known provider (e.g. DeepSeek)', () => {
+    const html = renderToStaticMarkup(<ProviderBrandIcon provider="deepseek" model="deepseek-flash" size={13} />)
+    expect(html).toContain('provider-chip-logo')
+    expect(html).toContain('<img')
+  })
+
+  it('renders monochrome brand icon with mask for providers like Anthropic or OpenAI', () => {
+    const htmlAnthropic = renderToStaticMarkup(<ProviderBrandIcon provider="anthropic" model="claude-3-5-sonnet" size={13} />)
+    expect(htmlAnthropic).toContain('provider-chip-logo')
+    expect(htmlAnthropic).toContain('is-monochrome')
+    expect(htmlAnthropic).toContain('--provider-brand-color')
+
+    const htmlOpenAI = renderToStaticMarkup(<ProviderBrandIcon provider="openai" model="gpt-4o" size={13} />)
+    expect(htmlOpenAI).toContain('provider-chip-logo')
+    expect(htmlOpenAI).toContain('is-monochrome')
+  })
+
+  it('renders custom provider logo from customProviders list', () => {
+    const customProviders = [
+      { id: 'my-custom-llm', displayName: 'My LLM', logoDataUrl: 'data:image/svg+xml,<svg></svg>' }
+    ]
+    const html = renderToStaticMarkup(
+      <ProviderBrandIcon provider="my-custom-llm" model="custom-v1" customProviders={customProviders} size={13} />
+    )
+    expect(html).toContain('provider-chip-logo')
+    expect(html).toContain('src="data:image/svg+xml,&lt;svg&gt;&lt;/svg&gt;"')
+  })
+
+  it('renders emoji when custom logo is an emoji', () => {
+    const customProviders = [
+      { id: 'custom-emoji-provider', displayName: 'Emoji AI', logoDataUrl: '⚡' }
+    ]
+    const html = renderToStaticMarkup(
+      <ProviderBrandIcon provider="custom-emoji-provider" model="model-1" customProviders={customProviders} size={13} />
+    )
+    expect(html).toContain('provider-chip-emoji')
+    expect(html).toContain('⚡')
+  })
+
+  it('falls back to dot when provider is unknown and not in customProviders', () => {
+    const html = renderToStaticMarkup(<ProviderBrandIcon provider="unknown-ai" model="x-model" size={13} />)
+    expect(html).toContain('provider-chip-dot')
+  })
+})

package/src/renderer/shared/components/ui/ProviderBrandIcon.tsx

@@ -0,0 +1,167 @@
+import React from 'react'
+import anthropicLogo from '@lobehub/icons-static-svg/icons/anthropic.svg?url'
+import deepseekLogo from '@lobehub/icons-static-svg/icons/deepseek-color.svg?url'
+import geminiLogo from '@lobehub/icons-static-svg/icons/gemini-color.svg?url'
+import groqLogo from '@lobehub/icons-static-svg/icons/groq.svg?url'
+import huggingFaceLogo from '@lobehub/icons-static-svg/icons/huggingface-color.svg?url'
+import lmStudioLogo from '@lobehub/icons-static-svg/icons/lmstudio.svg?url'
+import mistralLogo from '@lobehub/icons-static-svg/icons/mistral-color.svg?url'
+import ollamaLogo from '@lobehub/icons-static-svg/icons/ollama.svg?url'
+import openAiLogo from '@lobehub/icons-static-svg/icons/openai.svg?url'
+import openRouterLogo from '@lobehub/icons-static-svg/icons/openrouter-color.svg?url'
+import perplexityLogo from '@lobehub/icons-static-svg/icons/perplexity-color.svg?url'
+import qwenLogo from '@lobehub/icons-static-svg/icons/qwen-color.svg?url'
+import togetherLogo from '@lobehub/icons-static-svg/icons/together-color.svg?url'
+
+export interface ProviderBrandIconProps {
+  provider?: string
+  model?: string
+  customLogo?: string
+  customProviders?: Array<{ id: string; displayName?: string; logoDataUrl?: string }>
+  size?: number
+  className?: string
+}
+
+interface LogoEntry {
+  src: string
+  color?: string
+}
+
+const BRAND_LOGOS: Record<string, LogoEntry> = {
+  anthropic: { src: anthropicLogo, color: '#d97757' },
+  claude: { src: anthropicLogo, color: '#d97757' },
+  deepseek: { src: deepseekLogo },
+  gemini: { src: geminiLogo },
+  google: { src: geminiLogo },
+  groq: { src: groqLogo, color: '#f97316' },
+  huggingface: { src: huggingFaceLogo },
+  hf: { src: huggingFaceLogo },
+  local_openai: { src: lmStudioLogo, color: '#8b5cf6' },
+  lmstudio: { src: lmStudioLogo, color: '#8b5cf6' },
+  mistral: { src: mistralLogo },
+  ollama: { src: ollamaLogo, color: '#e2e8f0' },
+  openai: { src: openAiLogo, color: '#10a37f' },
+  gpt: { src: openAiLogo, color: '#10a37f' },
+  openrouter: { src: openRouterLogo },
+  perplexity: { src: perplexityLogo },
+  qwen: { src: qwenLogo },
+  together: { src: togetherLogo },
+}
+
+export function matchProviderKey(provider = '', model = ''): string | null {
+  const p = provider.toLowerCase().trim()
+  const m = model.toLowerCase().trim()
+  const combined = `${p} ${m}`
+
+  if (combined.includes('deepseek')) return 'deepseek'
+  if (combined.includes('gemini') || combined.includes('google')) return 'gemini'
+  if (combined.includes('claude') || combined.includes('anthropic')) return 'anthropic'
+  if (combined.includes('openai') || combined.includes('gpt')) return 'openai'
+  if (combined.includes('groq')) return 'groq'
+  if (combined.includes('openrouter')) return 'openrouter'
+  if (combined.includes('ollama')) return 'ollama'
+  if (combined.includes('mistral')) return 'mistral'
+  if (combined.includes('perplexity')) return 'perplexity'
+  if (combined.includes('qwen')) return 'qwen'
+  if (combined.includes('together')) return 'together'
+  if (combined.includes('lmstudio') || combined.includes('local_openai')) return 'local_openai'
+  if (combined.includes('huggingface') || combined.includes('hf')) return 'huggingface'
+
+  return null
+}
+
+export default function ProviderBrandIcon({
+  provider = '',
+  model = '',
+  customLogo,
+  customProviders,
+  size = 13,
+  className = '',
+}: ProviderBrandIconProps) {
+  // 1. Direct custom logo prop
+  let effectiveLogo = customLogo
+
+  // 2. Check in customProviders list
+  if (!effectiveLogo && customProviders && provider) {
+    const rawId = provider.toLowerCase().replace(/^custom:/, '')
+    const matchedCp = customProviders.find(
+      (cp) => cp.id.toLowerCase() === rawId || (cp.displayName && cp.displayName.toLowerCase() === rawId)
+    )
+    if (matchedCp?.logoDataUrl) {
+      effectiveLogo = matchedCp.logoDataUrl
+    }
+  }
+
+  if (effectiveLogo) {
+    const isImage =
+      effectiveLogo.startsWith('data:') ||
+      effectiveLogo.startsWith('http://') ||
+      effectiveLogo.startsWith('https://') ||
+      effectiveLogo.startsWith('/')
+
+    if (!isImage) {
+      return (
+        <span
+          className={`provider-chip-logo provider-chip-emoji ${className}`}
+          style={{
+            width: `${size}px`,
+            height: `${size}px`,
+            display: 'inline-flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            fontSize: `${Math.max(10, size - 1)}px`,
+            lineHeight: 1,
+          }}
+          aria-hidden="true"
+        >
+          {effectiveLogo}
+        </span>
+      )
+    }
+
+    return (
+      <span
+        className={`provider-chip-logo ${className}`}
+        style={{ width: `${size}px`, height: `${size}px` }}
+        aria-hidden="true"
+      >
+        <img src={effectiveLogo} alt="" />
+      </span>
+    )
+  }
+
+  // 3. Match known brand logo
+  const brandKey = matchProviderKey(provider, model)
+  const brand = brandKey ? BRAND_LOGOS[brandKey] : null
+
+  if (brand) {
+    if (brand.color) {
+      return (
+        <span
+          className={`provider-chip-logo is-monochrome ${className}`}
+          style={{
+            width: `${size}px`,
+            height: `${size}px`,
+            '--provider-brand-color': brand.color,
+            maskImage: `url("${brand.src}")`,
+            WebkitMaskImage: `url("${brand.src}")`,
+          } as React.CSSProperties}
+          aria-hidden="true"
+        />
+      )
+    }
+
+    return (
+      <span
+        className={`provider-chip-logo ${className}`}
+        style={{ width: `${size}px`, height: `${size}px` }}
+        aria-hidden="true"
+      >
+        <img src={brand.src} alt="" />
+      </span>
+    )
+  }
+
+  // 4. Fallback dot if unrecognized
+  return <span className={`provider-chip-dot ${className}`} aria-hidden="true" />
+}

package/src/renderer/shared/components/ui/README.md

@@ -0,0 +1,52 @@
+# Shared UI components
+
+Mint already uses React and TypeScript. Its two Vite applications previously used
+plain CSS and separate `@/` roots. Reusable UI lives in
+`src/renderer/shared/components/ui`, rather than a new top-level application root.
+Keeping this `components/ui` folder gives the shadcn CLI a stable destination and
+prevents Desktop and Web from acquiring different copies of the same primitive.
+
+`components.json` points the CLI at this directory. Both Vite configurations and
+TypeScript resolve `@/components/ui/*` here and `@/lib/utils` to the shared `cn`
+helper. Existing application-specific aliases still work.
+
+Tailwind is installed through `@tailwindcss/vite` in both builds. Styles are in
+`shared/css/ui-tailwind.css`: theme and utility layers, explicit shared UI source
+scanning, and semantic colors mapped to Mint's tokens. Preflight is omitted to
+preserve the application's base styles. New shared primitives belong in this
+folder so their utility classes are included automatically. To add one:
+
+```sh
+npx shadcn@latest add <component-name>
+npm run typecheck
+npm run build:ui
+```
+
+No project reinitialization is needed. Setup references:
+[Tailwind with Vite](https://tailwindcss.com/docs/installation/using-vite) and
+[shadcn manual installation](https://ui.shadcn.com/docs/installation/manual).
+
+## VoicePoweredOrb
+
+The supplied shader and audio-to-motion mapping are retained in
+`voice-powered-orb.tsx`; sizing and graphics fallback are in its CSS.
+`GeminiLiveOverlay` integrates it with Mint's live status, transcripts, voice
+selection, microphone pause/resume and end-call callbacks.
+
+The call supplies `analyserRef` from `useGeminiLiveVoice`. It mixes the existing
+microphone and playback nodes for visualization without acquiring another mic.
+Without this prop, the standalone `demo.tsx` requests its own mic only after Start.
+That mode owns and releases its stream and AudioContext; the live component owns
+neither. No external images or assets are required.
+
+ResizeObserver handles the container, DPR is capped at two and applied once, and
+reduced motion freezes shader time, rotation and distortion. If WebGL is unavailable,
+the CSS ring and all textual call states/controls remain available. Ending a call
+releases capture, playback, the analyser, audio context, WebGL resources and RAF.
+
+Browser regressions can be served with `npm run dev:desktop:ui` and opened at
+`/tests/liveOrb.browser.html` and `/tests/liveVoice.browser.html`. The first checks
+the real shader and call UI; the second injects the external audio/session boundary
+to verify cancellation of pending permission/connection and late events. They do
+not make a real Gemini call. `/tests/liveOrb.browser.html?preview=1` shows a fixture
+conversation with an injected audio level for layout review.

package/src/renderer/shared/components/ui/SelectField.test.tsx

@@ -0,0 +1,27 @@
+import React from 'react'
+import { renderToStaticMarkup } from 'react-dom/server'
+import { describe, expect, it } from 'vitest'
+
+import SelectField from './SelectField'
+
+describe('Mint dropdown field', () => {
+  it('preserves a controlled numeric checkpoint and its accessible label', async () => {
+    const html = renderToStaticMarkup(<SelectField value={2} id="checkpoint" aria-label="Target checkpoint" disabled>
+      <option value={1}>Step 1</option><option value={2}>Step 2</option>
+    </SelectField>)
+    expect(html).toContain('Step 2')
+    expect(html).toContain('role="combobox"')
+    expect(html).toContain('id="checkpoint"')
+    expect(html).toContain('aria-label="Target checkpoint"')
+    expect(html).toContain('disabled=""')
+  })
+  it('preserves conditional and mapped labels, including a custom model entry', async () => {
+    const html = renderToStaticMarkup(<SelectField value="custom">
+      {['a','b'].map(v=><option key={v} value={v}>{v}</option>)}
+      {false && <option value="hidden">Hidden</option>}
+      <option value="custom">Custom model ID…</option>
+    </SelectField>)
+    expect(html).toContain('Custom model ID…')
+    expect(html).not.toContain('Hidden')
+  })
+})