@pheem49/mint 1.14.0 → 1.16.0

package/src/renderer/shared/components/SkillsView.tsx

@@ -4,9 +4,34 @@ import { renderFormattedMessage } from '../utils/markdown'
 import '../css/management-views.css'
 import type { LearnedSkill } from '../types'
 
-/** First non-empty line of a skill's content, for the one-line row preview. */
-function firstLine(text: string): string {
-  return text.split('\n').map((l) => l.replace(/^#+\s*/, '').trim()).find(Boolean) || ''
+/** Prefer a skill's frontmatter summary; otherwise preview its first body line. */
+function skillPreview(skill: LearnedSkill): string {
+  if (skill.description?.trim()) return skill.description.trim()
+
+  const lines = skill.content.trimStart().split(/\r?\n/)
+  if (lines[0]?.trim() === '---') {
+    const frontmatterEnd = lines.findIndex((line, index) => index > 0 && line.trim() === '---')
+    if (frontmatterEnd > 0) {
+      const descriptionLine = lines
+        .slice(1, frontmatterEnd)
+        .find((line) => /^description\s*:/i.test(line.trim()))
+      if (descriptionLine) {
+        const description = descriptionLine.replace(/^\s*description\s*:\s*/i, '').trim()
+        if (description && description !== '>' && description !== '|') {
+          return description.replace(/^("([\s\S]*)"|'([\s\S]*)')$/, (_, _quoted, double, single) => double ?? single)
+        }
+      }
+
+      lines.splice(0, frontmatterEnd + 1)
+    }
+  }
+
+  return lines.map((line) => line.replace(/^#+\s*/, '').trim()).find(Boolean) || ''
+}
+
+function isWorkspaceSkill(skill: LearnedSkill): boolean {
+  // Desktop Tauri returns `location`; the Web API returns `is_workspace`.
+  return Boolean(skill.is_workspace || skill.location === 'workspace')
 }
 
 export type { LearnedSkill }
@@ -30,7 +55,7 @@ export const SkillsView: React.FC<SkillsViewProps> = React.memo(function SkillsV
   const [searchQuery, setSearchQuery] = useState('')
   const [scopeFilter, setScopeFilter] = useState<'all' | 'workspace' | 'global'>('all')
 
-  // Teach New Skill Form State
+  // Teach new skill Form State
   const [newSkillName, setNewSkillName] = useState('')
   const [newSkillContent, setNewSkillContent] = useState('')
   const [adding, setAdding] = useState(false)
@@ -93,8 +118,8 @@ export const SkillsView: React.FC<SkillsViewProps> = React.memo(function SkillsV
 
     if (!matchesSearch) return false
 
-    if (scopeFilter === 'workspace') return Boolean(s.is_workspace)
-    if (scopeFilter === 'global') return !s.is_workspace
+    if (scopeFilter === 'workspace') return isWorkspaceSkill(s)
+    if (scopeFilter === 'global') return !isWorkspaceSkill(s)
     return true
   })
 
@@ -122,7 +147,7 @@ export const SkillsView: React.FC<SkillsViewProps> = React.memo(function SkillsV
             <line x1="12" y1="5" x2="12" y2="19" />
             <line x1="5" y1="12" x2="19" y2="12" />
           </svg>
-          Teach New Skill
+          Teach new skill
         </button>
       </div>
 
@@ -189,10 +214,10 @@ export const SkillsView: React.FC<SkillsViewProps> = React.memo(function SkillsV
             <div key={s.name} className="mgmt-row" onClick={() => setDetailSkill(s)}>
               <div className="mgmt-row-main">
                 <div className="mgmt-row-title">{s.name}</div>
-                <div className="mgmt-row-sub">{s.description || firstLine(s.content)}</div>
+                <div className="mgmt-row-sub">{skillPreview(s)}</div>
               </div>
-              <span className={`management-tag ${s.is_workspace ? 'workspace' : 'global'}`}>
-                {s.is_workspace ? 'Workspace' : 'Global'}
+              <span className={`management-tag ${isWorkspaceSkill(s) ? 'workspace' : 'global'}`}>
+                {isWorkspaceSkill(s) ? 'Workspace' : 'Global'}
               </span>
             </div>
           ))}
@@ -218,8 +243,8 @@ export const SkillsView: React.FC<SkillsViewProps> = React.memo(function SkillsV
             </div>
 
             <div className="management-modal-body">
-              <span className={`management-tag ${detailSkill.is_workspace ? 'workspace' : 'global'}`}>
-                {detailSkill.is_workspace ? 'Workspace' : 'Global'}
+              <span className={`management-tag ${isWorkspaceSkill(detailSkill) ? 'workspace' : 'global'}`}>
+                {isWorkspaceSkill(detailSkill) ? 'Workspace' : 'Global'}
               </span>
 
               {detailSkill.description && (
@@ -247,13 +272,13 @@ export const SkillsView: React.FC<SkillsViewProps> = React.memo(function SkillsV
         </div>
       )}
 
-      {/* Teach New Skill Modal */}
+      {/* Teach new skill Modal */}
       {showTeachModal && (
         <div className="management-modal-overlay">
           <div className="management-modal">
             <div className="management-modal-header">
               <h2 className="management-modal-title">
-                Teach New Skill to Mint
+                Teach new skill to Mint
               </h2>
               <button
                 type="button"
@@ -268,7 +293,7 @@ export const SkillsView: React.FC<SkillsViewProps> = React.memo(function SkillsV
               <div className="management-modal-body">
                 <div className="management-form-group">
                   <label className="management-label">
-                    Skill Name (e.g. typescript-standards)
+                    Skill name (e.g. typescript-standards)
                   </label>
                   <input
                     type="text"
@@ -282,7 +307,7 @@ export const SkillsView: React.FC<SkillsViewProps> = React.memo(function SkillsV
 
                 <div className="management-form-group">
                   <label className="management-label">
-                    Skill Instructions / Content (Markdown supported)
+                    Skill instructions / content (Markdown supported)
                   </label>
                   <textarea
                     className="management-textarea-field"

package/src/renderer/shared/components/SlashChoicePanel.tsx

@@ -0,0 +1,88 @@
+import { useEffect, useRef, useState, type RefObject } from 'react'
+import type { SlashChoice } from '../platform'
+import '../css/slash-choice.css'
+
+interface Props {
+  choice: { command: string; title: string; options: SlashChoice[] }
+  inputRef: RefObject<HTMLTextAreaElement | null>
+  onSelect?: (value: string) => void
+  onDismiss?: () => void
+}
+
+export default function SlashChoicePanel({ choice, inputRef, onSelect, onDismiss }: Props) {
+  const [selectedIndex, setSelectedIndex] = useState(0)
+  const panelRef = useRef<HTMLElement>(null)
+  const optionRefs = useRef<Array<HTMLButtonElement | null>>([])
+  const selected = Math.min(selectedIndex, Math.max(0, choice.options.length - 1))
+
+  useEffect(() => {
+    setSelectedIndex(0)
+    inputRef.current?.focus()
+  }, [choice, inputRef])
+
+  useEffect(() => {
+    optionRefs.current[selected]?.scrollIntoView({ block: 'nearest' })
+  }, [selected, choice])
+
+  useEffect(() => {
+    const onKeyDown = (event: globalThis.KeyboardEvent) => {
+      if (event.isComposing || event.shiftKey || event.altKey || event.ctrlKey || event.metaKey) return
+      const target = event.target as Node | null
+      const onInput = target === inputRef.current
+      const inPanel = target !== null && panelRef.current?.contains(target)
+      if (event.key !== 'Escape' && !onInput && !inPanel) return
+      // Keep native Enter activation for the dismiss button.
+      if (event.key === 'Enter' && !onInput && !optionRefs.current.includes(target as HTMLButtonElement)) return
+      if (event.key === 'Escape') {
+        event.preventDefault()
+        event.stopPropagation()
+        onDismiss?.()
+        inputRef.current?.focus()
+        return
+      }
+      if (!choice.options.length) return
+      if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
+        event.preventDefault()
+        event.stopPropagation()
+        const next = (selected + (event.key === 'ArrowDown' ? 1 : -1) + choice.options.length) % choice.options.length
+        setSelectedIndex(next)
+        if (inPanel) optionRefs.current[next]?.focus()
+      } else if (event.key === 'Enter') {
+        event.preventDefault()
+        event.stopPropagation()
+        onSelect?.(choice.options[selected].value)
+        inputRef.current?.focus()
+      }
+    }
+    // Capture before the composer's history/submit handlers claim these keys.
+    window.addEventListener('keydown', onKeyDown, true)
+    return () => window.removeEventListener('keydown', onKeyDown, true)
+  }, [choice, inputRef, onDismiss, onSelect, selected])
+
+  return (
+    <section ref={panelRef} className="slash-choice-panel" aria-label={`${choice.command} choices`}>
+      <header className="slash-choice-heading">
+        <div><span className="slash-choice-command">{choice.command}</span><p>{choice.title}</p></div>
+        <button type="button" onClick={onDismiss} aria-label="Dismiss choices">×</button>
+      </header>
+      <div className="slash-choice-options" role="group" aria-label="Options">
+        {choice.options.map((option, index) => (
+          <button
+            key={option.value}
+            ref={(element) => { optionRefs.current[index] = element }}
+            type="button"
+            aria-pressed={index === selected}
+            className={index === selected ? 'active' : undefined}
+            onPointerMove={() => setSelectedIndex(index)}
+            onFocus={() => setSelectedIndex(index)}
+            onClick={() => { onSelect?.(option.value); inputRef.current?.focus() }}
+          >
+            <span>{index + 1}.</span>{option.label}
+          </button>
+        ))}
+      </div>
+      <span className="slash-choice-status" role="status">{choice.options[selected]?.label}</span>
+      <div className="slash-choice-hint">↑↓ select · Enter choose · Esc dismiss</div>
+    </section>
+  )
+}

package/src/renderer/shared/components/SlashSuggestions.test.tsx

@@ -0,0 +1,33 @@
+import React from 'react'
+import { renderToStaticMarkup } from 'react-dom/server'
+import { describe, expect, it } from 'vitest'
+import SlashSuggestions from './SlashSuggestions'
+
+const render = (message: string, suppressed = false) => renderToStaticMarkup(
+  <SlashSuggestions message={message} onComplete={() => {}} anchorRef={{ current: null }} suppressed={suppressed} />,
+)
+
+describe('composer command suggestions', () => {
+  it('finds a command by its description while retaining its executable token', () => {
+    const html = render('/statistics')
+    expect(html).toContain('/stats')
+    expect(html).toContain('role="option"')
+    expect(html).not.toContain('/clear')
+  })
+  it('shows token-prefix matches before description-only matches', () => {
+    const html = render('/st')
+    expect(html.indexOf('>/stats<')).toBeLessThan(html.indexOf('>/mods<'))
+  })
+  it('keeps a command argument as a usage hint instead of unrelated search results', () => {
+    const html = render('/remember a durable fact')
+    expect(html).toContain('/remember')
+    expect(html).not.toContain('role="option"')
+  })
+  it('keeps CLI-only actions out of the graphical menu and hides it during history browsing', () => {
+    const html = render('/')
+    expect(html).toContain('/models')
+    expect(html).not.toContain('/exit')
+    expect(html).not.toContain('/theme')
+    expect(render('/', true)).toBe('')
+  })
+})

package/src/renderer/shared/components/SlashSuggestions.tsx

@@ -8,8 +8,11 @@ import {
   type KeyboardEvent,
   type RefObject,
 } from 'react'
+import { Terminal, Brain, Folder, Wrench, BookOpen, AtSign } from 'lucide-react'
+import '../css/slash-suggestions.css'
 import { SLASH_COMMANDS, type SlashCommand } from '../constants/slashCommands'
-import { listLearnedSkills, type LearnedSkill } from '@/tauri'
+import { catalogPlatform } from '../platform'
+import type { LearnedSkill } from '../types'
 
 /** Parent calls `handleKeyDown` from the textarea's onKeyDown; a `true` return
  *  means the menu consumed the key and the caller should stop. */
@@ -81,7 +84,7 @@ const SlashSuggestions = forwardRef<SlashSuggestionsHandle, Props>(function Slas
   useEffect(() => {
     if (mode !== 'skill') return
     let alive = true
-    listLearnedSkills(workspacePath)
+    catalogPlatform.listLearnedSkills(workspacePath)
       .then((res) => {
         if (alive && Array.isArray(res)) setSkills(res)
       })
@@ -95,8 +98,19 @@ const SlashSuggestions = forwardRef<SlashSuggestionsHandle, Props>(function Slas
   const slashMatches = useMemo(() => {
     if (mode !== 'slash') return [] as SlashCommand[]
     const q = raw.toLowerCase()
-    const hits = SLASH_COMMANDS.filter((c) => c.command.toLowerCase().startsWith(q))
-    return CATEGORY_ORDER.flatMap((cat) => hits.filter((h) => (h.category ?? 'tools') === cat))
+    const typingArguments = SLASH_COMMANDS.some((c) => q.startsWith(c.command.toLowerCase() + ' '))
+    const words = q.slice(1).trim().split(/\s+/).filter(Boolean)
+    const hits = SLASH_COMMANDS.filter((c) =>
+      c.command.toLowerCase().startsWith(q) ||
+      (!typingArguments && !/\s/.test(q) && words.every((word) => `${c.command} ${c.description}`.toLowerCase().includes(word))),
+    )
+    const byCategory = (commands: SlashCommand[]) => CATEGORY_ORDER.flatMap((cat) =>
+      commands.filter((command) => (command.category ?? 'tools') === cat),
+    )
+    return [
+      ...byCategory(hits.filter((command) => command.command.toLowerCase().startsWith(q))),
+      ...byCategory(hits.filter((command) => !command.command.toLowerCase().startsWith(q))),
+    ]
   }, [mode, raw])
 
   // The command whose arguments are being typed (raw is past its token) — used
@@ -206,6 +220,16 @@ const SlashSuggestions = forwardRef<SlashSuggestionsHandle, Props>(function Slas
         return true
       }
       if ((event.key === 'Enter' || event.key === 'Tab') && !event.shiftKey && !event.nativeEvent.isComposing) {
+        // A complete slash command is an invocation, not an autocomplete
+        // candidate. Let Enter reach the composer submit handler so commands
+        // such as `/models` can open their interactive picker on the first keypress.
+        if (
+          event.key === 'Enter' &&
+          mode === 'slash' &&
+          flat.some((item) => (item as SlashCommand).command.toLowerCase() === raw.trim().toLowerCase())
+        ) {
+          return false
+        }
         const item = flat[selIndex] ?? flat[0]
         if (!item) return false
         pick(item)
@@ -247,18 +271,22 @@ const SlashSuggestions = forwardRef<SlashSuggestionsHandle, Props>(function Slas
       aria-selected={idx === selIndex}
       data-idx={idx}
       className={`slash-suggestion-item ${idx === selIndex ? 'active' : ''}`}
-      onMouseDown={(e) => {
-        e.preventDefault()
-        pick(item)
-      }}
+      title={[name, usage, desc].filter(Boolean).join(" · ")}
+      onMouseDown={(e) => e.preventDefault()}
+      onClick={() => pick(item)}
       onPointerMove={() => setSelIndex(idx)}
     >
+      <span className="slash-cmd-icon" aria-hidden="true">
+        {mode === 'skill' ? <BookOpen size={15} /> : mode === 'at' ? <AtSign size={15} /> :
+          (item as SlashCommand).category === 'models' ? <Brain size={15} /> :
+          (item as SlashCommand).category === 'workspace' ? <Folder size={15} /> :
+          (item as SlashCommand).category === 'tools' ? <Wrench size={15} /> : <Terminal size={15} />}
+      </span>
       <span className="slash-cmd-name">{name}</span>
-      {badge && <span className="skill-badge">{badge}</span>}
       <span className="slash-cmd-body">
         <span className="slash-cmd-desc">{desc}</span>
-        {usage && <span className="slash-cmd-usage">{usage}</span>}
       </span>
+      {badge && <span className="skill-badge">{badge}</span>}
     </button>
   )
 
@@ -268,10 +296,10 @@ const SlashSuggestions = forwardRef<SlashSuggestionsHandle, Props>(function Slas
         {mode === 'slash' ? 'Slash Commands' : mode === 'skill' ? 'Learned Skills' : 'Context Mentions'}
         <span className="slash-suggestions-count">{headerLabel}</span>
       </div>
-      <div className="slash-suggestions-list" ref={listRef} role="listbox">
+      <div className="slash-suggestions-list" ref={listRef} role="listbox" aria-label={mode === 'slash' ? 'Slash commands' : mode === 'skill' ? 'Skills' : 'Context mentions'}>
         {mode === 'slash' &&
           (flat.length > 0
-            ? CATEGORY_ORDER.map((cat) => {
+            ? [...new Set(slashMatches.map((match) => match.category ?? 'tools'))].map((cat) => {
                 const items = slashMatches.filter((m) => (m.category ?? 'tools') === cat)
                 if (!items.length) return null
                 return (
@@ -310,6 +338,7 @@ const SlashSuggestions = forwardRef<SlashSuggestionsHandle, Props>(function Slas
             row(item, idx, item.label, item.desc, item.kind === 'plugin' ? '[Plugin]' : '[Context]'),
           )}
       </div>
+      <div className="slash-suggestions-hint">↑↓ select · Tab complete · Enter send · Esc close</div>
     </div>
   )
 })

package/src/renderer/shared/components/SourcesBlock.tsx

@@ -1,6 +1,7 @@
-import React, { useState, useMemo } from 'react'
+import React, { useState, useMemo, useEffect } from 'react'
 import type { WebSearchSource } from '../utils/agentActivity'
 import { resolveMediaUrl } from '../utils/markdown'
+import '../css/sources-block.css'
 
 export interface SourcesBlockProps {
   sources: WebSearchSource[]
@@ -50,6 +51,17 @@ export function groupSourcesByDomain(sources: WebSearchSource[]): DomainGroup[]
 export const SourcesBlock: React.FC<SourcesBlockProps> = React.memo(function SourcesBlock({ sources }) {
   const [isExpanded, setIsExpanded] = useState(false)
   const [openDropdownDomain, setOpenDropdownDomain] = useState<string | null>(null)
+  const [isDark, setIsDark] = useState(
+    () => (document.documentElement.getAttribute('data-theme') || 'dark') !== 'light'
+  )
+
+  useEffect(() => {
+    const observer = new MutationObserver(() => {
+      setIsDark((document.documentElement.getAttribute('data-theme') || 'dark') !== 'light')
+    })
+    observer.observe(document.documentElement, { attributeFilter: ['data-theme'] })
+    return () => observer.disconnect()
+  }, [])
 
   const domainGroups = useMemo(() => {
     const groups = groupSourcesByDomain(sources)
@@ -76,7 +88,7 @@ export const SourcesBlock: React.FC<SourcesBlockProps> = React.memo(function Sou
   const hiddenGroups = domainGroups.slice(MAX_INITIAL_CARDS)
 
   return (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: '10px', marginBottom: '12px', marginTop: '4px' }}>
+    <div className="sources-block" style={{ display: 'flex', flexDirection: 'column', gap: '10px', marginBottom: '12px', marginTop: '4px' }}>
       {/* Header */}
       <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
         <svg
@@ -92,13 +104,14 @@ export const SourcesBlock: React.FC<SourcesBlockProps> = React.memo(function Sou
         >
           <path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20" />
         </svg>
-        <span style={{ fontSize: '0.85rem', fontWeight: 600, color: '#f1f5f9', letterSpacing: '0.01em' }}>
+        <span style={{ fontSize: '0.85rem', fontWeight: 600, color: isDark ? '#f1f5f9' : '#0f172a', letterSpacing: '0.01em' }}>
           Sources
         </span>
       </div>
 
       {/* Domain Cards Container (wraps to next line if exceeding frame width) */}
       <div
+        className="sources-cards"
         style={{
           display: 'flex',
           flexWrap: 'wrap',
@@ -113,26 +126,18 @@ export const SourcesBlock: React.FC<SourcesBlockProps> = React.memo(function Sou
           return (
             <div
               key={group.domain}
-              style={{
-                position: 'relative',
-                flex: '1 1 180px',
-                maxWidth: '240px',
-                minWidth: '160px',
-                boxSizing: 'border-box',
-              }}
+              className="source-card-group"
             >
               <div
+                className="source-card"
                 style={{
-                  display: 'flex',
-                  flexDirection: 'column',
                   justifyContent: 'space-between',
-                  borderRadius: '10px',
-                  background: 'rgba(255, 255, 255, 0.04)',
-                  border: '1px solid rgba(255, 255, 255, 0.08)',
+                  borderRadius: '16px',
+                  background: 'var(--bg-surface-soft)',
+                  border: `1px solid ${isDark ? 'rgba(255,255,255,0.08)' : 'rgba(15,23,42,0.1)'}`,
                   transition: 'all 0.15s ease',
                   cursor: 'pointer',
                   minHeight: '68px',
-                  height: '100%',
                   boxSizing: 'border-box',
                   overflow: 'hidden',
                 }}
@@ -149,20 +154,20 @@ export const SourcesBlock: React.FC<SourcesBlockProps> = React.memo(function Sou
                 }}
                 onMouseEnter={(e) => {
                   const el = e.currentTarget
-                  el.style.background = 'rgba(255, 255, 255, 0.07)'
-                  el.style.borderColor = 'rgba(255, 255, 255, 0.16)'
+                  el.style.background = 'var(--bg-surface-hover)'
+                  el.style.borderColor = isDark ? 'rgba(255,255,255,0.16)' : 'rgba(15,23,42,0.2)'
                   el.style.transform = 'translateY(-1px)'
                 }}
                 onMouseLeave={(e) => {
                   const el = e.currentTarget
-                  el.style.background = 'rgba(255, 255, 255, 0.04)'
-                  el.style.borderColor = 'rgba(255, 255, 255, 0.08)'
+                  el.style.background = 'var(--bg-surface-soft)'
+                  el.style.borderColor = isDark ? 'rgba(255,255,255,0.08)' : 'rgba(15,23,42,0.1)'
                   el.style.transform = 'translateY(0)'
                 }}
               >
                 {/* Thumbnail (if this source has an associated image) */}
                 {primaryItem.imageUrl && (
-                  <div style={{ width: '100%', height: '80px', overflow: 'hidden', background: 'rgba(255,255,255,0.06)', flexShrink: 0 }}>
+                  <div className="source-card-thumbnail" style={{ overflow: 'hidden', background: 'var(--bg-surface-raised)', flexShrink: 0 }}>
                     <img
                       src={resolveMediaUrl(primaryItem.imageUrl)}
                       alt={primaryItem.title}
@@ -174,14 +179,14 @@ export const SourcesBlock: React.FC<SourcesBlockProps> = React.memo(function Sou
                   </div>
                 )}
 
-                <div style={{ display: 'flex', flexDirection: 'column', flex: 1, padding: '10px 12px' }}>
+                <div className="source-card-content" style={{ display: 'flex', flexDirection: 'column', flex: 1, padding: '10px 12px' }}>
                   {/* Title */}
                   <div
                     title={primaryItem.title}
                     style={{
                       fontSize: '0.8rem',
                       fontWeight: 500,
-                      color: '#f1f5f9',
+                      color: 'var(--text-primary)',
                       lineHeight: '1.3',
                       display: '-webkit-box',
                       WebkitLineClamp: 2,
@@ -264,15 +269,15 @@ export const SourcesBlock: React.FC<SourcesBlockProps> = React.memo(function Sou
               {/* Sub-links Popover Dropdown when multi-item domain card clicked */}
               {isDropdownOpen && extraCount > 0 && (
                 <div
+                  className="source-links-popover"
                   style={{
                     position: 'absolute',
                     top: '100%',
                     left: 0,
-                    width: '260px',
                     marginTop: '6px',
-                    background: '#18181b',
-                    border: '1px solid rgba(255, 255, 255, 0.15)',
-                    borderRadius: '8px',
+                    background: 'var(--bg-overlay)',
+                    border: '1px solid var(--border-default)',
+                    borderRadius: '14px',
                     boxShadow: '0 10px 25px rgba(0,0,0,0.6)',
                     zIndex: 40,
                     padding: '6px',
@@ -287,10 +292,10 @@ export const SourcesBlock: React.FC<SourcesBlockProps> = React.memo(function Sou
                       alignItems: 'center',
                       justifyContent: 'space-between',
                       padding: '4px 6px',
-                      borderBottom: '1px solid rgba(255,255,255,0.06)',
+                      borderBottom: '1px solid var(--border-subtle)',
                     }}
                   >
-                    <span style={{ fontSize: '0.7rem', fontWeight: 600, color: '#94a3b8' }}>
+                    <span style={{ fontSize: '0.7rem', fontWeight: 600, color: 'var(--text-muted)' }}>
                       All links from {group.domain} ({group.items.length})
                     </span>
                     <button
@@ -320,14 +325,14 @@ export const SourcesBlock: React.FC<SourcesBlockProps> = React.memo(function Sou
                         gap: '2px',
                         padding: '6px 8px',
                         borderRadius: '6px',
-                        color: '#e2e8f0',
+                        color: 'var(--text-primary)',
                         textDecoration: 'none',
                         fontSize: '0.75rem',
-                        background: 'rgba(255,255,255,0.02)',
+                        background: 'var(--bg-surface-soft)',
                         transition: 'background 0.15s',
                       }}
-                      onMouseEnter={(e) => { (e.currentTarget as HTMLAnchorElement).style.background = 'rgba(255,255,255,0.08)' }}
-                      onMouseLeave={(e) => { (e.currentTarget as HTMLAnchorElement).style.background = 'rgba(255,255,255,0.02)' }}
+                      onMouseEnter={(e) => { (e.currentTarget as HTMLAnchorElement).style.background = 'var(--bg-surface-hover)' }}
+                      onMouseLeave={(e) => { (e.currentTarget as HTMLAnchorElement).style.background = 'var(--bg-surface-soft)' }}
                     >
                       <div style={{ fontWeight: 500, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                         {itemIdx + 1}. {item.title}
@@ -345,34 +350,33 @@ export const SourcesBlock: React.FC<SourcesBlockProps> = React.memo(function Sou
 
         {/* Overflow "View X more" Card */}
         {!isExpanded && remainingSourcesCount > 0 && (
-          <div
+          <button
+            type="button"
+            className="sources-more-button"
+            aria-expanded={false}
             onClick={() => setIsExpanded(true)}
             style={{
               display: 'flex',
               alignItems: 'center',
               justifyContent: 'space-between',
               padding: '10px 14px',
-              borderRadius: '10px',
-              background: 'rgba(255, 255, 255, 0.03)',
-              border: '1px solid rgba(255, 255, 255, 0.08)',
+              borderRadius: '16px',
+              background: 'var(--bg-surface-soft)',
+              border: `1px solid ${isDark ? 'rgba(255,255,255,0.08)' : 'rgba(15,23,42,0.1)'}`,
               cursor: 'pointer',
               transition: 'all 0.15s ease',
-              minHeight: '68px',
-              height: '100%',
-              flex: '1 1 160px',
-              maxWidth: '200px',
               boxSizing: 'border-box',
             }}
             onMouseEnter={(e) => {
               const el = e.currentTarget
-              el.style.background = 'rgba(255, 255, 255, 0.06)'
-              el.style.borderColor = 'rgba(255, 255, 255, 0.16)'
+              el.style.background = 'var(--bg-surface-hover)'
+              el.style.borderColor = isDark ? 'rgba(255,255,255,0.16)' : 'rgba(15,23,42,0.2)'
               el.style.transform = 'translateY(-1px)'
             }}
             onMouseLeave={(e) => {
               const el = e.currentTarget
-              el.style.background = 'rgba(255, 255, 255, 0.03)'
-              el.style.borderColor = 'rgba(255, 255, 255, 0.08)'
+              el.style.background = 'var(--bg-surface-soft)'
+              el.style.borderColor = isDark ? 'rgba(255,255,255,0.08)' : 'rgba(15,23,42,0.1)'
               el.style.transform = 'translateY(0)'
             }}
           >
@@ -400,7 +404,7 @@ export const SourcesBlock: React.FC<SourcesBlockProps> = React.memo(function Sou
             <span style={{ fontSize: '0.78rem', fontWeight: 500, color: '#94a3b8', marginLeft: '8px' }}>
               View {remainingSourcesCount} more
             </span>
-          </div>
+          </button>
         )}
       </div>
 
@@ -414,9 +418,9 @@ export const SourcesBlock: React.FC<SourcesBlockProps> = React.memo(function Sou
               setOpenDropdownDomain(null)
             }}
             style={{
-              background: 'rgba(255,255,255,0.05)',
-              border: '1px solid rgba(255,255,255,0.1)',
-              borderRadius: '6px',
+              background: 'var(--bg-surface-soft)',
+              border: `1px solid ${isDark ? 'rgba(255,255,255,0.1)' : 'rgba(15,23,42,0.12)'}`,
+              borderRadius: '8px',
               padding: '4px 10px',
               color: '#94a3b8',
               fontSize: '0.73rem',
@@ -424,8 +428,8 @@ export const SourcesBlock: React.FC<SourcesBlockProps> = React.memo(function Sou
               cursor: 'pointer',
               transition: 'background 0.15s',
             }}
-            onMouseEnter={(e) => { (e.currentTarget as HTMLButtonElement).style.background = 'rgba(255,255,255,0.1)' }}
-            onMouseLeave={(e) => { (e.currentTarget as HTMLButtonElement).style.background = 'rgba(255,255,255,0.05)' }}
+            onMouseEnter={(e) => { (e.currentTarget as HTMLButtonElement).style.background = 'var(--bg-surface-hover)' }}
+            onMouseLeave={(e) => { (e.currentTarget as HTMLButtonElement).style.background = 'var(--bg-surface-soft)' }}
           >
             Show less
           </button>