// Project R — API tools section for the skill drawer.
// Optional. A skill can declare zero, one, or many tools. Each tool maps to
// a generic "fire an HTTP request with LLM-supplied inputs" runtime call.
//
// Two ways in: paste raw JSON, or upload a .json file. Both feed the same
// parser. Once parsed, tools render as editable cards. Inline fields for the
// common stuff (name, description, method, url, timeout); the more
// structured bits (headers, body fields, response) live in collapsible
// sub-editors and are edited as JSON text — that's deliberate, those shapes
// are too varied for a fixed form and the JSON is what the backend stores
// anyway.
const { useState: useATS, useEffect: useATE, useRef: useATR, useMemo: useATM } = React;
const METHODS = ['GET', 'POST', 'PUT', 'PATCH', 'DELETE'];
// Normalise whatever the user threw in: bare object, single tool object,
// array of tools, or a wrapper like {api_tools: [...]}. Returns an array.
function normaliseApiTools(raw) {
if (raw == null) return [];
if (Array.isArray(raw)) return raw;
if (typeof raw === 'object') {
if (Array.isArray(raw.api_tools)) return raw.api_tools;
if (Array.isArray(raw.tools)) return raw.tools;
// Single tool definition (has a name + url)
if (raw.name && raw.url) return [raw];
}
return [];
}
// Light validation — surfaces problems but doesn't gate. The user can still
// save a tool with warnings; the runtime will reject anything truly broken.
function validateTool(t) {
const errs = [];
if (!t || typeof t !== 'object') return ['Tool must be an object.'];
if (!t.name || typeof t.name !== 'string') errs.push('Missing name.');
else if (!/^[a-zA-Z][a-zA-Z0-9_]*$/.test(t.name)) errs.push('Name should be snake_case (letters, digits, underscore).');
if (!t.url || typeof t.url !== 'string') errs.push('Missing url.');
if (t.method && !METHODS.includes(String(t.method).toUpperCase())) errs.push(`Unsupported method: ${t.method}`);
if (t.headers && typeof t.headers !== 'object') errs.push('Headers must be an object.');
if (t.body && typeof t.body !== 'object') errs.push('Body must be an object.');
return errs;
}
function ApiToolsSection({ value, onChange }) {
// value is the array of tools (possibly empty). Section is collapsed when
// empty — user opts in by clicking "Add API tools".
const [expanded, setExpanded] = useATS(value && value.length > 0);
const [importMode, setImportMode] = useATS(null); // null | 'paste' | 'file'
const [pasteText, setPasteText] = useATS('');
const [parseError, setParseError] = useATS('');
const fileRef = useATR();
useATE(() => {
if (value && value.length > 0 && !expanded) setExpanded(true);
}, [value && value.length]);
const tools = value || [];
const importParsed = (parsed) => {
const arr = normaliseApiTools(parsed);
if (arr.length === 0) {
setParseError('No tools found. Expected an array, or an object with an api_tools array.');
return;
}
onChange([...(tools || []), ...arr]);
setImportMode(null);
setPasteText('');
setParseError('');
};
const handlePaste = () => {
setParseError('');
if (!pasteText.trim()) { setParseError('Paste some JSON first.'); return; }
let parsed;
try {
parsed = JSON.parse(pasteText);
} catch (e) {
// Try wrapping fragment in [] in case user pasted a bare comma-separated
// list of tool objects (the snippet style from internal docs).
try { parsed = JSON.parse('[' + pasteText.trim().replace(/,\s*$/, '') + ']'); }
catch { setParseError('Invalid JSON: ' + e.message); return; }
}
importParsed(parsed);
};
const handleFile = (fs) => {
if (!fs || !fs[0]) return;
const f = fs[0];
const r = new FileReader();
r.onload = (e) => {
try { importParsed(JSON.parse(e.target.result)); }
catch (err) { setParseError('Could not parse ' + f.name + ': ' + err.message); }
};
r.onerror = () => setParseError('Failed to read file.');
r.readAsText(f);
};
const updateTool = (idx, patch) => {
const next = tools.map((t, i) => i === idx ? { ...t, ...patch } : t);
onChange(next);
};
const removeTool = (idx) => onChange(tools.filter((_, i) => i !== idx));
const addBlank = () => {
onChange([...tools, {
name: 'new_tool', description: '', method: 'POST', url: '',
headers: { 'Content-Type': { value: 'application/json' } },
body: {}, timeout_seconds: 30,
}]);
};
// Collapsed empty state — just the opt-in button.
if (!expanded && tools.length === 0) {
return (
API tools OPTIONAL
Let this skill call HTTP endpoints at runtime. Most skills don't need this.
);
}
return (
{/* Header */}
API tools
OPTIONAL
Each tool defines an HTTP call the LLM can invoke at runtime. Inputs are populated by the model.