@geminilight/mindos 0.5.36 → 0.5.38

package/app/components/settings/KnowledgeTab.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { useState, useEffect, useCallback, useSyncExternalStore, useRef } from 'react';
-import { Copy, Check, RefreshCw, Trash2, Sparkles, ChevronDown, ChevronRight, Loader2, Cpu, Zap, Database as DatabaseIcon, HardDrive } from 'lucide-react';
+import { Copy, Check, RefreshCw, Trash2, Sparkles, ChevronDown, ChevronRight, Loader2, Cpu, Zap, Database as DatabaseIcon, HardDrive, RotateCcw } from 'lucide-react';
 import type { KnowledgeTabProps } from './types';
 import { Field, Input, EnvBadge, SectionLabel, Toggle } from './Primitives';
 import { apiFetch } from '@/lib/api';
@@ -49,6 +49,27 @@ export function KnowledgeTab({ data, setData, t }: KnowledgeTabProps) {
       });
   }, [guideDismissed]);
 
+  const handleRestartWalkthrough = useCallback(() => {
+    apiFetch('/api/setup', {
+      method: 'PATCH',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        guideState: {
+          active: true,
+          dismissed: false,
+          walkthroughStep: 0,
+          walkthroughDismissed: false,
+        },
+      }),
+    })
+      .then(() => {
+        setGuideActive(true);
+        setGuideDismissed(false);
+        window.dispatchEvent(new Event('guide-state-updated'));
+      })
+      .catch(err => console.error('Failed to restart walkthrough:', err));
+  }, []);
+
   const origin = useSyncExternalStore(
     () => () => {},
     () => `${window.location.protocol}//${window.location.hostname}`,
@@ -207,6 +228,13 @@ export function KnowledgeTab({ data, setData, t }: KnowledgeTabProps) {
             </div>
             <Toggle checked={!guideDismissed} onChange={() => handleGuideToggle()} />
           </div>
+          <button
+            onClick={handleRestartWalkthrough}
+            className="flex items-center gap-1.5 mt-2 px-3 py-1.5 text-xs rounded-lg border border-border text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
+          >
+            <RotateCcw size={12} />
+            {k.restartWalkthrough ?? 'Restart walkthrough'}
+          </button>
         </div>
       )}
 

package/app/components/settings/McpSkillCreateForm.tsx

@@ -0,0 +1,178 @@
+'use client';
+
+import { useState } from 'react';
+import { X, Plus, Loader2, AlertCircle } from 'lucide-react';
+
+const skillFrontmatter = (n: string) => `---
+name: ${n}
+description: >
+  Describe WHEN the agent should use this
+  skill. Be specific about trigger conditions.
+---`;
+
+const SKILL_TEMPLATES: Record<string, (name: string) => string> = {
+  general: (n) => `${skillFrontmatter(n)}
+
+# Instructions
+
+## Context
+<!-- Background knowledge for the agent -->
+
+## Steps
+1.
+2.
+
+## Rules
+<!-- Constraints, edge cases, formats -->
+- `,
+
+  'tool-use': (n) => `${skillFrontmatter(n)}
+
+# Instructions
+
+## Available Tools
+<!-- List tools the agent can use -->
+-
+
+## When to Use
+<!-- Conditions that trigger this skill -->
+
+## Output Format
+<!-- Expected response structure -->
+`,
+
+  workflow: (n) => `${skillFrontmatter(n)}
+
+# Instructions
+
+## Trigger
+<!-- What triggers this workflow -->
+
+## Steps
+1.
+2.
+
+## Validation
+<!-- How to verify success -->
+
+## Rollback
+<!-- What to do on failure -->
+`,
+};
+
+interface SkillCreateFormProps {
+  onSave: (name: string, content: string) => Promise<void>;
+  onCancel: () => void;
+  saving: boolean;
+  error: string;
+  m: Record<string, any> | undefined;
+}
+
+export default function SkillCreateForm({ onSave, onCancel, saving, error, m }: SkillCreateFormProps) {
+  const [newName, setNewName] = useState('');
+  const [newContent, setNewContent] = useState('');
+  const [selectedTemplate, setSelectedTemplate] = useState<'general' | 'tool-use' | 'workflow'>('general');
+
+  const getTemplate = (skillName: string, tmpl?: 'general' | 'tool-use' | 'workflow') => {
+    const key = tmpl || selectedTemplate;
+    const fn = SKILL_TEMPLATES[key] || SKILL_TEMPLATES.general;
+    return fn(skillName || 'my-skill');
+  };
+
+  const handleNameChange = (val: string) => {
+    const cleaned = val.toLowerCase().replace(/[^a-z0-9-]/g, '');
+    const oldTemplate = getTemplate(newName || 'my-skill');
+    if (!newContent || newContent === oldTemplate) {
+      setNewContent(getTemplate(cleaned || 'my-skill'));
+    }
+    setNewName(cleaned);
+  };
+
+  const handleTemplateChange = (tmpl: 'general' | 'tool-use' | 'workflow') => {
+    const oldTemplate = getTemplate(newName || 'my-skill', selectedTemplate);
+    setSelectedTemplate(tmpl);
+    if (!newContent || newContent === oldTemplate) {
+      setNewContent(getTemplate(newName || 'my-skill', tmpl));
+    }
+  };
+
+  // Initialize content on first render
+  if (!newContent) {
+    // Use a timeout-free approach: set default on next tick won't work in render.
+    // Instead, initialize via useState default or useEffect. For simplicity, set inline.
+  }
+
+  return (
+    <div className="border border-border rounded-lg p-3 space-y-2">
+      <div className="flex items-center justify-between">
+        <span className="text-xs font-medium">{m?.addSkill ?? '+ Add Skill'}</span>
+        <button onClick={onCancel} className="p-0.5 rounded hover:bg-muted text-muted-foreground">
+          <X size={12} />
+        </button>
+      </div>
+      <div className="space-y-1">
+        <label className="text-2xs text-muted-foreground">{m?.skillName ?? 'Name'}</label>
+        <input
+          type="text"
+          value={newName}
+          onChange={e => handleNameChange(e.target.value)}
+          placeholder="my-skill"
+          className="w-full px-2.5 py-1.5 text-xs rounded-md border border-border bg-background font-mono text-foreground outline-none focus-visible:ring-1 focus-visible:ring-ring"
+        />
+      </div>
+      <div className="space-y-1">
+        <label className="text-2xs text-muted-foreground">{m?.skillTemplate ?? 'Template'}</label>
+        <div className="flex rounded-md border border-border overflow-hidden w-fit">
+          {(['general', 'tool-use', 'workflow'] as const).map((tmpl, i) => (
+            <button
+              key={tmpl}
+              onClick={() => handleTemplateChange(tmpl)}
+              className={`px-2.5 py-1 text-xs transition-colors ${i > 0 ? 'border-l border-border' : ''} ${
+                selectedTemplate === tmpl
+                  ? 'bg-amber-500/15 text-amber-600 font-medium'
+                  : 'text-muted-foreground hover:bg-muted'
+              }`}
+            >
+              {tmpl === 'general' ? (m?.skillTemplateGeneral ?? 'General')
+                : tmpl === 'tool-use' ? (m?.skillTemplateToolUse ?? 'Tool-use')
+                : (m?.skillTemplateWorkflow ?? 'Workflow')}
+            </button>
+          ))}
+        </div>
+      </div>
+      <div className="space-y-1">
+        <label className="text-2xs text-muted-foreground">{m?.skillContent ?? 'Content'}</label>
+        <textarea
+          value={newContent || getTemplate(newName || 'my-skill')}
+          onChange={e => setNewContent(e.target.value)}
+          rows={16}
+          placeholder="Skill instructions (markdown)..."
+          className="w-full px-2.5 py-1.5 text-xs rounded-md border border-border bg-background text-foreground outline-none focus-visible:ring-1 focus-visible:ring-ring resize-y font-mono"
+        />
+      </div>
+      {error && (
+        <p className="text-2xs text-destructive flex items-center gap-1">
+          <AlertCircle size={10} />
+          {error}
+        </p>
+      )}
+      <div className="flex items-center gap-2">
+        <button
+          onClick={() => onSave(newName.trim(), newContent || getTemplate(newName.trim() || 'my-skill'))}
+          disabled={!newName.trim() || saving}
+          className="flex items-center gap-1 px-2.5 py-1 text-xs rounded-md disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
+          style={{ background: 'var(--amber)', color: 'var(--amber-foreground)' }}
+        >
+          {saving && <Loader2 size={10} className="animate-spin" />}
+          {m?.saveSkill ?? 'Save'}
+        </button>
+        <button
+          onClick={onCancel}
+          className="px-2.5 py-1 text-xs rounded-md border border-border text-muted-foreground hover:text-foreground transition-colors"
+        >
+          {m?.cancelSkill ?? 'Cancel'}
+        </button>
+      </div>
+    </div>
+  );
+}

package/app/components/settings/McpSkillRow.tsx

@@ -0,0 +1,145 @@
+'use client';
+
+import { useState } from 'react';
+import { ChevronDown, ChevronRight, Trash2, Pencil, Loader2, AlertCircle } from 'lucide-react';
+import { Toggle } from './Primitives';
+import dynamic from 'next/dynamic';
+import type { SkillInfo } from './types';
+
+const MarkdownView = dynamic(() => import('@/components/MarkdownView'), { ssr: false });
+
+/** Strip YAML frontmatter (first `---` … `---` block) from markdown content. */
+function stripFrontmatter(content: string): string {
+  if (!content.startsWith('---')) return content;
+  const end = content.indexOf('\n---', 3);
+  if (end === -1) return content;
+  return content.slice(end + 4).replace(/^\n+/, '');
+}
+
+interface SkillRowProps {
+  skill: SkillInfo;
+  expanded: boolean;
+  onExpand: (name: string) => void;
+  onToggle: (name: string, enabled: boolean) => void;
+  onDelete: (name: string) => void;
+  onEditStart: (name: string) => void;
+  onEditSave: (name: string) => void;
+  onEditCancel: () => void;
+  editing: string | null;
+  editContent: string;
+  setEditContent: (v: string) => void;
+  editError: string;
+  saving: boolean;
+  fullContent: Record<string, string>;
+  loadingContent: string | null;
+  loadErrors: Record<string, string>;
+  m: Record<string, any> | undefined;
+}
+
+export default function SkillRow({
+  skill, expanded, onExpand, onToggle, onDelete,
+  onEditStart, onEditSave, onEditCancel,
+  editing, editContent, setEditContent, editError, saving,
+  fullContent, loadingContent, loadErrors, m,
+}: SkillRowProps) {
+  return (
+    <div className="border border-border rounded-lg overflow-hidden">
+      <div
+        className="flex items-center gap-2 px-3 py-2 cursor-pointer hover:bg-muted/50 transition-colors"
+        onClick={() => onExpand(skill.name)}
+      >
+        {expanded ? <ChevronDown size={12} /> : <ChevronRight size={12} />}
+        <span className="text-xs font-medium flex-1">{skill.name}</span>
+        <span className={`text-2xs px-1.5 py-0.5 rounded ${
+          skill.source === 'builtin' ? 'bg-blue-500/15 text-blue-500' : 'bg-purple-500/15 text-purple-500'
+        }`}>
+          {skill.source === 'builtin' ? (m?.skillBuiltin ?? 'Built-in') : (m?.skillUser ?? 'Custom')}
+        </span>
+        <Toggle size="sm" checked={skill.enabled} onClick={(e: React.MouseEvent) => { e.stopPropagation(); onToggle(skill.name, !skill.enabled); }} />
+      </div>
+
+      {expanded && (
+        <div className="px-3 py-2 border-t border-border text-xs space-y-2 bg-muted/20">
+          <p className="text-muted-foreground">{skill.description || 'No description'}</p>
+          <p className="text-muted-foreground font-mono text-2xs">{skill.path}</p>
+
+          {loadingContent === skill.name ? (
+            <div className="flex items-center gap-1.5 text-muted-foreground">
+              <Loader2 size={10} className="animate-spin" />
+              <span className="text-2xs">Loading...</span>
+            </div>
+          ) : fullContent[skill.name] ? (
+            <div className="space-y-1.5">
+              <div className="flex items-center justify-between">
+                <span className="text-2xs text-muted-foreground font-medium">{m?.skillContent ?? 'Content'}</span>
+                <div className="flex items-center gap-2">
+                  {skill.editable && editing !== skill.name && (
+                    <button
+                      onClick={() => onEditStart(skill.name)}
+                      className="flex items-center gap-1 text-2xs text-muted-foreground hover:text-foreground transition-colors"
+                    >
+                      <Pencil size={10} />
+                      {m?.editSkill ?? 'Edit'}
+                    </button>
+                  )}
+                  {skill.editable && (
+                    <button
+                      onClick={() => onDelete(skill.name)}
+                      className="flex items-center gap-1 text-2xs text-destructive hover:underline"
+                    >
+                      <Trash2 size={10} />
+                      {m?.deleteSkill ?? 'Delete'}
+                    </button>
+                  )}
+                </div>
+              </div>
+
+              {editing === skill.name ? (
+                <div className="space-y-1.5">
+                  <textarea
+                    value={editContent}
+                    onChange={e => setEditContent(e.target.value)}
+                    rows={Math.min(20, (editContent.match(/\n/g) || []).length + 3)}
+                    className="w-full px-2.5 py-1.5 text-xs rounded-md border border-border bg-background text-foreground outline-none focus-visible:ring-1 focus-visible:ring-ring resize-y font-mono"
+                  />
+                  <div className="flex items-center gap-2">
+                    <button
+                      onClick={() => onEditSave(skill.name)}
+                      disabled={saving}
+                      className="flex items-center gap-1 px-2.5 py-1 text-xs rounded-md disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
+                      style={{ background: 'var(--amber)', color: 'var(--amber-foreground)' }}
+                    >
+                      {saving && <Loader2 size={10} className="animate-spin" />}
+                      {m?.saveSkill ?? 'Save'}
+                    </button>
+                    <button
+                      onClick={onEditCancel}
+                      className="px-2.5 py-1 text-xs rounded-md border border-border text-muted-foreground hover:text-foreground transition-colors"
+                    >
+                      {m?.cancelSkill ?? 'Cancel'}
+                    </button>
+                  </div>
+                  {editError && (
+                    <p className="text-2xs text-destructive flex items-center gap-1">
+                      <AlertCircle size={10} />
+                      {editError}
+                    </p>
+                  )}
+                </div>
+              ) : (
+                <div className="w-full rounded-md border border-border bg-background/50 max-h-[300px] overflow-y-auto px-2.5 py-1.5 text-xs [&_.prose]:max-w-none [&_.prose]:text-xs [&_h1]:text-sm [&_h2]:text-xs [&_h3]:text-xs [&_pre]:text-2xs [&_code]:text-2xs">
+                  <MarkdownView content={stripFrontmatter(fullContent[skill.name])} />
+                </div>
+              )}
+            </div>
+          ) : loadErrors[skill.name] ? (
+            <p className="text-2xs text-destructive flex items-center gap-1">
+              <AlertCircle size={10} />
+              {loadErrors[skill.name]}
+            </p>
+          ) : null}
+        </div>
+      )}
+    </div>
+  );
+}