@pheem49/mint 1.16.0 → 1.18.0

package/src/renderer/shared/components/chat/ChatModeSelector.css

@@ -0,0 +1,227 @@
+.chat-mode-selector-wrap {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+.chat-mode-trigger {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  height: 28px;
+  padding: 0 9px;
+  border-radius: var(--radius-full, 999px);
+  background: var(--surface-strong);
+  border: 1px solid var(--border-default, rgba(255, 255, 255, 0.08));
+  color: var(--text-secondary);
+  font-family: inherit;
+  font-size: 0.76rem;
+  font-weight: 500;
+  cursor: pointer;
+  outline: none;
+  white-space: nowrap;
+  user-select: none;
+  transition: all 0.15s ease;
+}
+
+.chat-mode-trigger .chat-mode-icon {
+  color: var(--text-muted);
+  transition: color 0.15s ease;
+}
+
+/* Natural text color styling — no forced green border */
+.chat-mode-trigger.is-agent,
+.chat-mode-trigger.is-plan,
+.chat-mode-trigger.is-chat {
+  color: var(--text-secondary);
+  border-color: var(--border-default, rgba(255, 255, 255, 0.08));
+}
+
+.chat-mode-trigger:hover,
+.chat-mode-trigger.is-active {
+  background: var(--bg-surface-hover, rgba(255, 255, 255, 0.08));
+  color: var(--text-primary);
+  border-color: var(--border, rgba(255, 255, 255, 0.16));
+}
+
+.chat-mode-trigger:hover .chat-mode-icon,
+.chat-mode-trigger.is-active .chat-mode-icon {
+  color: var(--text-primary);
+}
+
+.chat-mode-trigger:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 1px;
+}
+
+.chat-mode-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 14px;
+  height: 14px;
+}
+
+.chat-mode-label {
+  line-height: 1;
+}
+
+.chat-mode-chevron {
+  color: var(--text-muted);
+  transition: transform 0.15s ease;
+  margin-left: 1px;
+}
+
+.chat-mode-chevron.is-open {
+  transform: rotate(180deg);
+}
+
+/* Popover Menu aligned to the right */
+.chat-mode-popover {
+  position: absolute;
+  bottom: calc(100% + 8px);
+  right: 0;
+  z-index: 90;
+  min-width: 250px;
+  max-width: min(320px, calc(100vw - 32px));
+  padding: 6px;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  border-radius: var(--radius-xl, 16px);
+  background: var(--panel-bg, #18181b);
+  border: 1px solid var(--border);
+  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.4), 0 8px 10px -6px rgba(0, 0, 0, 0.3);
+  backdrop-filter: var(--glass-blur);
+  -webkit-backdrop-filter: var(--glass-blur);
+  animation: chat-mode-popover-in 0.15s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+@keyframes chat-mode-popover-in {
+  from {
+    opacity: 0;
+    transform: translateY(4px) scale(0.98);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+.chat-mode-popover-header {
+  padding: 6px 8px 4px;
+  font-size: 0.68rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--text-muted);
+}
+
+.chat-mode-option {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  width: 100%;
+  padding: 8px 10px;
+  border-radius: var(--radius-md, 10px);
+  border: 1px solid transparent;
+  background: transparent;
+  color: var(--text-primary);
+  text-align: left;
+  cursor: pointer;
+  transition: all 0.12s ease;
+}
+
+.chat-mode-option:hover {
+  background: var(--surface-strong, rgba(255, 255, 255, 0.06));
+}
+
+.chat-mode-option.is-selected {
+  background: color-mix(in srgb, var(--surface-strong) 85%, var(--accent) 15%);
+  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
+}
+
+.chat-mode-option-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  margin-top: 1px;
+  flex-shrink: 0;
+  color: var(--text-muted);
+}
+
+.chat-mode-option.is-agent .chat-mode-option-icon {
+  color: var(--accent);
+}
+
+.chat-mode-option.is-plan .chat-mode-option-icon {
+  color: #38bdf8;
+}
+
+.chat-mode-option-text {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.chat-mode-option-title {
+  font-size: 0.8rem;
+  font-weight: 600;
+  color: var(--text-primary);
+  line-height: 1.2;
+}
+
+.chat-mode-option-desc {
+  font-size: 0.7rem;
+  color: var(--text-muted);
+  line-height: 1.35;
+}
+
+.chat-mode-option-check {
+  margin-top: 3px;
+  flex-shrink: 0;
+  color: var(--accent);
+}
+
+/* Light Theme support */
+[data-theme="light"] .chat-mode-trigger {
+  background: #f1f5f9;
+  border-color: rgba(15, 23, 42, 0.1);
+  color: #334155;
+}
+
+[data-theme="light"] .chat-mode-trigger .chat-mode-icon {
+  color: #64748b;
+}
+
+[data-theme="light"] .chat-mode-trigger:hover,
+[data-theme="light"] .chat-mode-trigger.is-active {
+  background: #e2e8f0;
+  color: #0f172a;
+  border-color: rgba(15, 23, 42, 0.18);
+}
+
+[data-theme="light"] .chat-mode-trigger:hover .chat-mode-icon,
+[data-theme="light"] .chat-mode-trigger.is-active .chat-mode-icon {
+  color: #0f172a;
+}
+
+[data-theme="light"] .chat-mode-popover {
+  background: #ffffff;
+  border-color: rgba(15, 23, 42, 0.12);
+  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.05);
+}
+
+[data-theme="light"] .chat-mode-option:hover {
+  background: #f1f5f9;
+}
+
+[data-theme="light"] .chat-mode-option.is-selected {
+  background: #f0fdf4;
+  border-color: rgba(16, 185, 129, 0.3);
+}

package/src/renderer/shared/components/chat/ChatModeSelector.test.tsx

@@ -0,0 +1,45 @@
+import { createElement } from 'react'
+import { renderToStaticMarkup } from 'react-dom/server'
+import { describe, expect, it } from 'vitest'
+import ChatModeSelector from './ChatModeSelector'
+
+describe('ChatModeSelector', () => {
+  it('renders Agent mode trigger when agentMode is true and planMode is false', () => {
+    const html = renderToStaticMarkup(
+      createElement(ChatModeSelector, {
+        agentMode: true,
+        planMode: false,
+        onSetAgentMode: () => {},
+        onSetPlanMode: () => {},
+      })
+    )
+    expect(html).toContain('id="chat-mode-btn"')
+    expect(html).toContain('is-agent')
+    expect(html).toContain('Agent')
+  })
+
+  it('renders Plan mode trigger when planMode is true', () => {
+    const html = renderToStaticMarkup(
+      createElement(ChatModeSelector, {
+        agentMode: true,
+        planMode: true,
+        onSetAgentMode: () => {},
+        onSetPlanMode: () => {},
+      })
+    )
+    expect(html).toContain('is-plan')
+    expect(html).toContain('Plan')
+  })
+
+  it('renders Chat mode trigger when agentMode is false', () => {
+    const html = renderToStaticMarkup(
+      createElement(ChatModeSelector, {
+        agentMode: false,
+        planMode: false,
+        onSetAgentMode: () => {},
+      })
+    )
+    expect(html).toContain('is-chat')
+    expect(html).toContain('Chat')
+  })
+})

package/src/renderer/shared/components/chat/ChatModeSelector.tsx

@@ -0,0 +1,198 @@
+import React, { useState, useRef, useEffect, useId } from 'react'
+import './ChatModeSelector.css'
+
+export interface ChatModeSelectorProps {
+  agentMode: boolean
+  onSetAgentMode: (enabled: boolean) => void
+  planMode?: boolean
+  onSetPlanMode?: (enabled: boolean) => void
+  disabled?: boolean
+}
+
+export type ChatModeId = 'agent' | 'plan' | 'chat'
+
+interface ModeOption {
+  id: ChatModeId
+  label: string
+  shortLabel: string
+  title: string
+  desc: string
+  icon: React.ReactNode
+}
+
+export default function ChatModeSelector({
+  agentMode,
+  onSetAgentMode,
+  planMode,
+  onSetPlanMode,
+  disabled = false,
+}: ChatModeSelectorProps) {
+  const [isOpen, setIsOpen] = useState(false)
+  const rootRef = useRef<HTMLDivElement>(null)
+  const menuId = useId()
+
+  const currentMode: ChatModeId = planMode
+    ? 'plan'
+    : agentMode
+    ? 'agent'
+    : 'chat'
+
+  const options: ModeOption[] = [
+    {
+      id: 'agent',
+      label: 'Agent mode',
+      shortLabel: 'Agent',
+      title: 'Agent mode: autonomous execution with tool use',
+      desc: 'Runs tools and edits files automatically',
+      icon: (
+        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+          <path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z" />
+        </svg>
+      ),
+    },
+    ...(onSetPlanMode ? [{
+      id: 'plan' as ChatModeId,
+      label: 'Plan mode',
+      shortLabel: 'Plan',
+      title: 'Plan mode: investigate read-only and require plan approval before editing',
+      desc: 'Researches read-only and requires approval for edits',
+      icon: (
+        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+          <path d="M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2" />
+          <rect x="9" y="3" width="6" height="4" rx="2" />
+          <path d="M9 12h6m-6 4h4" />
+        </svg>
+      ),
+    }] : []),
+    {
+      id: 'chat',
+      label: 'Chat mode',
+      shortLabel: 'Chat',
+      title: 'Chat mode: standard conversation without tools',
+      desc: 'Direct conversation without autonomous changes',
+      icon: (
+        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+          <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
+        </svg>
+      ),
+    },
+  ]
+
+  const activeOption = options.find((opt) => opt.id === currentMode) || options[0]
+
+  const handleSelect = (mode: ChatModeId) => {
+    if (disabled) return
+    if (mode === 'agent') {
+      onSetAgentMode(true)
+      onSetPlanMode?.(false)
+    } else if (mode === 'plan') {
+      onSetAgentMode(true)
+      onSetPlanMode?.(true)
+    } else {
+      onSetAgentMode(false)
+      onSetPlanMode?.(false)
+    }
+    setIsOpen(false)
+  }
+
+  // Close when clicking outside
+  useEffect(() => {
+    if (!isOpen) return
+    const onMouseDown = (e: MouseEvent) => {
+      if (rootRef.current && !rootRef.current.contains(e.target as Node)) {
+        setIsOpen(false)
+      }
+    }
+    window.addEventListener('mousedown', onMouseDown)
+    return () => window.removeEventListener('mousedown', onMouseDown)
+  }, [isOpen])
+
+  // Close on Escape
+  useEffect(() => {
+    if (!isOpen) return
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        setIsOpen(false)
+      }
+    }
+    window.addEventListener('keydown', onKeyDown)
+    return () => window.removeEventListener('keydown', onKeyDown)
+  }, [isOpen])
+
+  return (
+    <div className="chat-mode-selector-wrap" ref={rootRef}>
+      <button
+        type="button"
+        id="chat-mode-btn"
+        className={`chat-mode-trigger is-${currentMode} ${isOpen ? 'is-active' : ''}`}
+        onClick={() => setIsOpen((prev) => !prev)}
+        disabled={disabled}
+        aria-haspopup="menu"
+        aria-expanded={isOpen}
+        aria-controls={menuId}
+        title={activeOption.title}
+      >
+        <span className="chat-mode-icon" aria-hidden="true">
+          {activeOption.icon}
+        </span>
+        <span className="chat-mode-label">{activeOption.shortLabel}</span>
+        <svg
+          className={`chat-mode-chevron ${isOpen ? 'is-open' : ''}`}
+          width="10"
+          height="10"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2.2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          aria-hidden="true"
+        >
+          <polyline points="6 9 12 15 18 9" />
+        </svg>
+      </button>
+
+      {isOpen && (
+        <div id={menuId} className="chat-mode-popover" role="menu">
+          <div className="chat-mode-popover-header">Interaction Mode</div>
+          {options.map((opt) => {
+            const isSelected = opt.id === currentMode
+            return (
+              <button
+                key={opt.id}
+                type="button"
+                role="menuitem"
+                className={`chat-mode-option is-${opt.id} ${isSelected ? 'is-selected' : ''}`}
+                onClick={() => handleSelect(opt.id)}
+              >
+                <span className="chat-mode-option-icon" aria-hidden="true">
+                  {opt.icon}
+                </span>
+                <div className="chat-mode-option-text">
+                  <span className="chat-mode-option-title">{opt.label}</span>
+                  <span className="chat-mode-option-desc">{opt.desc}</span>
+                </div>
+                {isSelected && (
+                  <svg
+                    className="chat-mode-option-check"
+                    width="14"
+                    height="14"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    strokeWidth="2.5"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    aria-hidden="true"
+                  >
+                    <polyline points="20 6 9 17 4 12" />
+                  </svg>
+                )}
+              </button>
+            )
+          })}
+        </div>
+      )}
+    </div>
+  )
+}

package/src/renderer/shared/components/chat/ChatPanel.test.tsx

@@ -0,0 +1,53 @@
+import { createElement } from 'react'
+import { renderToStaticMarkup } from 'react-dom/server'
+import { describe, expect, it } from 'vitest'
+import ChatPanel, { shouldProbeOllamaModels, ThinkingElapsedMeta } from './ChatPanel'
+import { chatPanelFixture } from '../../../tests/chatPanelFixture'
+import { installRendererPlatform } from '../../platform'
+import * as webAdapter from '../../../src-web/tauri'
+
+describe('Shared Tools entry point', () => {
+  it('keeps Sources out of the chat header and offers Tools instead', () => {
+    installRendererPlatform(webAdapter)
+    const html = renderToStaticMarkup(createElement(ChatPanel, { ...chatPanelFixture(), tools: { modsPanelTarget: null, onOpenMods: () => {}, open: false, backgroundTaskCount: 0, onToggle: () => {} } } as any))
+    expect(html).not.toContain('Open session sources')
+    expect(html).toContain('Open tools panel')
+  })
+  it('does not duplicate Desktop’s titlebar Tools button', () => {
+    installRendererPlatform(webAdapter)
+    const html = renderToStaticMarkup(createElement(ChatPanel, chatPanelFixture() as any))
+    expect(html).not.toContain('Open session sources')
+  })
+  it('isolates thinking elapsed timer markup and gates Ollama probing to Ollama configurations', () => {
+    installRendererPlatform(webAdapter)
+    const elapsedHtml = renderToStaticMarkup(createElement(ThinkingElapsedMeta))
+    expect(elapsedHtml).toContain('thinking-status-meta')
+    expect(elapsedHtml).toContain('· 0s · Esc to cancel')
+
+    expect(shouldProbeOllamaModels({ activeProvider: 'gemini' } as any, {})).toBe(false)
+    expect(shouldProbeOllamaModels({ activeProvider: 'ollama' } as any, {})).toBe(true)
+    expect(shouldProbeOllamaModels({ activeProvider: 'gemini' } as any, { ollamaHost: 'http://localhost:11434' })).toBe(true)
+  })
+
+  it('renders chat input with workspace drop and dragover handlers', () => {
+    installRendererPlatform(webAdapter)
+    const html = renderToStaticMarkup(createElement(ChatPanel, chatPanelFixture() as any))
+    expect(html).toContain('id="chat-form"')
+    expect(html).toContain('id="chat-input"')
+    expect(html).toContain('placeholder="Ask anything, @ to mention, / for actions"')
+  })
+
+  it('renders file reference directly in the chat input when message contains @reference', () => {
+    installRendererPlatform(webAdapter)
+    const fixture = chatPanelFixture()
+    const html = renderToStaticMarkup(createElement(ChatPanel, {
+      ...fixture,
+      conversation: {
+        ...fixture.conversation,
+        message: '@generate_harness_pdf.py ',
+      },
+    } as any))
+    expect(html).toContain('id="chat-input"')
+    expect(html).toContain('@generate_harness_pdf.py ')
+  })
+})