epsimo-agent 0.1.0

package/epsimo/templates/components/ThreadChat/components/ToolRenderers.tsx

@@ -0,0 +1,322 @@
+"use client";
+
+import React, { useState, useEffect } from 'react';
+import styles from './ToolRenderers.module.css';
+
+export interface ToolCall {
+    id: string;
+    function?: {
+        name: string;
+        arguments: string;
+    };
+    name?: string;
+    type?: string;
+    args?: any;
+}
+
+// Tool icon mapping for common tools
+const getToolIcon = (name: string): string => {
+    const lowerName = name.toLowerCase();
+    if (lowerName.includes('search') || lowerName.includes('tavily') || lowerName.includes('duckduckgo')) return '🔍';
+    if (lowerName.includes('weather')) return '🌤️';
+    if (lowerName.includes('calculator') || lowerName.includes('math')) return '🧮';
+    if (lowerName.includes('database') || lowerName.includes('sql')) return '🗄️';
+    if (lowerName.includes('file') || lowerName.includes('document')) return '📄';
+    if (lowerName.includes('image') || lowerName.includes('dall')) return '🎨';
+    if (lowerName.includes('code') || lowerName.includes('python')) return '💻';
+    if (lowerName.includes('email') || lowerName.includes('mail')) return '📧';
+    if (lowerName.includes('calendar') || lowerName.includes('schedule')) return '📅';
+    if (lowerName.includes('retrieval') || lowerName.includes('rag')) return '📚';
+    if (lowerName.includes('api') || lowerName.includes('http')) return '🌐';
+    if (lowerName.includes('user') || lowerName.includes('account')) return '👤';
+    return '⚡';
+};
+
+// Format tool name for display
+const formatToolName = (name: string): string => {
+    return name
+        .replace(/_/g, ' ')
+        .replace(/([A-Z])/g, ' $1')
+        .replace(/\s+/g, ' ')
+        .trim()
+        .split(' ')
+        .map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
+        .join(' ');
+};
+
+// Collapsible JSON viewer
+const JsonViewer = ({ data, defaultExpanded = false }: { data: any; defaultExpanded?: boolean }) => {
+    const [isExpanded, setIsExpanded] = useState(defaultExpanded);
+
+    let displayData = data;
+    if (typeof data === 'string') {
+        try {
+            displayData = JSON.parse(data);
+        } catch {
+            displayData = data;
+        }
+    }
+
+    const formatted = typeof displayData === 'string'
+        ? displayData
+        : JSON.stringify(displayData, null, 2);
+
+    const lineCount = formatted.split('\n').length;
+    const isLong = lineCount > 5 || formatted.length > 200;
+
+    if (!isLong) {
+        return <pre className={styles.jsonContent}>{formatted}</pre>;
+    }
+
+    return (
+        <div className={styles.jsonViewer}>
+            <pre className={`${styles.jsonContent} ${!isExpanded ? styles.collapsed : ''}`}>
+                {formatted}
+            </pre>
+            <button
+                className={styles.expandButton}
+                onClick={() => setIsExpanded(!isExpanded)}
+            >
+                {isExpanded ? 'Show less' : 'Show more'}
+            </button>
+        </div>
+    );
+};
+
+// Modern Tool Card Component
+export const ToolCard = ({
+    toolCall,
+    response,
+    isExecuting = false,
+    status = 'pending'
+}: {
+    toolCall: any;
+    response?: any;
+    isExecuting?: boolean;
+    status?: 'pending' | 'running' | 'success' | 'error';
+}) => {
+    const [isExpanded, setIsExpanded] = useState(false);
+    const [showArgs, setShowArgs] = useState(false);
+
+    const name = toolCall.function?.name || toolCall.name || toolCall.tool || "Unknown Tool";
+    const icon = getToolIcon(name);
+    const displayName = formatToolName(name);
+
+    // Parse arguments
+    let args: any = {};
+    const rawArgs = toolCall.function?.arguments || toolCall.args || toolCall.arguments || toolCall.input;
+    if (rawArgs) {
+        try {
+            args = typeof rawArgs === 'string' ? JSON.parse(rawArgs) : rawArgs;
+        } catch {
+            args = { input: rawArgs };
+        }
+    }
+
+    // Get a summary of the args for preview
+    const argsSummary = Object.entries(args)
+        .slice(0, 2)
+        .map(([key, value]) => {
+            const strValue = typeof value === 'string' ? value : JSON.stringify(value);
+            return strValue.length > 30 ? strValue.substring(0, 30) + '...' : strValue;
+        })
+        .join(', ');
+
+    const currentStatus = isExecuting ? 'running' : (response ? 'success' : status);
+
+    return (
+        <div className={`${styles.toolCard} ${styles[`status_${currentStatus}`]}`}>
+            <div
+                className={styles.toolHeader}
+                onClick={() => setIsExpanded(!isExpanded)}
+            >
+                <div className={styles.toolHeaderLeft}>
+                    <div className={`${styles.statusIndicator} ${styles[`indicator_${currentStatus}`]}`}>
+                        {currentStatus === 'running' ? (
+                            <div className={styles.pulsingDot} />
+                        ) : currentStatus === 'success' ? (
+                            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3">
+                                <polyline points="20 6 9 17 4 12"></polyline>
+                            </svg>
+                        ) : currentStatus === 'error' ? (
+                            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3">
+                                <line x1="18" y1="6" x2="6" y2="18"></line>
+                                <line x1="6" y1="6" x2="18" y2="18"></line>
+                            </svg>
+                        ) : (
+                            <div className={styles.pendingDot} />
+                        )}
+                    </div>
+                    <span className={styles.toolIcon}>{icon}</span>
+                    <span className={styles.toolName}>{displayName}</span>
+                </div>
+
+                <div className={styles.toolHeaderRight}>
+                    {argsSummary && !isExpanded && (
+                        <span className={styles.argsSummary}>{argsSummary}</span>
+                    )}
+                    <svg
+                        className={`${styles.chevron} ${isExpanded ? styles.chevronExpanded : ''}`}
+                        width="16"
+                        height="16"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        strokeWidth="2"
+                    >
+                        <polyline points="6 9 12 15 18 9"></polyline>
+                    </svg>
+                </div>
+            </div>
+
+            {isExpanded && (
+                <div className={styles.toolBody}>
+                    {/* Arguments Section */}
+                    {Object.keys(args).length > 0 && (
+                        <div className={styles.toolSection}>
+                            <button
+                                className={styles.sectionHeader}
+                                onClick={(e) => { e.stopPropagation(); setShowArgs(!showArgs); }}
+                            >
+                                <span className={styles.sectionTitle}>Input</span>
+                                <svg
+                                    className={`${styles.miniChevron} ${showArgs ? styles.chevronExpanded : ''}`}
+                                    width="12"
+                                    height="12"
+                                    viewBox="0 0 24 24"
+                                    fill="none"
+                                    stroke="currentColor"
+                                    strokeWidth="2"
+                                >
+                                    <polyline points="6 9 12 15 18 9"></polyline>
+                                </svg>
+                            </button>
+                            {showArgs && (
+                                <div className={styles.sectionContent}>
+                                    <JsonViewer data={args} />
+                                </div>
+                            )}
+                        </div>
+                    )}
+
+                    {/* Status/Progress Section */}
+                    {currentStatus === 'running' && (
+                        <div className={styles.runningStatus}>
+                            <div className={styles.progressBar}>
+                                <div className={styles.progressFill} />
+                            </div>
+                            <span className={styles.runningText}>Searching...</span>
+                        </div>
+                    )}
+
+                    {/* Response Section */}
+                    {response && (
+                        <div className={styles.toolSection}>
+                            <div className={styles.sectionHeader}>
+                                <span className={styles.sectionTitle}>Output</span>
+                            </div>
+                            <div className={styles.sectionContent}>
+                                <JsonViewer data={response} defaultExpanded={true} />
+                            </div>
+                        </div>
+                    )}
+                </div>
+            )}
+        </div>
+    );
+};
+
+// Legacy components for backward compatibility
+export const ToolRequest = ({ toolCall }: { toolCall: any }) => {
+    return <ToolCard toolCall={toolCall} status="pending" />;
+};
+
+export const ToolResponse = ({ content }: { content: string | any }) => {
+    let displayContent = content;
+    if (content && typeof content === 'object') {
+        displayContent = content.output || content.result || content.content || content;
+    }
+    if (typeof displayContent !== 'string') {
+        try {
+            displayContent = JSON.stringify(displayContent, null, 2);
+        } catch {
+            displayContent = String(displayContent);
+        }
+    }
+
+    return (
+        <div className={styles.legacyResponse}>
+            <div className={styles.responseHeader}>
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                    <polyline points="20 6 9 17 4 12"></polyline>
+                </svg>
+                <span>Result</span>
+            </div>
+            <div className={styles.responseContent}>
+                <pre>{displayContent}</pre>
+            </div>
+        </div>
+    );
+};
+
+export const ToolExecuting = ({ name }: { name: string }) => {
+    const icon = getToolIcon(name);
+    const displayName = formatToolName(name);
+
+    return (
+        <div className={styles.executingCard}>
+            <div className={styles.executingHeader}>
+                <div className={styles.pulsingDot} />
+                <span className={styles.toolIcon}>{icon}</span>
+                <span className={styles.executingName}>{displayName}</span>
+            </div>
+            <div className={styles.executingProgress}>
+                <div className={styles.progressBar}>
+                    <div className={styles.progressFill} />
+                </div>
+            </div>
+        </div>
+    );
+};
+
+// Tool Usage Container - groups tool calls together
+export const ToolUsageContainer = ({
+    toolCalls,
+    toolResponses = {},
+    currentTool = null
+}: {
+    toolCalls: any[];
+    toolResponses?: Record<string, any>;
+    currentTool?: string | null;
+}) => {
+    if (!toolCalls || toolCalls.length === 0) return null;
+
+    return (
+        <div className={styles.toolUsageContainer}>
+            <div className={styles.toolUsageHeader}>
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                    <path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"></path>
+                </svg>
+                <span>Using {toolCalls.length} tool{toolCalls.length > 1 ? 's' : ''}</span>
+            </div>
+            <div className={styles.toolCardList}>
+                {toolCalls.map((toolCall, index) => {
+                    const toolId = toolCall.id || `tool-${index}`;
+                    const toolName = toolCall.function?.name || toolCall.name || '';
+                    const isRunning = currentTool === toolName;
+                    const response = toolResponses[toolId];
+
+                    return (
+                        <ToolCard
+                            key={toolId}
+                            toolCall={toolCall}
+                            response={response}
+                            isExecuting={isRunning}
+                            status={response ? 'success' : (isRunning ? 'running' : 'pending')}
+                        />
+                    );
+                })}
+            </div>
+        </div>
+    );
+};

package/epsimo/templates/next-mvp/app/globals.css.tmpl

@@ -0,0 +1,20 @@
+:root {
+  --background: #000;
+  --foreground: #fff;
+}
+
+* {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+}
+
+body {
+  background: var(--background);
+  color: var(--foreground);
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}

package/epsimo/templates/next-mvp/app/layout.tsx.tmpl

@@ -0,0 +1,22 @@
+import type { Metadata } from "next";
+import { Inter } from "next/font/google";
+import "./globals.css";
+
+const inter = Inter({ subsets: ["latin"] });
+
+export const metadata: Metadata = {
+  title: "{{PROJECT_NAME}} - Powered by Epsimo",
+  description: "Epsimo AI Agent MVP application",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body className={inter.className}>{children}</body>
+    </html>
+  );
+}

package/epsimo/templates/next-mvp/app/page.module.css.tmpl

@@ -0,0 +1,84 @@
+.main {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  background: #000;
+  color: #fff;
+  font-family: var(--font-inter);
+}
+
+.header {
+  padding: 2rem;
+  border-bottom: 1px solid #222;
+}
+
+.header h1 {
+  margin: 0;
+  font-size: 1.5rem;
+  background: linear-gradient(90deg, #fff, #888);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+.titleGroup {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.version {
+  font-size: 0.7rem;
+  background: #222;
+  padding: 0.2rem 0.5rem;
+  border-radius: 4px;
+  color: #888;
+}
+
+.header p {
+  margin: 0.5rem 0 0;
+  font-size: 0.9rem;
+  color: #666;
+}
+
+.content {
+  flex: 1;
+  display: flex;
+  overflow: hidden;
+}
+
+.sidebar {
+  width: 300px;
+  border-right: 1px solid #222;
+  padding: 1.5rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.sidebar h3 {
+  font-size: 0.9rem;
+  text-transform: uppercase;
+  color: #444;
+  letter-spacing: 0.05rem;
+}
+
+.hint {
+  font-size: 0.8rem;
+  color: #666;
+}
+
+.dbPreview {
+  flex: 1;
+  background: #111;
+  border-radius: 8px;
+  padding: 1rem;
+  font-family: monospace;
+  font-size: 0.8rem;
+  color: #0f0;
+  overflow: auto;
+}
+
+.chatSection {
+  flex: 1;
+  height: 100%;
+}

package/epsimo/templates/next-mvp/app/page.tsx.tmpl

@@ -0,0 +1,43 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { ThreadChat } from "@/components/epsimo";
+import styles from "./page.module.css";
+
+export default function Home() {
+  const [appState, setAppState] = useState<any>(null);
+
+  // Example: Listening for changes in the Virtual Database
+  // In a real app, you would fetch this on a timer or after a message
+  useEffect(() => {
+    console.log("Tip: Use client.db.get_all() from the SDK to read structured thread state!");
+  }, []);
+
+  return (
+    <main className={styles.main}>
+      <header className={styles.header}>
+        <div className={styles.titleGroup}>
+          <h1>{{PROJECT_NAME}}</h1>
+          <span className={styles.version}>v0.1.0</span>
+        </div>
+        <p>AI-Powered MVP built with Epsimo Agent Framework</p>
+      </header>
+
+      <div className={styles.content}>
+        <aside className={styles.sidebar}>
+          <h3>Project Memory</h3>
+          <p className={styles.hint}>Structured data written by the agent will appear here.</p>
+          <div className={styles.dbPreview}>
+            {appState ? JSON.stringify(appState, null, 2) : "DB Empty..."}
+          </div>
+        </aside>
+
+        <section className={styles.chatSection}>
+          <ThreadChat 
+            assistantId="{{ASSISTANT_ID}}"
+          />
+        </section>
+      </div>
+    </main>
+  );
+}

package/epsimo/templates/next-mvp/epsimo.yaml.tmpl

@@ -0,0 +1,12 @@
+# Epsimo Agent Configuration
+name: "{{PROJECT_NAME}}"
+
+assistants:
+  - name: "mvp-assistant"
+    model: "gpt-4o"
+    instructions: |
+      You are the core intelligence for {{PROJECT_NAME}}. 
+      You help users achieve their goals by using the tools available to you.
+    tools:
+      - type: "retrieval"
+      - type: "ddg_search"

package/epsimo/templates/next-mvp/package.json.tmpl

@@ -0,0 +1,26 @@
+{
+  "name": "{{PROJECT_SLUG}}",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "react": "^18",
+    "react-dom": "^18",
+    "next": "14.2.3",
+    "react-markdown": "^9.0.1",
+    "lucide-react": "^0.378.0"
+  },
+  "devDependencies": {
+    "typescript": "^5",
+    "@types/node": "^20",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "eslint": "^8",
+    "eslint-config-next": "14.2.3"
+  }
+}

package/epsimo/tools/library.yaml

@@ -0,0 +1,51 @@
+# Epsimo Tool Library
+# Reusable tool schemas for rapid development
+
+database_sync:
+  type: "function"
+  name: "update_database"
+  description: "Persist structured JSON data to the conversation state for long-term memory."
+  parameters:
+    type: "object"
+    properties:
+      key:
+        type: "string"
+        description: "The data category (e.g. 'user_info', 'preferences')"
+      value:
+        type: "object"
+        description: "The JSON data to store"
+    required: ["key", "value"]
+
+web_search_tavily:
+  type: "search_tavily"
+  name: "Search"
+  description: "Advanced search with source attribution."
+  config:
+    max_results: 5
+
+web_search_ddg:
+  type: "ddg_search"
+  name: "Quick Search"
+  description: "Fast web search for simple queries."
+
+retrieval_optimized:
+  type: "retrieval"
+  name: "Knowledge Base"
+  description: "Search in uploaded documents."
+  config:
+    top_k: 5
+    score_threshold: 0.7
+
+task_management:
+  type: "function"
+  name: "manage_task"
+  description: "Track and update user tasks."
+  parameters:
+    type: "object"
+    properties:
+      action:
+        type: "string"
+        enum: ["create", "update", "delete", "list"]
+      details:
+        type: "object"
+    required: ["action", "details"]

package/package.json

@@ -0,0 +1,27 @@
+{
+    "name": "epsimo-agent",
+    "version": "0.1.0",
+    "description": "Comprehensive framework for building AI applications using EpsimoAI. Manage agents, projects, threads, and persistent state (Virtual Database).",
+    "author": "EpsimoAI",
+    "license": "MIT",
+    "main": "SKILL.md",
+    "files": [
+        "SKILL.md",
+        "scripts/",
+        "epsimo/",
+        "references/",
+        "assets/",
+        "requirements.txt"
+    ],
+    "keywords": [
+        "skill",
+        "ai",
+        "agent",
+        "epsimo",
+        "llm"
+    ],
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/epsimo-ai/epsimo-agent.git"
+    }
+}

package/references/api_reference.md

@@ -0,0 +1,34 @@
+# Reference Documentation for Epsimo Agent
+
+This is a placeholder for detailed reference documentation.
+Replace with actual reference content or delete if not needed.
+
+Example real reference docs from other skills:
+- product-management/references/communication.md - Comprehensive guide for status updates
+- product-management/references/context_building.md - Deep-dive on gathering context
+- bigquery/references/ - API references and query examples
+
+## When Reference Docs Are Useful
+
+Reference docs are ideal for:
+- Comprehensive API documentation
+- Detailed workflow guides
+- Complex multi-step processes
+- Information too lengthy for main SKILL.md
+- Content that's only needed for specific use cases
+
+## Structure Suggestions
+
+### API Reference Example
+- Overview
+- Authentication
+- Endpoints with examples
+- Error codes
+- Rate limits
+
+### Workflow Guide Example
+- Prerequisites
+- Step-by-step instructions
+- Common patterns
+- Troubleshooting
+- Best practices