llms-py 2.0.20__py3-none-any.whl → 3.0.10__py3-none-any.whl

llms/extensions/core_tools/ui/index.mjs

@@ -0,0 +1,650 @@
+import { ref, onMounted, watch, inject, nextTick } from "vue"
+import { ApiResult, createErrorStatus } from "@servicestack/client"
+
+let ext
+
+const languages = {
+    python: {
+        name: 'Python',
+        mime: 'text/x-python',
+        default: 'print("Hello, Python!")\n',
+    },
+    javascript: {
+        name: 'JavaScript',
+        mime: 'text/javascript',
+        default: 'console.log("Hello, JavaScript!");\n',
+    },
+    typescript: {
+        name: 'TypeScript',
+        mime: 'text/typescript',
+        default: 'const msg: string = "Hello, TypeScript!";\nconsole.log(msg);\n',
+    },
+    csharp: {
+        name: 'C#',
+        mime: 'text/x-csharp',
+        default: 'Console.WriteLine("Hello, C#!");\n',
+    },
+}
+
+const CodePage = {
+    template: `
+        <div class="flex flex-col h-full w-full">
+            <component :is="'style'">
+                .CodeMirror { height: 100% !important; }
+            </component>
+            <!-- Toolbar -->
+            <div class="flex items-center justify-between p-2 border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 shrink-0">
+                <div class="flex items-center space-x-1">
+                    <button v-for="lang in Object.keys(languages)" :key="lang" type="button" @click="language = lang" 
+                        class="px-2.5 py-1 rounded-full text-xs font-medium border transition-colors select-none capitalize"
+                        :class="language === lang 
+                            ? 'bg-blue-100 dark:bg-blue-900/40 text-blue-800 dark:text-blue-300 border-blue-200 dark:border-blue-800' 
+                            : 'bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700'">
+                        {{ languages[lang].name }}
+                    </button>
+                </div>
+                <div class="flex items-center space-x-2">
+                    <button @click="toggleOutput" class="p-1 rounded hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-500" :title="showOutput ? 'Hide Output' : 'Show Output'">
+                        <svg v-if="showOutput" xmlns="http://www.w3.org/2000/svg" class="size-5" viewBox="0 0 24 24"><path fill="currentColor" d="M21 3H3c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2m0 16H3v-3h18zm0-5H3V5h18z"/></svg>
+                        <svg v-else xmlns="http://www.w3.org/2000/svg" class="size-5" viewBox="0 0 24 24"><path fill="currentColor" d="M21 3H3c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2m0 16H3V5h18z"/></svg>
+                    </button>
+                    <button @click="runCode" type="button" :disabled="loading" class="px-4 py-1.5 bg-blue-600 text-white rounded hover:bg-blue-700 focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed flex items-center shadow-sm transition-colors">
+                        <svg v-if="loading" class="animate-spin -ml-1 mr-2 h-4 w-4 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                        </svg>
+                        <span v-else>Run</span>
+                        <svg v-if="!loading" class="ml-1 size-5" fill="none" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M19.266 13.516a1.917 1.917 0 0 0 0-3.032A35.8 35.8 0 0 0 9.35 5.068l-.653-.232c-1.248-.443-2.567.401-2.736 1.69a42.5 42.5 0 0 0 0 10.948c.17 1.289 1.488 2.133 2.736 1.69l.653-.232a35.8 35.8 0 0 0 9.916-5.416"/></svg>
+                    </button>
+                </div>
+            </div>
+
+            <!-- Main Content -->
+            <div class="flex-1 flex flex-col min-h-0">
+                <!-- Code Editor -->
+                <div class="flex-1 overflow-hidden relative">
+                    <!-- The div CodeMirror attaches to. We use absolute positioning to ensure it takes full space of parent -->
+                    <div ref="refInput" class="absolute inset-0 h-full w-full text-base"></div>
+                </div>
+
+                <!-- Output Pane -->
+                <div v-if="showOutput" class="h-1/3 min-h-[150px] border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-900 flex flex-col font-mono text-sm overflow-hidden shrink-0 shadow-[0_-4px_6px_-1px_rgba(0,0,0,0.1)] z-10">
+                    <div class="px-2 py-1 bg-gray-100 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 text-xs font-semibold text-gray-500 uppercase flex justify-between items-center select-none">
+                        <span>Output</span>
+                        <div class="flex items-center">
+                            <span v-if="resultStatus" class="mr-2 px-2 py-0.5 rounded text-[10px]" :class="resultStatusColor">{{ resultStatus }}</span>
+                            <button @click="showOutput=false" type="button" class="hover:text-gray-700 dark:hover:text-gray-300">
+                                <svg xmlns="http://www.w3.org/2000/svg" class="size-4" viewBox="0 0 24 24"><path fill="currentColor" d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>
+                            </button>
+                        </div>
+                    </div>
+                     <div class="flex-1 overflow-auto p-2 whitespace-pre-wrap font-mono relative">
+                        <div v-if="loading" class="absolute inset-0 bg-white/50 dark:bg-gray-900/50 flex items-center justify-center z-10 transition-opacity">
+                             <div class="animate-pulse text-blue-500">Executing...</div>
+                        </div>
+                        <div v-if="!stdout && !stderr && !resultStatus && !loading" class="text-gray-400 italic p-4 text-center">
+                            Press CTRL+ENTER or click Run to execute code.
+                        </div>
+                        <div v-if="stdout" class="text-gray-800 dark:text-gray-300">{{ stdout }}</div>
+                        <div v-if="stderr" class="text-red-600 dark:text-red-400 mt-2 border-t border-red-200 dark:border-red-900 pt-2">{{ stderr }}</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    `,
+    setup() {
+        let cm
+        const refInput = ref()
+        const language = ref(localStorage.getItem('llms.tools.lastLanguage') || 'python')
+        const code = ref(localStorage.getItem(`llms.tools.${language.value}`) || '')
+        const stdout = ref('')
+        const stderr = ref('')
+        const loading = ref(false)
+        const resultStatus = ref('')
+        const resultStatusColor = ref('')
+        const showOutput = ref(true)
+
+        const loadCode = (lang) => {
+            const saved = localStorage.getItem(`llms.tools.${lang}`)
+            // Default snippets if empty
+            if (!saved || Object.values(languages).some(l => l.default.trim() === saved.trim())) {
+                return languages[lang].default
+            }
+            return saved
+        }
+
+        // Initial load
+        code.value = loadCode(language.value)
+
+
+
+        watch(language, (newLang, oldLang) => {
+            // Save old language code
+            if (oldLang && cm) {
+                const currentContent = cm.getValue()
+                localStorage.setItem(`llms.tools.${oldLang}`, currentContent)
+            }
+            localStorage.setItem('llms.tools.lastLanguage', newLang)
+
+            // Load new language code
+            code.value = loadCode(newLang)
+            if (cm) {
+                cm.setValue(code.value)
+                cm.setOption('mode', languages[newLang].mime)
+            }
+
+            // Clear output on language switch
+            stdout.value = ''
+            stderr.value = ''
+            resultStatus.value = ''
+        })
+
+        function setError(status) {
+            if (!status) return
+            if (typeof status == 'string') {
+                status = {
+                    message: status,
+                    errorCode: 'Error'
+                }
+            }
+            stderr.value = status.message
+            resultStatus.value = status.errorCode || 'Error'
+            resultStatusColor.value = 'text-red-600 bg-red-100 dark:text-red-400 dark:bg-red-900'
+        }
+
+        const toggleOutput = () => {
+            showOutput.value = !showOutput.value
+            nextTick(() => {
+                if (cm) cm.refresh()
+            })
+        }
+
+        const runCode = async () => {
+            if (loading.value) return
+
+            if (!showOutput.value) {
+                showOutput.value = true
+                nextTick(() => {
+                    if (cm) cm.refresh()
+                })
+            }
+
+            // Save before run
+            if (cm) {
+                code.value = cm.getValue()
+            }
+            localStorage.setItem(`llms.tools.${language.value}`, code.value)
+
+            loading.value = true
+            stdout.value = ''
+            stderr.value = ''
+            resultStatus.value = ''
+            let api
+
+            try {
+                const res = await ext.post(`/code/${language.value}/run`, {
+                    body: code.value
+                })
+                if (!res.ok) {
+                    api = new ApiResult({ error: createErrorStatus(`HTTP ${res.status} ${res.statusText}`) })
+                } else {
+                    const response = await res.json()
+                    api = new ApiResult({ response })
+                }
+            } catch (e) {
+                api = new ApiResult({ error: createErrorStatus(e.message) })
+            }
+
+            if (api.response) {
+                const result = api.response
+                stdout.value = result.stdout || ''
+                stderr.value = result.stderr || ''
+
+                if (result.returncode === 0) {
+                    resultStatus.value = 'Success'
+                    resultStatusColor.value = 'text-green-600 bg-green-100 dark:text-green-400 dark:bg-green-900'
+                } else {
+                    resultStatus.value = `Exit Code: ${result.returncode}`
+                    resultStatusColor.value = 'text-red-600 bg-red-100 dark:text-red-400 dark:bg-red-900'
+                }
+            }
+            else if (api.error) {
+                setError(api.error)
+            }
+
+            loading.value = false
+        }
+
+        onMounted(() => {
+            // Ensure CodeMirror is global
+            if (typeof CodeMirror === 'undefined') {
+                console.error('CodeMirror is not loaded')
+                return
+            }
+
+            cm = CodeMirror(refInput.value, {
+                lineNumbers: true,
+                styleActiveLine: true,
+                matchBrackets: true,
+                mode: languages[language.value].mime,
+                theme: 'ctp-mocha', // using the theme from existing code
+                value: code.value,
+                extraKeys: {
+                    "Ctrl-Enter": () => runCode(),
+                    "Cmd-Enter": () => runCode(), // Mac support
+                },
+                tabSize: 4,
+                indentUnit: 4,
+                lineWrapping: false, // Code editors usually don't wrap by default, but customizable
+            })
+
+            cm.on('change', () => {
+                code.value = cm.getValue()
+                localStorage.setItem(`llms.tools.${language.value}`, code.value)
+            })
+
+            // Fix layout issues when resizing
+            window.addEventListener('resize', () => {
+                cm.refresh()
+            })
+        })
+
+        return {
+            languages,
+            refInput,
+            stdout,
+            stderr,
+            loading,
+            resultStatus,
+            resultStatusColor,
+            language,
+            code,
+            showOutput,
+            toggleOutput,
+            runCode,
+        }
+    }
+}
+
+const CalcPage = {
+    template: `
+        <div class="flex flex-col h-full w-full bg-white dark:bg-gray-900 text-base">
+            <!-- Header/Input Area -->
+            <div class="p-4 border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 shrink-0">
+                <div class="max-w-3xl mx-auto w-full">
+                    <form @submit.prevent="calculate" class="relative">
+                        <input
+                            ref="inputRef"
+                            v-model="expression"
+                            type="text"
+                            placeholder="Type an expression (e.g. 1 + 2 * 3) and press Enter"
+                            class="w-full px-4 py-3 pr-12 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none shadow-sm transition-all"
+                            :disabled="loading"
+                            autofocus
+                        />
+                        <button
+                            type="submit"
+                            :disabled="loading || !expression.trim()"
+                            class="absolute right-2 top-1/2 -translate-y-1/2 p-2 text-blue-600 dark:text-blue-400 hover:bg-blue-50 dark:hover:bg-gray-600 rounded-md transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+                            title="Calculate"
+                        >
+                            <svg v-if="loading" class="animate-spin size-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                            </svg>
+                            <svg v-else class="size-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" d="M16 14H8m8-4H8"/><circle cx="12" cy="12" r="10"/></g></svg>
+                        </button>
+                    </form>
+                    <div v-if="error" class="mt-2 text-sm text-red-600 dark:text-red-400">
+                        {{ error }}
+                    </div>
+                </div>
+            </div>
+
+            <!-- History List -->
+            <div class="flex-1 overflow-auto p-4">
+                <div class="max-w-3xl mx-auto w-full space-y-3">
+                    <div v-if="history.length === 0" class="text-center text-gray-400 dark:text-gray-500 py-10 italic">
+                        No calculation history.
+                    </div>
+                    
+                    <div v-for="(item, index) in history" :key="index" class="group bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-4 shadow-sm hover:shadow-md transition-all">
+                        <div class="flex items-center justify-between gap-4">
+                            <div class="flex-1 space-y-1 min-w-0">
+                                <!-- Expression -->
+                                <div class="flex items-center gap-2 group/expr cursor-pointer" @click="useResult(item.expression, item, 'expr')">
+                                    <span 
+                                        class="font-mono text-gray-500 dark:text-gray-400 group-hover/expr:text-blue-600 dark:group-hover/expr:text-blue-400 transition-colors select-none"
+                                        title="Click to copy & use"
+                                    >
+                                        {{ item.expression }} =
+                                    </span>
+                                    <button 
+                                        type="button"
+                                        class="opacity-0 group-hover/expr:opacity-100 p-1 text-gray-400 group-hover/expr:text-blue-500 transition-opacity"
+                                        title="Copy expression"
+                                    >
+                                        <svg v-if="item.copiedExpr" class="size-3.5 text-green-600 dark:text-green-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="m9.55 18l-5.7-5.7l1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4z"/></svg>
+                                        <svg v-else xmlns="http://www.w3.org/2000/svg" class="size-3.5" viewBox="0 0 24 24"><path fill="currentColor" d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2m0 16H8V7h11z"/></svg>
+                                    </button>
+                                </div>
+                                
+                                <!-- Answer -->
+                                <div class="flex items-center gap-2 group/ans cursor-pointer" @click="useResult(item.answer, item, 'ans')">
+                                    <span 
+                                        class="font-mono text-xl font-semibold text-gray-900 dark:text-white group-hover/ans:text-blue-600 dark:group-hover/ans:text-blue-400 transition-colors break-all"
+                                        title="Click to copy & use"
+                                    >
+                                        {{ item.answer }}
+                                    </span>
+                                    <button 
+                                        type="button"
+                                        class="opacity-0 group-hover/ans:opacity-100 p-1 text-gray-400 group-hover/ans:text-blue-500 transition-opacity"
+                                        title="Copy answer"
+                                    >
+                                        <svg v-if="item.copiedAns" class="size-4 text-green-600 dark:text-green-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="m9.55 18l-5.7-5.7l1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4z"/></svg>
+                                        <svg v-else xmlns="http://www.w3.org/2000/svg" class="size-4" viewBox="0 0 24 24"><path fill="currentColor" d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2m0 16H8V7h11z"/></svg>
+                                    </button>
+                                </div>
+                            </div>
+                            
+                            <!-- Delete Button -->
+                            <button 
+                                type="button"
+                                @click="remove(index)"
+                                class="opacity-0 group-hover:opacity-100 p-2 text-gray-400 hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-900/30 rounded-md transition-all"
+                                title="Delete"
+                            >
+                                <svg class="size-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path></svg>
+                            </button>
+                        </div>
+                    </div>
+
+                    <div v-if="history.length" class="flex justify-center pt-4">
+                        <button 
+                            type="button"
+                            @click="clearAll"
+                            class="text-sm text-gray-500 hover:text-red-600 dark:text-gray-400 dark:hover:text-red-300"
+                        >
+                            clear all history
+                        </button>
+                    </div>
+                    
+                    <!-- Features (Operators & Functions) -->
+                    <div v-if="features.operators?.length || features.functions?.length" class="mt-12 mb-6 space-y-4">
+                        <!-- Numbers -->
+                        <div>
+                            <div class="flex flex-wrap gap-2">
+                                <button 
+                                    v-for="num in features.numbers" 
+                                    :key="num"
+                                    type="button"
+                                    @click="insert(num)"
+                                    class="px-3 py-1 bg-gray-100 dark:bg-gray-800 hover:bg-blue-100 dark:hover:bg-blue-900/30 text-gray-700 dark:text-gray-300 hover:text-blue-700 dark:hover:text-blue-300 border border-gray-200 dark:border-gray-700 rounded text-sm font-mono transition-colors"
+                                    :title="'insert number ' + num"
+                                >
+                                    {{ num }}
+                                </button>
+                                <span class="px-1 py-1 text-gray-400 dark:text-gray-600">|</span>
+                                <button 
+                                    v-for="c in features.constants" 
+                                    :key="c"
+                                    type="button"
+                                    @click="insert(c)"
+                                    class="px-3 py-1 bg-gray-100 dark:bg-gray-800 hover:bg-blue-100 dark:hover:bg-blue-900/30 text-gray-700 dark:text-gray-300 hover:text-blue-700 dark:hover:text-blue-300 border border-gray-200 dark:border-gray-700 rounded text-sm font-mono transition-colors"
+                                    :title="'insert constant ' + c"
+                                >
+                                    {{ c }}
+                                </button>
+                            </div>
+                        </div>
+
+                        <!-- Operators -->
+                        <div v-if="features.operators?.length">
+                            <div class="flex flex-wrap gap-2">
+                                <button 
+                                    v-for="op in features.operators" 
+                                    :key="op"
+                                    type="button"
+                                    @click="insert(op)"
+                                    class="px-3 py-1 bg-gray-100 dark:bg-gray-800 hover:bg-blue-100 dark:hover:bg-blue-900/30 text-gray-700 dark:text-gray-300 hover:text-blue-700 dark:hover:text-blue-300 border border-gray-200 dark:border-gray-700 rounded text-sm font-mono transition-colors"
+                                    :title="'insert operator ' + op"
+                                >
+                                    {{ op }}
+                                </button>
+                            </div>
+                        </div>
+
+                        <!-- Functions -->
+                        <div v-if="features.functions?.length">
+                            <h3 class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2">Functions</h3>
+                            <div class="flex flex-wrap gap-2">
+                                <button 
+                                    v-for="func in features.functions" 
+                                    :key="func"
+                                    type="button"
+                                    @click="wrapWithFunction(func)"
+                                    class="px-3 py-1 bg-gray-100 dark:bg-gray-800 hover:bg-purple-100 dark:hover:bg-purple-900/30 text-gray-700 dark:text-gray-300 hover:text-purple-700 dark:hover:text-purple-300 border border-gray-200 dark:border-gray-700 rounded text-sm font-mono transition-colors"
+                                    :title="'use function ' + func"
+                                >
+                                    {{ func }}
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    `,
+    setup() {
+        const ctx = inject('ctx')
+        const expression = ref('')
+        const history = ref([])
+        const loading = ref(false)
+        const error = ref('')
+        const inputRef = ref()
+        const features = ref({ functions: [] })
+
+        // Load history from localStorage
+        try {
+            const saved = localStorage.getItem('llms.tools.calc.history')
+            if (saved) {
+                history.value = JSON.parse(saved)
+            }
+        } catch (e) {
+            console.error('Failed to load history', e)
+        }
+
+        function setExpr(result) {
+            if (Array.isArray(result)) {
+                expression.value = JSON.stringify(result)
+            } else {
+                expression.value = String(result)
+            }
+        }
+
+        const saveHistory = () => {
+            localStorage.setItem('llms.tools.calc.history', JSON.stringify(history.value))
+        }
+
+        const calculate = async () => {
+            if (!expression.value.trim() || loading.value) return
+
+            loading.value = true
+            error.value = ''
+            const expr = expression.value
+
+            const res = await ext.post('/calc', {
+                body: expr
+            })
+
+            const api = await ext.createJsonResult(res)
+
+            if (api.response) {
+                // Add to history (newest first)
+                history.value.unshift({
+                    expression: expr,
+                    answer: api.response.result,
+                    timestamp: Date.now()
+                })
+
+                // Keep history size reasonable
+                if (history.value.length > 50) {
+                    history.value = history.value.slice(0, 50)
+                }
+
+                saveHistory()
+                setExpr(api.response.result)
+            } else {
+                error.value = api.error.message
+            }
+
+            loading.value = false
+            // Refocus input and move cursor to end
+            nextTick(() => {
+                if (inputRef.value) {
+                    inputRef.value.focus()
+                    const len = inputRef.value.value.length
+                    inputRef.value.setSelectionRange(len, len)
+                }
+            })
+        }
+
+        const populate = (result) => {
+            setExpr(result)
+            inputRef.value?.focus()
+        }
+
+        const insert = (text) => {
+            expression.value += String(text)
+            inputRef.value?.focus()
+        }
+
+        const wrapWithFunction = (fn) => {
+            const input = inputRef.value
+            if (!input) return
+
+            const start = input.selectionStart
+            const end = input.selectionEnd
+            const val = expression.value
+
+            if (start !== end) {
+                // Wrap selection
+                const selected = val.substring(start, end)
+                const before = val.substring(0, start)
+                const after = val.substring(end)
+                expression.value = `${before}${fn}(${selected})${after}`
+
+                nextTick(() => {
+                    input.focus()
+                    // Position cursor after the closing parenthesis
+                    const newPos = start + fn.length + 1 + selected.length + 1
+                    input.setSelectionRange(newPos, newPos)
+                })
+            } else if (val) {
+                // Wrap entire expression
+                expression.value = `${fn}(${val})`
+                nextTick(() => {
+                    input.focus()
+                    // Position cursor at end
+                    const len = expression.value.length
+                    input.setSelectionRange(len, len)
+                })
+            } else {
+                // Just insert empty function
+                expression.value = `${fn}()`
+                nextTick(() => {
+                    input.focus()
+                    // Position cursor inside parentheses
+                    const pos = fn.length + 1
+                    input.setSelectionRange(pos, pos)
+                })
+            }
+        }
+
+        const copy = (text) => {
+            navigator.clipboard.writeText(String(text))
+        }
+
+        const useResult = (text, item, type) => {
+            populate(text)
+            const str = String(text)
+            copy(str)
+
+            // Set temporary success state
+            if (type === 'expr') item.copiedExpr = true
+            else if (type === 'ans') item.copiedAns = true
+
+            setTimeout(() => {
+                if (type === 'expr') item.copiedExpr = false
+                else if (type === 'ans') item.copiedAns = false
+            }, 2000)
+
+            ctx.toast('Copied to clipboard')
+        }
+
+        const remove = (index) => {
+            history.value.splice(index, 1)
+            saveHistory()
+        }
+
+        const clearAll = () => {
+            if (confirm('Are you sure you want to clear all history?')) {
+                history.value = []
+                saveHistory()
+            }
+        }
+
+        onMounted(async () => {
+            const api = await ext.getJson('/calc')
+            features.value = api.response
+            console.log(features.value)
+        })
+
+        return {
+            expression,
+            history,
+            loading,
+            error,
+            inputRef,
+            calculate,
+            useResult,
+            remove,
+            clearAll,
+            features,
+            insert,
+            wrapWithFunction,
+        }
+    }
+}
+
+export default {
+    install(ctx) {
+        ext = ctx.scope('core_tools')
+
+        ctx.setLeftIcons({
+            code: {
+                component: {
+                    template: `<svg @click="$ctx.togglePath('/code')" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="none"><path d="M0 0h24v24H0z"/><path fill="currentColor" d="M14.486 3.143a1 1 0 0 1 .692 1.233l-4.43 15.788a1 1 0 0 1-1.926-.54l4.43-15.788a1 1 0 0 1 1.234-.693M7.207 7.05a1 1 0 0 1 0 1.414L3.672 12l3.535 3.535a1 1 0 1 1-1.414 1.415L1.55 12.707a1 1 0 0 1 0-1.414L5.793 7.05a1 1 0 0 1 1.414 0m9.586 1.414a1 1 0 1 1 1.414-1.414l4.243 4.243a1 1 0 0 1 0 1.414l-4.243 4.243a1 1 0 0 1-1.414-1.415L20.328 12z"/></g></svg>`
+                },
+                isActive({ path }) {
+                    return path === '/code'
+                },
+                title: 'Run Code',
+            },
+            calc: {
+                component: {
+                    template: `<svg @click="$ctx.togglePath('/calc')" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"><path d="M11.5.5h-9a1 1 0 0 0-1 1v11a1 1 0 0 0 1 1h9a1 1 0 0 0 1-1v-11a1 1 0 0 0-1-1m-10 5h11"/><path d="M4.25 8.5a.25.25 0 0 1 0-.5m0 .5a.25.25 0 0 0 0-.5M7 8.5A.25.25 0 0 1 7 8m0 .5A.25.25 0 0 0 7 8m2.75.5a.25.25 0 0 1 0-.5m0 .5a.25.25 0 0 0 0-.5m-5.5 3a.25.25 0 1 1 0-.5m0 .5a.25.25 0 1 0 0-.5M7 11a.25.25 0 1 1 0-.5m0 .5a.25.25 0 1 0 0-.5m2.75.5a.25.25 0 1 1 0-.5m0 .5a.25.25 0 1 0 0-.5M10 3H9"/></g></svg>`,
+                },
+                isActive({ path }) {
+                    return path === '/calc'
+                },
+                title: 'Calculator',
+            }
+        })
+
+        ctx.routes.push({ path: '/code', component: CodePage, meta: { title: 'Run Code' } })
+        ctx.routes.push({ path: '/calc', component: CalcPage, meta: { title: 'Calculator' } })
+
+    }
+}