@pheem49/mint 1.16.0 → 1.17.0

package/src/renderer/src-web/components/VeoStudioPanel.tsx

@@ -1,3 +1,3 @@
 // Re-export from the shared module — do NOT add logic here.
 // Edit src/renderer/shared/components/VeoStudioPanel.tsx instead.
-export { default } from '../../shared/components/VeoStudioPanel'
+export { default } from '../../shared/components/studio/VeoStudioPanel'

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

@@ -1,80 +1,5 @@
 /* web: 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;
@@ -315,7 +240,7 @@ h1 {
   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: 1000;
@@ -327,19 +252,7 @@ h1 {
   height: min(780px, 88vh);
   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 {
@@ -722,6 +635,17 @@ h1 {
   100% { transform: translate(-60px, -70px) scale(0.9); }
 }
 
+/* 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;
+}
+
+[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);
 }
@@ -947,7 +871,7 @@ h1 {
   .assistant-workspace .conversation-panel.is-empty .input-area {
     position: absolute;
     top: auto;
-    bottom: 44px;
+    bottom: 16px;
     left: 50%;
     width: min(840px, calc(100% - 64px));
     margin: 0;
@@ -955,17 +879,9 @@ h1 {
   }
 
   .assistant-workspace .conversation-panel.is-empty .empty-chat-prompt {
-    top: calc(100% + 44px - 50vh);
+    top: calc(100% + 16px - 50vh);
     transform: translateY(-50%);
   }
-
-  .assistant-workspace .conversation-panel.is-empty .input-disclaimer {
-    position: absolute;
-    right: 32px;
-    bottom: 8px;
-    left: 32px;
-    margin: 0;
-  }
 }
 
 @keyframes toolMenuPopIn {

package/src/renderer/src-web/css/chat.css

@@ -170,6 +170,34 @@
   color: var(--text-primary);
 }
 
+.provider-chip-logo {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 13px;
+  height: 13px;
+  flex-shrink: 0;
+  vertical-align: middle;
+}
+
+.provider-chip-logo img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  display: block;
+}
+
+.provider-chip-logo.is-monochrome {
+  background-color: var(--provider-brand-color, currentColor);
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  -webkit-mask-size: contain;
+  mask-size: contain;
+  -webkit-mask-position: center;
+  mask-position: center;
+  display: inline-block;
+}
+
 .provider-chip-dot {
   width: 6px;
   height: 6px;
@@ -650,16 +678,16 @@
 
 #chat-tool-btn,
 #screen-capture-btn {
-  background: transparent;
-  color: var(--text-muted);
-  border: 1px solid var(--border);
+  background: var(--btn-gray-bg, transparent);
+  color: var(--btn-gray-fg, var(--text-muted));
+  border: 1px solid var(--btn-gray-border, var(--border));
 }
 
 #chat-tool-btn:hover,
 #screen-capture-btn:hover {
-  background: color-mix(in srgb, var(--accent) 15%, transparent);
-  color: var(--interactive-fg);
-  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
+  background: var(--btn-gray-bg-hover, color-mix(in srgb, var(--accent) 15%, transparent));
+  color: var(--interactive-fg, #ffffff);
+  border-color: var(--accent-border, color-mix(in srgb, var(--accent) 40%, transparent));
 }
 
 .action-card {
@@ -1286,31 +1314,31 @@
 }
 
 .agent-activity-status[data-state="done"] {
-  border-color: rgba(16, 185, 129, 0.35);
-  color: #34d399;
-  background: rgba(16, 185, 129, 0.08);
+  border-color: var(--status-success-border);
+  color: var(--status-success-fg);
+  background: var(--status-success-bg);
 }
 
 .agent-activity-status[data-state="done"]::before {
-  background: #34d399;
-  box-shadow: 0 0 6px #34d399;
+  background: var(--status-success-fg);
+  box-shadow: 0 0 6px var(--status-success-fg);
 }
 
 .agent-activity-status[data-state="error"] {
-  border-color: rgba(239, 68, 68, 0.35);
-  color: #f87171;
-  background: rgba(239, 68, 68, 0.08);
+  border-color: var(--status-error-border);
+  color: var(--status-error-fg);
+  background: var(--status-error-bg);
 }
 
 .agent-activity-status[data-state="error"]::before {
-  background: #f87171;
-  box-shadow: 0 0 6px #f87171;
+  background: var(--status-error-fg);
+  box-shadow: 0 0 6px var(--status-error-fg);
 }
 
 .agent-activity-status[data-state="cancelled"] {
-  border-color: rgba(148, 163, 184, 0.28);
+  border-color: var(--border-default);
   color: var(--text-muted);
-  background: rgba(148, 163, 184, 0.05);
+  background: var(--bg-surface-soft);
 }
 
 .agent-activity-status[data-state="cancelled"]::before {
@@ -1318,13 +1346,13 @@
 }
 
 .agent-activity-status[data-state="approval"] {
-  border-color: rgba(245, 158, 11, 0.4);
-  color: #fbbf24;
-  background: rgba(245, 158, 11, 0.12);
+  border-color: var(--status-warning-border);
+  color: var(--status-warning-fg);
+  background: var(--status-warning-bg);
 }
 
 .agent-activity-status[data-state="approval"]::before {
-  background: #fbbf24;
+  background: var(--status-warning-fg);
   animation: pulse-ring-amber 1.8s infinite;
 }
 
@@ -1462,15 +1490,15 @@
 }
 
 .agent-activity-badge.retry {
-  background: rgba(245, 158, 11, 0.16);
-  border: 1px solid rgba(245, 158, 11, 0.35);
-  color: #fbbf24;
+  background: var(--status-warning-bg);
+  border: 1px solid var(--status-warning-border);
+  color: var(--status-warning-fg);
 }
 
 .agent-activity-badge.error {
-  background: rgba(239, 68, 68, 0.16);
-  border: 1px solid rgba(239, 68, 68, 0.35);
-  color: #f87171;
+  background: var(--status-error-bg);
+  border: 1px solid var(--status-error-border);
+  color: var(--status-error-fg);
 }
 
 .agent-activity-chevron {
@@ -2197,7 +2225,7 @@ input:checked + .slider:before {
   flex: none;
   display: flex;
   flex-direction: column;
-  padding: 44px 28px 24px 0;
+  padding: 44px 28px 12px 0;
   background: transparent;
   border: 0;
   border-radius: 0;
@@ -2436,6 +2464,130 @@ input:checked + .slider:before {
   }
 }
 
+/* Subagent Status Strip (Docked above composer) */
+.subagent-status-strip {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  max-width: calc(100% - 28px);
+  margin: 0 auto 8px;
+  padding: 8px 12px;
+  background: var(--bg-surface-raised, #18181b);
+  border: 1px solid var(--border-subtle, #27272a);
+  border-radius: var(--radius-md, 8px);
+  box-shadow: var(--shadow-xs, 0 1px 2px rgba(0, 0, 0, 0.1));
+  font-size: 0.75rem;
+  line-height: 1.35;
+  transition: border-color 140ms ease, box-shadow 140ms ease;
+  user-select: none;
+}
+
+.subagent-status-strip[role="button"] {
+  cursor: pointer;
+}
+
+.subagent-status-strip[role="button"]:hover {
+  border-color: var(--border-strong, #3f3f46);
+  box-shadow: var(--shadow-sm, 0 2px 4px rgba(0, 0, 0, 0.15));
+}
+
+.subagent-status-strip-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding-bottom: 4px;
+  border-bottom: 1px solid var(--border-subtle, #27272a);
+}
+
+.subagent-status-strip-header-left {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.subagent-status-strip-title {
+  font-weight: 600;
+  color: var(--text-primary, #f4f4f5);
+}
+
+.subagent-status-strip-hint {
+  font-size: 0.7rem;
+  color: var(--flavor-mint, #10b981);
+}
+
+.subagent-status-spinner,
+.subagent-status-row-spinner {
+  display: inline-block;
+  width: 10px;
+  height: 10px;
+  border: 1.5px solid var(--border-subtle, #3f3f46);
+  border-top-color: var(--flavor-mint, #10b981);
+  border-radius: 50%;
+  animation: subagent-strip-spin 700ms linear infinite;
+}
+
+@keyframes subagent-strip-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.subagent-status-icon-check,
+.subagent-status-row-check {
+  color: var(--flavor-mint, #10b981);
+  font-weight: bold;
+}
+
+.subagent-status-icon-alert,
+.subagent-status-row-cross {
+  color: #ef4444;
+  font-weight: bold;
+}
+
+.subagent-status-strip-list {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.subagent-status-strip-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 2px 4px;
+  border-radius: var(--radius-sm, 4px);
+  background: var(--bg-surface-subtle, rgba(255, 255, 255, 0.02));
+}
+
+.subagent-status-strip-row-main {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+  overflow: hidden;
+}
+
+.subagent-status-strip-tag {
+  color: var(--flavor-mint, #10b981);
+  font-weight: 600;
+  white-space: nowrap;
+}
+
+.subagent-status-strip-desc {
+  color: var(--text-secondary, #a1a1aa);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.subagent-status-strip-timing {
+  font-size: 0.7rem;
+  color: var(--text-muted, #71717a);
+  white-space: nowrap;
+}
+
 /* Project context is the first row of the composer, not a promotional CTA. */
 .project-context-row {
   position: relative;
@@ -3335,15 +3487,43 @@ input:checked + .slider:before {
   box-shadow: none;
 }
 
-#send-btn:hover,
-#chat-tool-btn:hover,
-#screen-capture-btn:hover {
-  background: var(--panel-raised);
-  transform: none;
+:root[data-accent-mode="monochrome"] #send-btn,
+:root[data-accent-mode="gray"] #send-btn {
+  background: var(--btn-gray-bg, #17171a);
+  color: #ffffff;
+  border: 1px solid var(--btn-gray-border, rgba(255, 255, 255, 0.12));
+}
+
+:root[data-accent-mode="monochrome"] #send-btn:hover,
+:root[data-accent-mode="gray"] #send-btn:hover {
+  background: var(--btn-gray-bg-hover, #222227);
+  color: #ffffff;
+}
+
+[data-theme="light"][data-accent-mode="monochrome"] #send-btn,
+[data-theme="light"][data-accent-mode="gray"] #send-btn {
+  background: var(--btn-gray-bg, #334155);
+  color: #ffffff;
+  border: 1px solid rgba(15, 23, 42, 0.2);
+}
+
+[data-theme="light"][data-accent-mode="monochrome"] #send-btn:hover,
+[data-theme="light"][data-accent-mode="gray"] #send-btn:hover {
+  background: var(--btn-gray-bg-hover, #1e293b);
+  color: #ffffff;
 }
 
 #send-btn:hover {
   background: var(--accent-hover);
+  transform: none;
+}
+
+#chat-tool-btn:hover,
+#screen-capture-btn:hover {
+  background: var(--btn-gray-bg-hover, var(--panel-raised));
+  border-color: var(--accent-border, var(--btn-gray-border-hover));
+  color: #ffffff;
+  transform: none;
 }
 
 #chat-tool-btn {
@@ -3791,3 +3971,10 @@ input:checked + .slider:before {
   background: #e2e8f0;
   color: #0f172a;
 }
+
+[data-theme="studio"] .user-message .message-bubble {
+  background: #1c1c1c;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  color: #e1e1e1;
+}
+

package/src/renderer/src-web/css/sidebar-workspace.css

@@ -776,6 +776,26 @@
   color: var(--text-main);
 }
 
+[data-theme="studio"] .sidebar-project.active,
+[data-theme="studio"] .sidebar-project.is-active,
+[data-theme="studio"] .sidebar-chat-item.active {
+  background: #323232;
+  color: #e1e1e1;
+}
+
+[data-theme="studio"] .sidebar-project:hover,
+[data-theme="studio"] .sidebar-chat-item:hover {
+  background: #262626;
+  color: #ffffff;
+}
+
+[data-theme="studio"] .sidebar-project.active:hover,
+[data-theme="studio"] .sidebar-project.is-active:hover,
+[data-theme="studio"] .sidebar-chat-item.active:hover {
+  background: #383838;
+  color: #ffffff;
+}
+
 .sidebar-pictures-btn {
   cursor: pointer;
 }

package/src/renderer/src-web/env.d.ts

@@ -1,9 +1,22 @@
 /// <reference types="vite/client" />
 declare module '*.css';
+declare module '*.svg?url';
+declare module '*.svg?raw' {
+  const content: string;
+  export default content;
+}
 declare module '*.md?raw' {
   const content: string;
   export default content;
 }
+declare module 'react-dom' {
+  export function createPortal(children: any, container: any, key?: any): any;
+  export function flushSync<R>(fn: () => R): R;
+}
+declare module 'react-dom/server' {
+  export function renderToStaticMarkup(element: any): string;
+  export function renderToString(element: any): string;
+}
 
 interface Window {
   api: {
@@ -37,6 +50,7 @@ interface Window {
     clearAiNotifications: () => void;
     getTtsUrls: (text: string) => Promise<Array<{ shortText: string; url: string }>>;
     setAiState: (state: string) => void;
+    openExternal: (url: string) => Promise<any>;
   };
   settingsApi: {
     getSettings: () => Promise<any>;

package/src/renderer/src-web/index.css

@@ -13,6 +13,11 @@ body, html, #root {
   background: transparent;
 }
 
+[data-theme="studio"],
+[data-theme="studio"] body {
+  background-color: #101010;
+}
+
 body, html {
   font-family: var(--font-ui, 'Inter', 'Noto Sans Thai', ui-sans-serif, system-ui, sans-serif);
   -webkit-font-smoothing: antialiased;
@@ -56,12 +61,12 @@ button {
 
 .chat-ui-grid-item:hover {
   transform: translateY(-2px);
-  border-color: rgba(255, 255, 255, 0.16) !important;
-  box-shadow: 0 6px 20px -4px rgba(0, 0, 0, 0.3);
+  border-color: var(--border-strong) !important;
+  box-shadow: var(--shadow-md);
 }
 
 .chat-ui-feature-item:hover {
-  border-color: rgba(255, 255, 255, 0.18) !important;
+  border-color: var(--border-strong) !important;
 }
 
 /* Minimalist AI Workspace (Claude / Cursor style) Code Block */
@@ -103,7 +108,7 @@ button {
 .chat-code-block-lines {
   font-size: 0.7rem;
   color: var(--text-soft, #64748b);
-  background: rgba(255, 255, 255, 0.04);
+  background: var(--bg-surface-soft);
   padding: 1px 6px;
   border-radius: 4px;
 }
@@ -130,7 +135,7 @@ button {
 }
 
 .chat-code-action-btn:hover {
-  background: rgba(255, 255, 255, 0.06);
+  background: var(--bg-surface-hover);
   color: var(--text-main, #f1f5f9);
 }
 
@@ -183,7 +188,7 @@ button {
 }
 
 .chat-code-line:hover {
-  background: rgba(255, 255, 255, 0.02);
+  background: var(--bg-surface-soft);
 }
 
 .chat-code-line-num {
@@ -206,70 +211,17 @@ button {
   padding-left: 16px;
 }
 
-/* Syntax Highlighting Tokens - Claude / Cursor low-saturation theme */
-.token-command {
-  color: #38bdf8; /* Soft sky blue */
-  font-weight: 500;
-}
-
-.token-keyword {
-  color: #818cf8; /* Soft indigo / violet */
-  font-weight: 500;
-}
-
-.token-string {
-  color: #86efac; /* Calm emerald green */
-}
-
-.token-flag {
-  color: #fde047; /* Soft yellow / amber */
-}
-
-.token-comment {
-  color: #64748b; /* Muted slate */
-  font-style: italic;
-}
-
-.token-number {
-  color: #fdba74; /* Soft warm orange */
-}
-
-.token-variable {
-  color: #f472b6; /* Soft pink */
-}
-
-.token-property {
-  color: #93c5fd; /* Soft light blue */
-}
-
-.token-function {
-  color: #38bdf8; /* Soft sky blue */
-}
-
-.token-type {
-  color: #a78bfa; /* Soft purple */
-}
-
-.token-boolean {
-  color: #fb7185; /* Soft rose */
-}
-
-.token-operator {
-  color: #94a3b8; /* Muted slate */
-}
-
-.token-punctuation {
-  color: #64748b; /* Darker muted slate */
-}
-
 .chat-bold-highlight {
   color: var(--text-chat, var(--text-main, inherit));
   font-weight: 600;
 }
+
 /* Code Syntax Highlighting (Driven by tokens.css) */
+.token-command { color: var(--syntax-command); font-weight: 500; }
+.token-keyword { color: var(--syntax-keyword); font-weight: 500; }
 .token-string { color: var(--syntax-string); }
 .token-flag { color: var(--syntax-flag); }
-.token-comment { color: var(--syntax-comment); }
+.token-comment { color: var(--syntax-comment); font-style: italic; }
 .token-number { color: var(--syntax-number); }
 .token-variable { color: var(--syntax-variable); }
 .token-property { color: var(--syntax-property); }