@pheem49/mint 1.15.0 → 1.17.0

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

@@ -1,347 +0,0 @@
-import React, { useState, useEffect } from 'react'
-import { renderSkillsSvgIcon, renderSkillLogoIcon } from '../constants/plugins'
-import { renderFormattedMessage } from '../utils/markdown'
-import '../css/management-views.css'
-import type { LearnedSkill } from '../types'
-
-/** 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 }
-
-export interface SkillsViewProps {
-  listSkills: (workspacePath?: string) => Promise<LearnedSkill[]>
-  addSkill: (name: string, content: string) => Promise<any>
-  deleteSkill: (name: string) => Promise<any>
-  workspacePath?: string
-}
-
-export const SkillsView: React.FC<SkillsViewProps> = React.memo(function SkillsView({
-  listSkills,
-  addSkill,
-  deleteSkill,
-  workspacePath,
-}) {
-  const [skills, setSkills] = useState<LearnedSkill[]>([])
-  const [loading, setLoading] = useState(false)
-  const [error, setError] = useState('')
-  const [searchQuery, setSearchQuery] = useState('')
-  const [scopeFilter, setScopeFilter] = useState<'all' | 'workspace' | 'global'>('all')
-
-  // Teach new skill Form State
-  const [newSkillName, setNewSkillName] = useState('')
-  const [newSkillContent, setNewSkillContent] = useState('')
-  const [adding, setAdding] = useState(false)
-  const [showTeachModal, setShowTeachModal] = useState(false)
-  const [detailSkill, setDetailSkill] = useState<LearnedSkill | null>(null)
-
-  const fetchSkills = async () => {
-    setLoading(true)
-    setError('')
-    try {
-      const list = await listSkills(workspacePath)
-      setSkills(list)
-    } catch (err: any) {
-      console.error('Failed to fetch skills:', err)
-      setError('Failed to load learned skills')
-    } finally {
-      setLoading(false)
-    }
-  }
-
-  useEffect(() => {
-    fetchSkills()
-  }, [workspacePath])
-
-  const handleAddSkill = async (e: React.FormEvent) => {
-    e.preventDefault()
-    if (!newSkillName.trim() || !newSkillContent.trim()) return
-    setAdding(true)
-    try {
-      await addSkill(newSkillName.trim(), newSkillContent.trim())
-      setNewSkillName('')
-      setNewSkillContent('')
-      setShowTeachModal(false)
-      fetchSkills()
-    } catch (err: any) {
-      console.error('Failed to add learned skill:', err)
-      alert('Error saving skill')
-    } finally {
-      setAdding(false)
-    }
-  }
-
-  const handleDeleteSkill = async (name: string) => {
-    if (!window.confirm(`Are you sure you want to forget skill "${name}"?`)) return
-    try {
-      await deleteSkill(name)
-      setDetailSkill((current) => (current?.name === name ? null : current))
-      fetchSkills()
-    } catch (err: any) {
-      console.error('Failed to delete skill:', err)
-      alert('Error deleting skill')
-    }
-  }
-
-  const filteredSkills = skills.filter((s) => {
-    const matchesSearch =
-      s.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
-      (s.description || '').toLowerCase().includes(searchQuery.toLowerCase()) ||
-      s.content.toLowerCase().includes(searchQuery.toLowerCase())
-
-    if (!matchesSearch) return false
-
-    if (scopeFilter === 'workspace') return isWorkspaceSkill(s)
-    if (scopeFilter === 'global') return !isWorkspaceSkill(s)
-    return true
-  })
-
-  return (
-    <div className="management-container">
-      {/* Header */}
-      <div className="management-header">
-        <div className="management-title-group">
-          <h1 className="management-title">
-            <span className="management-title-icon" style={{ display: 'inline-flex', alignItems: 'center' }}>
-              {renderSkillsSvgIcon(22, 'var(--accent)')}
-            </span>
-            Skills
-          </h1>
-          <p className="management-subtitle">
-            Instructions Mint follows automatically, reviewed before every prompt.
-          </p>
-        </div>
-        <button
-          type="button"
-          className="management-primary-btn"
-          onClick={() => setShowTeachModal(true)}
-        >
-          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
-            <line x1="12" y1="5" x2="12" y2="19" />
-            <line x1="5" y1="12" x2="19" y2="12" />
-          </svg>
-          Teach new skill
-        </button>
-      </div>
-
-      {/* Filter and Search Bar */}
-      <div className="management-control-bar">
-        <div className="management-search-wrapper">
-          <input
-            type="text"
-            className="management-search-input"
-            placeholder="Search skills by name or instructions..."
-            value={searchQuery}
-            onChange={(e) => setSearchQuery(e.target.value)}
-          />
-          <svg
-            className="management-search-icon"
-            width="16"
-            height="16"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            strokeWidth="2"
-          >
-            <circle cx="11" cy="11" r="8" />
-            <line x1="21" y1="21" x2="16.65" y2="16.65" />
-          </svg>
-        </div>
-
-        {/* Scope Pill Filter */}
-        <div className="management-filter-pills">
-          {(['all', 'workspace', 'global'] as const).map((sc) => (
-            <button
-              key={sc}
-              type="button"
-              className={`management-pill-btn ${scopeFilter === sc ? 'active' : ''}`}
-              onClick={() => setScopeFilter(sc)}
-            >
-              {sc}
-            </button>
-          ))}
-        </div>
-      </div>
-
-      {error && (
-        <div className="management-error-banner">
-          {error}
-        </div>
-      )}
-
-      {/* Skills list */}
-      {loading ? (
-        <div className="mgmt-empty">Loading…</div>
-      ) : filteredSkills.length === 0 ? (
-        <div className="mgmt-empty">
-          <p>{searchQuery || scopeFilter !== 'all' ? 'No skills match.' : 'No skills yet.'}</p>
-          {!searchQuery && scopeFilter === 'all' && (
-            <p>
-              Teach one above, or run <code>/learn</code> in chat.
-            </p>
-          )}
-        </div>
-      ) : (
-        <div className="mgmt-list">
-          {filteredSkills.map((s) => (
-            <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">{skillPreview(s)}</div>
-              </div>
-              <span className={`management-tag ${isWorkspaceSkill(s) ? 'workspace' : 'global'}`}>
-                {isWorkspaceSkill(s) ? 'Workspace' : 'Global'}
-              </span>
-            </div>
-          ))}
-        </div>
-      )}
-
-      {/* Skill Detail */}
-      {detailSkill && (
-        <div className="management-modal-overlay" onClick={() => setDetailSkill(null)}>
-          <div className="management-modal" onClick={(e) => e.stopPropagation()}>
-            <div className="management-modal-header">
-              <div className="management-card-title-group">
-                {renderSkillLogoIcon(44)}
-                <h2 className="management-modal-title">{detailSkill.name}</h2>
-              </div>
-              <button
-                type="button"
-                className="management-modal-close"
-                onClick={() => setDetailSkill(null)}
-              >
-                ✕
-              </button>
-            </div>
-
-            <div className="management-modal-body">
-              <span className={`management-tag ${isWorkspaceSkill(detailSkill) ? 'workspace' : 'global'}`}>
-                {isWorkspaceSkill(detailSkill) ? 'Workspace' : 'Global'}
-              </span>
-
-              {detailSkill.description && (
-                <p style={{ color: 'var(--text-soft, #d1d1d4)', lineHeight: 1.55, margin: 0 }}>
-                  {detailSkill.description}
-                </p>
-              )}
-
-              <div className="mgmt-prose">{renderFormattedMessage(detailSkill.content)}</div>
-            </div>
-
-            <div className="management-modal-footer">
-              <span style={{ fontSize: '0.8rem', color: 'var(--text-muted, #64748b)' }}>
-                {detailSkill.updatedAt ? new Date(detailSkill.updatedAt).toLocaleDateString() : 'Learned'}
-              </span>
-              <button
-                type="button"
-                className="management-action-btn danger"
-                onClick={() => handleDeleteSkill(detailSkill.name)}
-              >
-                Forget
-              </button>
-            </div>
-          </div>
-        </div>
-      )}
-
-      {/* 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
-              </h2>
-              <button
-                type="button"
-                className="management-modal-close"
-                onClick={() => setShowTeachModal(false)}
-              >
-                ✕
-              </button>
-            </div>
-
-            <form onSubmit={handleAddSkill}>
-              <div className="management-modal-body">
-                <div className="management-form-group">
-                  <label className="management-label">
-                    Skill name (e.g. typescript-standards)
-                  </label>
-                  <input
-                    type="text"
-                    className="management-input-field"
-                    placeholder="e.g. angular-standard"
-                    value={newSkillName}
-                    onChange={(e) => setNewSkillName(e.target.value)}
-                    required
-                  />
-                </div>
-
-                <div className="management-form-group">
-                  <label className="management-label">
-                    Skill instructions / content (Markdown supported)
-                  </label>
-                  <textarea
-                    className="management-textarea-field"
-                    placeholder="# Guidelines&#10;Always write modular React code using TypeScript."
-                    value={newSkillContent}
-                    onChange={(e) => setNewSkillContent(e.target.value)}
-                    required
-                    rows={6}
-                  />
-                </div>
-              </div>
-
-              <div className="management-modal-footer">
-                <button
-                  type="button"
-                  className="management-action-btn"
-                  onClick={() => setShowTeachModal(false)}
-                >
-                  Cancel
-                </button>
-                <button
-                  type="submit"
-                  disabled={adding}
-                  className="management-primary-btn"
-                >
-                  {adding ? 'Saving...' : 'Save Skill'}
-                </button>
-              </div>
-            </form>
-          </div>
-        </div>
-      )}
-    </div>
-  )
-})
-
-export default SkillsView

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

@@ -1,318 +0,0 @@
-import {
-  forwardRef,
-  useEffect,
-  useImperativeHandle,
-  useMemo,
-  useRef,
-  useState,
-  type KeyboardEvent,
-  type RefObject,
-} from 'react'
-import { SLASH_COMMANDS, type SlashCommand } from '../constants/slashCommands'
-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. */
-export interface SlashSuggestionsHandle {
-  handleKeyDown: (event: KeyboardEvent<HTMLTextAreaElement>) => boolean
-}
-
-interface Props {
-  /** Current composer text. */
-  message: string
-  /** Replace the whole composer text with `text` (a completed `/cmd `, `$skill `,
-   *  or the message with its trailing `@token` swapped). */
-  onComplete: (text: string) => void
-  /** Workspace path, for loading learned skills. */
-  workspacePath?: string
-  /** `settingsConfig.mcpServers` — `{ [name]: { disabled?: boolean } }`. */
-  mcpServers?: Record<string, { disabled?: boolean } | undefined>
-  /** The composer textarea, so an outside-click that lands on it doesn't dismiss. */
-  anchorRef: RefObject<HTMLTextAreaElement | null>
-  /** While true the menu is fully inert (used during history browsing). */
-  suppressed?: boolean
-}
-
-type Mode = 'slash' | 'skill' | 'at' | null
-
-const CATEGORY_ORDER = ['system', 'models', 'workspace', 'tools'] as const
-const CATEGORY_LABEL: Record<(typeof CATEGORY_ORDER)[number], string> = {
-  system: 'System',
-  models: 'Models',
-  workspace: 'Workspace',
-  tools: 'Tools',
-}
-
-interface ContextItem {
-  label: string
-  desc: string
-  kind: 'context' | 'plugin'
-}
-
-const BUILTIN_CONTEXTS: ContextItem[] = [
-  { label: '@workspace', desc: 'Include workspace path & context', kind: 'context' },
-  { label: '@file', desc: 'Reference workspace file', kind: 'context' },
-  { label: '@docs', desc: 'Include documentation context', kind: 'context' },
-  { label: '@memory', desc: 'Include long-term memory store', kind: 'context' },
-]
-
-const SlashSuggestions = forwardRef<SlashSuggestionsHandle, Props>(function SlashSuggestions(
-  { message, onComplete, workspacePath, mcpServers, anchorRef, suppressed = false },
-  ref,
-) {
-  const [skills, setSkills] = useState<LearnedSkill[]>([])
-  const [selIndex, setSelIndex] = useState(0)
-  // The exact composer text the menu was last dismissed for (a pick, Escape, or
-  // an outside click). It reopens as soon as `message` diverges from this.
-  const [dismissedFor, setDismissedFor] = useState<string | null>(null)
-
-  const popupRef = useRef<HTMLDivElement>(null)
-  const listRef = useRef<HTMLDivElement>(null)
-
-  const raw = message.replace(/^\s+/, '')
-  const mode: Mode = raw.startsWith('/')
-    ? 'slash'
-    : raw.startsWith('$')
-    ? 'skill'
-    : /@[\w\-./]*$/.test(message)
-    ? 'at'
-    : null
-
-  useEffect(() => {
-    if (mode !== 'skill') return
-    let alive = true
-    catalogPlatform.listLearnedSkills(workspacePath)
-      .then((res) => {
-        if (alive && Array.isArray(res)) setSkills(res)
-      })
-      .catch(() => {})
-    return () => {
-      alive = false
-    }
-  }, [mode, workspacePath])
-
-  // ── Slash: prefix-match the command token, grouped by category ──
-  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))
-  }, [mode, raw])
-
-  // The command whose arguments are being typed (raw is past its token) — used
-  // for the usage hint shown when there are no more prefix matches.
-  const activeSlashCmd = useMemo(() => {
-    if (mode !== 'slash') return undefined
-    const q = raw.toLowerCase()
-    return [...SLASH_COMMANDS]
-      .sort((a, b) => b.command.length - a.command.length)
-      .find((c) => q === c.command.toLowerCase() || q.startsWith(c.command.toLowerCase() + ' '))
-  }, [mode, raw])
-
-  // ── Skill: `$name` prefix-match ──
-  const skillMatches = useMemo(() => {
-    if (mode !== 'skill') return [] as LearnedSkill[]
-    const q = raw.slice(1).split(/\s+/)[0].toLowerCase()
-    return skills.filter((s) => s.name.toLowerCase().startsWith(q))
-  }, [mode, raw, skills])
-
-  // ── @mention: builtins + enabled MCP servers, substring match ──
-  const atMatches = useMemo(() => {
-    if (mode !== 'at') return [] as ContextItem[]
-    const q = (message.match(/@([\w\-./]*)$/)?.[1] ?? '').toLowerCase()
-    const mcp: ContextItem[] = Object.entries(mcpServers ?? {})
-      .filter(([, srv]) => srv?.disabled !== true)
-      .map(([name]) => ({
-        label: `@${name}`,
-        desc: 'Restrict this message to this MCP server / plugin',
-        kind: 'plugin' as const,
-      }))
-    return [...mcp, ...BUILTIN_CONTEXTS].filter((c) => c.label.toLowerCase().includes(q))
-  }, [mode, message, mcpServers])
-
-  // Flat, render-order list the keyboard walks over.
-  const flat: Array<SlashCommand | LearnedSkill | ContextItem> =
-    mode === 'slash' ? slashMatches : mode === 'skill' ? skillMatches : mode === 'at' ? atMatches : []
-
-  const hasEmptyState = mode === 'slash' && flat.length === 0 && raw.trim().length > 1
-  const open =
-    !suppressed && mode !== null && dismissedFor !== message && (flat.length > 0 || hasEmptyState)
-
-  // Reset the highlight whenever the query text changes (not on arrow / hover).
-  useEffect(() => {
-    setSelIndex(0)
-  }, [message])
-
-  // Keep the highlighted row visible.
-  useEffect(() => {
-    if (!open || !listRef.current) return
-    const el = listRef.current.querySelector<HTMLElement>(`[data-idx="${selIndex}"]`)
-    el?.scrollIntoView({ block: 'nearest' })
-  }, [selIndex, open])
-
-  // Dismiss on a click that isn't on the popup or the composer.
-  useEffect(() => {
-    if (!open) return
-    const onDown = (event: MouseEvent) => {
-      const target = event.target as Node
-      if (popupRef.current?.contains(target) || anchorRef.current?.contains(target)) return
-      setDismissedFor(message)
-    }
-    document.addEventListener('mousedown', onDown)
-    return () => document.removeEventListener('mousedown', onDown)
-  }, [open, message, anchorRef])
-
-  const completionFor = (item: SlashCommand | LearnedSkill | ContextItem): string => {
-    if (mode === 'slash') return `${(item as SlashCommand).command} `
-    if (mode === 'skill') return `$${(item as LearnedSkill).name} `
-    return message.replace(/@[\w\-./]*$/, `${(item as ContextItem).label} `)
-  }
-
-  const pick = (item: SlashCommand | LearnedSkill | ContextItem) => {
-    const text = completionFor(item)
-    setDismissedFor(text)
-    setSelIndex(0)
-    onComplete(text)
-  }
-
-  useImperativeHandle(ref, () => ({
-    handleKeyDown(event) {
-      if (suppressed || mode === null) return false
-      const isNav =
-        (event.key === 'ArrowUp' || event.key === 'ArrowDown') &&
-        !event.shiftKey &&
-        !event.altKey &&
-        !event.metaKey &&
-        !event.ctrlKey &&
-        !event.nativeEvent.isComposing
-
-      // Arrows bring a just-dismissed but still-relevant menu back, rather than
-      // falling through to history browsing.
-      if (isNav && !open && flat.length > 0) {
-        setDismissedFor(null)
-        setSelIndex(event.key === 'ArrowDown' ? 0 : flat.length - 1)
-        event.preventDefault()
-        return true
-      }
-      if (!open) return false
-
-      if (isNav && flat.length > 0) {
-        setSelIndex((i) =>
-          event.key === 'ArrowDown'
-            ? (i + 1) % flat.length
-            : (i - 1 + flat.length) % flat.length,
-        )
-        event.preventDefault()
-        return true
-      }
-      if ((event.key === 'Enter' || event.key === 'Tab') && !event.shiftKey && !event.nativeEvent.isComposing) {
-        const item = flat[selIndex] ?? flat[0]
-        if (!item) return false
-        pick(item)
-        event.preventDefault()
-        return true
-      }
-      if (event.key === 'Escape') {
-        setDismissedFor(message)
-        event.preventDefault()
-        return true
-      }
-      return false
-    },
-  }))
-
-  if (!open) return null
-
-  const headerLabel =
-    flat.length === 0
-      ? 'No matches'
-      : mode === 'slash'
-      ? `${flat.length} command${flat.length === 1 ? '' : 's'}`
-      : mode === 'skill'
-      ? `${flat.length} skill${flat.length === 1 ? '' : 's'}`
-      : `${flat.length} mention${flat.length === 1 ? '' : 's'}`
-
-  const row = (
-    item: SlashCommand | LearnedSkill | ContextItem,
-    idx: number,
-    name: string,
-    desc: string,
-    badge?: string,
-    usage?: string,
-  ) => (
-    <button
-      key={name}
-      type="button"
-      role="option"
-      aria-selected={idx === selIndex}
-      data-idx={idx}
-      className={`slash-suggestion-item ${idx === selIndex ? 'active' : ''}`}
-      onMouseDown={(e) => {
-        e.preventDefault()
-        pick(item)
-      }}
-      onPointerMove={() => setSelIndex(idx)}
-    >
-      <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>
-    </button>
-  )
-
-  return (
-    <div className="slash-suggestions-popup" ref={popupRef}>
-      <div className="slash-suggestions-header">
-        {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">
-        {mode === 'slash' &&
-          (flat.length > 0
-            ? CATEGORY_ORDER.map((cat) => {
-                const items = slashMatches.filter((m) => (m.category ?? 'tools') === cat)
-                if (!items.length) return null
-                return (
-                  <div key={cat} className="slash-suggestions-group">
-                    <div className="slash-suggestions-group-label">{CATEGORY_LABEL[cat]}</div>
-                    {items.map((item) =>
-                      row(item, slashMatches.indexOf(item), item.command, item.description, undefined, item.usage),
-                    )}
-                  </div>
-                )
-              })
-            : (
-              <div className="slash-suggestions-empty">
-                {activeSlashCmd ? (
-                  <>
-                    <span className="slash-cmd-name">{activeSlashCmd.command}</span>
-                    <span className="slash-cmd-usage">
-                      {activeSlashCmd.usage || 'No further arguments'}
-                    </span>
-                  </>
-                ) : (
-                  <span>
-                    No command matches <code>{raw.trim()}</code>
-                  </span>
-                )}
-              </div>
-            ))}
-
-        {mode === 'skill' &&
-          skillMatches.map((item, idx) =>
-            row(item, idx, `$${item.name}`, item.description || item.content?.slice(0, 60) || '', '[Skill]'),
-          )}
-
-        {mode === 'at' &&
-          atMatches.map((item, idx) =>
-            row(item, idx, item.label, item.desc, item.kind === 'plugin' ? '[Plugin]' : '[Context]'),
-          )}
-      </div>
-    </div>
-  )
-})
-
-export default SlashSuggestions