@pheem49/mint 1.15.0 → 1.17.0

package/src/renderer/src/components/liveTranslateFrames.test.ts

@@ -1,23 +1,44 @@
 import { describe, expect, it } from 'vitest'
-import { hasMeaningfulFrameChange } from './liveTranslateFrames'
+import { createFrameChangeTracker } from './liveTranslateFrames'
 
 describe('live translation change detection', () => {
   const frame = () => new Uint8ClampedArray(160 * 90).fill(110)
 
   it('translates the first frame and skips identical frames', () => {
+    const changed = createFrameChangeTracker()
     const first = frame()
-    expect(hasMeaningfulFrameChange(null, first)).toBe(true)
-    expect(hasMeaningfulFrameChange(first, frame())).toBe(false)
+    expect(changed(first)).toBe(true)
+    expect(changed(frame())).toBe(false)
   })
 
   it('ignores a blinking caret but reacts to a changed line', () => {
+    const changed = createFrameChangeTracker()
     const first = frame()
+    expect(changed(first)).toBe(true)
     const caret = frame()
     caret.fill(220, 500, 508)
-    expect(hasMeaningfulFrameChange(first, caret)).toBe(false)
+    expect(changed(caret)).toBe(false)
 
     const changedLine = frame()
     changedLine.fill(220, 500, 530)
-    expect(hasMeaningfulFrameChange(first, changedLine)).toBe(true)
+    expect(changed(changedLine)).toBe(true)
+  })
+
+  it('ignores a moving game background while detecting a new subtitle', () => {
+    const changed = createFrameChangeTracker()
+    const first = frame()
+    expect(changed(first)).toBe(true)
+
+    const moving = frame()
+    moving.fill(180, 0, 4000)
+    expect(changed(moving)).toBe(true)
+
+    const movingAgain = frame()
+    expect(changed(movingAgain)).toBe(false)
+
+    const newSubtitle = frame()
+    newSubtitle.fill(220, 5000, 5080)
+    newSubtitle.fill(180, 0, 4000)
+    expect(changed(newSubtitle)).toBe(true)
   })
 })

package/src/renderer/src/components/liveTranslateFrames.ts

@@ -23,12 +23,23 @@ export async function sampleFrame(dataUri: string): Promise<Uint8ClampedArray> {
   return gray
 }
 
-/** Ignore compression noise and a blinking caret, but catch changed words or lines. */
-export function hasMeaningfulFrameChange(previous: Uint8ClampedArray | null, current: Uint8ClampedArray): boolean {
-  if (!previous || previous.length !== current.length) return true
-  let changed = 0
-  for (let pixel = 0; pixel < current.length; pixel += 1) {
-    if (Math.abs(current[pixel] - previous[pixel]) >= 28) changed += 1
+/** Ignore pixels that keep moving between captures, such as a game scene behind stable subtitles. */
+export function createFrameChangeTracker(): (current: Uint8ClampedArray) => boolean {
+  let previous: Uint8ClampedArray | null = null
+  let motion: Uint8Array | null = null
+  return (current) => {
+    if (!previous || previous.length !== current.length) {
+      previous = current
+      motion = new Uint8Array(current.length)
+      return true
+    }
+    let stableChanges = 0
+    for (let pixel = 0; pixel < current.length; pixel += 1) {
+      const changed = Math.abs(current[pixel] - previous[pixel]) >= 28
+      if (changed && motion![pixel] === 0) stableChanges += 1
+      motion![pixel] = changed ? Math.min(2, motion![pixel] + 1) : Math.max(0, motion![pixel] - 1)
+    }
+    previous = current
+    return stableChanges >= Math.max(20, Math.ceil(current.length * 0.0015))
   }
-  return changed >= Math.max(20, Math.ceil(current.length * 0.0015))
 }

package/src/renderer/src/components/liveTranslateLanguage.ts

@@ -0,0 +1,6 @@
+export const LANGUAGE_KEY = 'mint:live-translate-language'
+
+export const LANGUAGES = [
+  'Thai', 'English', 'Japanese', 'Chinese', 'Korean', 'Spanish', 'French',
+  'German', 'Portuguese', 'Vietnamese', 'Indonesian', 'Arabic', 'Hindi',
+]

package/src/renderer/src/css/app-shell.css

@@ -1,80 +1,5 @@
 /* desktop: app-shell.css — split from styles.css, rules kept in original order */
-
-:root {
-  --status-listening: #7dd3fc;
-  --status-thinking: var(--accent);
-  --status-speaking: #22c55e;
-  --status-error: #ef4444;
-  --hover-delete: #fca5a5;
-  --hover-delete-bg: rgba(248, 113, 113, 0.12);
-  --hover-edit: #c7d2fe;
-  --hover-edit-bg: rgba(99, 102, 241, 0.12);
-  --close-btn-hover-bg: #3a2020;
-  --close-btn-hover-color: #ff8a8a;
-
-  /* Radius scale — same across all themes. Values are the dominant sizes
-     already in use across the app; stray one-off values (5px, 7px, 9px,
-     11px, 14px, 18px, 24px, 99px, 9999px, ...) were consolidated onto the
-     nearest step here so cards/buttons/panels of the same visual weight
-     share the same corner radius. Sub-4px radii are left as raw px values
-     where they appear — those are deliberate micro-details (e.g. a small
-     square-ish status dot), not part of this scale. */
-  --radius-xs: 6px;
-  --radius-sm: 8px;
-  --radius-md: 12px;
-  --radius-lg: 14px;
-  --radius-xl: 16px;
-  --radius-2xl: 20px;
-  --radius-3xl: 24px;
-  --radius-full: 999px;
-
-  /* Elevation scale — border-first: most resting surfaces lean on --border
-     (or --border-light) for their edge and don't need a shadow at all
-     (--shadow itself is `none` in dark mode). These tokens are for the
-     minority of cases that do want a lift — a toolbar raised above
-     scrolling content, a dropdown, a modal — consolidated from a long tail
-     of one-off rgba(0,0,0,N) values that varied in blur/opacity for no
-     reason tied to their actual elevation. --glow-accent-* replaces
-     one-off `color-mix(in srgb, var(--accent) NN%, transparent)` shadows
-     used for accent-tinted hover/active glows (buttons, chips) — capped
-     around ~28% so the glow reads as an accent, not a flash. Reserve
-     --shadow-lg for real modals/dialogs; @keyframes pulse/breathe rings
-     (status/recording/voice-active indicators) are a different thing —
-     motion communicating state, not elevation — and are left alone. */
-  --shadow-xs: 0 2px 8px rgba(0, 0, 0, 0.12);
-  --shadow-sm: 0 4px 14px rgba(0, 0, 0, 0.16);
-  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.22);
-  --shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.5);
-  --glow-accent-xs: 0 2px 8px color-mix(in srgb, var(--accent) 15%, transparent);
-  --glow-accent-sm: 0 4px 14px color-mix(in srgb, var(--accent) 22%, transparent);
-  --glow-accent-md: 0 6px 18px color-mix(in srgb, var(--accent) 28%, transparent);
-}
-
-[data-theme="light"] {
-  --status-listening: #0284c7;
-  --status-thinking: var(--accent);
-  --status-speaking: #16a34a;
-  --status-error: #dc2626;
-  --hover-delete: #dc2626;
-  --hover-delete-bg: rgba(220, 38, 38, 0.08);
-  --hover-edit: #4f46e5;
-  --hover-edit-bg: rgba(79, 70, 229, 0.08);
-  --close-btn-hover-bg: #fee2e2;
-  --close-btn-hover-color: #dc2626;
-}
-
-[data-theme="midnight"] {
-  --status-listening: #7dd3fc;
-  --status-thinking: var(--accent);
-  --status-speaking: #22c55e;
-  --status-error: #fca5a5;
-  --hover-delete: #fca5a5;
-  --hover-delete-bg: rgba(248, 113, 113, 0.12);
-  --hover-edit: #c7d2fe;
-  --hover-edit-bg: rgba(99, 102, 241, 0.12);
-  --close-btn-hover-bg: #3a2020;
-  --close-btn-hover-color: #ff8a8a;
-}
+/* Global status, radius, and shadow tokens are centrally defined in shared/theme/tokens.css */
 
 * {
   box-sizing: border-box;
@@ -83,7 +8,7 @@
 }
 
 body {
-  font-family: 'Prompt', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  font-family: var(--font-ui, 'Inter', 'Noto Sans Thai', ui-sans-serif, system-ui, sans-serif);
   background: transparent;
   color: var(--text-main);
   height: 100vh;
@@ -277,19 +202,10 @@ h1 {
   transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
-.assistant-workspace.model-hidden {
+.assistant-workspace.chat-only {
   padding: 22px 120px;
 }
 
-.assistant-workspace.model-hidden .model-stage {
-  flex: 0 0 0;
-  min-width: 0;
-  opacity: 0;
-  pointer-events: none;
-  transform: scale(0.9);
-  margin-right: -22px;
-}
-
 .loader-dots {
   display: flex;
   gap: 6px;
@@ -320,35 +236,27 @@ h1 {
 
 .settings-modal-overlay {
   position: fixed;
-  inset: 0;
+  top: 38px;
+  left: 0;
+  right: 0;
+  bottom: 0;
   display: flex;
   align-items: center;
   justify-content: center;
-  background: rgba(0,0,0,0.45);
+  background: var(--bg-backdrop, rgba(0,0,0,0.45));
   backdrop-filter: blur(18px);
   -webkit-backdrop-filter: blur(18px);
-  z-index: 80;
+  z-index: 1000;
   padding: 24px;
 }
 
 .settings-modal {
   width: min(1180px, 95vw);
-  height: min(780px, 88vh);
+  height: min(780px, calc(100vh - 38px - 48px));
+  max-height: calc(100vh - 38px - 48px);
   overflow: hidden;
   border-radius: var(--radius-xl);
-  box-shadow: 0 30px 80px rgba(0,0,0,0.6);
-}
-
-[data-theme="light"] .settings-modal-overlay {
-  background: rgba(15, 23, 42, 0.42);
-  backdrop-filter: blur(14px);
-  -webkit-backdrop-filter: blur(14px);
-}
-
-[data-theme="light"] .settings-modal {
-  background: #ffffff;
-  border: 1px solid rgba(15, 23, 42, 0.12);
-  box-shadow: 0 25px 60px -15px rgba(15, 23, 42, 0.25), 0 0 0 1px rgba(15, 23, 42, 0.08);
+  box-shadow: var(--shadow-lg);
 }
 
 @keyframes modelFloat {
@@ -362,7 +270,7 @@ h1 {
   }
 }
 
-.assistant-workspace.model-hidden .conversation-panel {
+.assistant-workspace.chat-only .conversation-panel {
   flex: 1;
   max-width: 1100px;
   margin: 0 auto;
@@ -399,23 +307,6 @@ h1 {
   }
 }
 
-@keyframes pulse-mic {
-  0% {
-    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4);
-    transform: scale(1);
-  }
-
-  50% {
-    box-shadow: 0 0 0 6px rgba(239, 68, 68, 0);
-    transform: scale(1.05);
-  }
-
-  100% {
-    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
-    transform: scale(1);
-  }
-}
-
 @keyframes agent-activity-slide-up-fade {
   from {
     opacity: 0;
@@ -639,8 +530,6 @@ h1 {
 .app-body.sidebar-collapsed .sidebar-account-logout {
   display: none;
 }
-
-.app-body.sidebar-collapsed .sidebar-model-controls,
 .app-body.sidebar-collapsed .sidebar-bottom-actions {
   justify-items: center;
 }
@@ -673,36 +562,28 @@ h1 {
               transform 0.22s ease;
 }
 
-.assistant-workspace.layout-chat-wide {
-  grid-template-columns: minmax(280px, 0.72fr) minmax(460px, 1.18fr);
+/* Workspace is a two-pane working view: files on the left, conversation on
+   the right. The file tree and conversation share the workspace. */
+.assistant-workspace.workspace-open {
+  grid-template-columns: var(--workspace-panel-width, 400px) minmax(0, 1fr);
 }
 
-.assistant-workspace.layout-model-wide {
-  grid-template-columns: minmax(420px, 1.18fr) minmax(360px, 0.72fr);
-}
+.assistant-workspace.workspace-open.is-workspace-resizing { transition: none; }
 
-/* Workspace is a two-pane working view: files on the left, conversation on
-   the right. The Live2D stage is intentionally replaced by the file tree. */
-.assistant-workspace.workspace-open {
-  grid-template-columns: minmax(360px, 0.6fr) minmax(460px, 1.4fr);
+.assistant-workspace.workspace-open[data-workspace-stacked="true"] {
+  grid-template-columns: minmax(0, 1fr);
+  grid-template-rows: minmax(0, 0.4fr) minmax(0, 0.6fr);
+  gap: 0;
 }
 
-.assistant-workspace.workspace-open .workspace-panel {
+.assistant-workspace.workspace-open[data-workspace-stacked="true"] .chat-panel-split-wrapper {
   grid-column: 1;
-  grid-row: 1;
+  grid-row: 2;
 }
 
-.assistant-workspace.workspace-open .model-stage {
-  grid-column: 2;
+.assistant-workspace.workspace-open .workspace-panel {
+  grid-column: 1;
   grid-row: 1;
-  opacity: 0;
-  visibility: hidden;
-  pointer-events: none;
-  transform: translateX(-20px) scale(0.985);
-  transition: opacity 0.3s ease,
-              transform 0.48s cubic-bezier(0.16, 1, 0.3, 1),
-              padding 0.48s cubic-bezier(0.16, 1, 0.3, 1),
-              visibility 0s linear 0.48s;
 }
 
 .assistant-workspace.workspace-open .chat-panel-split-wrapper {
@@ -718,9 +599,6 @@ h1 {
     transition: none;
   }
 
-  .assistant-workspace.workspace-open .model-stage {
-    transition: none;
-  }
 }
 
 .assistant-workspace.workspace-open .message {
@@ -753,16 +631,16 @@ h1 {
   }
 }
 
-.assistant-workspace.model-hidden {
+.assistant-workspace.chat-only {
   grid-template-columns: minmax(0, 0fr) minmax(0, 1fr);
   gap: 0;
   padding: 0;
   position: relative;
 }
 
-/* Background glows when model is hidden */
+/* Background glows behind chat */
 
-.assistant-workspace.model-hidden::before {
+.assistant-workspace.chat-only::before {
   content: '';
   position: absolute;
   top: 15%;
@@ -776,7 +654,7 @@ h1 {
   animation: floatGlowOne 25s infinite alternate ease-in-out;
 }
 
-.assistant-workspace.model-hidden::after {
+.assistant-workspace.chat-only::after {
   content: '';
   position: absolute;
   bottom: 15%;
@@ -800,19 +678,22 @@ h1 {
   100% { transform: translate(-60px, -70px) scale(0.9); }
 }
 
-[data-theme="light"] .suggestion-card:hover {
-  background: rgba(143, 108, 245, 0.05);
+/* Studio Dark: Pure solid neutral canvas without colored decorative background glows */
+[data-theme="studio"] .assistant-workspace.chat-only::before,
+[data-theme="studio"] .assistant-workspace.chat-only::after {
+  display: none !important;
 }
 
-.assistant-workspace.model-hidden .model-stage {
-  opacity: 0;
-  pointer-events: none;
-  transform: translateX(-28px) scale(0.985);
-  padding-left: 0;
-  margin-right: 0;
+[data-theme="studio"] .assistant-workspace,
+[data-theme="studio"] .app-body {
+  background: var(--bg-canvas, #101010) !important;
+}
+
+[data-theme="light"] .suggestion-card:hover {
+  background: rgba(143, 108, 245, 0.05);
 }
 
-.assistant-workspace.model-hidden .conversation-panel {
+.assistant-workspace.chat-only .conversation-panel {
   position: relative;
   display: grid;
   grid-template-rows: auto minmax(0, 1fr) auto auto;
@@ -843,12 +724,12 @@ h1 {
   align-self: stretch;
 }
 
-.assistant-workspace.model-hidden .chat-panel-split-wrapper.no-preview {
+.assistant-workspace.chat-only .chat-panel-split-wrapper.no-preview {
   grid-column: 1 / -1;
   grid-row: 1;
 }
 
-.assistant-workspace.model-hidden .chat-panel-split-wrapper.no-preview .conversation-panel {
+.assistant-workspace.chat-only .chat-panel-split-wrapper.no-preview .conversation-panel {
   height: auto;
   min-height: 0;
   align-self: stretch;
@@ -860,7 +741,7 @@ h1 {
     justify-self: center;
   }
 
-  .assistant-workspace.model-hidden .chat-panel-split-wrapper.no-preview {
+  .assistant-workspace.chat-only .chat-panel-split-wrapper.no-preview {
     position: absolute;
     top: 0;
     bottom: 0;
@@ -974,16 +855,16 @@ h1 {
   pointer-events: auto !important;
 }
 
-.assistant-workspace.model-hidden .chat-container {
+.assistant-workspace.chat-only .chat-container {
   padding: 0 8px 18px;
   overflow-y: auto;
 }
 
-.assistant-workspace.model-hidden .input-area {
+.assistant-workspace.chat-only .input-area {
   width: 100%;
 }
 
-.assistant-workspace.model-hidden .conversation-panel.is-empty {
+.assistant-workspace.chat-only .conversation-panel.is-empty {
   grid-template-rows: auto minmax(0, 1fr) auto;
   align-content: stretch;
   justify-content: stretch;
@@ -993,18 +874,18 @@ h1 {
   padding-bottom: 8px;
 }
 
-.assistant-workspace.model-hidden .conversation-panel.is-empty .chat-header {
+.assistant-workspace.chat-only .conversation-panel.is-empty .chat-header {
   grid-row: 1;
   align-self: start;
 }
 
-.assistant-workspace.model-hidden .conversation-panel.is-empty .input-area {
+.assistant-workspace.chat-only .conversation-panel.is-empty .input-area {
   grid-row: 2;
   align-self: center;
   margin: 0;
 }
 
-.assistant-workspace.model-hidden .conversation-panel.is-empty .input-disclaimer {
+.assistant-workspace.chat-only .conversation-panel.is-empty .input-disclaimer {
   grid-row: 3;
 }
 
@@ -1042,19 +923,26 @@ h1 {
   .assistant-workspace:not(.workspace-open) .conversation-panel.is-empty .input-area {
     position: absolute;
     top: auto;
-    bottom: 44px;
+    bottom: 16px;
     left: 50%;
     width: min(840px, calc(100% - 64px));
     margin: 0;
     transform: translateX(-50%);
   }
 
-  .assistant-workspace:not(.workspace-open) .conversation-panel.is-empty .input-disclaimer {
+  .assistant-workspace.workspace-open .conversation-panel.is-empty {
+    position: relative;
+  }
+
+  .assistant-workspace.workspace-open .conversation-panel.is-empty .input-area {
     position: absolute;
-    right: 32px;
-    bottom: 8px;
-    left: 32px;
+    top: auto;
+    right: 0;
+    bottom: 16px;
+    left: 0;
+    width: auto;
     margin: 0;
+    transform: none;
   }
 }
 
@@ -1069,22 +957,6 @@ h1 {
   }
 }
 
-.assistant-workspace.layout-horizontal {
-  grid-template-columns: 1fr;
-  grid-template-rows: minmax(0, 1.1fr) minmax(0, 0.9fr);
-  gap: 12px;
-}
-
-.assistant-workspace.layout-horizontal .model-stage {
-  min-width: 0;
-  max-width: 100%;
-}
-
-.assistant-workspace.layout-horizontal .conversation-panel {
-  min-width: 0;
-  max-width: 100%;
-}
-
 @media (max-width: 760px) {
 
   .header-content h1 {
@@ -1155,17 +1027,6 @@ h1 {
   box-shadow: 0 0 8px currentColor;
 }
 
-@keyframes pulseRed {
-  from {
-    transform: scale(1);
-    box-shadow: 0 0 8px rgba(239, 68, 68, 0.3);
-  }
-  to {
-    transform: scale(1.1);
-    box-shadow: 0 0 16px rgba(239, 68, 68, 0.6);
-  }
-}
-
 @keyframes pulseGlow {
   0% {
     box-shadow: 0 0 10px rgba(143, 108, 245, 0.2), inset 0 0 10px rgba(143, 108, 245, 0.1);
@@ -1180,8 +1041,8 @@ h1 {
 /* Mobile Media Query Enhancements */
 
 @media (max-width: 760px) {
-  .assistant-workspace.model-hidden .conversation-panel,
-  .assistant-workspace.model-hidden .conversation-panel.is-empty {
+  .assistant-workspace.chat-only .conversation-panel,
+  .assistant-workspace.chat-only .conversation-panel.is-empty {
     display: flex;
     flex-direction: column;
     width: 100%;
@@ -1192,22 +1053,22 @@ h1 {
     grid-column: auto;
   }
 
-  .assistant-workspace.model-hidden .chat-header {
+  .assistant-workspace.chat-only .chat-header {
     display: flex;
     flex-shrink: 0;
   }
-  .assistant-workspace.model-hidden .chat-container {
+  .assistant-workspace.chat-only .chat-container {
     flex: 1;
     overflow-y: auto;
     padding: 64px 12px 8px;
   }
 
-  .assistant-workspace.model-hidden .input-area {
+  .assistant-workspace.chat-only .input-area {
     width: 100%;
     flex-shrink: 0;
   }
 
-  .assistant-workspace.model-hidden .conversation-panel.is-empty .input-area {
+  .assistant-workspace.chat-only .conversation-panel.is-empty .input-area {
     margin: auto 0;
   }
 }
@@ -1412,32 +1273,6 @@ h1 {
   -ms-user-select: text !important;
 }
 
-/* Breathing voice-active aura glow */
-
-@keyframes aura-breathe-form {
-  0% {
-    box-shadow: 0 4px 15px color-mix(in srgb, var(--accent) 22%, transparent);
-  }
-  50% {
-    box-shadow: 0 4px 25px color-mix(in srgb, var(--accent) 42%, transparent);
-  }
-  100% {
-    box-shadow: 0 4px 15px color-mix(in srgb, var(--accent) 22%, transparent);
-  }
-}
-
-@keyframes aura-breathe-bar {
-  0% {
-    box-shadow: 0 -4px 15px color-mix(in srgb, var(--accent) 22%, transparent);
-  }
-  50% {
-    box-shadow: 0 -4px 25px color-mix(in srgb, var(--accent) 42%, transparent);
-  }
-  100% {
-    box-shadow: 0 -4px 15px color-mix(in srgb, var(--accent) 22%, transparent);
-  }
-}
-
 /* Rewind Floating Toast Banner */
 .rewind-toast-banner {
   position: absolute;