@pheem49/mint 1.16.0 → 1.18.0

package/src/renderer/shared/components/activity/SubagentStatusStrip.test.tsx

@@ -0,0 +1,82 @@
+import { createElement } from 'react'
+import { renderToStaticMarkup } from 'react-dom/server'
+import { describe, it, expect } from 'vitest'
+import { SubagentStatusStrip } from './SubagentStatusStrip'
+import type { AgentProgress } from '../../types'
+
+describe('SubagentStatusStrip', () => {
+  it('renders nothing when there are no subagents', () => {
+    const html = renderToStaticMarkup(createElement(SubagentStatusStrip, { progress: [] }))
+    expect(html).toBe('')
+  })
+
+  it('renders running and completed subagent cards', () => {
+    const progress: AgentProgress[] = [
+      {
+        type: 'SubagentStarted',
+        data: {
+          subagent: 'recon',
+          profile: 'explorer',
+          task: 'Searching for payment webhook endpoints...',
+        },
+      },
+      {
+        type: 'SubagentStarted',
+        data: {
+          subagent: 'config',
+          profile: 'explorer',
+          task: 'Checking env files',
+        },
+      },
+      {
+        type: 'SubagentFinished',
+        data: {
+          subagent: 'config',
+          status: 'completed',
+          elapsed_ms: 3000,
+          steps: 2,
+          summary_preview: 'Checked stripe API keys in .env',
+        },
+      },
+    ]
+
+    const html = renderToStaticMarkup(createElement(SubagentStatusStrip, { progress }))
+    expect(html).toContain('subagent-status-strip')
+    expect(html).toContain('Running Subagents (1/2 completed)')
+    expect(html).toContain('[recon]')
+    expect(html).toContain('Searching for payment webhook endpoints...')
+    expect(html).toContain('[config]')
+    expect(html).toContain('Checked stripe API keys in .env')
+    expect(html).toContain('done 3s')
+  })
+
+  it('renders failed subagents with failed status and count', () => {
+    const progress: AgentProgress[] = [
+      {
+        type: 'SubagentStarted',
+        data: {
+          subagent: 'debugger',
+          profile: 'explorer',
+          task: 'Running tests',
+        },
+      },
+      {
+        type: 'SubagentFinished',
+        data: {
+          subagent: 'debugger',
+          status: 'failed',
+          elapsed_ms: 1500,
+          steps: 1,
+          summary_preview: 'Tests failed with panic',
+        },
+      },
+    ]
+
+    const html = renderToStaticMarkup(createElement(SubagentStatusStrip, { progress }))
+    expect(html).toContain('subagent-status-strip')
+    expect(html).toContain('Subagents (0 completed, 1 failed)')
+    expect(html).toContain('[debugger]')
+    expect(html).toContain('Tests failed with panic')
+    expect(html).toContain('failed 2s')
+  })
+})

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

@@ -0,0 +1,107 @@
+import React, { useMemo } from 'react'
+import type { AgentProgress } from '../../types'
+import { parseSubagentGraph } from './SubagentDagView'
+
+export interface SubagentStatusStripProps {
+  progress: AgentProgress[]
+  onOpenDetails?: () => void
+}
+
+export function SubagentStatusStrip({ progress, onOpenDetails }: SubagentStatusStripProps) {
+  const { subagents } = useMemo(() => parseSubagentGraph(progress), [progress])
+
+  if (!subagents || subagents.length === 0) {
+    return null
+  }
+
+  const runningCount = subagents.filter(s => s.status === 'running').length
+  const completedCount = subagents.filter(s => s.status === 'completed').length
+  const failedCount = subagents.filter(s => s.status === 'failed').length
+  const anyRunning = runningCount > 0
+
+  const title = anyRunning
+    ? `Running Subagents (${completedCount}/${subagents.length} completed)`
+    : failedCount > 0
+    ? `Subagents (${completedCount} completed, ${failedCount} failed)`
+    : `Subagents (${completedCount} completed)`
+
+  return (
+    <div
+      className="subagent-status-strip"
+      data-testid="subagent-status-strip"
+      onClick={onOpenDetails}
+      role={onOpenDetails ? 'button' : undefined}
+      tabIndex={onOpenDetails ? 0 : undefined}
+      onKeyDown={e => {
+        if (onOpenDetails && (e.key === 'Enter' || e.key === ' ')) {
+          e.preventDefault()
+          onOpenDetails()
+        }
+      }}
+      title={onOpenDetails ? 'Click to inspect subagent activity' : undefined}
+    >
+      <div className="subagent-status-strip-header">
+        <div className="subagent-status-strip-header-left">
+          {anyRunning ? (
+            <span className="subagent-status-spinner" aria-hidden="true" />
+          ) : failedCount > 0 ? (
+            <span className="subagent-status-icon-alert" aria-hidden="true">⚠</span>
+          ) : (
+            <span className="subagent-status-icon-check" aria-hidden="true">✓</span>
+          )}
+          <span className="subagent-status-strip-title">{title}</span>
+        </div>
+        {onOpenDetails && (
+          <span className="subagent-status-strip-hint">Details ›</span>
+        )}
+      </div>
+
+      <div className="subagent-status-strip-list">
+        {subagents.map(agent => {
+          const isRunning = agent.status === 'running'
+          const isSuccess = agent.status === 'completed'
+          const isFailed = agent.status === 'failed'
+
+          let desc = (agent.taskSnippet && agent.taskSnippet.toLowerCase() !== 'null') ? agent.taskSnippet : 'Working on task...'
+          if ((isSuccess || isFailed) && agent.summaryPreview && agent.summaryPreview.toLowerCase() !== 'null') {
+            desc = agent.summaryPreview
+          } else if (isRunning && agent.currentTool) {
+            desc = `Running ${agent.currentTool.replace('_', ' ')}`
+          }
+
+          let suffix = ''
+          if (isSuccess) {
+            const secs = Math.max(1, Math.round((agent.elapsedMs ?? 0) / 1000))
+            suffix = `done ${secs}s`
+          } else if (isFailed) {
+            const secs = Math.max(1, Math.round((agent.elapsedMs ?? 0) / 1000))
+            suffix = `failed ${secs}s`
+          } else {
+            suffix = 'running'
+          }
+
+          return (
+            <div
+              key={agent.name}
+              className={`subagent-status-strip-row ${agent.status}`}
+              data-testid={`subagent-status-row-${agent.name}`}
+            >
+              <div className="subagent-status-strip-row-main">
+                {isRunning ? (
+                  <span className="subagent-status-row-spinner" aria-hidden="true" />
+                ) : isSuccess ? (
+                  <span className="subagent-status-row-check" aria-hidden="true">✓</span>
+                ) : (
+                  <span className="subagent-status-row-cross" aria-hidden="true">✗</span>
+                )}
+                <span className="subagent-status-strip-tag">[{agent.name}]</span>
+                <span className="subagent-status-strip-desc">{desc}</span>
+              </div>
+              <span className="subagent-status-strip-timing">{suffix}</span>
+            </div>
+          )
+        })}
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,179 @@
+import type { ArtifactFile } from '../../utils/artifacts'
+import { memo, useEffect, useMemo, useRef, useState } from 'react'
+import { X } from 'lucide-react'
+import type { AgentProgress } from '../../types'
+import { viewedImagesFrom, type ViewedImageItem } from '../../utils/viewedImages'
+import { setWorkspaceDragData } from '../../utils/workspaceDrag'
+import { mediaPlatform } from '../../platform'
+import '../../css/viewed-images.css'
+
+export function ViewedImage({
+  image,
+  chatId,
+  variant = 'card',
+  onOpenArtifact,
+}: {
+  image: ViewedImageItem
+  chatId?: string
+  variant?: 'card' | 'inline'
+  onOpenArtifact?: (artifact: ArtifactFile) => void
+}) {
+  const [src, setSrc] = useState(image.src || '')
+  const [broken, setBroken] = useState(false)
+  const [expanded, setExpanded] = useState(false)
+  const dialog = useRef<HTMLDialogElement>(null)
+
+  useEffect(() => {
+    if (image.src) {
+      setSrc(image.src)
+      setBroken(false)
+      return
+    }
+    if (image.artifactId) {
+      let active = true
+      let loaded = ''
+      mediaPlatform.readMcpArtifact(image.artifactId, chatId).then(url => {
+        if (!active) { if (url.startsWith('blob:')) URL.revokeObjectURL(url); return }
+        loaded = url
+        setSrc(url)
+        setBroken(false)
+      }).catch(() => {
+        if (active) setBroken(true)
+      })
+      return () => {
+        active = false
+        if (loaded.startsWith('blob:')) URL.revokeObjectURL(loaded)
+      }
+    }
+  }, [image.src, image.artifactId, chatId])
+
+  useEffect(() => {
+    if (expanded) dialog.current?.showModal()
+  }, [expanded])
+
+  const handleOpen = () => {
+    if (onOpenArtifact && src) {
+      onOpenArtifact({
+        path: image.path || image.name,
+        url: src,
+        type: 'image',
+      })
+      return
+    }
+    setExpanded(true)
+  }
+
+  if (variant === 'inline') {
+    return (
+      <figure className="viewed-image-inline" data-activity-image={image.id}>
+        {broken || !src ? (
+          <p className="viewed-image-inline-status" role="status">
+            {broken ? 'Image preview unavailable' : 'Loading image…'}
+          </p>
+        ) : (
+          <button
+            type="button"
+            className="viewed-image-inline-btn"
+            aria-label={`Expand ${image.name}`}
+            title={onOpenArtifact ? 'Open full image in Tools Surface' : `Expand ${image.name}`}
+            onClick={handleOpen}
+            draggable
+            onDragStart={(event) => {
+              setWorkspaceDragData(event.dataTransfer, {
+                path: image.path || image.name,
+                url: src,
+              })
+            }}
+          >
+            <img
+              src={src}
+              alt={`Viewed image: ${image.name}`}
+              loading="lazy"
+              onError={() => setBroken(true)}
+              draggable
+              onDragStart={(event) => {
+                setWorkspaceDragData(event.dataTransfer, {
+                  path: image.path || image.name,
+                  url: src,
+                })
+              }}
+            />
+            <span className="viewed-image-inline-overlay">
+              <span className="viewed-image-inline-badge">{onOpenArtifact ? 'Open in Tools' : 'Click to zoom'}</span>
+            </span>
+          </button>
+        )}
+        <dialog
+          ref={dialog}
+          className="viewed-image-dialog"
+          aria-label={`Image preview: ${image.name}`}
+          onClose={() => setExpanded(false)}
+          onClick={event => { if (event.target === event.currentTarget) dialog.current?.close() }}
+        >
+          <header>
+            <span title={image.path}>{image.name}</span>
+            <button type="button" aria-label="Close image preview" onClick={() => dialog.current?.close()}>
+              <X size={18} />
+            </button>
+          </header>
+          {expanded && src && <img src={src} alt={image.name} />}
+        </dialog>
+      </figure>
+    )
+  }
+
+  return <figure className="viewed-image" data-viewed-image={image.id}>
+    {broken || !src ? <p className="viewed-image-error" role="status">{broken ? 'Image preview unavailable' : 'Loading image…'}</p> :
+      <button
+        type="button"
+        className="viewed-image-button"
+        aria-label={`Expand ${image.name}`}
+        title={onOpenArtifact ? 'Open full image in Tools Surface' : `Expand ${image.name}`}
+        onClick={handleOpen}
+        draggable
+        onDragStart={(event) => {
+          setWorkspaceDragData(event.dataTransfer, {
+            path: image.path || image.name,
+            url: src,
+          })
+        }}
+      >
+        <img
+          src={src}
+          alt={`Viewed image: ${image.name}`}
+          loading="lazy"
+          onError={() => setBroken(true)}
+          draggable
+          onDragStart={(event) => {
+            setWorkspaceDragData(event.dataTransfer, {
+              path: image.path || image.name,
+              url: src,
+            })
+          }}
+        />
+      </button>}
+    <figcaption title={image.path}>{image.name}</figcaption>
+    <dialog ref={dialog} className="viewed-image-dialog" aria-label={`Image preview: ${image.name}`}
+      onClose={() => setExpanded(false)} onClick={event => { if (event.target === event.currentTarget) dialog.current?.close() }}>
+      <header><span title={image.path}>{image.name}</span><button type="button" aria-label="Close image preview" onClick={() => dialog.current?.close()}><X size={18} /></button></header>
+      {expanded && src && <img src={src} alt={image.name} />}
+    </dialog>
+  </figure>
+}
+
+export default memo(function ViewedImages({
+  progress,
+  chatId,
+  onOpenArtifact,
+}: {
+  progress: AgentProgress[]
+  chatId?: string
+  onOpenArtifact?: (artifact: ArtifactFile) => void
+}) {
+  const images = useMemo(() => viewedImagesFrom(progress), [progress])
+  if (!images.length) return null
+  return <section className="viewed-images" aria-label="Images viewed by Mint">
+    {images.map(image => <ViewedImage key={image.id} image={image} chatId={chatId} onOpenArtifact={onOpenArtifact} />)}
+  </section>
+})
+

package/src/renderer/shared/components/{AuthGate.tsx → app/AuthGate.tsx}

@@ -1,8 +1,8 @@
 import React, { createContext, useContext, useEffect, useId, useState } from 'react'
 import { Eye, EyeOff, LoaderCircle } from 'lucide-react'
-import type { AuthUser } from '../types'
-import { authPlatform, runtimePlatform } from '../platform'
-import '../css/auth-gate.css'
+import type { AuthUser } from '../../types'
+import { authPlatform, runtimePlatform } from '../../platform'
+import '../../css/auth-gate.css'
 
 const { authGetCurrentUser, authLogin, authLogout, authRegister, resolveAvatarUrl } = authPlatform
 

package/src/renderer/shared/components/{ChunkErrorBoundary.tsx → app/ChunkErrorBoundary.tsx}

@@ -1,5 +1,5 @@
 import React from 'react'
-import { ErrorRecovery } from './ui/error-recovery'
+import { ErrorRecovery } from '../ui/error-recovery'
 
 interface State {
   hasError: boolean
@@ -80,8 +80,8 @@ export default class ChunkErrorBoundary extends React.Component<Props, State> {
             flexDirection: 'column',
             height: '100vh',
             width: '100vw',
-            background: '#09090b',
-            color: '#e4e4e7',
+            background: 'var(--bg-canvas, #09090b)',
+            color: 'var(--text-primary, #e4e4e7)',
             fontFamily: "'IBM Plex Sans Thai', 'Noto Sans Thai', 'Inter', ui-sans-serif, system-ui, sans-serif",
             boxSizing: 'border-box',
             overflow: 'hidden',
@@ -96,15 +96,15 @@ export default class ChunkErrorBoundary extends React.Component<Props, State> {
               justifyContent: 'space-between',
               height: 38,
               padding: '0 12px',
-              background: '#141416',
-              borderBottom: '1px solid rgba(255, 255, 255, 0.08)',
+              background: 'var(--bg-surface, #141416)',
+              borderBottom: '1px solid var(--border-subtle, rgba(255, 255, 255, 0.08))',
               userSelect: 'none',
               WebkitAppRegion: 'drag',
               flexShrink: 0,
             } as React.CSSProperties}
           >
-            <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: '0.8rem', color: '#9ca3af' }}>
-              <span style={{ color: '#10b981', fontWeight: 700 }}>✦</span> Mint Agent
+            <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: '0.8rem', color: 'var(--text-muted, #9ca3af)' }}>
+              <span style={{ color: 'var(--interactive-fg, #10b981)', fontWeight: 700 }}>✦</span> Mint Agent
             </div>
             <div
               style={{
@@ -124,9 +124,9 @@ export default class ChunkErrorBoundary extends React.Component<Props, State> {
                   height: 28,
                   background: 'transparent',
                   border: 'none',
-                  color: '#9ca3af',
+                  color: 'var(--text-muted, #9ca3af)',
                   cursor: 'pointer',
-                  borderRadius: 4,
+                  borderRadius: 'var(--radius-2xs, 4px)',
                   display: 'flex',
                   alignItems: 'center',
                   justifyContent: 'center',
@@ -144,9 +144,9 @@ export default class ChunkErrorBoundary extends React.Component<Props, State> {
                   height: 28,
                   background: 'transparent',
                   border: 'none',
-                  color: '#9ca3af',
+                  color: 'var(--text-muted, #9ca3af)',
                   cursor: 'pointer',
-                  borderRadius: 4,
+                  borderRadius: 'var(--radius-2xs, 4px)',
                   display: 'flex',
                   alignItems: 'center',
                   justifyContent: 'center',
@@ -164,9 +164,9 @@ export default class ChunkErrorBoundary extends React.Component<Props, State> {
                   height: 28,
                   background: 'transparent',
                   border: 'none',
-                  color: '#9ca3af',
+                  color: 'var(--text-muted, #9ca3af)',
                   cursor: 'pointer',
-                  borderRadius: 4,
+                  borderRadius: 'var(--radius-2xs, 4px)',
                   display: 'flex',
                   alignItems: 'center',
                   justifyContent: 'center',

package/src/renderer/shared/components/{CommandPalette.tsx → app/CommandPalette.tsx}

@@ -364,7 +364,7 @@ export function CommandPalette({
         left: 0,
         right: 0,
         bottom: 0,
-        background: 'rgba(5, 7, 12, 0.72)',
+        background: 'var(--bg-backdrop)',
         backdropFilter: 'blur(8px)',
         zIndex: 9999,
         display: 'flex',
@@ -379,10 +379,10 @@ export function CommandPalette({
         style={{
           width: '100%',
           maxWidth: '620px',
-          background: 'var(--bg-primary, #111317)',
-          border: '1px solid var(--border-color, #232730)',
-          borderRadius: '14px',
-          boxShadow: '0 24px 60px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.08)',
+          background: 'var(--bg-overlay)',
+          border: '1px solid var(--border-default)',
+          borderRadius: 'var(--radius-2xl, 22px)',
+          boxShadow: 'var(--shadow-lg)',
           overflow: 'hidden',
           display: 'flex',
           flexDirection: 'column',
@@ -396,9 +396,9 @@ export function CommandPalette({
             display: 'flex',
             alignItems: 'center',
             padding: '14px 18px',
-            borderBottom: '1px solid var(--border-color, #232730)',
+            borderBottom: '1px solid var(--border-subtle)',
             gap: '12px',
-            background: 'var(--bg-secondary, #181a20)',
+            background: 'var(--bg-surface-raised)',
           }}
         >
           <svg
@@ -427,7 +427,7 @@ export function CommandPalette({
               background: 'transparent',
               border: 'none',
               outline: 'none',
-              color: '#f3f4f6',
+              color: 'var(--text-primary)',
               fontSize: '1rem',
               fontWeight: 500,
             }}
@@ -435,12 +435,12 @@ export function CommandPalette({
           <kbd
             style={{
               padding: '2px 7px',
-              borderRadius: '4px',
-              background: 'rgba(255, 255, 255, 0.08)',
-              color: 'var(--text-muted, #9ca3af)',
+              borderRadius: 'var(--radius-2xs, 4px)',
+              background: 'var(--bg-surface-soft)',
+              color: 'var(--text-muted)',
               fontSize: '0.7rem',
               fontWeight: 600,
-              border: '1px solid rgba(255, 255, 255, 0.1)',
+              border: '1px solid var(--border-default)',
             }}
           >
             ESC
@@ -460,7 +460,7 @@ export function CommandPalette({
           }}
         >
           {filteredItems.length === 0 ? (
-            <div style={{ padding: '32px 16px', textAlign: 'center', color: '#9ca3af', fontSize: '0.88rem' }}>
+            <div style={{ padding: '32px 16px', textAlign: 'center', color: 'var(--text-muted)', fontSize: '0.88rem' }}>
               No matching commands, models, or chats found
             </div>
           ) : (
@@ -472,7 +472,7 @@ export function CommandPalette({
                     fontWeight: 700,
                     textTransform: 'none',
                     letterSpacing: '0.06em',
-                    color: 'var(--text-muted, #6b7280)',
+                    color: 'var(--text-muted)',
                     padding: '8px 10px 4px 10px',
                   }}
                 >
@@ -493,10 +493,10 @@ export function CommandPalette({
                         alignItems: 'center',
                         justifyContent: 'space-between',
                         padding: '9px 12px',
-                        borderRadius: '8px',
+                        borderRadius: 'var(--radius-sm, 8px)',
                         cursor: 'pointer',
-                        background: isSelected ? 'rgba(16, 185, 129, 0.12)' : 'transparent',
-                        border: `1px solid ${isSelected ? 'rgba(16, 185, 129, 0.3)' : 'transparent'}`,
+                        background: isSelected ? 'var(--accent-subtle)' : 'transparent',
+                        border: `1px solid ${isSelected ? 'var(--accent-border)' : 'transparent'}`,
                         transition: 'all 0.1s ease',
                       }}
                     >
@@ -506,9 +506,9 @@ export function CommandPalette({
                             fontSize: '0.68rem',
                             fontWeight: 700,
                             padding: '2px 5px',
-                            borderRadius: '4px',
-                            background: 'rgba(255, 255, 255, 0.08)',
-                            color: isSelected ? '#10b981' : '#94a3b8',
+                            borderRadius: 'var(--radius-2xs, 4px)',
+                            background: 'var(--bg-surface-soft)',
+                            color: isSelected ? 'var(--interactive-fg)' : 'var(--text-muted)',
                             fontFamily: 'monospace',
                             flexShrink: 0,
                             minWidth: '22px',
@@ -522,7 +522,7 @@ export function CommandPalette({
                             style={{
                               fontSize: '0.85rem',
                               fontWeight: 600,
-                              color: isSelected ? '#ffffff' : '#e2e8f0',
+                              color: 'var(--text-primary)',
                               overflow: 'hidden',
                               textOverflow: 'ellipsis',
                               whiteSpace: 'nowrap',
@@ -534,7 +534,7 @@ export function CommandPalette({
                             <span
                               style={{
                                 fontSize: '0.72rem',
-                                color: '#94a3b8',
+                                color: 'var(--text-muted)',
                                 overflow: 'hidden',
                                 textOverflow: 'ellipsis',
                                 whiteSpace: 'nowrap',
@@ -550,11 +550,11 @@ export function CommandPalette({
                         <span
                           style={{
                             fontSize: '0.7rem',
-                            color: '#10b981',
+                            color: 'var(--interactive-fg)',
                             fontWeight: 600,
                             padding: '2px 6px',
-                            borderRadius: '4px',
-                            background: 'rgba(16, 185, 129, 0.15)',
+                            borderRadius: 'var(--radius-2xs, 4px)',
+                            background: 'var(--accent-subtle)',
                           }}
                         >
                           ↵ Select
@@ -575,15 +575,15 @@ export function CommandPalette({
             alignItems: 'center',
             justifyContent: 'space-between',
             padding: '8px 16px',
-            borderTop: '1px solid var(--border-color, #232730)',
-            background: 'var(--bg-secondary, #181a20)',
+            borderTop: '1px solid var(--border-subtle)',
+            background: 'var(--bg-surface-raised)',
             fontSize: '0.72rem',
-            color: '#94a3b8',
+            color: 'var(--text-muted)',
           }}
         >
           <div style={{ display: 'flex', gap: '12px' }}>
-            <span><kbd style={{ background: 'rgba(255,255,255,0.1)', padding: '1px 4px', borderRadius: '3px' }}>↑</kbd> <kbd style={{ background: 'rgba(255,255,255,0.1)', padding: '1px 4px', borderRadius: '3px' }}>↓</kbd> to navigate</span>
-            <span><kbd style={{ background: 'rgba(255,255,255,0.1)', padding: '1px 4px', borderRadius: '3px' }}>↵</kbd> to select</span>
+            <span><kbd style={{ background: 'var(--bg-surface-soft)', border: '1px solid var(--border-subtle)', padding: '1px 4px', borderRadius: 'var(--radius-2xs, 4px)' }}>↑</kbd> <kbd style={{ background: 'var(--bg-surface-soft)', border: '1px solid var(--border-subtle)', padding: '1px 4px', borderRadius: 'var(--radius-2xs, 4px)' }}>↓</kbd> to navigate</span>
+            <span><kbd style={{ background: 'var(--bg-surface-soft)', border: '1px solid var(--border-subtle)', padding: '1px 4px', borderRadius: 'var(--radius-2xs, 4px)' }}>↵</kbd> to select</span>
           </div>
           <span>Universal command palette</span>
         </div>

package/src/renderer/shared/components/{DashboardSidebar.tsx → app/DashboardSidebar.tsx}

@@ -1,8 +1,8 @@
-import { useState, useEffect, useRef, useMemo, type MouseEvent as ReactMouseEvent, type DragEvent as ReactDragEvent } from 'react'
+import { memo, useState, useEffect, useRef, useMemo, type MouseEvent as ReactMouseEvent, type DragEvent as ReactDragEvent } from 'react'
 import { Check, ChevronDown, Folder, FolderInput, FolderMinus, Pencil, Plus, Trash2 } from 'lucide-react'
-import { renderSkillsSvgIcon, renderMcpHubSvgIcon, renderPluginsSvgIcon, renderScheduledTasksSvgIcon, renderLinkedFoldersSvgIcon } from '../constants/plugins'
+import { renderSkillsSvgIcon, renderMcpHubSvgIcon, renderPluginsSvgIcon, renderScheduledTasksSvgIcon, renderLinkedFoldersSvgIcon } from '../../constants/plugins'
 import { useAuthUser } from './AuthGate'
-import { runtimePlatform } from '../platform'
+import { runtimePlatform } from '../../platform'
 
 export type DashboardView = 'chat' | 'pictures' | 'workspace' | 'imagine' | 'veo' | 'skills' | 'mcp' | 'plugins' | 'cron' | 'link' | 'code'
 
@@ -48,7 +48,7 @@ interface DashboardSidebarProps {
   onNewChatInProject?: (workspacePath: string) => void
 }
 
-export default function DashboardSidebar({
+function DashboardSidebar({
   view,
   sidebarCollapsed,
   sending,
@@ -651,7 +651,7 @@ export default function DashboardSidebar({
                 fontWeight: 600,
                 padding: '1px 6px',
                 borderRadius: '10px',
-                background: 'rgba(255, 255, 255, 0.08)',
+                background: 'var(--bg-surface-hover)',
                 color: 'var(--text-muted, #94a3b8)',
               }}
             >
@@ -1226,3 +1226,5 @@ export default function DashboardSidebar({
     </aside>
   )
 }
+
+export default memo(DashboardSidebar)