@pheem49/mint 1.15.0 → 1.16.0

package/src/renderer/shared/components/ui/error-recovery.tsx

@@ -0,0 +1,35 @@
+import { ArrowLeft, RefreshCw } from 'lucide-react'
+import { Button } from './button'
+import { VoicePoweredOrb } from './voice-powered-orb'
+import './error-recovery.css'
+
+export interface ErrorRecoveryProps {
+  onBackToChat: () => void
+  onRefresh: () => void
+}
+
+/** The application fallback must work independently of the loaded app's theme. */
+export function ErrorRecovery({ onBackToChat, onRefresh }: ErrorRecoveryProps) {
+  return (
+    <main className="error-recovery" style={{ flex: 1, minHeight: 0, overflowY: 'auto', color: '#f4f4f5' }}>
+      <div className="error-recovery-content">
+        <div className="error-recovery-orb" style={{ width: 'min(280px, 60vw, 34vh)', aspectRatio: '1' }}>
+          <VoicePoweredOrb animate={false} enableVoiceControl={false} hue={0} />
+        </div>
+        <div className="error-recovery-copy" role="alert">
+          <p className="error-recovery-label">APPLICATION ERROR</p>
+          <h1>Mint needs to refresh</h1>
+          <p>An asset failed to load or a new version was deployed. Refreshing will load the latest version.</p>
+        </div>
+        <div className="error-recovery-actions">
+          <Button type="button" variant="outline" size="lg" onClick={onBackToChat}>
+            <ArrowLeft size={16} aria-hidden="true" />Back to Chat
+          </Button>
+          <Button type="button" size="lg" onClick={onRefresh}>
+            <RefreshCw size={16} aria-hidden="true" />Refresh &amp; Update
+          </Button>
+        </div>
+      </div>
+    </main>
+  )
+}

package/src/renderer/shared/components/ui/voice-powered-orb.css

@@ -0,0 +1,6 @@
+.voice-powered-orb { position: relative; width: 100%; height: 100%; }
+.voice-powered-orb canvas { display: block; width: 100%; height: 100%; }
+.voice-powered-orb__fallback {
+  position: absolute; inset: 12%; border-radius: 50%;
+  border: 2px solid var(--flavor-indigo); box-shadow: inset 0 0 30px var(--flavor-indigo), 0 0 24px color-mix(in srgb, var(--flavor-cyan) 35%, transparent);
+}

package/src/renderer/shared/components/ui/voice-powered-orb.tsx

@@ -0,0 +1,374 @@
+"use client";
+
+import { useEffect, useRef, useState, type FC, type RefObject } from 'react'
+import { Renderer, Program, Mesh, Triangle, Vec3 } from 'ogl'
+import { cn } from '../../lib/utils'
+import './voice-powered-orb.css'
+import '../../css/effects.css'
+import { initializeEffectVisibility } from '../../utils/effectVisibility'
+
+export interface VoicePoweredOrbProps {
+  className?: string
+  hue?: number
+  /** Pause decorative motion when the call is paused or unavailable. */
+  animate?: boolean
+  enableVoiceControl?: boolean
+  voiceSensitivity?: number
+  maxRotationSpeed?: number
+  maxHoverIntensity?: number
+  onVoiceDetected?: (detected: boolean) => void
+  /** Reuse an existing call's analyser instead of requesting a second microphone. */
+  analyserRef?: RefObject<AnalyserNode | null>
+}
+
+// Authored vertex and fragment shaders from the supplied VoicePoweredOrb source.
+const vert = /* glsl */ `
+    precision highp float;
+    attribute vec2 position;
+    attribute vec2 uv;
+    varying vec2 vUv;
+    void main() {
+      vUv = uv;
+      gl_Position = vec4(position, 0.0, 1.0);
+    }
+`;
+const frag = /* glsl */ `
+    precision highp float;
+
+    uniform float iTime;
+    uniform vec3 iResolution;
+    uniform float hue;
+    uniform float hover;
+    uniform float rot;
+    uniform float hoverIntensity;
+    varying vec2 vUv;
+
+    vec3 rgb2yiq(vec3 c) {
+      float y = dot(c, vec3(0.299, 0.587, 0.114));
+      float i = dot(c, vec3(0.596, -0.274, -0.322));
+      float q = dot(c, vec3(0.211, -0.523, 0.312));
+      return vec3(y, i, q);
+    }
+
+    vec3 yiq2rgb(vec3 c) {
+      float r = c.x + 0.956 * c.y + 0.621 * c.z;
+      float g = c.x - 0.272 * c.y - 0.647 * c.z;
+      float b = c.x - 1.106 * c.y + 1.703 * c.z;
+      return vec3(r, g, b);
+    }
+
+    vec3 adjustHue(vec3 color, float hueDeg) {
+      float hueRad = hueDeg * 3.14159265 / 180.0;
+      vec3 yiq = rgb2yiq(color);
+      float cosA = cos(hueRad);
+      float sinA = sin(hueRad);
+      float i = yiq.y * cosA - yiq.z * sinA;
+      float q = yiq.y * sinA + yiq.z * cosA;
+      yiq.y = i;
+      yiq.z = q;
+      return yiq2rgb(yiq);
+    }
+
+    vec3 hash33(vec3 p3) {
+      p3 = fract(p3 * vec3(0.1031, 0.11369, 0.13787));
+      p3 += dot(p3, p3.yxz + 19.19);
+      return -1.0 + 2.0 * fract(vec3(
+        p3.x + p3.y,
+        p3.x + p3.z,
+        p3.y + p3.z
+      ) * p3.zyx);
+    }
+
+    float snoise3(vec3 p) {
+      const float K1 = 0.333333333;
+      const float K2 = 0.166666667;
+      vec3 i = floor(p + (p.x + p.y + p.z) * K1);
+      vec3 d0 = p - (i - (i.x + i.y + i.z) * K2);
+      vec3 e = step(vec3(0.0), d0 - d0.yzx);
+      vec3 i1 = e * (1.0 - e.zxy);
+      vec3 i2 = 1.0 - e.zxy * (1.0 - e);
+      vec3 d1 = d0 - (i1 - K2);
+      vec3 d2 = d0 - (i2 - K1);
+      vec3 d3 = d0 - 0.5;
+      vec4 h = max(0.6 - vec4(
+        dot(d0, d0),
+        dot(d1, d1),
+        dot(d2, d2),
+        dot(d3, d3)
+      ), 0.0);
+      vec4 n = h * h * h * h * vec4(
+        dot(d0, hash33(i)),
+        dot(d1, hash33(i + i1)),
+        dot(d2, hash33(i + i2)),
+        dot(d3, hash33(i + 1.0))
+      );
+      return dot(vec4(31.316), n);
+    }
+
+    vec4 extractAlpha(vec3 colorIn) {
+      float a = max(max(colorIn.r, colorIn.g), colorIn.b);
+      return vec4(colorIn.rgb / (a + 1e-5), a);
+    }
+
+    const vec3 baseColor1 = vec3(0.611765, 0.262745, 0.996078);
+    const vec3 baseColor2 = vec3(0.298039, 0.760784, 0.913725);
+    const vec3 baseColor3 = vec3(0.062745, 0.078431, 0.600000);
+    const float innerRadius = 0.6;
+    const float noiseScale = 0.65;
+
+    float light1(float intensity, float attenuation, float dist) {
+      return intensity / (1.0 + dist * attenuation);
+    }
+
+    float light2(float intensity, float attenuation, float dist) {
+      return intensity / (1.0 + dist * dist * attenuation);
+    }
+
+    vec4 draw(vec2 uv) {
+      vec3 color1 = adjustHue(baseColor1, hue);
+      vec3 color2 = adjustHue(baseColor2, hue);
+      vec3 color3 = adjustHue(baseColor3, hue);
+
+      float ang = atan(uv.y, uv.x);
+      float len = length(uv);
+      float invLen = len > 0.0 ? 1.0 / len : 0.0;
+
+      float n0 = snoise3(vec3(uv * noiseScale, iTime * 0.5)) * 0.5 + 0.5;
+      float r0 = mix(mix(innerRadius, 1.0, 0.4), mix(innerRadius, 1.0, 0.6), n0);
+      float d0 = distance(uv, (r0 * invLen) * uv);
+      float v0 = light1(1.0, 10.0, d0);
+      v0 *= smoothstep(r0 * 1.05, r0, len);
+      float cl = cos(ang + iTime * 2.0) * 0.5 + 0.5;
+
+      float a = iTime * -1.0;
+      vec2 pos = vec2(cos(a), sin(a)) * r0;
+      float d = distance(uv, pos);
+      float v1 = light2(1.5, 5.0, d);
+      v1 *= light1(1.0, 50.0, d0);
+
+      float v2 = smoothstep(1.0, mix(innerRadius, 1.0, n0 * 0.5), len);
+      float v3 = smoothstep(innerRadius, mix(innerRadius, 1.0, 0.5), len);
+
+      vec3 col = mix(color1, color2, cl);
+      col = mix(color3, col, v0);
+      col = (col + v1) * v2 * v3;
+      col = clamp(col, 0.0, 1.0);
+
+      return extractAlpha(col);
+    }
+
+    vec4 mainImage(vec2 fragCoord) {
+      vec2 center = iResolution.xy * 0.5;
+      float size = min(iResolution.x, iResolution.y);
+      vec2 uv = (fragCoord - center) / size * 2.0;
+
+      float angle = rot;
+      float s = sin(angle);
+      float c = cos(angle);
+      uv = vec2(c * uv.x - s * uv.y, s * uv.x + c * uv.y);
+
+      uv.x += hover * hoverIntensity * 0.1 * sin(uv.y * 10.0 + iTime);
+      uv.y += hover * hoverIntensity * 0.1 * sin(uv.x * 10.0 + iTime);
+
+      return draw(uv);
+    }
+
+    void main() {
+      vec2 fragCoord = vUv * iResolution.xy;
+      vec4 col = mainImage(fragCoord);
+      gl_FragColor = vec4(col.rgb * col.a, col.a);
+    }
+`;
+
+export const VoicePoweredOrb: FC<VoicePoweredOrbProps> = ({
+  className, hue = 0, animate = true, enableVoiceControl = true, voiceSensitivity = 1.5,
+  maxRotationSpeed = 1.2, maxHoverIntensity = 0.8, onVoiceDetected, analyserRef,
+}) => {
+  const containerRef = useRef<HTMLDivElement>(null)
+  const ownAnalyser = useRef<AnalyserNode | null>(null)
+  const config = useRef({ hue, animate, enableVoiceControl, voiceSensitivity, maxRotationSpeed, maxHoverIntensity, onVoiceDetected, analyserRef })
+  config.current = { hue, animate, enableVoiceControl, voiceSensitivity, maxRotationSpeed, maxHoverIntensity, onVoiceDetected, analyserRef }
+  const [fallback, setFallback] = useState(false)
+  const wakeRef = useRef<(() => void) | null>(null)
+  useEffect(() => { wakeRef.current?.() }, [hue, animate, enableVoiceControl, voiceSensitivity, maxRotationSpeed, maxHoverIntensity, onVoiceDetected, analyserRef])
+
+  // Standalone mode retains the supplied microphone behavior. Live calls supply
+  // their existing analyser, so this effect owns no call microphone resources.
+  useEffect(() => {
+    if (!enableVoiceControl || analyserRef) return
+    let disposed = false
+    let stream: MediaStream | null = null
+    let context: AudioContext | null = null
+    let source: MediaStreamAudioSourceNode | null = null
+    let analyser: AnalyserNode | null = null
+    const cleanup = () => {
+      source?.disconnect()
+      analyser?.disconnect()
+      if (ownAnalyser.current === analyser) ownAnalyser.current = null
+      stream?.getTracks().forEach(track => track.stop())
+      if (context && context.state !== 'closed') void context.close().catch(() => {})
+    }
+    void (async () => {
+      try {
+        stream = await navigator.mediaDevices.getUserMedia({ audio: {
+          echoCancellation: false, noiseSuppression: false, autoGainControl: false, sampleRate: 44100,
+        } })
+        if (disposed) { stream.getTracks().forEach(track => track.stop()); return }
+        const Ctx = window.AudioContext || (window as any).webkitAudioContext
+        context = new Ctx()
+        if (context.state === 'suspended') await context.resume()
+        if (disposed) { cleanup(); return }
+        analyser = context.createAnalyser()
+        analyser.fftSize = 512
+        analyser.smoothingTimeConstant = 0.3
+        analyser.minDecibels = -90
+        analyser.maxDecibels = -10
+        source = context.createMediaStreamSource(stream)
+        source.connect(analyser)
+        ownAnalyser.current = analyser
+      } catch {
+        cleanup()
+        if (!disposed) config.current.onVoiceDetected?.(false)
+      }
+    })()
+    return () => { disposed = true; cleanup() }
+  }, [enableVoiceControl, analyserRef])
+
+  useEffect(() => {
+    const container = containerRef.current
+    if (!container) return
+    let renderer: Renderer | undefined
+    let program: Program | undefined
+    let geometry: Triangle | undefined
+    let observer: ResizeObserver | undefined
+    let raf = 0
+    let disposed = false
+    let visible = true
+    let contextLost = false
+    let timer: ReturnType<typeof setTimeout> | undefined
+    let intersection: IntersectionObserver | undefined
+    let preferenceObserver: MutationObserver | undefined
+    let wake = () => {}
+    const onVisibility = () => wake()
+    initializeEffectVisibility()
+    const reduced = window.matchMedia('(prefers-reduced-motion: reduce)')
+    const cleanup = () => {
+      disposed = true
+      cancelAnimationFrame(raf)
+      clearTimeout(timer)
+      wakeRef.current = null
+      document.removeEventListener('visibilitychange', onVisibility)
+      reduced.removeEventListener('change', onVisibility)
+      intersection?.disconnect()
+      preferenceObserver?.disconnect()
+      observer?.disconnect()
+      if (renderer) {
+        geometry?.remove()
+        program?.remove()
+        renderer.gl.canvas.remove()
+        renderer.gl.getExtension('WEBGL_lose_context')?.loseContext()
+      }
+    }
+    try {
+      renderer = new Renderer({ alpha: true, premultipliedAlpha: false, antialias: true, dpr: Math.min(2, window.devicePixelRatio || 1) })
+      const gl = renderer.gl
+      gl.clearColor(0, 0, 0, 0)
+      gl.enable(gl.BLEND)
+      gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA)
+      container.appendChild(gl.canvas)
+      geometry = new Triangle(gl)
+      program = new Program(gl, {
+        vertex: vert, fragment: frag,
+        uniforms: {
+          iTime: { value: 0 }, iResolution: { value: new Vec3() },
+          hue: { value: config.current.hue }, hover: { value: 0 },
+          rot: { value: 0 }, hoverIntensity: { value: 0 },
+        },
+      })
+      if (!gl.getProgramParameter(program.program, gl.LINK_STATUS)) throw Error('Orb shader unavailable')
+      const mesh = new Mesh(gl, { geometry, program })
+      let lastImage = ''
+      const resize = () => {
+        if (contextLost || disposed || !container.clientWidth || !container.clientHeight) return
+        const dpr = Math.min(2, window.devicePixelRatio || 1)
+        if (gl.canvas.width === Math.floor(container.clientWidth * dpr) && gl.canvas.height === Math.floor(container.clientHeight * dpr)) return
+        lastImage = ''
+        renderer!.dpr = dpr
+        // OGL applies dpr internally; passing scaled sizes applies it twice.
+        renderer!.setSize(container.clientWidth, container.clientHeight)
+        program!.uniforms.iResolution.value.set(gl.canvas.width, gl.canvas.height, gl.canvas.width / gl.canvas.height)
+        // Resizing clears the buffer; repaint visible graphics and invalidate
+        // hidden graphics so the next visibility wake paints them again.
+        if (!document.hidden && visible && !contextLost) renderer!.render({ scene: mesh })
+        wake()
+      }
+      observer = new ResizeObserver(resize)
+      observer.observe(container)
+      resize()
+      let lastTime = 0, currentRot = 0, detected = false, animationTime = 0
+      let buffer: Uint8Array<ArrayBuffer> | null = null
+      const update = (time: number) => {
+        raf = 0
+        timer = undefined
+        if (disposed || contextLost || document.hidden || !visible) { lastTime = 0; return }
+        const still = !config.current.animate || reduced.matches || document.documentElement.getAttribute('data-reduced-effects') === 'true'
+        const c = config.current
+        const dt = lastTime ? Math.min(0.05, Math.max(0, (time - lastTime) * 0.001)) : 0
+        lastTime = time
+        let voiceLevel = 0
+        const analyser = c.analyserRef?.current ?? ownAnalyser.current
+        if (c.enableVoiceControl && analyser) {
+          if (buffer?.length !== analyser.frequencyBinCount) buffer = new Uint8Array(analyser.frequencyBinCount)
+          analyser.getByteFrequencyData(buffer!)
+          let sum = 0
+          for (let i = 0; i < buffer!.length; i++) sum += (buffer![i] / 255) ** 2
+          voiceLevel = Math.min(Math.sqrt(sum / (buffer!.length || 1)) * c.voiceSensitivity * 3.0, 1)
+        }
+        const nextDetected = voiceLevel > 0.1
+        if (nextDetected !== detected) { detected = nextDetected; c.onVoiceDetected?.(detected) }
+        if (!still && voiceLevel > 0.05) currentRot += dt * (0.3 + voiceLevel * c.maxRotationSpeed * 2.0)
+        if (!still) animationTime += dt
+        program!.uniforms.iTime.value = still ? 0 : animationTime
+        program!.uniforms.hue.value = c.hue
+        program!.uniforms.rot.value = still ? 0 : currentRot
+        program!.uniforms.hover.value = still ? 0 : Math.min(voiceLevel * 2.0, 1)
+        program!.uniforms.hoverIntensity.value = still ? 0 : Math.min(voiceLevel * c.maxHoverIntensity * 0.8, c.maxHoverIntensity)
+        const image = [animationTime && !still ? animationTime : 0, c.hue, program!.uniforms.rot.value,
+          program!.uniforms.hover.value, program!.uniforms.hoverIntensity.value, gl.canvas.width, gl.canvas.height].join(':')
+        if (image !== lastImage) { renderer!.render({ scene: mesh }); lastImage = image }
+        if (!still) raf = requestAnimationFrame(update)
+        // Preserve voice callbacks without submitting identical GPU frames.
+        else if (c.enableVoiceControl && c.onVoiceDetected) timer = setTimeout(() => update(performance.now()), 100)
+      }
+      wake = () => {
+        cancelAnimationFrame(raf)
+        clearTimeout(timer)
+        raf = 0
+        timer = undefined
+        lastTime = 0
+        if (!disposed && !contextLost && visible && !document.hidden) raf = requestAnimationFrame(update)
+      }
+      wakeRef.current = wake
+      document.addEventListener('visibilitychange', onVisibility)
+      reduced.addEventListener('change', onVisibility)
+      preferenceObserver = new MutationObserver(wake)
+      preferenceObserver.observe(document.documentElement, { attributes: true, attributeFilter: ['data-reduced-effects'] })
+      intersection = new IntersectionObserver(entries => { visible = entries[0]?.isIntersecting ?? false; wake() })
+      intersection.observe(container)
+      wake()
+      gl.canvas.addEventListener('webglcontextlost', () => {
+        if (!disposed) { contextLost = true; cancelAnimationFrame(raf); clearTimeout(timer); setFallback(true) }
+      }, { once: true })
+      return cleanup
+    } catch (error) {
+      cleanup()
+      setFallback(true)
+      console.warn('Voice orb graphics unavailable', error)
+      return cleanup
+    }
+  }, [])
+
+  return <div ref={containerRef} className={cn('w-full h-full relative voice-powered-orb', className)} data-fallback={fallback || undefined} aria-hidden="true">
+    {fallback && <span className="voice-powered-orb__fallback" />}
+  </div>
+}

package/src/renderer/shared/components/workspace-selector.css

@@ -0,0 +1,248 @@
+.workspace-selector {
+  position: relative;
+  display: flex;
+  min-width: 0;
+  max-width: 56%;
+  flex: 0 1 auto;
+}
+
+.workspace-selector.needs-workspace {
+  max-width: 100%;
+}
+
+.workspace-select-btn {
+  min-width: 0;
+  min-height: 32px;
+  margin: 0;
+  padding: 0 10px;
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  color: var(--text-primary);
+  background: var(--surface-strong);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-md);
+  text-align: left;
+  cursor: pointer;
+  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
+}
+
+.workspace-select-btn:hover {
+  background: var(--bg-surface-hover);
+  border-color: var(--border);
+}
+
+.workspace-select-btn:focus-visible {
+  position: relative;
+  z-index: 2;
+  outline: 2px solid var(--border-focus, var(--accent));
+  outline-offset: -2px;
+}
+
+.workspace-select-btn.needs-workspace {
+  max-width: 100%;
+}
+
+.workspace-select-icon {
+  width: 16px;
+  height: 16px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 16px;
+  color: var(--interactive-fg);
+}
+
+.workspace-select-copy {
+  min-width: 0;
+  display: flex;
+  flex: 0 1 auto;
+  align-items: baseline;
+  gap: 6px;
+}
+
+.workspace-select-name {
+  overflow: hidden;
+  color: var(--text-primary);
+  font-size: 0.78rem;
+  font-weight: 500;
+  line-height: 1.2;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.workspace-select-chevron {
+  flex: 0 0 auto;
+  color: var(--text-muted);
+  transition: transform 120ms ease;
+}
+
+.workspace-select-btn:hover .workspace-select-chevron {
+  color: var(--text-primary);
+}
+
+.workspace-select-menu {
+  position: absolute;
+  z-index: 80;
+  left: 0;
+  bottom: calc(100% + 6px);
+  width: min(360px, calc(100vw - 32px));
+  max-height: min(420px, 65vh);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  color: var(--text-primary);
+  background: var(--bg-overlay);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-md);
+}
+
+.workspace-select-search {
+  min-height: 40px;
+  padding: 0 12px;
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  color: var(--text-muted);
+  border-bottom: 1px solid var(--border-subtle);
+}
+
+.workspace-select-search:focus-within {
+  color: var(--interactive-fg);
+}
+
+.workspace-select-search input {
+  min-width: 0;
+  width: 100%;
+  padding: 0;
+  color: var(--text-primary);
+  background: transparent;
+  border: 0;
+  outline: none;
+  font: inherit;
+  font-size: 0.8rem;
+}
+
+.workspace-select-search input::placeholder {
+  color: var(--text-muted);
+}
+
+.workspace-select-list {
+  min-height: 0;
+  padding: 4px;
+  overflow-y: auto;
+  scrollbar-width: thin;
+}
+
+.workspace-select-option {
+  width: 100%;
+  min-width: 0;
+  padding: 8px 9px;
+  display: grid;
+  grid-template-columns: 16px minmax(0, 1fr) 16px;
+  align-items: center;
+  gap: 9px;
+  color: var(--text-secondary);
+  text-align: left;
+  background: transparent;
+  border: 0;
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+}
+
+.workspace-select-option:hover,
+.workspace-select-option:focus-visible,
+.workspace-select-option[aria-current="true"] {
+  color: var(--text-primary);
+  background: var(--bg-surface-hover);
+  outline: none;
+}
+
+.workspace-select-option-icon {
+  color: var(--text-muted);
+}
+
+.workspace-select-option-copy {
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.workspace-select-option-name,
+.workspace-select-option-path {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.workspace-select-option-name {
+  color: inherit;
+  font-size: 0.8rem;
+  line-height: 1.25;
+}
+
+.workspace-select-option-path {
+  color: var(--text-muted);
+  font-size: 0.66rem;
+  line-height: 1.2;
+}
+
+.workspace-select-current {
+  color: var(--interactive-fg);
+}
+
+.workspace-select-empty {
+  padding: 18px 12px;
+  color: var(--text-muted);
+  font-size: 0.76rem;
+  text-align: center;
+}
+
+.workspace-select-menu-footer {
+  padding: 4px;
+  border-top: 1px solid var(--border-subtle);
+}
+
+.workspace-select-open-folder {
+  width: 100%;
+  min-height: 34px;
+  padding: 0 9px;
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  color: var(--text-secondary);
+  text-align: left;
+  background: transparent;
+  border: 0;
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  font: inherit;
+  font-size: 0.78rem;
+}
+
+.workspace-select-open-folder:hover,
+.workspace-select-open-folder:focus-visible {
+  color: var(--text-primary);
+  background: var(--bg-surface-hover);
+  outline: none;
+}
+
+
+.workspace-selector.opens-below .workspace-select-menu {
+  top: calc(100% + 6px);
+  bottom: auto;
+}
+
+@media (max-width: 640px) {
+  .workspace-selector { max-width: 54%; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .workspace-select-btn, .workspace-select-chevron { transition: none; }
+}
+
+@media (forced-colors: active) {
+  .workspace-select-btn, .workspace-select-menu, .workspace-select-search { border-color: CanvasText; }
+}