@pheem49/mint 1.16.0 → 1.18.0

package/src/renderer/shared/components/Settings/ThemeTab.test.tsx

@@ -0,0 +1,45 @@
+import React from 'react'
+import { renderToStaticMarkup } from 'react-dom/server'
+import { describe, expect, it } from 'vitest'
+import ThemeTab from './ThemeTab'
+import { DEFAULT_CONFIG } from '../../constants/config'
+import { TEXT_COLOR_FLAVORS } from '../../theme/themes'
+
+describe('ThemeTab Text Color Picker', () => {
+  it('renders the Text color section with curated swatches and custom hex toggle', () => {
+    const html = renderToStaticMarkup(
+      <ThemeTab
+        config={{ ...DEFAULT_CONFIG, textColor: '#f8fafc' }}
+        updateField={() => {}}
+      />
+    )
+    expect(html).toContain('Text color')
+    expect(html).toContain('Custom Hex...')
+    expect(html).toContain('aria-label="Text colors"')
+
+    for (const flavor of TEXT_COLOR_FLAVORS) {
+      expect(html).toContain(flavor.name)
+    }
+  })
+
+  it('marks the active flavor based on config.textColor', () => {
+    const html = renderToStaticMarkup(
+      <ThemeTab
+        config={{ ...DEFAULT_CONFIG, textColor: '#fde047' }}
+        updateField={() => {}}
+      />
+    )
+    // Retro Amber flavor (#fde047) should have aria-checked="true"
+    expect(html).toMatch(/role="radio"[^>]*aria-checked="true"[^>]*title="Warm CRT phosphor amber gold"/)
+  })
+
+  it('marks Pure White as active when default #f8fafc is set', () => {
+    const html = renderToStaticMarkup(
+      <ThemeTab
+        config={{ ...DEFAULT_CONFIG, textColor: '#f8fafc' }}
+        updateField={() => {}}
+      />
+    )
+    expect(html).toMatch(/role="radio"[^>]*aria-checked="true"[^>]*title="Crisp classic bright white"/)
+  })
+})

package/src/renderer/shared/components/Settings/ThemeTab.tsx

@@ -1,7 +1,7 @@
-import SelectField from '../SelectField'
+import SelectField from '../ui/SelectField'
 import React, { useState } from 'react'
 import { DEFAULT_CONFIG } from '../../constants/config'
-import { THEME_PRESETS, ACCENT_FLAVORS, ThemePreset, AccentFlavor } from '../../theme/themes'
+import { THEME_PRESETS, ACCENT_FLAVORS, TEXT_COLOR_FLAVORS, ThemePreset, AccentFlavor, TextColorFlavor } from '../../theme/themes'
 
 interface ThemeTabProps {
   config: typeof DEFAULT_CONFIG
@@ -11,6 +11,7 @@ interface ThemeTabProps {
 
 export default function ThemeTab({ config, updateField, updateFields }: ThemeTabProps) {
   const [showCustomAccent, setShowCustomAccent] = useState(false)
+  const [showCustomText, setShowCustomText] = useState(false)
 
   const isPresetActive = (preset: ThemePreset) => {
     if (config.theme !== preset.theme) return false
@@ -21,6 +22,7 @@ export default function ThemeTab({ config, updateField, updateFields }: ThemeTab
     const patch: Partial<typeof DEFAULT_CONFIG> = {
       theme: preset.theme,
       accentColor: preset.accentColor,
+      textColor: preset.textColor || preset.systemTextColor,
       systemTextColor: preset.systemTextColor,
       chatTextColor: preset.chatTextColor,
       surfaceStyle: preset.theme === 'light' ? 'opaque' : 'glass',
@@ -30,6 +32,7 @@ export default function ThemeTab({ config, updateField, updateFields }: ThemeTab
     } else {
       updateField('theme', preset.theme)
       updateField('accentColor', preset.accentColor)
+      updateField('textColor', patch.textColor)
       updateField('systemTextColor', preset.systemTextColor)
       updateField('chatTextColor', preset.chatTextColor)
       updateField('surfaceStyle', patch.surfaceStyle)
@@ -46,6 +49,20 @@ export default function ThemeTab({ config, updateField, updateFields }: ThemeTab
     }
   }
 
+  const handleSelectTextColor = (flavor: TextColorFlavor) => {
+    if (updateFields) {
+      updateFields({
+        textColor: flavor.color,
+        systemTextColor: flavor.color,
+        chatTextColor: flavor.color,
+      })
+    } else {
+      updateField('textColor', flavor.color)
+      updateField('systemTextColor', flavor.color)
+      updateField('chatTextColor', flavor.color)
+    }
+  }
+
   const COLOR_MODES = [
     {
       id: 'system',
@@ -97,9 +114,22 @@ export default function ThemeTab({ config, updateField, updateFields }: ThemeTab
         </svg>
       ),
     },
+    {
+      id: 'studio',
+      name: 'Studio Dark',
+      description: '#101010 neutral',
+      icon: (
+        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+          <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
+          <line x1="3" y1="9" x2="21" y2="9"></line>
+          <line x1="9" y1="21" x2="9" y2="9"></line>
+        </svg>
+      ),
+    },
   ]
 
   const currentAccent = (config.accentColor || '').toLowerCase()
+  const currentText = (config.textColor || config.systemTextColor || '#f8fafc').toLowerCase()
   const TUI_MODES = [
     { id: 'system', name: 'Auto', description: 'Use terminal colors' },
     { id: 'dark', name: 'Dark', description: 'Dark terminal palette' },
@@ -219,13 +249,30 @@ export default function ThemeTab({ config, updateField, updateFields }: ThemeTab
                     onClick={() => {
                       if (mode.id === 'light') {
                         if (updateFields) {
-                          updateFields({ theme: 'light', surfaceStyle: 'opaque' })
+                          updateFields({ theme: 'light', surfaceStyle: 'opaque', textColor: '#0f172a', systemTextColor: '#0f172a', chatTextColor: '#0f172a' })
                         } else {
                           updateField('theme', 'light')
                           updateField('surfaceStyle', 'opaque')
+                          updateField('textColor', '#0f172a')
+                          updateField('systemTextColor', '#0f172a')
+                          updateField('chatTextColor', '#0f172a')
                         }
                       } else {
-                        updateField('theme', mode.id)
+                        const isSwitchingFromLight = config.theme === 'light'
+                        const nextText = isSwitchingFromLight ? '#f8fafc' : (config.textColor || '#f8fafc')
+                        if (updateFields) {
+                          updateFields({
+                            theme: mode.id,
+                            ...(isSwitchingFromLight ? { textColor: nextText, systemTextColor: nextText, chatTextColor: nextText } : {})
+                          })
+                        } else {
+                          updateField('theme', mode.id)
+                          if (isSwitchingFromLight) {
+                            updateField('textColor', nextText)
+                            updateField('systemTextColor', nextText)
+                            updateField('chatTextColor', nextText)
+                          }
+                        }
                       }
                     }}
                   >
@@ -306,6 +353,74 @@ export default function ThemeTab({ config, updateField, updateFields }: ThemeTab
             )}
           </div>
 
+          {/* Text color */}
+          <div className="setting-row stacked">
+            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+              <label>Text color</label>
+              <button
+                type="button"
+                className="custom-accent-toggle"
+                onClick={() => setShowCustomText(!showCustomText)}
+              >
+                {showCustomText ? 'Use Curated Flavors' : 'Custom Hex...'}
+              </button>
+            </div>
+
+            {!showCustomText ? (
+              <div className="flavor-grid" role="radiogroup" aria-label="Text colors">
+                {TEXT_COLOR_FLAVORS.map((flavor) => {
+                  const isSelected = currentText === flavor.color.toLowerCase() || (flavor.id === 'white' && (currentText === '#ffffff' || currentText === '#f8fafc'))
+                  const isWhite = flavor.color.toLowerCase() === '#ffffff'
+                  return (
+                    <button
+                      key={flavor.id}
+                      type="button"
+                      role="radio"
+                      aria-checked={isSelected}
+                      className={`flavor-card ${isSelected ? 'active' : ''}`}
+                      onClick={() => handleSelectTextColor(flavor)}
+                      title={flavor.description}
+                    >
+                      <span
+                        className="flavor-swatch"
+                        style={{
+                          background: flavor.color,
+                          border: isWhite ? '1px solid rgba(255,255,255,0.2)' : 'none',
+                        }}
+                      >
+                        {isSelected && (
+                          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke={flavor.contrastText} strokeWidth="3.5" strokeLinecap="round" strokeLinejoin="round">
+                            <polyline points="20 6 9 17 4 12"></polyline>
+                          </svg>
+                        )}
+                      </span>
+                      <span className="flavor-name">{flavor.name}</span>
+                    </button>
+                  )
+                })}
+              </div>
+            ) : (
+              <div className="custom-accent-box">
+                <input
+                  type="color"
+                  value={config.textColor || config.systemTextColor || '#f8fafc'}
+                  onChange={(e) => {
+                    const val = e.target.value
+                    if (updateFields) {
+                      updateFields({ textColor: val, systemTextColor: val, chatTextColor: val })
+                    } else {
+                      updateField('textColor', val)
+                      updateField('systemTextColor', val)
+                      updateField('chatTextColor', val)
+                    }
+                  }}
+                  className="custom-accent-input"
+                />
+                <span className="custom-accent-value">{config.textColor || config.systemTextColor || '#f8fafc'}</span>
+              </div>
+            )}
+          </div>
+
           <div className="toggle-row reduced-effects-row">
             <div>
               <label id="reduced-effects-label" htmlFor="reduced-effects">Reduce effects</label>

package/src/renderer/shared/components/activity/AgentActivityDrawer.tsx

@@ -0,0 +1,270 @@
+/**
+ * shared/components/AgentActivityDrawer.tsx
+ * Togglable deep module containing the agent activities list/table, PlanChecklist, RunSummary, and Subagent DAG View.
+ * Shared by both Desktop and Web ChatPanel — do NOT duplicate this.
+ */
+import React, { memo, useCallback, useMemo, useState } from 'react'
+import { ChevronDown } from 'lucide-react'
+import type { ArtifactFile } from '../../utils/artifacts'
+import type { AgentProgress } from '../../types'
+import {
+  activitiesFrom,
+  extractLatestPlan,
+  extractLatestRunSummary,
+  hasSubagentActivity,
+  type AgentActivityView,
+} from '../../utils/agentActivity'
+import { AgentActivityTable } from './AgentActivityTable'
+import { SubagentDagView } from './SubagentDagView'
+import { PlanChecklistWidget } from './PlanChecklistWidget'
+import { RunSummaryDashboard } from './RunSummaryDashboard'
+
+export interface AgentActivityDrawerProps {
+  progress?: AgentProgress[]
+  activityView?: AgentActivityView
+  rawProgress?: AgentProgress[]
+  id?: string
+  isOpen?: boolean
+  defaultOpen?: boolean
+  onToggle?: (id: string) => void
+  historical?: boolean
+  isHistorical?: boolean
+  pendingApproval?: boolean
+  chatId?: string
+  workspacePath?: string
+  onReferenceFile?: (filePath: string) => void
+  onOpenArtifact?: (artifact: ArtifactFile) => void
+  key?: any
+}
+
+export const AgentActivityDrawer = memo(function AgentActivityDrawer({
+  progress,
+  activityView: providedActivityView,
+  rawProgress,
+  id = '',
+  isOpen: controlledIsOpen,
+  defaultOpen = false,
+  onToggle,
+  historical,
+  isHistorical: isHistoricalProp,
+  pendingApproval = false,
+  chatId,
+  workspacePath,
+  onReferenceFile,
+  onOpenArtifact,
+}: AgentActivityDrawerProps) {
+  const effectiveProgress = progress ?? rawProgress ?? []
+  const isHistorical = historical ?? isHistoricalProp ?? false
+  const [internalOpen, setInternalOpen] = useState(defaultOpen)
+  const isOpen = controlledIsOpen !== undefined ? controlledIsOpen : internalOpen
+
+  const handleToggle = useCallback(() => {
+    if (onToggle) {
+      onToggle(id)
+    } else {
+      setInternalOpen((prev) => !prev)
+    }
+  }, [id, onToggle])
+
+  const [viewMode, setViewMode] = useState<'list' | 'dag'>('list')
+
+  const activityView = useMemo(
+    () => providedActivityView ?? activitiesFrom(effectiveProgress),
+    [providedActivityView, effectiveProgress],
+  )
+
+  const latestPlan = useMemo(() => extractLatestPlan(effectiveProgress), [effectiveProgress])
+  const latestRunSummary = useMemo(() => extractLatestRunSummary(effectiveProgress), [effectiveProgress])
+  const hasSubagents = useMemo(() => hasSubagentActivity(effectiveProgress), [effectiveProgress])
+
+  if (
+    activityView.items.length === 0 &&
+    (!activityView.timeline || activityView.timeline.length === 0) &&
+    !latestPlan &&
+    !latestRunSummary
+  ) {
+    return null
+  }
+
+  const renderContent = () => (
+    <>
+      {latestRunSummary && (
+        <div style={{ marginBottom: '12px' }}>
+          <RunSummaryDashboard summary={latestRunSummary} />
+        </div>
+      )}
+
+      {latestPlan && (
+        <div style={{ marginBottom: '12px' }}>
+          <PlanChecklistWidget plan={latestPlan} />
+        </div>
+      )}
+
+      {hasSubagents && (
+        <div
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'flex-start',
+            gap: '8px',
+            marginBottom: '10px',
+            paddingBottom: '8px',
+            borderBottom: '1px solid var(--border)',
+          }}
+        >
+          <div
+            style={{
+              display: 'inline-flex',
+              padding: '2px',
+              background: 'var(--surface-strong)',
+              borderRadius: 'var(--radius-xs, 6px)',
+              border: '1px solid var(--border)',
+            }}
+          >
+            <button
+              type="button"
+              onClick={(e) => {
+                e.stopPropagation()
+                setViewMode('list')
+              }}
+              style={{
+                background: viewMode === 'list' ? 'var(--accent)' : 'transparent',
+                color: viewMode === 'list' ? 'var(--text-on-accent)' : 'var(--text-muted)',
+                border: 'none',
+                borderRadius: 'var(--radius-2xs, 4px)',
+                padding: '3px 8px',
+                fontSize: '0.74rem',
+                fontWeight: 500,
+                cursor: 'pointer',
+              }}
+            >
+              Activity List
+            </button>
+            <button
+              type="button"
+              onClick={(e) => {
+                e.stopPropagation()
+                setViewMode('dag')
+              }}
+              style={{
+                background: viewMode === 'dag' ? 'var(--accent)' : 'transparent',
+                color: viewMode === 'dag' ? 'var(--text-on-accent)' : 'var(--text-muted)',
+                border: 'none',
+                borderRadius: 'var(--radius-2xs, 4px)',
+                padding: '3px 8px',
+                fontSize: '0.74rem',
+                fontWeight: 500,
+                cursor: 'pointer',
+                display: 'inline-flex',
+                alignItems: 'center',
+                gap: '4px',
+              }}
+            >
+              <span>Subagent DAG</span>
+              <span
+                style={{
+                  width: '6px',
+                  height: '6px',
+                  borderRadius: '50%',
+                  background: 'var(--status-listening, #38bdf8)',
+                  display: 'inline-block',
+                }}
+              />
+            </button>
+          </div>
+        </div>
+      )}
+
+      {viewMode === 'dag' && hasSubagents ? (
+        <SubagentDagView progress={effectiveProgress} isLive={!isHistorical} />
+      ) : activityView.items.length > 0 || (activityView.timeline && activityView.timeline.length > 0) ? (
+        <AgentActivityTable
+          activityView={activityView}
+          progress={effectiveProgress}
+          chatId={chatId}
+          workspacePath={workspacePath}
+          onReferenceFile={onReferenceFile}
+          onOpenArtifact={onOpenArtifact}
+        />
+      ) : null}
+    </>
+  )
+
+  const naturalActionSummary =
+    latestPlan?.objective ||
+    activityView.naturalSummary ||
+    activityView.summary ||
+    (latestRunSummary ? `Run telemetry (${latestRunSummary.outcome})` : 'Working through task')
+
+  const durationText =
+    activityView.durationText ||
+    (latestRunSummary?.durationSecs ? `${Math.round(latestRunSummary.durationSecs)}s` : '')
+
+  const workedHeadline = durationText
+    ? `Worked for ${durationText}`
+    : (isHistorical || latestRunSummary) ? 'Worked' : 'Working'
+
+  if (isHistorical) {
+    return (
+      <div className="agent-activity-history modern-activity-history">
+        <button
+          type="button"
+          className="agent-activity-toggle modern-activity-toggle"
+          aria-expanded={isOpen}
+          onClick={handleToggle}
+        >
+          <div className="modern-activity-header-left">
+            <span className="modern-activity-duration">{workedHeadline}</span>
+            <ChevronDown
+              size={13}
+              className={`agent-activity-toggle-chevron${isOpen ? ' is-open' : ''}`}
+              aria-hidden="true"
+            />
+          </div>
+          <span className="modern-activity-natural-summary">{naturalActionSummary}</span>
+        </button>
+        {isOpen && (
+          <div className="agent-activity-card modern-activity-card agent-activity-card-history">
+            {renderContent()}
+          </div>
+        )}
+      </div>
+    )
+  }
+
+  return (
+    <div className="message ai-message agent-activity-message modern-activity-message">
+      <div className="agent-activity-card modern-activity-card">
+        <div className="agent-activity-header modern-activity-header" style={{ cursor: 'pointer' }} onClick={handleToggle}>
+          <div className="modern-activity-header-left">
+            <span className="modern-activity-duration">{workedHeadline}</span>
+            <ChevronDown
+              size={13}
+              className={`agent-activity-toggle-chevron${isOpen ? ' is-open' : ''}`}
+              aria-hidden="true"
+            />
+          </div>
+          <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+            <span
+              className="agent-activity-status"
+              data-state={pendingApproval ? 'approval' : latestRunSummary ? 'done' : 'active'}
+            >
+              {pendingApproval ? 'Waiting for approval' : latestRunSummary ? 'Completed' : 'Working'}
+            </span>
+          </div>
+        </div>
+        <div className="modern-activity-subheader" style={{ cursor: 'pointer' }} onClick={handleToggle}>
+          <span>{naturalActionSummary}</span>
+          <ChevronDown
+            size={12}
+            className={`modern-activity-subchevron${isOpen ? ' is-open' : ''}`}
+            aria-hidden="true"
+          />
+        </div>
+        {isOpen && <div className="modern-activity-content">{renderContent()}</div>}
+      </div>
+    </div>
+  )
+})
+
+export const ProgressActivity = AgentActivityDrawer